@section('title')
<?php echo $package['metaTitle']; ?>
@endsection
@section('description')
<?php echo $package['metaDescription']; ?>
@endsection
<?php
$types = Config("params.packages_types");
$defaultPackagesType = array_key_first($types);

$category_id = $package['category_id'];
?>
<section class="page-banner service-details bg-overlay" style="background-image: url({{asset(Config("params.media_path.large").$package["image"])}});">
    <div class="container page-inner-box text-white pt-5">
        <div class="row justify-content-between">
            <div class="col-md-12 text-center pb-lg-4">
                <h1>{{$package["tagline"]}}</h1>
            </div>
            <div class="col-lg-6">
                <?php echo $package["shortDescription"]; ?>
                <p class="mt-lg-5 mt-3 banner-logos">
                    <a href="#">
                        <img src="{{ asset('/front/images/trustpilot-reviews-logo.png') }}" class="trustpilot-logo img-fluid mr-2" alt="Trustpilot">
                    </a>
                    <a href="#">
                        <img src="{{ asset('/front/images/Gas-Safe-Logo.png') }}" class="img-fluid safe-logo ml-2" alt="Gas Safe Registered">
                    </a>
                </p>
            </div>
            <div class="col-lg-5">
                <div class="callback-form p-4 request_callback">
                    @include('front/common/request_call_back')
                </div>
            </div>
        </div>
    </div>
</section>
<section class="py-lg-5 py-3">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-9 text-center">
                <h1 class="mb-lg-4 text-primary"><?php echo $package["tagline2"]; ?></h1>
                <?php echo $package["description"]; ?>
            </div>
        </div>
    </div>
