@extends('layout.app')
@section('title', 'Vehicle Document Expiry Report')

@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/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);">Vehicle Document Expiry Report</a>
            </li>
        </ol>
    </div>

    <div class="app-body">
        <div class="row gx-3">

            <!-- Period Filter -->
            <div class="col-sm-2">
                <label class="form-label" for="date_period">Period</label>
                <select id="date_period" class="form-select">
                    <option value="all" selected>All</option>
                    <option value="today">Today</option>
                    <option value="yesterday">Yesterday</option>
                    <option value="last_7">Last 7 Days</option>
                    <option value="last_30">Last 30 Days</option>
                    <option value="this_month">This Month</option>
                    <option value="last_month">Last Month</option>
                    <option value="custom">Custom Range</option>
                </select>
            </div>
            <!-- From Date Filter -->
            <div class="col-sm-2">
                <label class="form-label" for="from_date">From Date</label>
                <input type="text" id="from_date" class="form-control datepicker" value="{{ date('01-04-Y', strtotime(date('m') >= 4 ? 'now' : '-1 year')) }}">
            </div>
            <!-- To Date Filter -->
            <div class="col-sm-2">
                <label class="form-label" for="to_date">To Date</label>
                <input type="text" id="to_date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
            </div>

            <!-- Vehicle Filter -->
            <div class="col-sm-3">
                <label class="form-label">Filter by Vehicle No.</label>
                {!! Form::select('vehicle_id', ['' => '--Select--'] + $vehicle, null, [
                    'class' => 'form-control select2',
                    'id' => 'vehicle_id',
                ]) !!}
            </div>

            <!-- Table -->
            <div class="col-sm-12 mt-3">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead>
                                    <tr>
                                        <th>S.no.</th>
                                        <th>Vehicle No.</th>
                                        <th>Owner Name</th>
                                        <th>Insurance Expiry</th>
                                        <th>PUC Expiry</th>
                                        <th>Fitness Expiry</th>
                                        <th>Road Tax Expiry</th>
                                        <th>RC Expiry</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/vendor/datatables/custom/custom-datatables.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Initialize from_date and to_date as single date pickers
            $('#from_date, #to_date').daterangepicker({
                singleDatePicker: true,
                autoUpdateInput: true,
                locale: {
                    format: 'DD-MM-YYYY'
                }
            });

            // Date period helper logic
            $('#date_period').on('change', function() {
                var val = $(this).val();
                var start, end;
                
                switch(val) {
                    case 'today':
                        start = moment();
                        end = moment();
                        break;
                    case 'yesterday':
                        start = moment().subtract(1, 'days');
                        end = moment().subtract(1, 'days');
                        break;
                    case 'last_7':
                        start = moment().subtract(6, 'days');
                        end = moment();
                        break;
                    case 'last_30':
                        start = moment().subtract(29, 'days');
                        end = moment();
                        break;
                    case 'this_month':
                        start = moment().startOf('month');
                        end = moment().endOf('month');
                        break;
                    case 'last_month':
                        start = moment().subtract(1, 'month').startOf('month');
                        end = moment().subtract(1, 'month').endOf('month');
                        break;
                    case 'all':
                        start = moment("01-04-2025", "DD-MM-YYYY"); // default standard start
                        end = moment();
                        break;
                    default:
                        return;
                }
                
                $('#from_date').data('daterangepicker').setStartDate(start);
                $('#from_date').data('daterangepicker').setEndDate(start);
                $('#from_date').val(start.format('DD-MM-YYYY'));
                
                $('#to_date').data('daterangepicker').setStartDate(end);
                $('#to_date').data('daterangepicker').setEndDate(end);
                $('#to_date').val(end.format('DD-MM-YYYY'));
                
                $('#datatable').DataTable().draw();
            });

            $('#from_date, #to_date').on('apply.daterangepicker change', function() {
                if ($(this).attr('id') === 'from_date' || $(this).attr('id') === 'to_date') {
                    $('#date_period').val('custom');
                }
                $('#datatable').DataTable().draw();
            });

            // Redraw table when vehicle selection changes
            $("#vehicle_id").on('change', function() {
                $('#datatable').DataTable().draw(false);
            });

            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{ route('vehicle-document-expiry.getData') }}',
                    data: function(d) {
                        d.startdate = moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                        d.enddate = moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                        d.vehicle_id = $('#vehicle_id').val();
                    }
                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'vehicle_no',
                        name: 'vehicle_no'
                    },
                    {
                        data: 'owner_name',
                        name: 'owner_name'
                    },
                    {
                        data: 'document.insurance_expiry',
                        name: 'document.insurance_expiry',
                        defaultContent: '-'
                    },
                    {
                        data: 'document.puc_expiry',
                        name: 'document.puc_expiry',
                        defaultContent: '-'
                    },
                    {
                        data: 'document.fitness_expiry',
                        name: 'document.fitness_expiry',
                        defaultContent: '-'
                    },
                    {
                        data: 'document.road_tax_expiry',
                        name: 'document.road_tax_expiry',
                        defaultContent: '-'
                    },
                    {
                        data: 'document.rc_expiry',
                        name: 'document.rc_expiry',
                        defaultContent: '-'
                    },
                ],
            });
        });
    </script>
@endpush