@extends('front.layouts.checkout')
<?php
$title = 'Checkout';

$customerTypes = Config("params.customer_types");
$paymentMethods = Config("params.payment_methods");

$each = "";

if ($type == "yearly") {
    $each = "year";
} else if ($type == "daily") {
    $each = "day";
} else {
    $each = "month";
}

$boilerAge = Config("params.boiler_age");
?>
@include('front/common/meta')


@section('content')
<section class="py-5 bg-light checkout">
    <div class="pt-4" >
        <div class="pt-4">
            <div class="container">

                <!--<div class="col-lg-12 errors-checkout" id="errors"></div>-->

                <div id="yourDetails" class="row justify-content-between" >


                    <div class="col-lg-7 mb-lg-0 mb-3 rounded-lg bg-white shadow-sm px-0">

                        <div class="form-row mx-0 step1" style="display: block;">

                            @include("front.checkout.step1")
                        </div>
                        <div class="form-row step2" style="display: none;">
                            @include("front.checkout.step2")
                        </div>
                    </div>
                    <div class="col-lg-5 px-3 right" >
                        @include("front.checkout.right")
                    </div>
                </div>
                <div class="row justify-content-center my-3 "  >
                    <div class="col-lg-6 summary-step shadow-sm px-0 step3" style="display: none;" >
                        @include("front.checkout.step3")
                    </div>
                    <div class="col-lg-6 summary-step shadow-sm px-0 step4" style="display: none;">
                        <div class="checkout-form-header mt-md-0 mt-5 pb-3 pt-4 col-md-12 text-center px-0">
                            <div class="form-header-image">
                                <img src="{{ asset('/front/images/emblem.svg') }}" width="70" alt="">
                            </div>
                        </div>
                        <div class="px-md-5 px-2" id="example-2">
                            <form id="checkout-form">

                                <h3 class="text-center text-uppercase mb-lg-4">Payment Methods</h3>
                                <div class="col-lg-12 errors-checkout" id="errors_step4"></div>
                                <ul class="nav paymentmethods-nav mb-3" id="myTab" role="tablist">

                                    @foreach($paymentMethods as $key=>$paymentMethod)
                                    <li class="nav-item">
                                        <a class="nav-link payment-methods" id="<?php echo $key ?>-tab"  href="#<?php echo $key ?>"  aria-controls="<?php echo $key ?>" role="tab" aria-selected="true" data-toggle="tab" ><?php echo $paymentMethod ?></a>
                                    </li>
                                    @endforeach
                                </ul>
                                <div class="tab-content pt-3" id="myTabContent">
                                    <div class="tab-pane" id="direct_debit" role="tabpanel" aria-labelledby="direct-payment-tab">
                                        <p><strong>Your payments are protected by the <br> <a class="text-primary" href="#_" target="_blank" >Direct Debit Guarantee </a></strong></p>
                                        <p><img src="{{ asset('/front/images/direct-debit-logo.png') }}" width="150" alt=""></p>
                                    </div>
                                    <div class="tab-pane" id="credit_card" role="tabpanel" aria-labelledby="card-payment-tab">
                                        <div class="form-group">
                                            <img src="{{ asset('/front/images/logo-stripe.png') }}" width="300" height="95" class="img-fluid" alt="">
                                        </div>

                                        <div class="cell example example2 card-form col-md-12 col-12" id="card-form"  >
                                            <div class="row">
                                                <div class="col-md-12 col-12">
                                                    <div class="form-group mb-2 mb-md-4">
                                                        <label for="example2-card-number" data-tid="elements_examples.form.card_number_label">Card number</label>
                                                        <div id="card-number" class="input empty form-control form-control-lg stripe-input bg-light"></div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 col-12">
                                                    <div class="form-group mb-2 mb-md-4">
                                                        <label for="example2-card-expiry" data-tid="elements_examples.form.card_expiry_label">Expiry Date</label>
                                                        <div id="card-expiry" class="input empty form-control form-control-lg stripe-input bg-light"></div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 col-12">
                                                    <div class="form-group mb-2 mb-md-4">
                                                        <label for="example2-card-cvc" data-tid="elements_examples.form.card_cvc_label">CVC</label>
                                                        <div id="card-cvc" class="input empty form-control form-control-lg stripe-input bg-light"></div>
                                                    </div>
                                                </div>


                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" required id="terms" name="terms">
                                    <input type="hidden" id="payment_method" name="payment_method" value="">
                                    <input type="hidden" id="payment_method_id" name="payment_method_id" value="">
                                    <label class="form-check-label" for="terms">I agree to the <a href="/terms" target="_blank">Terms &amp; Conditions</a></label>
                                </div>

                                <div class="text-center mt-3 py-4">
                                    <button type="button" class="btn btn-primary btn-lg bg-success-grandiant border-0 text-uppercase text-white px-4 next-step4" id="btn-direct_debit">
                                        <img class="loaderA" src="https://i.gifer.com/ZZ5H.gif" style="display:none;" alt="" width="25" > 
                                        Start My Plan</button>

                                    <button type="submit" class="btn btn-primary btn-lg bg-success-grandiant border-0 text-uppercase text-white px-4 " id="btn-credit_card" data-tid="elements_examples.form.pay_button" style="display: none">
                                        <img class="loaderB" src="https://i.gifer.com/ZZ5H.gif" style="display:none;" alt="" width="25" > 
                                        Start My Plan</button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection


