@extends('layout.app')
@section('title', 'Log Daily KM - ' . ($selectedVehicle->vehicle_no ?? 'Choose 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')}}">
@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">Log KM: {{ $selectedVehicle->vehicle_no ?? 'New' }}</li>
    </ol>
</div>

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

        <div class="col-md-12">

            {{-- Entry Form --}}
            <div class="card mb-4 border-0 shadow-sm">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
                    {{-- <h5 class="mb-0">Record Daily Mileage</h5> --}}
                    @if($selectedVehicle)
                    <span class="badge bg-light text-primary">Truck: {{ $selectedVehicle->vehicle_no }}</span>
                    @endif
                </div>
                <div class="card-body bg-light">
                    <form action="{{ route('vehicle-daily-kms.store') }}" method="POST">
                        @csrf
                        <input type="hidden" name="vehicle_id" id="vehicle_id" value="{{ $vehicleId }}">
                        @if(isset($redirectTo))
                        <input type="hidden" name="redirect_to" value="{{ $redirectTo }}">
                        @endif

                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label mt-0">Log Date *</label>
                                <input type="text" name="date" value="{{ date('d-m-Y') }}" class="form-control datepicker" required>
                            </div>

                            <div class="col-md-2 d-flex align-items-end px-4">
                                <div class="form-check form-switch mb-2">
                                    <input class="form-check-input" type="checkbox" name="is_running" id="is_running" value="1" checked>
                                    <label class="form-check-label fw-bold">Vehicle Running</label>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mt-0">Start KM reading</label>
                                <input type="number" name="start_km" id="start_km" class="form-control bg-light fw-bold" readonly>
                            </div>

                            <div class="col-md-2">
                                <label class="form-label mt-0">End KM reading *</label>
                                <input type="number" name="end_km" id="end_km" class="form-control border-primary" placeholder="Enter odometer" required>
                                @error('end_km') <small class="text-danger">{{ $message }}</small> @enderror
                            </div>

                            <div class="col-md-1">
                                <label class="form-label mt-0 text-muted">Total KM</label>
                                <input type="number" id="total_km" class="form-control fw-bold text-success border-0 bg-transparent" readonly value="0">
                            </div>

                            <div class="col-md-2 d-flex align-items-end">
                                <button type="submit" class="btn btn-success w-100 shadow-sm">
                                     Save
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-2">
                    <h6 class="mb-0 text-primary">Previous Logs for {{ $selectedVehicle->vehicle_no ?? 'this vehicle' }}</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="historyTable" class="table truncate m-0 align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Start KM</th>
                                    <th>End KM</th>
                                    <th>Total KM</th>
                                    <th>Created By</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                        </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/daterange/daterange.js') }}"></script>
<script>
    $(".datepicker").daterangepicker({
        singleDatePicker: true,
        locale: {
            format: "DD-MM-YYYY",
        },
    });

    $(document).ready(function() {
        const vehicleId = "{{ $vehicleId }}";

        if (vehicleId) {
            // 1. Fetch Latest KM
            $.get('/vehicle-daily-kms/get-latest-km/' + vehicleId, function(data) {
                $('#start_km').val(data.latest_km);
                $('#end_km').focus();

                // Allow manual input ONLY if start_km is 0 (First entry)
                if (data.latest_km == 0) {
                    $('#start_km').prop('readonly', false).addClass('border-warning');
                } else {
                    $('#start_km').prop('readonly', true).removeClass('border-warning');
                }
            });

            // 3. Init History DataTable
            $('#historyTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('vehicle-daily-kms.getData') }}",
                    data: {
                        vehicle_id: vehicleId
                    }
                },
                columns: [{
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'is_running',
                        name: 'is_running'
                    },
                    {
                        data: 'start_km',
                        name: 'start_km'
                    },
                    {
                        data: 'end_km',
                        name: 'end_km'
                    },
                    {
                        data: 'total_km',
                        name: 'total_km'
                    },
                    {
                        data: 'creator.name',
                        name: 'creator.name',
                        defaultContent: '-'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ]
            });
        }

        // Calculate Total KM
        $('#end_km').on('input', function() {
            let start = parseFloat($('#start_km').val()) || 0;
            let end = parseFloat($(this).val()) || 0;
            let total = end - start;
            $('#total_km').val(total > 0 ? total : 0);
        });

        // Running Toggle
        $('#is_running').on('change', function() {
            let start = parseFloat($('#start_km').val()) || 0;
            if ($(this).is(':checked')) {
                $('#end_km').prop('disabled', false).val('').focus();
            } else {
                $('#end_km').val(start).prop('disabled', true);
                $('#total_km').val(0);
            }
        });
    });

    function deleteKm(id) {
        if (confirm('Delete this KM log?')) {
            $.ajax({
                url: "{{ url('vehicle-daily-kms') }}/" + id,
                type: 'DELETE',
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function() {
                    $('#historyTable').DataTable().ajax.reload();
                    location.reload();
                }
            });
        }
    }
</script>
@endpush