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

<style>
    input[type="radio"][name="form_type"] {
        display: none;
    }

    button#btnSave {
        width: 150px;
        height: 39px;
        line-height: 14px;
    }

    input[type="radio"][name="form_type"]+label {
        display: inline-block;
        padding: 5px 10px;
        background-color: #f1f5fe;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="radio"][name="form_type"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    .hr-text {
        line-height: 1em;
        position: relative;
        outline: 0;
        border: 0;
        color: black;
        text-align: center;
        height: 1.5em !important;
        opacity: unset !important;
        background-color: unset !important;
        &:before {
            content: '';
            background: linear-gradient(to right, transparent, #818078, transparent);
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
        }
        &:after {
            content: attr(data-content);
            position: relative;
            display: inline-block;
            color: black;

            padding: 0 .5em;
            line-height: 1.5em;
            color: #818078;
            background-color: #fcfcfa;
        }
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <div class="row">
                <div class="col-12">
                    <div class="d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">
                            <a href="javascript:void(0);" onclick="history.back();"class="btn btn-primary px-3 waves-effect waves-light btn-sm" title="Back Button" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                        </h4>
                    </div>
                </div>
            </div>

            <div class="page-title-right">
                @php
                    $privileges = getPrivileges();
                @endphp
        
                @if(Auth::user()->type == 1)
                    <a href="{{ route('add.life.policy') }}" class="btn btn-primary px-4 w-md">+ Add</a>
                @else
                  @if(!empty($privileges && array_key_exists(35,$privileges)))
                    @if(array_key_exists(36,$privileges[35]))
                        <a href="{{ route('add.life.policy') }}" class="btn btn-primary px-4 w-md">+ Add</a>
                    @endif
                  @endif
                @endif
                
                <a href="javascript:void(0);" onclick="return downloadPDF();" class="btn btn-primary px-4 w-md tooltipMsg">Export PDF <span class="tooltiptext">Download Report</span></a>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div id="basic-example">
                            <input type="hidden" name="life_insurance_id" id="life_insurance_id" value="">
                            <h3>Step 1</h3>
                            <section>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="life_transaction_date" class="form-label">Renewal Transaction Date<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="life_transaction_date" id="life_transaction_date" value="{{ date('d-m-Y') }}" required disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="life_document_number" class="form-label">Document Number<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="life_document_number" id="life_document_number" value="" required disabled>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="life_family_id" class="form-label">Family Group<span class="text-danger">*</span></label>
                                            <input class="form-control" id="life_family_id" name="life_family_id" placeholder="Family Group" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="life_client_id" class="form-label">Policy Holder Name<span class="text-danger">*</span></label>
                                            <input class="form-control" id="life_client_id" name="life_client_id" placeholder="Policy Holder Name" disabled>
                                        </div>
                                    </div>
                                </div>

                                @if($data['data']['form_type'] == 2)
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="head_first_name" class="form-label">Full Name</label>
                                                <input type="text" class="form-control" name="head_first_name" id="head_first_name" placeholder="First name" value="" disabled>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="head_first_name" class="form-label">First Name</label>
                                                <input type="text" class="form-control" name="head_first_name" id="head_first_name" placeholder="First name" value="" disabled>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="head_middle_name" class="form-label">Middle Name</label>
                                                <input type="text" class="form-control" name="head_middle_name" id="head_middle_name" placeholder="Middle name" value="" disabled>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="head_last_name" class="form-label">Last Name</label>
                                                <input type="text" class="form-control" name="head_last_name" id="head_last_name" placeholder="Last name" value="" disabled>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="life_insurance_company_id" class="form-label">Insurance Company<span class="text-danger">*</span></label>
                                            <input class="form-control" id="life_insurance_company_id" name="life_insurance_company_id" placeholder="Insurance Company" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="life_branch_id" class="form-label">Branch</label>
                                            <input class="form-control" id="life_branch_id" name="life_branch_id" placeholder="Branch Name" disabled>
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="life_policy_number" class="form-label">Policy Number<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="life_policy_number" id="life_policy_number" value="" placeholder="Policy number" required disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="life_insurance_plan_id" class="form-label">Insurance Plan Name<span class="text-danger">*</span></label>
                                            <input class="form-control" id="life_insurance_plan_id" name="life_insurance_plan_id" placeholder="Insurance Plan Name" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-2">
                                            <label for="life_insurance_plan_type_id" class="form-label">Insurance Plan Type<span class="text-danger">*</span></label>
                                            <input class="form-control" id="life_insurance_plan_type_id" name="life_insurance_plan_type_id" placeholder="Insurance Plan Type" disabled>
                                        </div>
                                    </div>
                                </div>
                            </section>
                                
                            <h3>Step 2</h3>
                            <section>
                    
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="life_mode_id" class="form-label">Mode<span class="text-danger">*</span></label>
                                            <input class="form-control" id="life_mode_id" name="life_mode_id" placeholder="Mode" disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="life_risk_term" class="form-label">Risk Term<span class="text-danger">*</span></label>
                                            <input type="text" id="life_risk_term" name="life_risk_term" class="form-control" placeholder="Enter risk term" value="" required disabled>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label for="life_premium_paying_term" class="form-label">Premium Paying Term<span class="text-danger">*</span></label>
                                            <input type="text" id="life_premium_paying_term" name="life_premium_paying_term" class="form-control" placeholder="Enter premium paying term" value="" required disabled>
                                        </div>
                                    </div>
                                </div>
                    
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_risk_from_date" class="form-label">Risk Start Date (Doc)<span class="text-danger">*</span></label>
                                                    <input type="text" id="life_risk_from_date" name="life_risk_from_date" class="form-control" placeholder="dd-mm-yyyy" value="" required disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_maturity_date" class="form-label">Maturity Date</label>
                                                    <input type="text" id="life_maturity_date" name="life_maturity_date" class="form-control" placeholder="dd-mm-yyyy" value="" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_last_payment_date" class="form-label">Last Premium Payment Date</label>
                                                    <input type="text" id="life_last_payment_date" name="life_last_payment_date" class="form-control" placeholder="dd-mm-yyyy" value="" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_risk_to_date" class="form-label">Next Premium Due Date</label>
                                                    <input type="text" id="life_risk_to_date" name="life_risk_to_date" class="form-control" placeholder="dd-mm-yyyy" value="" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>                                               
                    
                                <div class="row">

                                    <div class="col-xl-5">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_sum_assured" class="form-label">Sum Assured<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="life_sum_assured" id="life_sum_assured" value="" placeholder="Sum assured" required disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_basic_premium_amount" class="form-label">Basic Premium Amount<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="life_basic_premium_amount" id="life_basic_premium_amount" value="" placeholder="Basic premium amount" required disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-xl-7">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="life_tax_amount" class="form-label">Tax Amount</label>
                                                    <input type="text" class="form-control" name="life_tax_amount" id="life_tax_amount" value="" placeholder="Tax amount" disabled>
                                                </div>
                                            </div>
        
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="life_commisionable_amount" class="form-label">Commissionable Amount</label>
                                                    <input type="text" class="form-control number digitLimit" name="life_commisionable_amount" id="life_commisionable_amount" value="" placeholder="commissionable amount" autocomplete="off" disabled>
                                                </div>
                                            </div>
    
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="life_total_premium_amount" class="form-label">Total Premium Amount<span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="life_total_premium_amount" id="life_total_premium_amount" value="" placeholder="Total premium amount" required disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-xl-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_paid_by_party_id" class="form-label">Paid By Client</label>
                                                    <input class="form-control" id="life_paid_by_party_id" name="life_paid_by_party_id" placeholder="Paid By Party" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_party_payout_amount" class="form-label">Amount</label>
                                                    <input type="text" class="form-control" name="life_party_payout_amount" id="life_party_payout_amount" value="" placeholder="Amount" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-xl-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_paid_by_us_id" class="form-label">Paid By Agent</label>
                                                    <input class="form-control" id="life_paid_by_us_id" name="life_paid_by_us_id" placeholder="Paid By Agent" disabled>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="life_byus_payout_amount" class="form-label">Amount</label>
                                                    <input type="text" class="form-control" name="life_byus_payout_amount" id="life_byus_payout_amount" value="" placeholder="Amount" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
    
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label for="life_remark" class="form-label">Remarks</label>
                                            <input type="text" class="form-control" name="life_remark" id="life_remark" placeholder="Remarks" disabled>
                                        </div>
                                    </div>
                                </div>
    
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label">Policy Documents</label>
                                            <div class="d-flex">
                                                <button class="btn btn-outline-light waves-effect me-3" id="downloadButton">Download Document</button>
                                                <button class="btn btn-outline-light waves-effect" id="viewButton">View All Documents</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </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 type="text/javascript">
    var canEdit = "{{ $data['can_edit'] }}";
    var dowloadGPdf = "{{ route('download.life.view.pdf') }}";

    if (canEdit == 0) {
        $(document).ready(function() {
            var type = "{{$data['data']['parent_id']}}";

            if(type != 0){
                type = "renewal";
            }else{
                type = "life";
            }

            $("#downloadButton").click(function() {
                downloadDoc("{{ $data['data']['id'] }}", type);
            });
        
            $("#viewButton").click(function() {
                viewDownloadDoc("{{ $data['data']['id'] }}", type);
            });        

            $("#policy_holder").html('');
            $("#life_insurance_id").val("{{ $data['data']['id'] }}");
            $("#life_transaction_date").val("{{ $data['data']['renewal_transaction_date'] }}");
            $("#life_document_number").val("{{ $data['data']['document_number'] }}");
            $("#head_first_name").val("{{ $data['data']['first_name'] }}");
            $("#head_middle_name").val("{{ $data['data']['middle_name'] }}");
            $("#head_last_name").val("{{ $data['data']['last_name'] }}");
            $("#head_address_line1").val("{{ $data['data']['address1'] }}");
            $("#head_address_line2").val("{{ $data['data']['address2'] }}");
            $("#city").val("{{ $data['data']['city'] }}");
            $("#area").val("{{ $data['data']['area'] }}");
            $("#head_mobile_number").val("{{ $data['data']['mobile_number'] }}");
            $("#head_email").val("{{ $data['data']['email'] }}");
            $("#gender").val("{{ $data['data']['gender'] }}");
            $("#head_dob").val("{{ $data['data']['dob'] }}");
            $("#family_head_name").val("{{ $data['data']['family_head'] }}");
            $("#relation_with_head").val("{{ $data['data']['relation_with_head'] }}");
            $("#life_policy_number").val("{{ $data['data']['policy_number'] }}");
            $("#life_risk_term").val("{{ $data['data']['risk_term'] }}");
            $("#life_premium_paying_term").val("{{ $data['data']['premium_paying_term'] }}");
            $("#life_risk_from_date").val("{{ $data['data']['risk_from_date'] }}");
            $("#life_maturity_date").val("{{ $data['data']['maturity_date'] }}");
            $("#life_last_payment_date").val("{{ $data['data']['last_payment_date'] }}");
            $("#life_risk_to_date").val("{{ $data['data']['risk_to_date'] }}");
            $("#life_basic_premium_amount").val("{{ number_format($data['data']['basic_amount'], 2, '.', '') }}");
            $("#life_sum_assured").val("{{ $data['data']['sum_assured'] }}");
            $("#life_tax_amount").val("{{ number_format($data['data']['tax_amount'], 2, '.', '') }}");
            $("#life_total_premium_amount").val("{{ number_format($data['data']['total_amount'], 2, '.', '') }}");
            $("#life_commisionable_amount").val("{{ number_format($data['data']['commisionable_amount'], 2, '.', '') }}");
            $("#life_accident_risk_amount").val("{{ $data['data']['accident_risk_amount'] }}");
            $("#life_term_rider").val("{{ $data['data']['term_rider'] }}");
            $("#life_double_accident_rider").val("{{ $data['data']['double_accident_rider'] }}");
            $("#policy_document_names").val("{{ $data['data']['policy_document_names'] }}");
            $("#life_remark").val("{{ $data['data']['remark'] }}");
            $("#life_party_payout_amount").val("{{ $data['data']['party_payout_amount'] }}");
            $("#life_byus_payout_amount").val("{{ $data['data']['byus_payout_amount'] }}");
            $("#life_family_id").val("{{ $data['data']['family_name'] }}");
            $("#life_client_id").val("{{ $data['data']['client_name'] }}");
            $("#life_insurance_company_id").val("{{ $data['data']['insurance_company'] }}");
            $("#life_mode_id").val("{{ $data['data']['mode'] }}");
            $("#life_policy_status_id").val("{{ $data['data']['life_policy_status'] }}");
            $("#life_broker_id").val("{{ $data['data']['broker'] }}");
            $("#life_insurance_plan_id").val("{{ $data['data']['life_insurance_plan'] }}");
            $("#life_insurance_plan_type_id").val("{{ $data['data']['plan_type_name'] }}");
            $("#subs_basic_prem_amt").val("{{$data['data']['subs_basic_amount']}}");
            $("#subs_tax_amt").val("{{$data['data']['subs_tax_amount']}}");
            $("#subs_total_prem_amt").val("{{$data['data']['subs_total_amount']}}");
            $("#subs_commisionable_amt").val("{{$data['data']['subs_commisionable_amount']}}");
            $("#life_agency_id").val("{{ $data['data']['agency'] }}");
            $("#life_sub_agent_id").val("{{ $data['data']['sub_agent'] }}");
            $("#life_branch_id").val("{{ $data['data']['branch'] }}");
            $("#life_nominee").val("{{ $data['data']['nominee_name'] }}");
            $("#life_paid_by_party_id").val("{{ $data['data']['party_payment_mode_name'] }}");
            $("#life_paid_by_us_id").val("{{ $data['data']['byus_payment_mode_name'] }}");

            var riders = "{{ $data['data']['riders_id'] }}".split(',');
            var rider_sum_assured = "{{ $data['data']['riders_sum_assured'] }}".split(',');
            var rider_risk_term = "{{ $data['data']['riders_risk_term'] }}".split(',');
            var rider_premium_paying_term = "{{ $data['data']['riders_premium_paying_term'] }}".split(',');

            riders.forEach((element, index) => {
                $("#riders_" + element).prop("checked", true);
                $("#rider_sum_assured_" + element).val(rider_sum_assured[index]);
                $("#rider_risk_term_" + element).val(rider_risk_term[index]);
                $("#rider_premium_paying_term_" + element).val(rider_premium_paying_term[index]);
            });
        });
    }

    function downloadPDF() {
        var ids = $('#life_insurance_id').val();

        $.ajax({
            headers: {'X-CSRF-TOKEN': "{{ csrf_token() }}"},
            type: 'POST',
            url: dowloadGPdf,
            data: {"id": ids},
            beforeSend: function() {
                showLoader();
            },
            success: function(resultData) {
                hideLoader();

                path = resultData['path'];
                window.open(path, '_blank');
            }
        });
    }

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

    function disabledFinish(){
        $('.actions li:last-child').show();
        $('.actions li:last-child a').remove();
        $('.actions li:last').css('margin', 'unset');
    }

    function viewDownloadDoc(id, type) {
        showLoader();
        var ajaxURL = "{{ route('view.download.life.insurance.document') }}";

        $.ajax({
            url: ajaxURL + "?id=" + id + "&type=" + type,
            dataType: 'json',
            success: function(resultData) {
                hideLoader();
                if (resultData['status'] == 1) {
                    resultData['document_links'].forEach(function(url) {
                        window.open(url, '_blank');
                    });
                }else{
                    toastr["error"](resultData['msg']);
                }
            },
            error: function(xhr, status, error) {
                hideLoader();
                toastr["error"](xhr.responseJSON['message']);
            }
        });
    }

    function downloadDoc(id, type) {
        showLoader();

        var ajaxURL = "{{ route('download.life.insurance.document') }}";
        var document_number = 123123;
        $.ajax({
            url: ajaxURL + "?id=" + id + "&type=" + type,
            dataType: 'json',
            success: function(resultData) {
                hideLoader();
                if (resultData['status'] == 1) {
                    var downloadLink = document.createElement('a');
                    downloadLink.href = resultData['download_url'];
                    downloadLink.download = resultData['file_name'];
                    downloadLink.click();
                } else {
                    toastr["error"](resultData['msg']);
                }
            },
            error: function(xhr, status, error) {
                hideLoader();
                toastr["error"](xhr.responseJSON['message']);
            }
        });
    }

</script>
@endsection