@section('myscript')
<script type="text/javascript" src="{{ asset('front/js/com_address_api.js')}}"></script>
<script>


$(document).ready(function () {

    $("#div_addresses").hide();
    $(document).on("click", ".postcodeBtn", function () {

        var optionHtml = "";
        $('#addresses')
                .find('option')
                .remove()
                .end();


        var postcode = $("#postcode_lookup").val();

        if (postcode.length < 3) {
            return false;
        }

        $("#div_addresses").show();

        var type = "GET";
        var url = '{{url("address")}}/' + postcode;
        var dataType = "html";

        $.ajax({
            url: url,
            type: type,

            success: function (response) {
                if (response.success == true)
                {
                    if (response.addresses.length > 0) {

                        optionHtml = "<option value='' >Please select your address</option>";

                        $('#addresses').append(optionHtml);
                        $('#postcode').val($('#postcode_lookup').val());

                        jQuery.each(response.addresses, function () {

                            $('#city').val(this.city);
                            log(this.city)

                            optionHtml = "<option value='" + this.address + "' >" + this.address + "</option>";
                            $('#addresses').append(optionHtml);
                        });
                        optionHtml = "<option value=''> Not on the list? </option>";
                        $('#addresses').append(optionHtml);

                    } else {
                        optionHtml = "<option value=''>Address not found...</option>";
                        $('#addresses').append(optionHtml);
                    }
                } else {
                    $('#error').append("<div>fff</div>");
                }



            },
            error: function (jqXHR, error, errorThrown) {
            }
        });
    });

    $('#addresses').on('change', function (e) {

        var optionSelected = $("option:selected", this);
        var valueSelected = this.value;

        //$("#btnAddressManually").fadeOut(200);
        $('.address-manually').fadeIn(200);
        //var completedata = valueSelected.split(",");
        $("#address").val(valueSelected);
        //$("#address2").val(completedata[2]);
        //$("#city").val(completedata[3]);
        // $("#postcode").$("#postcode_lookup").val();
    });


    $('#btnAddressManually').click(function () {
        $('#postcode').val($('#postcode_lookup').val());
        $(".custom-select2").fadeOut(200);
        $(this).fadeOut(200);
        $('.address-manually').fadeIn(200);
        $('#postcode_lookup').val(" ");
    })
});

</script>
<script>

    $(document).ready(function () {



        $("#login").hide();
        $("#step1").show();
        $("#registerNow").hide();
        $("#alreadyHaveAcount").click(function () {
            $("#login").show();
            $("#forgot_password").show();
            $("#step1").hide();

            $("#alreadyHaveAcount").hide();
            $("#registerNow").show();
        });
        $("#registerNow").click(function () {
            $("#login").hide();
            $("#forgot_password").hide();
            $("#step1").show();
            $("#registerNow").hide();
            $("#alreadyHaveAcount").show();

        });
    });

</script>




