@extends('layout.app')
@section('title', 'Log Daily KM - ' . ($selectedVehicle->vehicle_no ?? 'Select Truck'))

@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>
    .nnts-nav-tabs .nav-link {
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #4b5563;
        padding: 10px 18px;
        border: 1px solid transparent;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .nnts-nav-tabs .nav-link.active {
        color: #0284c7;
        background-color: #fff;
        border-color: #e5e7eb #e5e7eb #fff;
        border-top: 2px solid #0284c7;
    }
    .pending-service-box {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fafafa;
        padding: 15px;
        min-height: 240px;
    }
    #historyTable th, #historyTable 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 mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('vehicle-daily-kms.index') }}">Daily KM Tracking</a>
        </li>
        <li class="breadcrumb-item active">KM Entry: {{ $selectedVehicle->vehicle_no ?? 'New Entry' }}</li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('vehicle-daily-kms.index') }}" class="btn btn-sm btn-outline-primary">
            <i class="ri-arrow-go-back-line"></i> Back to List
        </a>
    </div>
</div>

<div class="app-body">
    <!-- @if(session('success_msg'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="ri-checkbox-circle-line me-2"></i> {{ session('success_msg') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif -->
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- NNTS Top Navigation Tabs -->
    <ul class="nav nav-tabs nnts-nav-tabs mb-3 border-bottom" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" href="{{ route('vehicle-daily-kms.create', ['vehicle_id' => $vehicleId]) }}">
                <i class="ri-speed-up-line me-1"></i> KM Entry
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('vehicle-services.index') }}">
                <i class="ri-tools-line me-1"></i> All Services
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{{ route('service-type.index') }}">
                <i class="ri-settings-3-line me-1"></i> Settings
            </a>
        </li>
    </ul>

    <div class="row g-3">
        <!-- KM Entry Form (Left 9 cols) -->
        <div class="col-lg-9 col-md-12">
            <div class="card border shadow-sm">
                <div class="card-body p-4">
                    <form action="{{ route('vehicle-daily-kms.store') }}" method="POST" id="dailyKmForm">
                        @csrf
                        @if(isset($redirectTo))
                            <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">
                        @endif

                        <div class="row g-3">
                            <!-- Row 1: Freight / Truck No, Entry Date, Entry Time -->
                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark mb-1">Truck / Vehicle No. <span class="text-danger">*</span></label>
                                <select name="vehicle_id" id="vehicle_id" class="form-select select2" required onchange="changeTruck(this.value)">
                                    <option value="">-- Select Truck --</option>
                                    @foreach($vehicles as $id => $vNo)
                                        <option value="{{ $id }}" {{ ($vehicleId == $id) ? 'selected' : '' }}>{{ $vNo }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark mb-1">Entry Date <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" name="date" id="date" value="{{ date('d-m-Y') }}" class="form-control datepicker" required>
                                    <span class="input-group-text bg-primary text-white"><i class="ri-calendar-line"></i></span>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark mb-1">Entry Time</label>
                                <div class="input-group">
                                    <input type="time" name="time" id="time" value="{{ date('H:i') }}" class="form-control">
                                    <span class="input-group-text"><i class="ri-time-line"></i></span>
                                </div>
                            </div>

                            <!-- Row 2: Place, Running KM (Odometer), Today KM (Auto-calculated, Readonly) -->
                            <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" name="place" id="place" class="form-control" placeholder="e.g. Mumbai, Jaipur Depot" required>
                            </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" name="end_km" id="end_km" class="form-control border-primary fw-bold" placeholder="Enter Odometer Reading" required>
                                <input type="hidden" name="start_km" id="start_km" value="0">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark mb-1">Today KM</label>
                                <input type="number" name="today_km" id="today_km" class="form-control bg-light fw-bold text-success border-success" placeholder="0" readonly>
                                <div class="text-danger small fw-bold mt-1" id="yesterday_km_text">Yesterday KM - 0</div>
                            </div>

                            <!-- Row 3: GPS KM, Difference in KM, Status (R/H) -->
                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark mb-1">GPS KM</label>
                                <input type="number" name="gps_km" id="gps_km" class="form-control" placeholder="Enter GPS KM" step="0.01" value="0">
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold text-dark mb-1">Difference in KM</label>
                                <input type="text" id="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 name="status_rh" id="status_rh" class="form-select" required>
                                    <option value="Running" selected>Running (R)</option>
                                    <option value="Halt">Halt (H)</option>
                                    <option value="Maintenance">Maintenance</option>
                                </select>
                                <input type="hidden" name="is_running" id="is_running" value="1">
                            </div>

                            <!-- Row 4: Driver Name, Driver Contact No -->
                            @if(!empty($assignedDriverId))
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark mb-1">
                                        Driver Name <span class="badge bg-success-subtle text-success ms-1" style="font-size: 11px;">Assigned</span>
                                    </label>
                                    <input type="text" class="form-control bg-light fw-bold text-dark" value="{{ $driverName }}" readonly title="Driver is assigned to this truck">
                                    <input type="hidden" name="driver_id" id="driver_id" value="{{ $assignedDriverId }}">
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark mb-1">Driver Contact No.</label>
                                    <input type="text" id="driver_contact" class="form-control bg-light" placeholder="Driver Mobile No." readonly value="{{ $driverContact }}">
                                </div>
                            @else
                                <div class="col-md-4">
                                    <label class="form-label fw-bold text-dark mb-1">Driver Name</label>
                                    <select name="driver_id" id="driver_id" class="form-select select2">
                                        <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-4">
                                    <label class="form-label fw-bold text-dark mb-1">Driver Contact No.</label>
                                    <input type="text" id="driver_contact" class="form-control bg-light" placeholder="Driver Mobile No." readonly value="">
                                </div>
                            @endif

                            <div class="col-md-4 d-flex align-items-end">
                                <button type="submit" class="btn btn-success px-4 py-2 fw-bold text-white shadow-sm w-100">
                                    <i class="ri-check-line"></i> Submit KM Entry
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Pending Servicing Widget (Right 3 cols) -->
        <div class="col-lg-3 col-md-12">
            <div class="pending-service-box shadow-sm">
                <div class="d-flex align-items-center justify-content-between border-bottom pb-2 mb-2">
                    <h6 class="m-0 fw-bold text-dark"><i class="ri-error-warning-line text-warning"></i> Pending Servicing</h6>
                </div>
                @if(!empty($pendingServices) && count($pendingServices) > 0)
                    <div class="list-group list-group-flush">
                        @foreach($pendingServices as $service)
                            <div class="list-group-item px-0 py-2 border-0">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fw-bold text-truncate" style="max-width: 150px;">{{ $service['name'] ?? 'Service' }}</span>
                                    <span class="badge bg-danger">Due</span>
                                </div>
                                <small class="text-muted d-block">
                                    @if(isset($service['km_overdue'])) Overdue by {{ number_format($service['km_overdue']) }} KM @endif
                                </small>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-muted py-4">
                        <i class="ri-checkbox-circle-line text-success fs-1 d-block mb-1"></i>
                        <span class="small">All servicing is up to date for this truck.</span>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Previous Logs Table for Selected Vehicle -->
    <div class="card border shadow-sm mt-4">
        <div class="card-header bg-white py-3 d-flex align-items-center justify-content-between">
            <h6 class="mb-0 fw-bold text-primary">
                <i class="ri-history-line me-1"></i> Previous Logs for {{ $selectedVehicle->vehicle_no ?? 'Selected Truck' }}
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table id="historyTable" class="table table-bordered table-hover truncate m-0 align-middle w-100" style="font-size: 12.5px;">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 40px;">S.No.</th>
                            <th>Date</th>
                            <th>Time</th>
                            <th>Place</th>
                            <th>Start KM</th>
                            <th>Running KM</th>
                            <th>Today KM</th>
                            <th>GPS KM</th>
                            <th>Diff in KM</th>
                            <th>Status</th>
                            <th>Driver Name</th>
                            <th>Contact No.</th>
                            <th>Created By</th>
                            <th class="sticky-action-col text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </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>
    var currentStartKm = 0;

    function changeTruck(vId) {
        if (vId) {
            window.location.href = "{{ route('vehicle-daily-kms.create') }}?vehicle_id=" + vId;
        }
    }

    function fetchLatestKm() {
        let vId = $('#vehicle_id').val();
        if (vId) {
            $.get('/vehicle-daily-kms/get-latest-km/' + vId, function(res) {
                currentStartKm = parseFloat(res.latest_km) || 0;
                $('#start_km').val(currentStartKm);
                $('#yesterday_km_text').text('Yesterday KM - ' + currentStartKm);
                recalcFromRunningKm();
            });
        }
    }

    function recalcFromRunningKm() {
        let runningKm = parseFloat($('#end_km').val()) || 0;
        let gpsKm = parseFloat($('#gps_km').val()) || 0;
        
        let todayKm = runningKm > currentStartKm ? (runningKm - currentStartKm) : 0;
        $('#today_km').val(runningKm > 0 ? todayKm : 0);

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

    $(document).ready(function() {
        fetchLatestKm();

        $('#end_km').on('input change', function() {
            recalcFromRunningKm();
        });

        $('#gps_km').on('input change', function() {
            let runningKm = parseFloat($('#end_km').val()) || 0;
            let gpsKm = parseFloat($(this).val()) || 0;
            let diff = (runningKm > 0 && gpsKm > 0) ? (runningKm - gpsKm) : 0;
            $('#diff_km').val((diff >= 0 ? '+' : '') + diff.toFixed(2) + ' KM');
        });

        $('#status_rh').on('change', function() {
            let val = $(this).val();
            $('#is_running').val(val === 'Running' ? 1 : 0);
        });

        $('#driver_id').on('change', function() {
            let mob = $(this).find(':selected').data('mobile') || '';
            $('#driver_contact').val(mob);
        });

        // Initialize DataTable
        $('#historyTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('vehicle-daily-kms.getData', ['vehicle_id' => $vehicleId]) }}",
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'date', name: 'date' },
                { data: 'time', name: 'time' },
                { data: 'place', name: 'place' },
                { 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: 'status_rh', name: 'status_rh' },
                { data: 'driver_name', name: 'driver_name' },
                { data: 'driver_mobile', name: 'driver_mobile' },
                { 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 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');
                $('#historyTable').DataTable().ajax.reload();
                fetchLatestKm();
            },
            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() {
                    $('#historyTable').DataTable().ajax.reload();
                }
            });
        }
    }
</script>
@endpush