@extends('layout.app')
@section('title', 'Accident & Claims')

@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/vendor/datatables/buttons/dataTables.bs5-custom.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/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);">Accident & Claims</a>
        </li>
    </ol>
    <div class="ms-auto d-lg-flex flex-row">
        <a href="{{route('accident-claims.create')}}" class="btn btn-sm btn-primary">
            <i class="ri-add-circle-fill"></i> Add Accident & Claims
        </a>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <!-- Recommended Search / Filters -->
        <div class="col-sm-3">
            <label class="form-label" for="filter_vehicle">Filter by Vehicle No.</label>
            <select id="filter_vehicle" class="form-control select2">
                <option value="">--Select--</option>
                @foreach($vehicles as $v)
                    <option value="{{ $v->id }}">{{ $v->vehicle_no }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-sm-3">
            <label class="form-label" for="filter_status">Filter by Claim Status</label>
            <select id="filter_status" class="form-select select2">
                <option value="">--Select--</option>
                <option value="Reported">Reported</option>
                <option value="Claim Filed">Claim Filed</option>
                <option value="Survey Scheduled">Survey Scheduled</option>
                <option value="Surveyed">Surveyed</option>
                <option value="Approved">Approved</option>
                <option value="Partially Approved">Partially Approved</option>
                <option value="Rejected">Rejected</option>
                <option value="Settled">Settled</option>
            </select>
        </div>
        <div class="col-sm-3">
            <label class="form-label" for="filter_insurance">Filter by Insurance Company</label>
            <input type="text" id="filter_insurance" class="form-control" placeholder="Search Insurer...">
        </div>

        <div class="col-sm-12 mt-2">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table truncate m-0 align-middle" id="accidentTable">
                            <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>SR No.</th>
                                    <th>Owner Name</th>
                                    <th>Owner Type</th>
                                    <th>Vehicle No.</th>
                                    <th>Accident Date</th>
                                    <th>Insurance Co.</th>
                                    <th>Workshop</th>
                                    <th>Claim Amount</th>
                                    <th>Claim Status</th>
                                    <th>Work Completion Date</th>
                                    <th>No of Days Hold</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </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>
        $(document).ready(function() {
            var table = $('#accidentTable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{ route('accident-claims.getData') }}',
                    data: function(d) {
                        d.vehicle = $('#filter_vehicle').val();
                        d.status = $('#filter_status').val();
                        d.insurance = $('#filter_insurance').val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false},
                    {data: 'sr_no', name: 'sr_no'},
                    {data: 'owner_name', name: 'owner_name'},
                    {data: 'owner_type', name: 'owner_type'},
                    {data: 'vehicle_no', name: 'vehicle_no'},
                    {data: 'accident_date', name: 'accident_date'},
                    {data: 'insurance_company', name: 'insurance_company'},
                    {data: 'workshop_name', name: 'workshop_name'},
                    {data: 'claim_amount_approved', name: 'claim_amount_approved'},
                    {data: 'claim_status', name: 'claim_status'},
                    {data: 'repair_completion_date', name: 'repair_completion_date'},
                    {data: 'hold_days', name: 'hold_days'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                // Row click handler to open details
                createdRow: function(row, data, dataIndex) {
                    $(row).find('td:not(:last-child)').css('cursor', 'pointer').on('click', function() {
                        window.location.href = '{{ url('vehicle-maintenance/accident-claims') }}/' + data.id + '/edit';
                    });
                }
            });

            $('#filter_vehicle, #filter_status, #filter_insurance').on('change keyup', function() {
                table.draw();
            });
        });

        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-maintenance/accident-claims') }}/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function () {
                                $("#accidentTable").DataTable().draw(false);
                            }
                        });
                        swal("Deleted!", "Data has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }
                });
        }
    </script>
@endpush