@extends('template.app')

@section('meta') @endsection
@section('title') Insurance Report @endsection

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<style>
    table {
        font-family: Arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    /*tr:nth-child(even) {*/
    /*    background-color: #313762;*/
    /*}*/

    div.dataTables_wrapper div.dataTables_filter label {
        font-weight: normal;
        white-space: nowrap;
        margin-left: auto;
        margin-right: auto;
    }

    .table-responsive {
        overflow-x: auto;
        max-width: 100%;
    }

    .card-body {
        overflow-x: auto;
        max-width: 100%;
        margin-right: 40px;
        margin-left: 40px;
    }

    .card-header {
        margin-right: 40px;
        margin-left: 40px;
    }

    .card.mt-4, .card {
        margin: 20px 40px;
    }

    .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }
</style>
@endsection

@section('content')
<div class="page-breadcrumb">
    <div class="row">
        <div class="col-7 align-self-center">
            <h4 class="page-title text-truncate text-dark font-weight-medium mb-1">Insurance Report</h4>
            <div class="d-flex align-items-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb m-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}" class="text-muted">Dashboard</a></li>
                        <li class="breadcrumb-item text-muted active" aria-current="page">List</li>
                    </ol>
                </nav>
            </div>
        </div>
        <div class="col-5 align-self-center">
            <div class="customize-input float-right">
                <button class="btn waves-effect waves-light btn-rounded btn-outline-primary pull-right" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Export
                </button>
            </div>
        </div>
        <div class="col-sm-8"></div>
        <div class="col-sm-4">
            <div class="col-md-12 align-self-center collapse" id="collapseExample">
                <div class="customize-input float-right">
                    <form action="{{ route('insuranceExport') }}" method="get">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-6">
                                <select name="slug" class="form-control" required>
                                    <option value="">Select Status</option>
                                    <option value="all">All</option>
                                </select>
                            </div>
                            <div class="form-group col-md-6">
                                <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
  <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body table-responsive" id="datatable" style="text-align: center;">
                    <table class="table table-bordered data-table tables" id="data-table" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Model Name</th>
                                <th>Variant</th>
                                <th>Status</th>
                                <th>Team Leader</th>
                                <th>KEC Name</th>
                                <th>Insurance</th>
                                <!--<th>NCB- No Claim Bonus</th>-->
                                <th>Date of Insurance</th>
                                <th>Time of Insurance</th>
                                <th>1st year last date of Insurance</th>
                                <!--<th>3rd year last date of Insurance</th>-->
                                <th>Insurance Company Name</th>
                                <th>Amount</th>
                                <th>Policy Number</th>
                                <th>Insurance Status</th>
                                <!--<th>Remarks</th>-->
                            </tr>
                            <tr class="filterrow">
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="product" value="{{ request()->get('product', '') }}" class="form-control text-capitalize" autocomplete="off" tabindex="1" id="product">
                                        </div>
                                    </div>
                                </th>

                                <th>
                                    <div class="search-box-container datatable-form-filter width_250">
                                        <div class="form-group is-empty">
                                            <input type="text" name="car_varient_name" value="{{ request()->get('car_varient_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="2" id="car_varient_name">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_300">
                                        <div class="form-group is-empty">
                                            <input type="text" name="status" value="{{ request()->get('status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="3" id="status">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="team_name" value="{{ request()->get('team_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="4" id="team_name">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="sales_person_name" value="{{ request()->get('sales_person_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="5" id="sales_person_name">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="insurance_id" value="{{ request()->get('insurance_id', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="6" id="insurance_id">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="date_of_insurance" value="{{ request()->get('date_of_insurance', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="7" id="date_of_insurance">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_250">
                                        <div class="form-group is-empty">
                                            <input type="text" name="time_of_insurance" value="{{ request()->get('time_of_insurance', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="8" id="time_of_insurance">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="last_time_of_insurance" value="{{ request()->get('last_time_of_insurance', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="9" id="last_time_of_insurance">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_200">
                                        <div class="form-group is-empty">
                                            <input type="text" name="insurance_name" value="{{ request()->get('insurance_name', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="10" id="insurance_name">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="ncb_amount" value="{{ request()->get('ncb_amount', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="11" id="ncb_amount">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="policy_number" value="{{ request()->get('policy_number', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="12" id="policy_number">
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="search-box-container datatable-form-filter width_150">
                                        <div class="form-group is-empty">
                                            <input type="text" name="insurance_status" value="{{ request()->get('insurance_status', '') }}" class="form-control text-capitalize custom_color" autocomplete="off" autofocus tabindex="13" id="insurance_status">
                                        </div>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script type="text/javascript">
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        let rowCount = $("table tbody tr").length;
        if (rowCount < 3) {
            $(".table").css("height", "600px");
        }

        $('.js-example-basic-single').select2();

        var tableColumns = [
            { data: 'product', name: 'product' }, 
            { data: 'car_varient_name', name: 'car_varient_name' }, 
            { data: 'status', name: 'status' },
            { data: 'team_name', name: 'team_name'},
            { data: 'sales_person_name', name: 'sales_person_name'},
            { data: 'insurance_id', name: 'insurance_id' },
            // { data: 'ncb', name: 'ncb' }, 
            { data: 'date_of_insurance', name: 'date_of_insurance' },
            { data: 'time_of_insurance', name: 'time_of_insurance' },
            { data: 'last_time_of_insurance', name: 'last_time_of_insurance' },
            // { data: 'third_year_last_insurance', name: 'third_year_last_insurance' }, 
            { data: 'insurance_name', name: 'insurance_name' }, 
            { data: 'ncb_amount', name: 'ncb_amount' }, 
            { data: 'policy_number', name: 'policy_number' },
            { data: 'insurance_status', name: 'insurance_status' },
            // { data: 'remark', name: 'remark' }
        ];

        (function(window, $) {
            window.LaravelDataTables = window.LaravelDataTables || {};
            window.LaravelDataTables["dataTableBuilder"] = $("#data-table").DataTable({
                processing: true,
                serverSide: true,
                language: {
                    "info": "_START_ - _END_ of _TOTAL_",
                    "lengthMenu": "_MENU_ ",
                    "infoFiltered": ""
                },
                // scrollY: '400px',
                scrollCollapse: true,
                paging: true,
                searching: false,

                bSortCellsTop : true,
                ajax: {
                    url: '{!! route("InsuranceFetchReport") !!}',
                    method: "POST",
                    data: function (d) {
                        d.product = jQuery(".datatable-form-filter input[name='product']").val();
                        d.car_varient_name = jQuery(".datatable-form-filter input[name='car_varient_name']").val();
                        d.status = jQuery(".datatable-form-filter input[name='status']").val();
                        d.team_name = jQuery(".datatable-form-filter input[name='team_name']").val();
                        d.sales_person_name = jQuery(".datatable-form-filter input[name='sales_person_name']").val();
                        d.insurance_id = jQuery(".datatable-form-filter input[name='insurance_id']").val();
                        d.date_of_insurance = jQuery(".datatable-form-filter input[name='date_of_insurance']").val();
                        d.time_of_insurance = jQuery(".datatable-form-filter input[name='time_of_insurance']").val();
                        d.last_time_of_insurance = jQuery(".datatable-form-filter input[name='last_time_of_insurance']").val();
                        d.insurance_name = jQuery(".datatable-form-filter input[name='insurance_name']").val();
                        d.ncb_amount = jQuery(".datatable-form-filter input[name='ncb_amount']").val();
                        d.policy_number = jQuery(".datatable-form-filter input[name='policy_number']").val();
                        d.insurance_status = jQuery(".datatable-form-filter input[name='insurance_status']").val();
                    },
                    error : function(d) {}
                },
                columns: tableColumns,
                lengthMenu: [
                    [25, 50,100, -1 ],['25', '50','100', 'Show all' ]
                ],
                order: [ [0,'ASC'] ],
                responsive: true,
                colReorder:{
                    enable: false,
                },
                dom: '<"top"f>rt<"bottom"ipl><"clear">',
                fnInitComplete: function(settings, json) {
                    jQuery('table.table input:checkbox').map(function() {
                        if(jQuery(this).prop("checked") != true){
                            var column = table.column( jQuery(this).attr('data-column') );
                            column.visible(false);
                        }
                    });
                },
                pageLength: 25,
            });
        })(window, jQuery);

        $("#min").flatpickr({ onSelect: function () { window.LaravelDataTables["dataTableBuilder"].draw(); }, changeMonth: true, changeYear: true });

        $(document).on("change", "#min", function () {
            window.LaravelDataTables["dataTableBuilder"].draw();
        });



    jQuery('.datatable-form-filter input').on('keyup', function (e) {
        if(jQuery(this).val().length >= 3 || e.keyCode == 13 || !jQuery(this).val()) {
            window.LaravelDataTables["dataTableBuilder"].draw();
            e.preventDefault();
        }
    });

    jQuery('.datatable-form-filter select').on('change', function (e) {
        window.LaravelDataTables["dataTableBuilder"].draw();
        e.preventDefault();
    });

    jQuery('input:checkbox[name="name_sort_asc"],input:checkbox[name="name_sort_desc"]').on('click', function (e) {
        window.LaravelDataTables["dataTableBuilder"].draw();
        e.preventDefault();
    });
}); 
</script>
@endsection