</section>
<section class="py-lg-5 py-3">
    <div class="container">

        <?php if (!$package["customizable"]) { ?>

            <div class="row">
                <div class="col-lg-12 text-center">
                    <h3 class="text-primary mb-lg-4 h1">Whats Covered In <?php echo $package["title"] ?> Cover Plan</h3>
                </div>

                <div class="col-lg-9 order-lg-1 order-2 border px-3 py-4">
                    <div class="row">
                        @foreach($facilities as $facility)
                        <div class="col-lg-4 col-md-6 mb-3">


                            <img src="{{asset(Config("params.media_path.large").$facility->image)}}" height="24" width="24" class="mr-1" alt="">{{$facility->title}}
                            <a href="#" class="package-info ml-2" data-toggle="tooltip" data-placement="right" title="{{$facility->description}}"><i class="fas fa-info"></i></a>
                        </div>
                        @endforeach

                    </div>

                    <div class="row text-center">
                        <div class="col-md-3 col-6 mb-3">
                            <img src="{{ asset('/front/images/includes-1.jpg') }}" class="my-3" alt="24/7 UK Support">
                            <h5>24/7 <br>UK Support</h5>
                        </div>
                        <div class="col-md-3 col-6 mb-3">
                            <img src="{{ asset('/front/images/includes-2.jpg') }}" class="my-3" alt="Unlimited Callouts">
                            <h5>Unlimited<br> Callouts</h5>
                        </div>
                        <div class="col-md-3 col-6 mb-3">
                            <img src="{{ asset('/front/images/includes-3.jpg') }}" class="my-3" alt="Annual Boiler Service">

                            @if(($package['category']=='Landlord Emergency Cover Plans'))
                            <h5>Gas Safety<br>Certificate</h5>
                            @else
                            <h5>Annual Boiler<br>Service</h5>
                            @endif
                        </div>
                        <div class="col-md-3 col-6 mb-3">
                            <img src="{{ asset('/front/images/includes-4.jpg') }}" class="my-3" alt="All Parts &amp; Labour">
                            <h5>All Parts<br> &amp; Labour</h5>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 order-lg-2 order-1 <?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';
                } else if ($package['id'] == 10 || $package['id'] == 11) {
                    echo 'package-header-bg-four';
                }
                ?>">
                    <div class="package-header h-auto text-center  py-3">
                        <small class="text-white text-uppercase h6 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 == 0) {
                                $class = "btn left ";
                            } else if ($i == count($excesses) - 1) {
                                $excess_id = $excess->id;
                                $class = "btn rgiht active";
                            }
                            ?>
                            <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>
                        <span class="text-white text-uppercase h6 pt-3 d-block">How do you normally pay</span>
                        <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";
                            } else if ($i == count($types) - 1) {
                                $class = "btn rgiht";
                            }
                            ?>
                            <button type="button" 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>
                        <p class="pt-3 mb-3">
                            <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 text-white"><?php echo $types[$defaultPackagesType] ?></small></p>
                        <p class=" m-0 text-center"><a href="#" class="btn btn-secondary packageButton btn-lg apply-now" data-toggle="modal" data-package="<?php echo $package["id"] ?>" data-price="<?php echo $package["starting_price"] ?>" id="apply_<?php echo $package["id"] ?>" data-target="#packagesModal">Sign Up To This Plan</a></p>
                    </div>
                </div>

            </div>



        <?php } else { ?>

            <div class="row justify-content-center mx-0">
                <div class="col-md-8 bg-dark text-white">
                    <div class="package-header text-center p-3 col-md-6 mx-auto">
                        <small class="text-white text-uppercase h6 mt-lg-5 d-block">Choose Your Call Out Fee</small>
                        <div class="excess-buttons d-flex mt-3">
                            <?php
                            $i = 0;
                            ?>
                            @foreach($excesses as $excess)

                            <?php
                            $class = "btn rgiht rounded-0 border-right border-left";
                            if ($i == 0) {
                                $excess_id = $excess->id;
                                $class = "btn left active";
                            } else if ($i == count($excesses) - 1) {
                                $class = "btn rgiht";
                            }
                            ?>
                            <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>
                    </div>
                </div>
                <!--<div class="col-md-4 bg-dark text-white">
                    <div class="package-header text-center p-3" style="display: none"  >
                        <small class="text-white mt-lg-5 text-uppercase h6 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";
                            } else if ($i == count($types) - 1) {
                                $class = "btn rgiht";
                            }
                            ?>
                            <button type="button" id="<?php echo $key ?>" data-type-id="<?php echo $key ?>" class="<?php echo $class ?> types"><?php echo $type ?></button>
                            <?php
                            $i++;
                            ?>
                            @endforeach



                        </div>
                    </div>
                </div> -->
                <div class="col-md-4 package-header-bg-four text-center text-white ">
                    <div class="package-header  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 text-white"><?php echo $types[$defaultPackagesType] ?></small></p>
                        <p class=" m-0 text-center"><a href="#" class="btn btn-secondary packageButton btn-lg apply-now" data-toggle="modal" data-package="<?php echo $package["id"] ?>" data-price="<?php echo $package["starting_price"] ?>" id="apply_<?php echo $package["id"] ?>" data-target="#packagesModal">Apply Now</a></p>



                    </div>
                </div>

            </div>

            <div class="row no-gutters mx-0">
                <div class="col-md-12 text-center py-2 border-left border-right">
                    <h3>Whats Covered</h3>
                </div>
                <div class="col-lg-4">
                    <table class="table mb-0 border table-borderless table-striped">
                        <tbody>

                            <?php
                            $i = 1;
                            ?>
                            @foreach($facilities as $facility)
                            <tr>
                                <td>

                                    <img src="{{asset(Config("params.media_path.large").$facility->image)}}" width="24" class="mr-1" alt="">{{$facility->title}}
                                    <a href="#" class="package-info" data-toggle="tooltip" data-placement="right" title="" data-original-title="{{$facility->description}}"><i class="fas fa-info"></i></a>


                                    @if(isset($package["facilities"]) && array_key_exists($facility->id,$package["facilities"]))
                                    @if($package["facilities"][$facility->id]->hasPrice == 1 && $package["facilities"][$facility->id]->price != null )
                                    <div class="custom-control float-right custom-switch">
                                        <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 float-right"></i>
                                    @endif
                                    @else
                                    &nbsp;
                                    @endif





                                </td>
                            </tr>

                            <?php
                            if ($i % 6 == 0) {
                                echo '</tbody></table></div><div class="col-lg-4"><table class="table mb-0 border table-borderless table-striped"><tbody>';
                            }
                            $i++;
                            ?>



                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>



        <?php } ?>
    </div>
</section>
@if(!empty($sec9) )

<section class="py-lg-5 py-3 clients text-center">
    <div class="container">
        <div class="row no-gutters justify-content-center">
            <div class="col-md-8 text-center px-md-5">
                <h3 class="text-primary mb-lg-4">{{$sec9->Title}}</h3>
            </div>
            <?php echo $sec9->Content; ?>

        </div>
    </div>