<script>


    var prev = new Date();
    var today = new Date();

    today.setDate(today.getDate() + 1);
    var dd = today.getDate();

    var mm = today.getMonth();

    if (prev > 20) {
        var mm = today.getMonth() + 1;
    }

    var yyyy = today.getFullYear();
    if (dd < 10) {
        dd = '0' + dd;
    }
    if (mm < 10) {
        mm = '0' + mm;
    }
    
    today = dd + '-' + mm + '-' + yyyy;

    $(document).ready(function () {
        $(document).on("click", ".payment-methods", function () {
            var paymentMethod = $(this).attr("href");

            paymentMethod = paymentMethod.substr(1, paymentMethod.length);
            $("#payment_method").val(paymentMethod);
            $("#btn-" + paymentMethod).show();
            if (paymentMethod == "direct_debit") {
                $("#btn-credit_card").hide();
            } else {
                $("#btn-direct_debit").hide();
            }
        });



        $('.summaryNextButton').click(function () {
            $('.summary').removeClass('active');
            $('.payment').addClass('active');
            var current = $(this).parents('.summary-step');
            var step = $('.checkout-steps .active');
            step.next().addClass('active');
            current.fadeOut(200);
            current.next().fadeIn(200);
        });

        if ($('.date-picker').length > 0) {
            $(".date-picker").datepicker({
                minDate: 0
            });
        }

        $(document).on("click", ".step1-action", function () {
            var value = $(this).data("value");
            var name = $(this).data("name");
            var id = $(this).attr("id");
            $('.' + name).removeClass('bg-primary text-white');
            $('#' + id).addClass('bg-primary text-white');
            $('#' + name).val(value);
        });


        $(document).on("click", ".next-step1", function () {
            var type = "POST";
            var dataType = "json";
            var data = $('#step1').serialize();
            var callBack = function (response) {
                if (response.error === true) {
                    displayErrors(response, "errors");
                } else {
                    $('.about').removeClass('active');
                    $('.address').addClass('active');
                    var current = $('.step1');
                    var step = $('.step2');
                    current.removeClass('active');
                    step.next().addClass('active');
                    current.fadeOut(200);
                    step.fadeIn(200);
                    $("#errors").empty();
                }
            };

            var errorCallBack = function (response) {
                displayErrors(response, "errors");
            };
            var url = "validatestep1"
            ajaxRequest(url, type, dataType, data, callBack, errorCallBack);
            $("html, body").animate({ scrollTop: 0 }, 100, "linear");
        });


        $(document).on("click", ".next-step2", function () {

            var type = "POST";
            var dataType = "json";
            var data = $('#step2').serialize();

            var callBack = function (response) {
                log(response)
                if (response.error === true) {
                    displayErrors(response, "errors_step2");
                } else
                {


                    $('.address').removeClass('active');
                    $('.summary').addClass('active');

                    var current = $('.step2');
                    var step = $('.step3');
                    var right = $('.right');
                    current.removeClass('active');
                    current.fadeOut(200);

                    right.removeClass('active');
                    right.fadeOut(200);

                    step.next().addClass('active');
                    step.fadeIn(200);

                }
            };

            var errorCallBack = function (response) {
                //alert("999 summary");
                displayErrors(response, "errors_step2");
            };
            var url = "validatestep2"
            ajaxRequest(url, type, dataType, data, callBack, errorCallBack);
            $("html, body").animate({ scrollTop: 0 }, 100, "linear");

        });


        $(document).on("click", ".next-step4", function () {
            $('#btn-debut_card').attr('disabled', true);
            $('.loaderA').show();
            var type = "POST";
            var dataType = "json";
            var paymentMethod = $("#payment_method").val();
            var terms = $('#terms').is(":checked") ? '1' : '0';
            var data = {payment_method: paymentMethod, terms: terms}
            var callBack = function (response) {
                if (response.error === true) {
                    displayErrors(response, "errors_step4");
                } else {
                    window.top.location.href = response.redirect_url;
                }
                $('#btn-debut_card').attr('disabled', false);
                $('.loaderA').hide();
            };
            var errorCallBack = function (response) {
                displayErrors(response, "errors_step4");
                $('#btn-debut_card').attr('disabled', false);
                $('.loaderA').hide();
            };
            var url = "finalcheckout"
            ajaxRequest(url, type, dataType, data, callBack, errorCallBack);
        });

        $(document).on("click", ".next-step-login", function () {

            var type = "POST";
            var dataType = "json";
            var data = $('#login').serialize();

            var callBack = function (response) {
                if (response.error === true) {
                    displayErrors(response, "errors");
                } else
                {
                    $('.about').removeClass('active');
                    $('.address').addClass('active');
                    var current = $('.step1');
                    var step = $('.step2');
                    current.removeClass('active');
                    step.next().addClass('active');
                    current.fadeOut(200);
                    step.fadeIn(200);


                }
            };

            var errorCallBack = function (response) {
                displayErrors(response, "errors");
            };
            var url = "checkout/login"
            ajaxRequest(url, type, dataType, data, callBack, errorCallBack);

        });



        $('input[id$=date]').datepicker({
            dateFormat: 'dd-mm-yy', // Date Format "dd-mm-yy"
            minDate: today,
        });

        $('#date').attr('value', today);
        $('#credit_card-tab').trigger('click');
        $(document).on("click", ".back-step-login", function () {
            var step = $('.step1');
            var current = $('.step2');
            current.removeClass('active');
            step.next().addClass('active');
            current.fadeOut(200);
            step.fadeIn(200);
        });
        $(document).on("click", ".summaryBackButton", function () {
            var step = $('.step2');
            var current = $('.step3');
            var right = $('.right');
            current.fadeOut(200);
            step.fadeIn(200);
            right.fadeIn(200);
        });
    });
</script>
@endsection