@extends('layout.app')
@section('title', 'Fleet List 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') }}">
@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 List Report</a>
            </li>
        </ol>
    </div>

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

            <div class="col-sm-2">
                <label class="form-label">Owner Name</label>
                {!! Form::select('owner_name', ['' => 'All'] + $owners, null, [
                    'class' => 'form-control select2',
                    'id' => 'owner_name',
                ]) !!}
            </div>

            <div class="col-sm-2">
                <label class="form-label">Manufacturer</label>
                {!! Form::select('manufacturer', ['' => 'All'] + $manufacturers, null, [
                    'class' => 'form-control select2',
                    'id' => 'manufacturer',
                ]) !!}
            </div>

            <div class="col-sm-3">
                <label class="form-label">Finance Company</label>
                {!! Form::select('financer_id', ['' => 'All'] + $financeCompanies, null, [
                    'class' => 'form-control select2',
                    'id' => 'financer_id',
                ]) !!}
            </div>

            <div class="col-sm-2">
                <label class="form-label">Vehicle Registration No.</label>
                <input type="text" id="vehicle_no" class="form-control" placeholder="Search...">
            </div>

            <div class="col-sm-2">
                <label class="form-label">Vehicle </label>
                {!! Form::select('vehicle_model', ['' => 'All'] + $models, null, [
                    'class' => 'form-control select2',
                    'id' => 'vehicle_model',
                ]) !!}
            </div>

            <div class="col-sm-1 d-flex align-items-end gap-1">
                <button type="button" class="btn btn-outline-success" id="export-excel">
                    <i class="bi bi-file-earmark-excel"></i>
                </button>
            </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>Sr. No.</th>
                                        <th>Owner Name</th>
                                        <th>Vehicle Owner Type</th>
                                        <th>Vehicle Type</th>
                                        <th>Registration Date</th>
                                        <th>Vehicle Registration No.</th>
                                        <th>Vehicle Model</th>
                                        <th>Manufacture By</th>
                                        <th>Year of Manufacture</th>
                                        <th>Free / Finance</th>
                                        <th>Finance Company</th>
                                        <th>EMIs Paid</th>
                                        <th>Loan Tenure (Months)</th>
                                        <th>Loan Amount</th>
                                        <th>EMI Amount</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>
        $(document).ready(function() {
            // Draw table on filter changes
            $("#owner_name, #manufacturer, #financer_id, #vehicle_model").on('change', function() {
                $('#datatable').DataTable().draw(false);
            });
            $("#vehicle_no").on('keyup', function() {
                $('#datatable').DataTable().draw(false);
            });

            // Export Excel
            $('#export-excel').on('click', function() {
                let params = new URLSearchParams({
                    owner_name: $('#owner_name').val() || '',
                    manufacturer: $('#manufacturer').val() || '',
                    financer_id: $('#financer_id').val() || '',
                    vehicle_model: $('#vehicle_model').val() || '',
                    vehicle_no: $('#vehicle_no').val() || ''
                });
                
                window.location.href = "{{ route('fleet-list.exportExcel') }}?" + params.toString();
            });

            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{ route('fleet-list.getData') }}',
                    data: function(d) {
                        d.owner_name = $('#owner_name').val();
                        d.manufacturer = $('#manufacturer').val();
                        d.financer_id = $('#financer_id').val();
                        d.vehicle_model = $('#vehicle_model').val();
                        d.vehicle_no = $('#vehicle_no').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'owner_name', name: 'owner_name' },
                    { data: 'vehicle_owner_type', name: 'vehicle_owner_type', orderable: false, searchable: false },
                    { data: 'vehicle_type', name: 'vehicle_type', orderable: false, searchable: false },
                    { data: 'registration_date', name: 'registration_date', orderable: false, searchable: false },
                    { data: 'vehicle_no', name: 'vehicle_no' },
                    { data: 'vehicle_model', name: 'vehicle_model' },
                    { data: 'manufacturer', name: 'manufacturer' },
                    { data: 'year_of_manufacture', name: 'year_of_manufacture', orderable: false, searchable: false },
                    { data: 'free_finance', name: 'free_finance', orderable: false, searchable: false },
                    { data: 'finance_company', name: 'finance_company', orderable: false, searchable: false },
                    { data: 'emis_paid', name: 'emis_paid', orderable: false, searchable: false },
                    { data: 'loan_tenure', name: 'loan_tenure', orderable: false, searchable: false },
                    { data: 'loan_amount', name: 'loan_amount', orderable: false, searchable: false },
                    { data: 'emi_amount', name: 'emi_amount', orderable: false, searchable: false },
                ],
            });
        });
    </script>
@endpush