</section>
@endif

@include('front/common/google_reviews')

@if(!empty($package["notCoveredTitle"]) || !empty($package["notCoveredText"]) || !empty($package["file"]))
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center pt-5 pb-2">
                <h3><?php echo $package["notCoveredTitle"]; ?></h3>
            </div>
            <?php echo $package["notCoveredText"]; ?>

            <div class="col-md-12 mt-4 text-center">

                @if(!empty($package["file"]) && !empty($package["fileDownloadText"]))
                <p><?php echo $package["fileDownloadText"] ?>

                    <a target="_blank" href="{{url("/")}}/<?php echo Config("params.dir_packages_downloads"); ?><?php echo $package["file"]; ?>" class="btn btn-secondary mt-md-0 mt-2"> <i class="fas fa-file-pdf mr-2"></i> DOWNLOAD</a>
                </p>
                @endif

            </div>
        </div>
    </div>
</section>
@endif
@if($package['customizable']==true)
@if(!empty($sec4) )

<section class="py-lg-5 py-3 text-white bg-overlay" style="background-image: url({{asset(Config("params.media_path.large").$sec4->ImageName)}});">
    <div class="container py-lg-4 py-3">
        <div class="row justify-content-center ">
            <div class="col-md-6 text-center">
                <h3 class="h1 mb-lg-4">{{$sec4->Title}}</h3>
                <?php echo $sec4->Content; ?>
            </div>
        </div>
    </div>
</section>
@endif
@else
@if(!empty($sec5) )
<section class="py-lg-5 py-3">
    <div class="container">
        <div class="row justify-content-center">
            <?php echo $sec5->Content; ?>
            <div class="col-md-12 text-center py-3">
                <a class="btn btn-lg btn-primary mx-md-1 mb-md-0 mb-3" href="{{url('get_covered')}}"><i class="far fa-hand-point-right mr-1"></i>Get Covered</a> 
                <button class="btn btn-lg btn-secondary mx-md-1 request_callback_btn"><i class="far fa-hand-point-right mr-1"></i>Request a Callback</button></div>
        </div>
    </div>
</section>
@endif
@endif

@if(!empty($package["faqText"]) || !empty($package["faqTitle"]) || count($package["faqs"]) > 0)
<section class="faq-section bg-overlay text-white py-3 py-lg-5 mt-0" style="background-image: url({{ asset('/front/images/faqs.jpg') }});">
    <div class="container pt-lg-5 position-relative z-index11">
        <div class="accordion wow fadeInUp faq-accordion" id="faqAccordion">
            <div class="row py-5 align-items-center">
                <div class="col-md-6">
                    <h3 class="h2 ff-sinkin-sans text-uppercase mb-lg-4"><?php echo $package["faqTitle"]; ?></h3>
                    <p><?php echo $package["faqText"]; ?></p>

                </div>
                <div class="col-md-6">
                    <div class="row">
                        @if (count($package["faqs"]) > 0)
                        @foreach($package["faqs"] as $faq)
                        <div class="col-md-12">
                            <div class="faq-header bg-primary text-white border-0 p-2">
                                <h4 class="mb-0 collapsed" data-toggle="collapse" data-target="#collapse{{$faq->id}}" aria-expanded="false" aria-controls="collapse{{$faq->id}}">{{$faq->title}}</h4>
                            </div>
                            <div id="collapse{{$faq->id}}" class="collapse faq-body" data-parent="#faqAccordion">
                                <?php echo $faq->description ?>
                            </div>
                        </div>
                        @endforeach
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>
@endif
<input type="hidden" name="package" id="package" value='<?php echo json_encode($package) ?>' >
<input type="hidden" name="excess_id" id="excess_id" value='<?php echo $excess_id ?>' >
<input type="hidden" name="types" id="types" value='<?php echo json_encode($types) ?>' >
<input type="hidden" name="type" id="type" value='<?php echo $defaultPackagesType ?>' >
<input type="hidden" name="_token" id="_token" value='<?php echo csrf_token() ?>' >
@section('myscript')
<script>
    //sssss
    $(document).ready(function () {
        var excesses = $('.excesses').last();
        excesses.trigger("click");
    });
</script>
@endsection


