@extends('layout.app')
@section('title', 'Daily KM Tracking')
@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')}}">
    <style>
        #allLogsTable th, #allLogsTable td {
            font-size: 12px;
            padding: 6px 8px;
            white-space: nowrap;
        }
        .sticky-action-col {
            position: sticky !important;
            right: 0 !important;
            background-color: #ffffff !important;
            box-shadow: -4px 0 8px rgba(0, 0, 0, 0.08);
            z-index: 5;
            text-align: center;
            min-width: 105px;
        }
        thead th.sticky-action-col {
            background-color: #f8f9fa !important;
            z-index: 6;
        }
    </style>
@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);">Daily KM Tracking</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">Manage Daily KM</li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('vehicle-daily-kms.create') }}" class="btn btn-primary btn-sm">
            <i class="ri-add-line"></i> + Log KM
        </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="dailyKmTabs" 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-logs-tab" data-bs-toggle="tab" data-bs-target="#all-logs-pane" type="button" role="tab">
                                <i class="ri-history-line me-1"></i> All Daily KM Logs
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="dailyKmTabsContent">
                        
                        <!-- TAB 1: VEHICLE LIST -->
                        <div class="tab-pane fade show active" id="vehicle-list-pane" role="tabpanel">
                            <div class="table-responsive">
                                <table id="vehicleTable" class="table table-bordered table-hover truncate m-0 align-middle w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="50">#</th>
                                            <th>Truck Number</th>
                                            <th>Vehicle Type</th>
                                            <th>Current Odometer</th>
                                            <th width="120" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                        <!-- TAB 2: ALL LOGS HISTORY -->
                        <div class="tab-pane fade" id="all-logs-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_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_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="applyLogsFilter()">
                                        <i class="ri-filter-line"></i> Filter
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resetLogsFilter()">
                                        <i class="ri-refresh-line"></i> Reset
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table id="allLogsTable" class="table table-bordered table-hover truncate m-0 align-middle w-100" style="font-size: 12.5px;">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Date</th>
                                            <th>Time</th>
                                            <th>Place</th>
                                            <th>Truck No</th>
                                            <th>Start KM</th>
                                            <th>Running KM</th>
                                            <th>Today KM</th>
                                            <th>GPS KM</th>
                                            <th>Diff KM</th>
                                            <th>Driver Name</th>
                                            <th>Driver Mobile</th>
                                            <th>Status</th>
                                            <th>Created By / Source</th>
                                            <th class="sticky-action-col text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

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

