<?php
$types = Config("params.packages_types");
$defaultPackagesType = array_key_first($types);
?>

<section class="py-lg-5 py-3 packages">
    <div class="container-fluid px-md-5">
        <div class="row justify-content-center categories-buttons">
            <div class="col-lg-9 mb-lg-4 text-center mb-3">
                <h3 class="h1 text-primary  mb-4">Our Rolling Monthly Contract Packages</h3>
                <p>At HomeFlo, we truly care about each and every customer, and are dedicated to providing only the best solution to suit personal requirements. You will never be locked into long term contracts or be surprised by any sudden price hikes. </p>
                <p class="pt-3">

                    @foreach($categories as $key=>$category)
                    <button type="button" id="c{{$category->id}}Button" data-id="{{$category->id}}" class="btn btn-lg btn-outline-primary mr-2 category <?php
                    if ($key == 0) {
                        echo 'active';
                    }
                    ?>">{{$category->buttonTitle}}</button>
                    @endforeach
                </p>

            </div>
        </div>
        <div class="row" id="errors"></div>


        <?php
        $i = 0;
        ?>
        @foreach($categories as $key=>$category)

        <?php
        if ($i == 0) {
            $category_id = $category->id;
        }
        ?>
        <div class="row " id="categories-{{$category->id}}" <?php if ($i > 0) { ?> style="display:none" <?php } ?> >

        </div>
        <?php
        $i++;
        ?>
        @endforeach

        <div class="container">
            <div class="row">
                <div class="col-md-12 pt-4">
                    <p class="small fs-10 mb-1"> <span class="text-primary">Exclusion Period -</span> You are not entitled to benefit from an Emergency Call-Out within the first 30 (THIRTY) days of the date of this Agreement (“the Initial Period”).  For the avoidance of doubt,
                        this does not apply to any renewal of this Agreement. Homeflo shall be entitled to charge a fee of £95 in respect of any Emergency Call-Out that an Approved Engineer attends during the Initial Period. </p>
                    <p class="small fs-10 mb-0">
                        <span class="text-primary">Annual Boiler Service -</span> If you are a Pay Monthly Customer you may not request an annual boiler service until the six-month anniversary of this Agreement.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<input type="hidden" name="excess_id" id="excess_id" value='3' >
<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="category_id" id="category_id" value="<?php echo $category_id; ?>" >

@section('myscript')

<script>
    //sssss
    $(document).ready(function () {

        var pc = "";
        $(".category").click(function () {
            var id = $(this).data("id");
            $('#' + pc).fadeOut(300);
            $('#categories-' + id).fadeIn(300);
            $('.category').removeClass('active');
            $(this).addClass('active');
            pc = "categories-" + id
            $('#category_id').val(id)

        });

        var categories = $('.category').first();
        var id = categories.data("id");
        pc = "categories-" + id
        var i = 0;
        $(".category").each(function () {
            getPackages(this.dataset.id)
        });
        $('#category_id').val(id);



    });

    function getPackages(id) {

        var type = "GET";
        var dataType = "html";
        var data = {};

        var callBack = function (response) {
            if (response.error === 1) {
                displayErrors(response, "errors");
            } else
            {
                //alert(response);
                $("#categories-" + id).html(response);
            }



        };

        var errorCallBack = function (response) {

        };

        ajaxRequest(url + "/packages/listing/" + id, type, dataType, data, callBack, errorCallBack);

    }
</script>



@endsection