@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    div#myTabContent {
        background-color: #f1f5fe;
        padding: 1rem;
        border-radius: 0.8rem;
    }
    button#life-endorsement,
    button#general-endorsement{
        font-size: 16px;
        color: #000;
    }
	.nav{
        padding: 10px 0;
        width: fit-content;
    	border-radius: 0.8rem;
		background-color: #f1f5fe;
	}

    .divisionName{
        background-color: aliceblue;
        padding: 5px 0 5px 15px;
        font-weight: 600;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">                            
                        <form action="{{ route('family.head.save') }}" accept-charset="utf-8" method="POST" id="formAddFamilyHead" class="needs-validation" novalidate>  
                            @csrf
                            <input type="hidden" class="form-control" name="form_type" id="form_type">
                            <input type="hidden" class="form-control" name="record_id" id="record_id" value="">
                            <div id="basic-example">
                                <h3>Step 1</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="family_group_id" class="form-label">Family Group<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="family_group_id" name="family_group_id" required></select>
                                                <div class="invalid-feedback">This value is required.</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="policy_holder_id" class="form-label">Policy Holder Name<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="policy_holder_id" name="policy_holder_id" required></select>
                                                <div class="invalid-feedback">This value is required.</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="policy_id" class="form-label">Select policy</label><span class="text-danger">*</span>
                                                <select class="form-control select2-ajax" id="policy_id" name="policy_id"></select>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row policyDetails mb-3">
                                        <div class="table-responsive">
                                            <table class="table mb-0 table-bordered">
                                                <thead class="text-center table-light">
                                                    <tr><th class="font-size-16">Policy Details</th></tr>
                                                </thead>
                                            </table>
                                        </div>
                                        <div class="col-6">
                                            <div class="table-responsive">
                                                <table class="table mb-0 table-bordered">
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row" class="w-25">Risk Start Date</th>
                                                            <td id="riskStartDateField"></td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row" class="w-25">Division</th>
                                                            <td class="divisionField"></td>
                                                        </tr>
                                                       
                                                        <tr>
                                                            <th scope="row" class="w-25">Segment</th>
                                                            <td id="segmentField"></td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row" class="w-25">Optional Cover</th>
                                                            <td id="optionalCoverField"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="table-responsive">
                                                <table class="table mb-0 table-bordered">
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row" class="w-25">Insurance Company</th>
                                                            <td id="insuranceCompanyField"></td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row" class="w-25">Risk End Date</th>
                                                            <td id="riskEndDateField"></td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row" class="w-25">Policy Mode</th>
                                                            <td id="policyModeField"></td>
                                                        </tr>
                                                        <tr>
                                                            <th scope="row" class="w-25">Sum Assured</th>
                                                            <td id="sumAssuredField"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <div class="col-12 vehicleDiv">
                                            <div class="table-responsive">
                                                <table class="table mb-0 table-bordered">
                                                    <tbody>
                                                        <tr>
                                                            <th scope="row" class="w-25">Vehicle Registration Number</th>
                                                            <td id="VehicleNumberField"></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <h3>Step 2</h3>
                                <section class="wizard-step">
                                    <div class="vehicleDiv">
                                        <table class="table mb-0 table-bordered">
                                            <p class="font-size-16 divisionName divisionField">vehicleDiv</p>

                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_no' class='form-label'>Vehicle Registration Number</label>
                                                        <input type='text' class='form-control' name='vehicle_no' id='vehicle_no' placeholder='eg. GJ-05-AB-1234' style='text-transform:uppercase' required autocomplete='off'>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_name' class='form-label'>Vehicle Name</label>
                                                        <input type='text' class='form-control' name='vehicle_name' id='vehicle_name' placeholder='Vehicle name' value='' required autocomplete='off' maxlength='30'>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_engine_no' class='form-label'>Engine No</label>"
                                                        <input type='text' class='form-control' name='vehicle_engine_no' id='vehicle_engine_no' placeholder='Vehicle Engine No' style='text-transform:uppercase' value='' autocomplete='off' maxlength='20'>
                                                    </div>
                                                </div>
                                                    
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_chassis_no' class='form-label'>Chassis No</label>
                                                        <input type='text' class='form-control' name='vehicle_chassis_no' id='vehicle_chassis_no' placeholder='Vehicle Chassis No' value='' autocomplete='off' maxlength='20'>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_brand' class='form-label'>Vehicle Brand</label>
                                                        <input type='text' class='form-control' name='vehicle_brand' id='vehicle_brand' placeholder='Vehicle brand' value='' autocomplete='off' maxlength='40'>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_fule_type' class='form-label'>Vehicle Fuel Type</label>
                                                        <select class='form-control select2-ajax' name='vehicle_fule_type' id='vehicle_fule_type' required>
                                                            <option></option>
                                                            <option value='Petrol'>Petrol</option>
                                                            <option value='Petrol + CNG'>Petrol + CNG</option>
                                                            <option value='Hybrid'>Hybrid</option>
                                                            <option value='Diesel'>Diesel</option>
                                                            <option value='LPG'>LPG</option>
                                                            <option value='CNG'>CNG</option>
                                                            <option value='Ethanol'>Ethanol</option>
                                                            <option value='Bio-Diesel'>Bio-Diesel</option>
                                                            <option value='Electric(for ev)'>Electric(for ev)</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_register_date' class='form-label'>Register Date</label>
                                                        <input type='text' class='form-control' name='vehicle_register_date' id='vehicle_register_date' placeholder='dd-mm-yyyy' value='' autocomplete='off'>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='year_of_manufacture' class='form-label'>Year of Manufacture</label>
                                                        <input type='text' class='form-control' name='year_of_manufacture' id='year_of_manufacture' placeholder='yyyy' value='' autocomplete='off' maxlength='4' onkeypress='isNumber(event)'>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='rto' class='form-label'>RTO</label>
                                                        <select class='form-control select2-ajax' name='rto' id='rto' required></select>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_cc' class='form-label'>CC</label>
                                                        <input type='text' class='form-control' name='vehicle_cc' id='vehicle_cc' placeholder='Enter cc' value='' autocomplete='off' maxlength='10' required>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_gvw' class='form-label'>GVW</label>
                                                        <input type='text' class='form-control' name='vehicle_gvw' id='vehicle_gvw' placeholder='Enter amount' value='' autocomplete='off' maxlength='9' required>
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="mb-3">
                                                        <label for='vehicle_ncb' class='form-label'>NCB</label>
                                                        <select class='form-control select2-ajax' name='vehicle_ncb' id='vehicle_ncb' required>
                                                            <option></option>
                                                            <option value='0%'>0%</option>
                                                            <option value='20%'>20%</option>
                                                            <option value='25%'>25%</option>
                                                            <option value='35%'>35%</option>
                                                            <option value='45%'>45%</option>
                                                            <option value='50%'>50%</option>
                                                        </select>
                                                    </div>
                                                </div>

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

                                            </div>


                                        </table>
                                    </div>
                            
                                    <div class="healthDiv">
                                        <table class="table mb-0 table-bordered">
                                            <thead class="text-center table-light">
                                                <tr><th class="font-size-16">healthDiv</th></tr>
                                            </thead>
                                        </table>
                                    </div>
                            
                                    <div class="otherGenDiv">
                                        <table class="table mb-0 table-bordered">
                                            <thead class="text-center table-light">
                                                <tr><th class="font-size-16">otherGenDiv</th></tr>
                                            </thead>
                                        </table>
                                    </div>
                            
                                </section>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-wizard.init.js') }}"></script>
<script src="{{ asset('assets/js/pages/inputmask.min.js') }}"></script>
<script type="text/javascript">
    var canEdit = "{{ $data['can_edit'] }}";

    $(document).ready(function(){
        $('.policyDetails').hide();

        $('a').click(function() {
            if ($('.actions li:eq(1)').hasClass('disabled')) {
                disabledFinish();
            }

            if ($('.actions li:eq(1)').attr('class') == '') {
                $('.actions li:last-child').hide();
            }
        });


        $("#family_group_id").on("change", function() {
            $("#policy_holder_id, #policy_id").empty().trigger("change");
        });
        
        $("#policy_holder_id").on("change", function() {
            $("#policy_id").empty().trigger("change");
        });

        $("#policy_holder_id").on("select2:open", function(e) {
            if (!$("#family_group_id option:selected").length) {
                toastr.error("Please select a family group first.");
            }
        });

        $("#policy_id").on("select2:open", function(e) {
            if (!$("#policy_holder_id option:selected").length) {
                toastr.error("Please select policy holder first.");
            }
        });  

        $("#policy_id").on("change", function() {
            var policyId = $(this).val();
            if(policyId > 0 && policyId != ''){

                $.ajax({
                    type: 'GET',
                    url: "{{ route('general.policy.detail') }}" + "?id=" + policyId,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {

                            console.log(resultData);
                            var division = resultData['data']['division'];
                            var sumAssured = resultData['data']['sum_assured'];

                            $('.divisionField').text(division);
                            $('#insuranceCompanyField').text(resultData['data']['insurance_company']);
                            $('#segmentField').text(resultData['data']['segment']);
                            $('#optionalCoverField').text(resultData['data']['search_optional_cover']);
                            $('#riskStartDateField').text(resultData['data']['risk_from_date']);
                            $('#riskEndDateField').text(resultData['data']['risk_to_date']);
                            $('#policyModeField').text(resultData['data']['mode']);
                            $('#sumAssuredField').text(sumAssured.toFixed(2));

                            if(division == 'Vehicle Insurance'){
                                $('#VehicleNumberField').text(resultData['data']['vehicle_number']);
                                $('.vehicleDiv').show();
                                $('.healthDiv').hide();
                                $('.otherGenDiv').hide();
                            }else if(division == 'Health Insurance'){
                                $('.vehicleDiv').hide();
                                $('.healthDiv').show();
                                $('.otherGenDiv').hide();
                            }else if(division == 'Other General Insurance'){
                                $('.vehicleDiv').hide();
                                $('.healthDiv').hide();
                                $('.otherGenDiv').show();
                            }

                            $('.policyDetails').show();
                        }
                    }
                });



            }else{
                $('.policyDetails').hide();
            }
        });

        select2();

        $(".wizard-step input:required, .wizard-step select:required").on("keyup change", function(e) {
            var fieldValue = $(this).val();
            if (!fieldValue || fieldValue === '') {
                $(this).addClass("is-invalid").removeClass("is-valid");
            } else {
                $(this).addClass("is-valid").removeClass("is-invalid");
            }
        });


    });

    function disabledFinish(){
        $('#btnSave').remove();
        $('.actions li:last-child').show();
        $('.actions li:last-child a').remove();

        $(".actions li:last").append("<button type='submit' class='btn btn-primary form-control stepsForm' id='btnSave'>Save</button>");
    }

    function select2(){
        $('#family_group_id').select2({
            ajax: {
                url: "{{ route('search.family.group') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        },
                    };
                },
                cache: false
            },
            placeholder: 'Search for family group',
        });
        
        $('#policy_holder_id').select2({
            ajax: {
                url: "{{ route('search.clients') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "get_all_client": function() {
                            return 0;
                        },
                        "group_id": function() {
                            return $("#family_group_id").val();
                        },
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        },
                    };
                },
                cache: false
            },
            placeholder: 'Search for policy holder name',
        });

        $('#policy_id').select2({
            ajax: {
                url: "{{ route('search.general.policy') }}",
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "client_id": $("#policy_holder_id").val(),
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        },
                    };
                },
                cache: false
            },
            placeholder: 'Search for policy',
        });
    }
</script>
@endsection