<!-- Edit KM Entry Modal -->
<div class="modal fade" id="editKmModal" tabindex="-1" aria-labelledby="editKmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-light border-bottom">
                <h5 class="modal-title fw-bold text-primary" id="editKmModalLabel">
                    <i class="ri-edit-box-line me-1"></i> Edit KM Entry
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editKmForm">
                @csrf
                <input type="hidden" id="edit_id" name="id">
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Entry Date <span class="text-danger">*</span></label>
                            <input type="text" id="edit_date" name="date" class="form-control datepicker" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Entry Time</label>
                            <input type="time" id="edit_time" name="time" class="form-control">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Place <span class="text-danger">*</span></label>
                            <input type="text" id="edit_place" name="place" class="form-control" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Start KM (Prev)</label>
                            <input type="number" id="edit_start_km" name="start_km" class="form-control bg-light" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Running KM (Odometer) <span class="text-danger">*</span></label>
                            <input type="number" id="edit_end_km" name="end_km" class="form-control fw-bold border-primary" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Today KM</label>
                            <input type="number" id="edit_today_km" class="form-control bg-light fw-bold text-success" readonly>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">GPS KM</label>
                            <input type="number" step="0.01" id="edit_gps_km" name="gps_km" class="form-control" placeholder="0.00">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Difference in KM</label>
                            <input type="text" id="edit_diff_km" class="form-control bg-light fw-bold text-primary" readonly value="0">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold text-dark mb-1">Status (R/H) <span class="text-danger">*</span></label>
                            <select id="edit_status_rh" name="status_rh" class="form-select" required>
                                <option value="Running">Running (R)</option>
                                <option value="Halt">Halt (H)</option>
                                <option value="Maintenance">Maintenance</option>
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label fw-bold text-dark mb-1">Driver</label>
                            <select id="edit_driver_id" name="driver_id" class="form-select">
                                <option value="">-- Select Driver --</option>
                                @foreach($drivers as $drv)
                                    <option value="{{ $drv->id }}" data-mobile="{{ $drv->mobile_no }}">
                                        {{ $drv->employee_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold text-dark mb-1">Remarks</label>
                            <input type="text" id="edit_remarks" name="remarks" class="form-control" placeholder="Optional notes">
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light border-top">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="btnUpdateKm" class="btn btn-primary fw-bold">
                        <i class="ri-save-line me-1"></i> Update KM Entry
                    </button>
                </div>
            </form>
        </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 logsStartDate = null;
    var logsEndDate = null;
    var allLogsTable = null;

    $(document).ready(function() {
        // Tab 1: Vehicle Table
        $('#vehicleTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('vehicle-daily-kms.getVehicleData') }}",
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'vehicle_no', name: 'vehicle_no' },
                { data: 'vehicle_type', name: 'vehicle_type' },
                { data: 'current_km', name: 'current_km' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ]
        });

        // Date range picker for All Logs
        $('#filter_date_range').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear',
                format: 'DD-MM-YYYY'
            }
        });

        $('#filter_date_range').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
            logsStartDate = picker.startDate.format('YYYY-MM-DD');
            logsEndDate = picker.endDate.format('YYYY-MM-DD');
            applyLogsFilter();
        });

        $('#filter_date_range').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
            logsStartDate = null;
            logsEndDate = null;
            applyLogsFilter();
        });

        // Tab 2: All Logs Table
        allLogsTable = $('#allLogsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('vehicle-daily-kms.getData') }}",
                data: function(d) {
                    d.vehicle_id = $('#filter_vehicle_id').val();
                    d.start_date = logsStartDate;
                    d.end_date = logsEndDate;
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'date', name: 'date' },
                { data: 'time', name: 'time' },
                { data: 'place', name: 'place' },
                { data: 'vehicle_no', name: 'vehicle.vehicle_no' },
                { data: 'start_km', name: 'start_km' },
                { data: 'end_km', name: 'end_km' },
                { data: 'total_km', name: 'total_km' },
                { data: 'gps_km', name: 'gps_km' },
                { data: 'diff_km', name: 'diff_km', orderable: false, searchable: false },
                { data: 'driver_name', name: 'driver_name' },
                { data: 'driver_mobile', name: 'driver_mobile' },
                { data: 'status_rh', name: 'status_rh' },
                { data: 'created_by_name', name: 'created_by_name' },
                { data: 'action', name: 'action', className: 'sticky-action-col text-center', orderable: false, searchable: false }
            ],
            order: [[1, 'desc']]
        });
    });

    function applyLogsFilter() {
        if (allLogsTable) {
            allLogsTable.ajax.reload();
        }
    }

    function resetLogsFilter() {
        $('#filter_date_range').val('');
        $('#filter_vehicle_id').val('');
        logsStartDate = null;
        logsEndDate = null;
        applyLogsFilter();
    }

    function editKm(id) {
        $.get('{{ url("vehicle-daily-kms") }}/' + id + '/edit', function(res) {
            if (res.success) {
                let d = res.data;
                $('#edit_id').val(d.id);
                $('#edit_date').val(d.date);
                $('#edit_time').val(d.time);
                $('#edit_place').val(d.place);
                $('#edit_start_km').val(d.start_km);
                $('#edit_end_km').val(d.end_km);
                $('#edit_today_km').val(d.today_km);
                $('#edit_gps_km').val(d.gps_km !== null ? d.gps_km : '');
                $('#edit_diff_km').val(d.diff_km);
                $('#edit_status_rh').val(d.status_rh);
                $('#edit_driver_id').val(d.driver_id || '');
                $('#edit_remarks').val(d.remarks || '');
                
                $('#editKmModal').modal('show');
            }
        });
    }

    function recalcEditKm() {
        let startKm = parseFloat($('#edit_start_km').val()) || 0;
        let endKm = parseFloat($('#edit_end_km').val()) || 0;
        let gpsKm = parseFloat($('#edit_gps_km').val()) || 0;

        let todayKm = endKm > startKm ? (endKm - startKm) : 0;
        $('#edit_today_km').val(endKm > 0 ? todayKm : 0);

        let diff = (endKm > 0 && gpsKm > 0) ? (endKm - gpsKm) : 0;
        $('#edit_diff_km').val((diff >= 0 ? '+' : '') + diff.toFixed(2) + ' KM');
    }

    $('#edit_end_km, #edit_gps_km').on('input change', function() {
        recalcEditKm();
    });

    $('#editKmForm').on('submit', function(e) {
        e.preventDefault();
        let id = $('#edit_id').val();
        let btn = $('#btnUpdateKm');
        btn.prop('disabled', true).text('Updating...');

        let formData = $(this).serializeArray();
        formData.push({ name: '_method', value: 'PUT' });

        $.ajax({
            url: '{{ url("vehicle-daily-kms") }}/' + id,
            type: 'POST',
            data: $.param(formData),
            success: function(res) {
                btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Update KM Entry');
                $('#editKmModal').modal('hide');
                if (allLogsTable) allLogsTable.ajax.reload();
            },
            error: function(xhr) {
                btn.prop('disabled', false).html('<i class="ri-save-line me-1"></i> Update KM Entry');
                let msg = 'Error updating entry';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                alert(msg);
            }
        });
    });

    function deleteKm(id) {
        if (confirm('Are you sure you want to delete this KM log entry?')) {
            $.ajax({
                url: '{{ url("vehicle-daily-kms") }}/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function() {
                    if (allLogsTable) allLogsTable.ajax.reload();
                }
            });
        }
    }
</script>
@endpush