@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    tr td:last-child {
        max-width: 250px;
    }

    #isPlanArea div.row:nth-child(5) table tbody tr td,
    #isPlanArea div.row:nth-child(6) table tbody tr td {
        width: 33.33%;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
            @include('../reachassuree_agent/master/comman/header')
        <!-- end page title -->
        
        @if(getSpacesFolder() == "Localhost")
            <form action="{{ route('master.life.insurance.plan.save') }}" method="POST" id="formLifeInsurancePlan" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" class="form-control" id="plan_id" name="plan_id" value="">

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="insurance_company_id" class="form-label">Select Insurance Company<span class="text-danger">*</span></label>
                            <select class="form-control select2-ajax" id="insurance_company_id" name="insurance_company_id" required></select>
                            <div class="invalid-feedback">This value is required.</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="plan_type_id" class="form-label">Select Plan Type<span class="text-danger">*</span></label>
                            <select class="form-control select2-ajax" id="plan_type_id" name="plan_type_id" required></select>
                            <div class="invalid-feedback">This value is required.</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label  class="form-label">Plan Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="plan_name" name="plan_name" placeholder="Plan name" value="" required autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="plan_number" class="form-label">Plan Number<span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="plan_number" name="plan_number" placeholder="Plan number" value="" required autocomplete="off">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="plan_remark" class="form-label">Plan Remark</label>
                            <input type="text" class="form-control" id="plan_remark" name="plan_remark" placeholder="Plan remark" value="" autocomplete="off">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-check">
                            <input class="form-check-input float-none" type="checkbox" value="1" id="flexCheckDefault" name="is_plan">
                            <label class="form-check-label" for="flexCheckDefault">Is Plan ?</label>
                        </div>
                    </div>
                </div>
                
                <div id="isPlanArea">
                    <hr class="my-2">

                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label><br>
                            <div class="form-check">
                                <input class="form-check-input float-none" type="checkbox" value="1" id="select_sb_during" name="select_sb_during">
                                <label class="form-label" for="select_sb_during">Survival Benefit During Policy</label>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="table-responsive">
                                <table id="test-table" class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Select Age/Period</th>
                                            <th></th>
                                            <th class="d-flex justify-content-between">
                                                <span>Select Amount/Percentage</span>
                                                <button id="add-sb-during-row" class="btn btn btn-outline-primary waves-effect waves-light btn-sm px-2">Add New Row</button>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="add-sb-during-body">
                                        <tr>
                                            <td class="d-flex">
                                                <select class='form-control select2-ajax amt' name="sb_during_period_sl[]" id="sb_during_period_sl">
                                                    <option value="Age" selected>Age</option>
                                                    <option value="Period">Period</option>
                                                </select>
                                                <td><input type="text" class="form-control period" name="sb_during_period[]" id="sb_during_period0" placeholder="Enter age or period" maxlength="2" max="100" required /></td>
                                            </td>
                                            <td class="d-flex">
                                                <select class='form-control select2-ajax amt' name="sb_during_amt_type[]" id="sb_during_amt_type">
                                                    <option value="Amount" selected>Amount</option>
                                                    <option value="Percentage">Percentage</option>
                                                </select>
                                                <input type="text" class="form-control input-md ms-2" name="sb_during_value[]" id="sb_during_value0" value="" placeholder="Enter amount or percentage" required/>
                                            </td>
                                            <td><button class="delete-row-sb-during btn btn-outline-danger waves-effect waves-light btn-sm px-2">Delete</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label><br>

                            <div class="form-check">
                                <input class="form-check-input float-none" type="checkbox" value="1" id="select_sb_after" name="select_sb_after">
                                <label class="form-label" for="select_sb_after">Survival Benefit After Maturity</label>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="table-responsive">
                                <table id="test-table" class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Select Age/Period</th>
                                            <th></th>
                                            <th class="d-flex justify-content-between">
                                                <span>Select Amount/Percentage</span>
                                                <button id="add-sb-after-row" class="btn btn btn-outline-primary waves-effect waves-light btn-sm px-2">Add New Row</button>
                                            </th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody id="add-sb-after-body">
                                        <tr>
                                            <td class="d-flex">
                                                <select class='form-control select2-ajax amt' name="sb_after_period_sl[]" id="sb_after_period_sl">
                                                    <option value="Age" selected>Age</option>
                                                    <option value="Period">Period</option>
                                                </select>
                                                <td><input type="text" class="form-control period" name="sb_after_period[]" name="sb_after_period0" placeholder="Enter age or period" maxlength="2" max="100" required/></td>
                                            </td>

                                            <td class="d-flex">
                                                <select class='form-control select2-ajax amt' id="sb_after_amt_type" name="sb_after_amt_type[]">
                                                    <option value="Amount" selected>Amount</option>
                                                    <option value="Percentage">Percentage</option>
                                                </select>
                                                <input type="text" class="form-control input-md ms-2" name="sb_after_value[]" id="sb_after_value0" value="" placeholder="Enter amount or percentage" required/>
                                            </td>
                                            <td><button class="delete-row-sb-after btn btn-outline-danger waves-effect waves-light btn-sm px-2">Delete</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label><br>
                            <div class="form-check">
                                <input class="form-check-input float-none" type="checkbox" value="1" id="select_risk_cover" name="select_risk_cover">
                                <label class="form-label" for="select_risk_cover">Risk Covered After Maturity</label>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="table-responsive">
                                <table id="test-table" class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th class="d-flex justify-content-between">
                                                <span>Risk Covered Period</span>

                                                <div class="form-check text-center">
                                                    <input class="form-check-input float-none" type="checkbox" id="riskCoverTillNow" name="riskCoverTillNow" value="1" autocomplete="off">
                                                    <label class="form-check-label text-nowrap" for="riskCoverTillNow">Till Now</label>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" class="form-control period" id="risk_cover_period" name="risk_cover_period" value="" placeholder="Enter year count" maxlength="2" max="100"/></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label><br>
                            <div class="form-check">
                                <input class="form-check-input float-none" type="checkbox" value="1" id="select_settlement" name="select_settlement">
                                <label class="form-label" for="select_settlement">Settlement</label>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="table-responsive">
                                <table id="test-table" class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Settlement From Date</th>
                                            <th class="d-flex justify-content-between">
                                                <span>Settlement to Date</span>

                                                <div class="form-check text-center">
                                                    <input class="form-check-input float-none" type="checkbox" name="settlementTillNow" id="settlementTillNow" value="1" autocomplete="off">
                                                    <label class="form-check-label text-nowrap" for="settlementTillNow">Till Now</label>
                                                </div>
                                            </th>
                                            <th>Mode</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" class="form-control" name="settlement_from_date" id="settlement_from_date" placeholder="dd-mm-yyyy" value="" autocomplete="off" required></td>
                                            <td><input type="text" class="form-control" name="settlement_end_date" id="settlement_end_date" placeholder="dd-mm-yyyy" value="" autocomplete="off"></td>
                                            <td>
                                                <select class="form-control select2-ajax" id="settlement_mode_id" name="settlement_mode_id" required></select>
                                                <div class="invalid-feedback">This value is required.</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                
                    <div class="row">
                        <div class="col-md-3">
                            <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label><br>
                            <div class="form-check">
                                <input class="form-check-input float-none" type="checkbox" value="1" id="select_annuity" name="select_annuity">
                                <label class="form-label" for="select_annuity">Annuity</label>
                            </div>
                        </div>

                        <div class="col-md-9">
                            <div class="table-responsive">
                                <table id="test-table" class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>Annuity From Date</th>
                                            <th class="d-flex justify-content-between">
                                                <span>Annuity End Date</span>

                                                <div class="form-check text-center">
                                                    <input class="form-check-input float-none" type="checkbox" id="annuityTillNow" name="annuityTillNow" value="1" autocomplete="off">
                                                    <label class="form-check-label text-nowrap" for="annuityTillNow">Till Now</label>
                                                </div>
                                            </th>
                                            <th>Mode</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><input type="text" class="form-control" name="annuity_from_date" id="annuity_from_date" placeholder="dd-mm-yyyy" autocomplete="off" required></td>
                                            <td><input type="text" class="form-control" name="annuity_end_date" id="annuity_end_date" placeholder="dd-mm-yyyy" autocomplete="off"></td>
                                            <td>
                                                <select class="form-control select2-ajax" id="annuity_mode_id" name="annuity_mode_id" required></select>
                                                <div class="invalid-feedback">This value is required.</div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Submit -->
                <div class="row">
                    <div class="col-md-10"></div>
                    @if(getActualExpirationDate() >= date('Y-m-d H:i:s'))
                        <div class="col-md-2">
                            <div class="mb-3">
                                <button type="submit" class="btn btn-primary form-control" id="btnPlanSave">Insert</button>
                            </div>
                        </div>
                    @else
                        <div class="col-md-2">
                            <div class="mb-3">
                                <label class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                <button type="button" class="btn btn-primary form-control" disabled>Insert</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <p class="text-center text-danger font-size-14 fw-bold mb-0 p-3">Your current plan has expired. To resume disabled operations, you have the option to renew your existing plan or upgrade to a new one. Simply visit our 'Renew' or 'Upgrade' tab to proceed.</p>
                            </div>
                        </div>
                    @endif
                </div>
            </form>
        @endif

        <div class="row">
            <div class="card">
                <div class="card-body">
                    <br>
                    <div class="table-responsive">
                        <table id="datatable" class="table align-middle table-nowrap display nowrap w-100">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Insurance Company</th>
                                    <th>Plan Type</th>
                                    <th>Plan Name</th>
                                    <th>Plan Number</th>
                                    <th>Plan Remark</th>
                                    <th>Status</th>
                                    <th>Created By</th>
                                    <th>Modified By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        @csrf
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

{{-- for exel to sql file converter --}}
   {{-- https://tableconvert.com/excel-to-sql --}}
@section('custom-scripts')
<script src="{{ asset('assets/js/pages/jquery.form.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 type="text/javascript">
    var ajaxURLGetLifeInsurancePlans = "{{ route('master.life.insurance.plans.ajax') }}";
    var ajaxURLLifeInsurancePlanDetail = "{{ route('master.life.insurance.plan.detail') }}";
    var changeLifeInsurancePlanStatusURL = "{{ route('master.change.life.insurance.plan.status') }}";
    var ajaxSearchInsuranceCompany = "{{ route('search.insurance.company') }}";
    var ajaxSearchSegment = "{{route('search.segment')}}";
    var csrfToken = $("[name=_token").val();
    var isVisible = false;