@extends('customerDashboard.layout')

@section('content')

<div class="container-fluid mb-3">
    <div class="row">
        <h2 class="h2">Enhance Policy</h2>
    </div>

    <div class="row">
        <h6 class="h6"> Please complete the process below to ‘on’ your policy enhancement. </h6>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="main-card mb-3 card p-3" style="border-radius:20px;">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> Sum Insured </h5>
                    </div>
                    <div class="col-md-6">
                        <h5 class="float-right"> LKR {{ number_format($cal_data['base']['sum_insured'], 2) }} </h5>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> Select Start and End Date </h5>
                    </div>
                    <div class="col-md-6">
                        <input type="text" id="daterange" class="form-control" name="daterange"
                            value="{{date('m/d/Y', strtotime('+1 day'))}} - {{date('m/d/Y', strtotime('+2 day'))}}" />
                            <div class="text-danger" id="date-error" style="display:none">
                                please select the policy enhance date from tomorrow onwards.
                            </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> Per Day Rate </h5>
                    </div>
                    <div class="col-md-6">
                        <h5 class="float-right"> LKR {{ number_format($cal_data['daily']['gross_premium']['fixed'], 2) }} </h5>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> No. of Dates </h5>
                    </div>
                    <div class="col-md-6">
                        <h5 class="float-right" id="no_of_days"> 1 </h5>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> Cost </h5>
                    </div>
                    <div class="col-md-6">
                        <h5 class="float-right" id="cost"> LKR {{ number_format($cal_data['daily']['gross_premium']['calculated'], 2) }}
                        </h5>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> Taxes </h5>
                    </div>
                    <div class="col-md-6">
                        <h5 class="float-right" id="taxes"> LKR {{ number_format($cal_data['daily']['tax']['total_tax']['calculated'], 2) }} </h5>
                    </div>
                </div>
                <hr class="hr">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <h5> Total Cost </h5>
                    </div>
                    <div class="col-md-6">
                        <h5 class="float-right" id="total_cost"> LKR {{ number_format($cal_data['daily']['total_premium']['calculated'], 2) }} </h5>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-sm-12">
                        <div class="custom-checkbox custom-control" style="font-size:16px;">
                            <input type="checkbox" id="termsAndCondition_checkbox" class="custom-control-input">
                            <label class="custom-control-label" for="termsAndCondition_checkbox">
                                I hereby confirm that I have read the terms and conditions Read full
                                <a href="">Terms and Conditions</a>.
                            </label>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-12">
                        
                        <form action="{!! route('save-enhance-quote') !!}" method="post">
                               {{ csrf_field() }}
                            <input type="hidden" name="policy_id" value="{{ $cal_data['cover_id'] }}">
                            <input type="hidden" name="deductible_id" value="">
                            <input type="hidden" name="cover_plans_ids" value="{{ !empty($cal_data['cover_plan']['activated_plans']) ? str_replace("|", ",", $cal_data['cover_plan']['activated_plans']) : '' }}">
                            <input type="hidden" name="extension_id" value="">
                            <input type="hidden" name="days" id="days" value="">
                            <input type="hidden" name="policy" value="{{ request()->segment(count(request()->segments())) }}">
                            <input type="hidden" name="extension_packs" value="">

                            <button disabled id="buynow_btn" class="mb-2 mr-2 btn btn-warning btn-lg text-white float-right"> Buy Now </button>

                        </form>

                    </div>
                </div>
                <div id="accordion" class="mb-3">
                    <div class="p-1">
                        <div id="headingOne" class="mb-4">
                            <button type="button" data-toggle="collapse" data-target="#collapseOne1"
                                aria-expanded="false" aria-controls="collapseOne"
                                class="text-left m-0 p-0 btn btn-link btn-block">
                                <h5 class="m-0 p-0">
                                    <i class="fa fa-chevron-circle-down mr-3"> </i> Vehicle Details
                                </h5>
                            </button>
                        </div>
                        <div data-parent="#accordion" id="collapseOne1" aria-labelledby="headingOne" class="collapse">
                            <div class="yy-body">

                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle Type</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->vehicle_type }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle Make</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->make }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle Model</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->model }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle YoM </span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->yom }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle Fuel Type</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->fuel_type }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle Number Type</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->vehicle_number }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Vehicle Registration Number</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->registration_date }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">First Registration Date</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->registration_date }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Cylinder Capacity</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->cc }} </span>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="p-1">
                        <div id="headingOne" class="mb-4">
                            <button type="button" data-toggle="collapse" data-target="#collapseOne2"
                                aria-expanded="false" aria-controls="collapseOne"
                                class="text-left m-0 p-0 btn btn-link btn-block">
                                <h5 class="m-0 p-0"> <i class="fa fa-chevron-circle-down mr-3"> </i> Owner Profile </h5>
                            </button>
                        </div>
                        <div data-parent="#accordion" id="collapseOne2" aria-labelledby="headingOne" class="collapse">
                            <div class="yy-body">
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Owner Name</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->customer_name }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder">Owner NIC</span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->customer_nic }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder"> Owner Address </span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->customer_address }} </span>
                                    </div>
                                </div>
                                <div class="row mb-3" style="flex-wrap: nowrap;">
                                    <div class="col-md-6">
                                        <span class="grid-hedder"> Owner Mobile No </span>
                                    </div>
                                    <div class="col-md-6">
                                        <span class="grid-content"> {{ $data->customer_telephone }} </span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">

            </div>
        </div>
        <input type="hidden" name="policy" id="policy" value="{{ $data->reference }}">
        <input type="hidden" name="product" id="product" value="{{ $product }}">
    </div>
