@extends('layout.app')
@section('title', 'Vehicle Insurance List')
@push('header_script')
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
<link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css')}}">
<link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
<link rel="stylesheet" href="{{asset('theme/assets/vendor/daterange/daterange.css')}}">
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
        <li class="breadcrumb-item active" aria-current="page">Vehicle Insurance</li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('vehicle-insurance.create') }}" class="btn btn-primary btn-sm">
            <i class="ri-add-line"></i> + Add Insurance
        </a>
    </div>
</div>

<div class="app-body">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="ri-checkbox-circle-line me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row gx-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header p-2 bg-light border-bottom">
                    <ul class="nav nav-tabs card-header-tabs" id="insuranceTabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active fw-bold" id="vehicle-list-tab" data-bs-toggle="tab" data-bs-target="#vehicle-list-pane" type="button" role="tab">
                                <i class="ri-truck-line me-1"></i> Vehicle List
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link fw-bold" id="all-policies-tab" data-bs-toggle="tab" data-bs-target="#all-policies-pane" type="button" role="tab">
                                <i class="ri-shield-check-line me-1"></i> All Insurance Policies
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="insuranceTabsContent">
                        
                        <!-- TAB 1: VEHICLE LIST -->
                        <div class="tab-pane fade show active" id="vehicle-list-pane" role="tabpanel">
                            <div class="table-responsive">
                                <table id="vehicleInsuranceTable" class="table table-bordered table-hover truncate m-0 align-middle w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="60">#</th>
                                            <th>Truck Number</th>
                                            <th>Owner Name</th>
                                            <th>Latest Policy Expiry</th>
                                            <th>Status</th>
                                            <th width="140" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                        <!-- TAB 2: ALL POLICIES HISTORY -->
                        <div class="tab-pane fade" id="all-policies-pane" role="tabpanel">
                            <!-- Filters -->
                            <div class="row g-2 mb-3 bg-light p-2 rounded border">
                                <div class="col-md-3">
                                    <label class="form-label small mb-1 fw-bold">Date Range</label>
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="filter_insurance_date_range" class="form-control" placeholder="Select Date Range">
                                        <span class="input-group-text"><i class="ri-calendar-line"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label small mb-1 fw-bold">Truck Number</label>
                                    <select id="filter_insurance_vehicle_id" class="form-select form-select-sm">
                                        <option value="">All Trucks</option>
                                        @foreach($vehicles as $id => $vNo)
                                            <option value="{{ $id }}">{{ $vNo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-end gap-1">
                                    <button type="button" class="btn btn-sm btn-primary" onclick="applyInsuranceFilter()">
                                        <i class="ri-filter-line"></i> Filter
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resetInsuranceFilter()">
                                        <i class="ri-refresh-line"></i> Reset
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table id="insurance-datatable" class="table table-bordered table-hover truncate m-0 align-middle w-100" style="font-size: 13px;">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="50">#</th>
                                            <th>Truck No</th>
                                            <th>Owner Name</th>
                                            <th>Insurance Company</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                            <th>Premium (₹)</th>
                                            <th>Status</th>
                                            <th width="100" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
<script src="{{asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js')}}"></script>
<script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
<script src="{{asset('theme/assets/vendor/daterange/daterange.js')}}"></script>
<script src="{{asset('theme/assets/vendor/daterange/custom-daterange.js')}}"></script>
<script>
    var insuranceStartDate = null;
    var insuranceEndDate = null;
    var allInsuranceTable = null;

    $(document).ready(function() {
        // Tab 1: Vehicle Insurance Summary
        $('#vehicleInsuranceTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('vehicle-insurance.getVehicleData') }}",
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'vehicle_no', name: 'vehicle_no' },
                { data: 'owner_name', name: 'owner_name' },
                { data: 'latest_expiry', name: 'latest_expiry', orderable: false, searchable: false },
                { data: 'status', name: 'status', orderable: false, searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });

        // Date Range Filter for All Policies
        $('#filter_insurance_date_range').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear',
                format: 'DD-MM-YYYY'
            }
        });

        $('#filter_insurance_date_range').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
            insuranceStartDate = picker.startDate.format('YYYY-MM-DD');
            insuranceEndDate = picker.endDate.format('YYYY-MM-DD');
            applyInsuranceFilter();
        });

        $('#filter_insurance_date_range').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            insuranceStartDate = null;
            insuranceEndDate = null;
            applyInsuranceFilter();
        });

        // Tab 2: All Policies Table
        allInsuranceTable = $('#insurance-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('vehicle-insurance.getData') }}",
                data: function(d) {
                    d.vehicle_id = $('#filter_insurance_vehicle_id').val();
                    d.start_date = insuranceStartDate;
                    d.end_date = insuranceEndDate;
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'vehicle_no', name: 'vehicle.vehicle_no' },
                { data: 'owner_name', name: 'vehicle.owner_name' },
                { data: 'insurance_company', name: 'insurance_company' },
                { data: 'policy_start_date', name: 'policy_start_date' },
                { data: 'policy_end_date', name: 'policy_end_date' },
                { data: 'premium_amount', name: 'premium_amount' },
                { data: 'status', name: 'status', orderable: false, searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });
    });

    function applyInsuranceFilter() {
        if (allInsuranceTable) {
            allInsuranceTable.ajax.reload();
        }
    }

    function resetInsuranceFilter() {
        $('#filter_insurance_date_range').val('');
        $('#filter_insurance_vehicle_id').val('');
        insuranceStartDate = null;
        insuranceEndDate = null;
        applyInsuranceFilter();
    }

    function deleteIt(id) {
        swal({
                title: "Are you sure?",
                text: "You will not be able to recover this data!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes, I am sure!',
                cancelButtonText: "No, cancel it!",
                closeOnConfirm: false,
                closeOnCancel: false,
                cancelButtonClass: 'btn-default btn-md waves-effect',
                confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
            },
            function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: '{{ url("vehicle-insurance") }}/' + id,
                        type: 'delete',
                        dataType: "JSON",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if (allInsuranceTable) allInsuranceTable.ajax.reload();
                            $('#vehicleInsuranceTable').DataTable().ajax.reload();
                            swal("Deleted!", "Your data has been deleted.", "success");
                        },
                        error: function(xhr) {
                            swal("Error!", "Could not delete this record.", "error");
                        }
                    });
                } else {
                    swal("Cancelled", "Your data is safe :)", "error");
                }
            });
    }
</script>
@endpush