<?php

$types = Config("params.packages_types");
$defaultPackagesType = array_key_first($types);
?>
<div class="col-lg col-md-12 bg-dark text-white card rounded-0 px-0 bg-primary">
    <div class="package-header  bg-dark  text-center p-3">
        <small class="text-white text-uppercase h6 mt-1 d-block">Choose Your Call Out Fee</small>
        <div class="excess-buttons d-flex mt-2">


            <?php
            $i = 0;
            ?>
            @foreach($excesses as $excess)

            <?php
            $class = "btn rgiht rounded-0 border-right border-left";
            if ($i == count($excesses) - 1) {
                $excess_id = $excess->id;
                $class = "btn rgiht active";
                $excess_id = $excess->id;
            } else if ($i == 0) {
                $class = "btn left ";
            }
            ?>
            <button type="button" id="excess_<?php echo $category_id ?>_<?php echo $excess->id ?>" data-category-id="<?php echo $category_id ?>" data-excess-id="<?php echo $excess->id ?>" class="<?php echo $class; ?> excesses excess-<?php echo $category_id ?>"><?php echo $excess->title ?></button>

            <?php
            $i++;
            ?>

            @endforeach

        </div>
        <small class="text-white text-uppercase h6 mt-4 d-block">How do you normally pay</small>
        <div class="excess-buttons d-flex mt-3">
            <?php
            $i = 0;
            ?>

            @foreach($types as $key=>$type)
            <?php
            $class = "btn ";
            if ($i == 0) {
                $class = "btn left active";
                $defaultPackagesType = $key;
            } else if ($i == count($types) - 1) {
                $class = "btn rgiht";
            }
            ?>
            <button type="button" aria-label="Package Details" id="type_<?php echo $category_id ?>_<?php echo $key ?>" data-category-id="<?php echo $category_id ?>" data-type-id="<?php echo $key ?>" class="<?php echo $class ?> types type-<?php echo $category_id ?>"><?php echo $type ?></button>
            <?php
            $i++;
            ?>
            @endforeach
        </div>
    </div>
    <table class="table d-lg-table d-none whats-covered table-borderless table-striped">
        <thead>
            <tr>
                <th>Whats Covered</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach($facilities as $facility)

            <tr>
                <td>

                    <img src="{{asset(Config("params.media_path.large").$facility->image)}}" width="24" height="24" class="mr-1" alt="" data-facility-id="{{$facility->id}}">{{$facility->title}}
                </td>
                <td>

                    <button type="button" class="package-info bg-transparent border-0" aria-label="Package Details"  data-toggle="tooltip" data-placement="right" title="{{$facility->description}}"><i class="fas fa-info"></i></button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<?php
foreach ($packages as $key => $package) {
    
    ?>
    <div class="col-lg col-md-12 text-center rounded-0 card px-0 mb-lg-0 mb-4">
        <div class="package-header <?php
        if ($package["id"] == 1 || $package["id"] == 6) {
            echo 'package-header-bg-one';
        } else if ($package["id"] == 2 || $package["id"] == 7) {
            echo 'package-header-bg-two';
        } else if ($package["id"] == 3 || $package["id"] == 8) {
            echo 'package-header-bg-three text-left';
        } else if ($package["id"] == 10 || $package["id"] == 11) {
            echo 'package-header-bg-four';
        } else {
            echo 'package-header-bg-one';
        }
        ?> text-white bg-dark p-3">
            <h3 class="package-title mb-0"><?php echo $package["title"] ?></h3>
            <span class="h1 mb-0 text-white d-block"><?php echo Config("params.currency.symbol") ?><span id="price_<?php echo $package["id"] ?>" class="package-price"><?php //echo $package['starting_price'] ?></span></span>
            <small class="timeperiod"><?php echo $types[$defaultPackagesType] ?></small>
            <?php
            if ($package["id"] == 3 || $package["id"] == 8) {
                echo '<span class="most-popular">Most Popular</span>';
            }
            ?>


        <p class="py-3 m-0"><a href="#" data-package="<?php echo $package["id"] ?>" data-price="<?php //echo $package['starting_price'] ?>" class="btn btn-secondary packageButton btn-lg apply-now" id="apply_<?php echo $package["id"] ?>" data-toggle="modal" data-target="#packagesModal">Apply Now</a></p>
        </div>
        <table class="table  table table-borderless table-striped">
            <thead>
                <tr>
                    <th><span class="d-lg-none d-inline-block">Whats Covered</span>&nbsp;</th>
                </tr>
            </thead>
            <tbody class="text-lg-center text-md-left">
                @foreach($facilities as $key=>$facility)
                <?php if(isset($package["facilities"]) && array_key_exists($facility->id,$package["facilities"])){
                    $trDisplay = "";
                }else{
                     $trDisplay = "d-lg-table-row d-none";
                } ?>
                <tr class="<?php echo $trDisplay; ?>">
                    <td>
                        @if(isset($package["facilities"]) && array_key_exists($facility->id,$package["facilities"]))

                        @if($package["facilities"][$facility->id]->hasPrice == 1 && $package["facilities"][$facility->id]->price != null )

                        <span class="d-lg-none d-inline-block"><img src="{{asset(Config("params.media_path.large").$facility->image)}}" width="24" height="24" class="mr-1" alt="">{{$facility->title}}</span>
                        <div class="custom-control custom-switch float-lg-none float-right">
                            <input name="services[<?php echo $package["id"] ?>][]" data-package="<?php echo $package["id"] ?>" data-price="{{ $package["facilities"][$facility->id]->price }}"  type="checkbox" class="custom-control-input service-switch package-<?php echo $package["id"] ?>" id="customSwitch<?php echo $package["id"] ?>_<?php echo $facility->id ?>" value="<?php echo $facility->id ?>">
                            <label class="custom-control-label" title="<?php echo $facility->title ?>" for="customSwitch<?php echo $package["id"] ?>_<?php echo $facility->id ?>"></label>
                        </div>

                        @else
                        <i class="fas fa-check text-success d-lg-inline-block d-none"></i>
                        <div class="d-lg-none d-block">
                            <img src="{{asset(Config("params.media_path.large").$facility->image)}}" width="24" height="24" class="mr-1" alt="" data-facility-id="{{$facility->id}}">{{$facility->title}}
                            <button type="button" aria-label="Package Details"  class="package-info float-right bg-transparent border-0" data-toggle="tooltip" data-placement="right" title="{{$facility->description}}" ><i class="fas fa-info"></i></button>
                        </div>
                        @endif
                        @else
                        &nbsp;
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <p class="py-3 m-0"><a href="<?php echo url("/") . "/" . $package["url"] ?>" class="btn btn-primary packageButton btn-lg">More Info </a></p>
    </div>
<?php } ?>

<input type="hidden" name="packages[<?php echo $category_id ?>]" id="packages_<?php echo $category_id ?>" value='<?php echo json_encode($packages) ?>' >
<input type="hidden" name="_token" id="_token" value='<?php echo csrf_token() ?>' >

<script>

    var a = $(".btn.rgiht.excesses.active").length > 0;

    if(a){       
        $(".btn.rgiht.active.excesses.active").trigger("click");
    }

    if ($('[data-toggle="tooltip"]').length) {
    $('[data-toggle="tooltip"]').tooltip();
    }
    

</script>