</div>


@endsection


@section('custom-js')

<script>
    // let date = $('#daterange').val();
    let policy = $('#policy').val();
    let product = $('#product').val();
    $('#date-error').hide();

    let is_valide_date = 1;

    $('#daterange').change(function() {

        let date = $('#daterange').val();
        let arr_date = date.split("-");
        let today_date = arr_date[0];
        let selected_date = today_date.trim();

        var js_today = new Date();
        var dd = js_today.getDate();
        var mm = js_today.getMonth()+1; 
        var yyyy = js_today.getFullYear();

        if(dd<10) {
            dd='0'+dd;
        } 
        if(mm<10) {
            mm='0'+mm;
        } 
        today = mm+'/'+dd+'/'+yyyy;
       
        if (selected_date == today || selected_date < today) {

            is_valide_date = 0;
            console.log('date err');
            $('#date-error').show();
           
        }
        else{
            is_valide_date = 1;
            $('#date-error').hide();
            date_en64 = window.btoa(date);
            policy_en64 = window.btoa(policy);

            $.get("/get_date_diff/" +policy_en64+'/'+date_en64+'/'+product, function( data ) {

                $('#no_of_days').text(data['date_diff'])
                $('#cost').text('LKR ' + data['daily']['gross_premium']['calculated']);
                $('#taxes').text('LKR ' + data['daily']['tax']['total_tax']['calculated']);
                $('#total_cost').text('LKR ' + data['daily']['total_premium']['calculated']);

                $('#days').val(data['date_diff']);
            });

            if ((is_valide_date == 1) && ($('#termsAndCondition_checkbox').val() == 'on')) {
                console.log('buynow_btn ff');
                $('#buynow_btn').attr('disabled', !this.checked);
            }

        }

        // enable disable buy now btn


   
    });

    console.log('val '+$('#termsAndCondition_checkbox').val())

    $('#termsAndCondition_checkbox').click(function() {

        console.log('is_valide_date ' + is_valide_date);
        console.log('val '+$('#termsAndCondition_checkbox').val())

        if ((is_valide_date == 1) && ($('#termsAndCondition_checkbox').val() == 'on')) {
            console.log('buynow_btn');
            $('#buynow_btn').attr('disabled', !this.checked);
        }
    });

  
   

</script>

@endsection