@extends('layout.app')
@section('title', 'Service Management')

@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/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 Maintenance</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Service Management</li>
        </ol>
        <div class="ms-auto">
            <a href="{{ route('vehicle-services.create') }}" class="btn btn-primary btn-sm">
                <i class="ri-add-line"></i> + Add Service Entry
            </a>
        </div>
    </div>
    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header p-2 bg-light border-bottom">
                        <ul class="nav nav-tabs card-header-tabs" id="serviceTabs" 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-services-tab" data-bs-toggle="tab" data-bs-target="#all-services-pane" type="button" role="tab">
                                    <i class="ri-history-line me-1"></i> All Service History
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="serviceTabsContent">
                            
                            <!-- TAB 1: VEHICLE LIST -->
                            <div class="tab-pane fade show active" id="vehicle-list-pane" role="tabpanel">
                                <div class="table-responsive">
                                    <table id="vehicle-datatable" class="table table-bordered table-hover truncate m-0 align-middle w-100">
                                        <thead class="table-light">
                                            <tr>
                                                <th width="60">#</th>
                                                <th>Truck No</th>
                                                <th>Owner Name</th>
                                                <th>Current KM</th>
                                                <th width="150" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- TAB 2: ALL SERVICE HISTORY -->
                            <div class="tab-pane fade" id="all-services-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_service_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_service_vehicle_id" class="form-select form-select-sm">
                                            <option value="">All Trucks</option>
                                            @foreach(\App\Models\Vehicle::where('vehicle_type', 'self')->pluck('vehicle_no', 'id') 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="applyServicesFilter()">
                                            <i class="ri-filter-line"></i> Filter
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resetServicesFilter()">
                                            <i class="ri-refresh-line"></i> Reset
                                        </button>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table id="allServicesTable" 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>Date</th>
                                                <th>Truck Number</th>
                                                <th>Party / Service Center</th>
                                                <th>Services Performed</th>
                                                <th>Service KM</th>
                                                <th>Total Amount</th>
                                                <th width="100" class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Service Details Modal -->
    <div class="modal fade" id="serviceDetailsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header py-2 bg-primary text-white">
                    <h6 class="modal-title fw-bold" id="modalTitle">Service Batch Details</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3" id="serviceModalBody">
                    Loading...
                </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/daterange/daterange.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/custom-daterange.js') }}"></script>
    <script>
        var serviceStartDate = null;
        var serviceEndDate = null;
        var allServicesTable = null;

        $(document).ready(function() {
            // Tab 1: Vehicle Datatable
            $('#vehicle-datatable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('vehicle-services.getVehicleData') }}',
                columns: [
                    { data: 'DT_RowIndex', name: 'id', searchable: false },
                    { data: 'vehicle_no', name: 'vehicle_no' },
                    { data: 'owner_name', name: 'owner_name' },
                    { data: 'current_km', name: 'current_km' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });

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

            $('#filter_service_date_range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
                serviceStartDate = picker.startDate.format('YYYY-MM-DD');
                serviceEndDate = picker.endDate.format('YYYY-MM-DD');
                applyServicesFilter();
            });

            $('#filter_service_date_range').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
                serviceStartDate = null;
                serviceEndDate = null;
                applyServicesFilter();
            });

            // Tab 2: All Services Table
            allServicesTable = $('#allServicesTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('vehicle-services.getData') }}',
                    data: function(d) {
                        d.vehicle_id = $('#filter_service_vehicle_id').val();
                        d.start_date = serviceStartDate;
                        d.end_date = serviceEndDate;
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'service_date', name: 'service_date' },
                    { data: 'vehicle_no', name: 'vehicle.vehicle_no' },
                    { data: 'party_name', name: 'party.party_name' },
                    { data: 'services', name: 'services', orderable: false, searchable: false },
                    { data: 'service_km', name: 'service_km' },
                    { data: 'total_amount', name: 'total_amount' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                order: [[1, 'desc']]
            });
        });

        function applyServicesFilter() {
            if (allServicesTable) {
                allServicesTable.ajax.reload();
            }
        }

        function resetServicesFilter() {
            $('#filter_service_date_range').val('');
            $('#filter_service_vehicle_id').val('');
            serviceStartDate = null;
            serviceEndDate = null;
            applyServicesFilter();
        }

        function viewDetails(id) {
            $.get('{{ url("vehicle-services") }}/' + id, function(res) {
                let html = '<div class="row g-2 mb-3">' +
                    '<div class="col-md-6"><b>Truck:</b> ' + (res.vehicle ? res.vehicle.vehicle_no : 'N/A') + '</div>' +
                    '<div class="col-md-6"><b>Service Date:</b> ' + res.service_date + '</div>' +
                    '<div class="col-md-6"><b>Service KM:</b> ' + (res.service_km ? res.service_km + ' KM' : 'N/A') + '</div>' +
                    '<div class="col-md-6"><b>Total Amount:</b> ₹ ' + (res.total_amount || '0.00') + '</div>' +
                    '<div class="col-md-6"><b>Invoice No:</b> ' + (res.invoice_no || 'N/A') + '</div>' +
                    '<div class="col-md-6"><b>Invoice Date:</b> ' + (res.invoice_date || 'N/A') + '</div>' +
                    '<div class="col-md-6"><b>Driver Name:</b> ' + (res.driver_name || 'N/A') + '</div>' +
                    '<div class="col-md-6"><b>Driver Contact:</b> ' + (res.driver_contact || 'N/A') + '</div>' +
                '</div>' +
                '<h6>Services Done:</h6>' +
                '<table class="table table-bordered table-sm">' +
                    '<thead class="table-light"><tr><th>Service</th><th>Amount</th><th>Remarks</th></tr></thead>' +
                    '<tbody>';
                if (res.items && res.items.length > 0) {
                    res.items.forEach(function(it) {
                        html += '<tr><td>' + (it.service_type ? it.service_type.name : 'General') + '</td><td>₹ ' + (it.amount || '0.00') + '</td><td>' + (it.remarks || '-') + '</td></tr>';
                    });
                }
                html += '</tbody></table>';
                $('#serviceModalBody').html(html);
                new bootstrap.Modal(document.getElementById('serviceDetailsModal')).show();
            });
        }

        function deleteBatch(id) {
            if (confirm('Are you sure you want to delete this service record?')) {
                $.ajax({
                    url: '{{ url("vehicle-services") }}/' + id,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function() {
                        if (allServicesTable) allServicesTable.ajax.reload();
                    }
                });
            }
        }
    </script>
@endpush