@extends('layouts.admin')
@section('title', 'Driver Scan')
@section('page_title', 'Driver Scan')
@section('content')
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="card text-center">
            <div class="card-header">
                <h3 class="text-black">
                    <i class="fa fa-qrcode"></i> SCAN KARTU DRIVER
                </h3>
                <p class="text-muted">Tap kartu driver untuk memilih aksi</p>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="fa fa-info-circle"></i>
                    Arahkan kartu driver ke scanner QR / RFID
                </div>

                <form id="scanForm">
                    <div class="form-group">
                        <input type="text" id="driver_card" name="driver_card"
                            class="form-control text-center input-lg"
                            placeholder="Tap atau ketik Driver Card ID"
                            autocomplete="off" autofocus required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg btn-block">
                        <i class="fa fa-search"></i> PROSES
                    </button>
                </form>

                {{-- Result area --}}
                <div id="resultArea" class="mt-3" style="display:none">
                    <div id="resultMessage" class="alert"></div>
                    <div id="driverInfo" class="text-left" style="display:none">
                        <table class="table table-bordered">
                            <tr><th>Driver</th><td id="driverName">-</td></tr>
                            <tr><th>Kendaraan</th><td id="vehicleNo">-</td></tr>
                        </table>
                    </div>
                    <div id="actionButtons" class="mt-2" style="display:none">
                        <a href="{{ route('driver.hauling.input') }}" class="btn btn-primary btn-lg btn-block" style="display:none" id="btnHauling">
                            <i class="fa fa-truck"></i> INPUT HAULING RECEIPT
                        </a>
                        <button id="btnArrive" class="btn btn-success btn-lg btn-block" style="display:none">
                            <i class="fa fa-sign-in"></i> TIBA DI REST AREA
                        </button>
                        <button id="btnFinish" class="btn btn-warning btn-lg btn-block" style="display:none">
                            <i class="fa fa-check-circle"></i> SELESAI BERTUGAS
                        </button>
                        <a id="btnTripRecap" href="#" class="btn btn-info btn-lg btn-block" style="display:none">
                            <i class="fa fa-file-text-o"></i> LIHAT REKAP TRIP
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
(function() {
    var form = document.getElementById('scanForm');
    var resultArea = document.getElementById('resultArea');
    var resultMessage = document.getElementById('resultMessage');
    var driverInfo = document.getElementById('driverInfo');
    var actionButtons = document.getElementById('actionButtons');
    var btnArrive = document.getElementById('btnArrive');
    var btnFinish = document.getElementById('btnFinish');
    var btnTripRecap = document.getElementById('btnTripRecap');

    var currentCheckoutId = null;

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        var card = document.getElementById('driver_card').value.trim();
        if (!card) return;

        fetch('/driver/resolve', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ driver_card: card }),
        })
        .then(r => r.json())
        .then(data => {
            resultArea.style.display = 'block';
            driverInfo.style.display = 'block';
            actionButtons.style.display = 'block';

            if (!data.success) {
                resultMessage.className = 'alert alert-danger';
                resultMessage.innerHTML = '<i class="fa fa-exclamation-triangle"></i> ' + (data.error || 'Error tidak dikenal.');
                driverInfo.style.display = 'none';
                actionButtons.style.display = 'none';
                currentCheckoutId = null;
                return;
            }

            document.getElementById('driverName').textContent = data.supir.nama;
            document.getElementById('vehicleNo').textContent = data.kendaraan.no_lambung;
            currentCheckoutId = data.checkout_id;

            btnArrive.style.display = 'none';
            btnFinish.style.display = 'none';
            btnTripRecap.style.display = 'none';
            btnHauling.style.display = 'none';

            if (data.action === 'arrive') {
                resultMessage.className = 'alert alert-success';
                resultMessage.innerHTML = '<i class="fa fa-check"></i> Driver ditemukan. Status: <strong>BELUM TIBA</strong>.';
                btnArrive.style.display = 'block';
            } else if (data.action === 'finish') {
                resultMessage.className = 'alert alert-warning';
                resultMessage.innerHTML = '<i class="fa fa-hourglass-half"></i> Driver sudah tiba. Status: <strong>TIBA di Rest Area</strong>.';
                btnHauling.style.display = 'block';
                btnFinish.style.display = 'block';
                btnTripRecap.href = '/driver/trip-recap/' + data.checkout_id;
                btnTripRecap.style.display = 'block';
            } else {
                resultMessage.className = 'alert alert-info';
                resultMessage.innerHTML = '<i class="fa fa-check-circle"></i> Trip ini sudah selesai.';
                document.getElementById('driver_card').value = '';
            }
        })
        .catch(err => {
            resultArea.style.display = 'block';
            resultMessage.className = 'alert alert-danger';
            resultMessage.innerHTML = '<i class="fa fa-times-circle"></i> Gagal terhubung ke server.';
        });
    });

    btnArrive && btnArrive.addEventListener('click', function() {
        if (!currentCheckoutId) return;
        doAction('/driver/arrive', currentCheckoutId, function(data) {
            resultMessage.className = 'alert alert-success';
            resultMessage.innerHTML = '<i class="fa fa-sign-in"></i> ' + data.message;
            btnArrive.style.display = 'none';
            btnFinish.style.display = 'block';
            btnTripRecap.href = '/driver/trip-recap/' + currentCheckoutId;
            btnTripRecap.style.display = 'block';
        });
    });

    btnFinish && btnFinish.addEventListener('click', function() {
        if (!currentCheckoutId) return;
        if (!confirm('Yakin selesai bertugas? Driver dan kendaraan akan kembali tersedia untuk trip berikutnya.')) return;
        doAction('/driver/finish', currentCheckoutId, function(data) {
            resultMessage.className = 'alert alert-success';
            resultMessage.innerHTML = '<i class="fa fa-check-circle"></i> ' + data.message;
            btnFinish.style.display = 'none';
            btnTripRecap.style.display = 'none';
            document.getElementById('driver_card').value = '';
        });
    });

    function doAction(url, checkoutId, onSuccess) {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ checkout_id: checkoutId }),
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) onSuccess(data);
            else {
                resultMessage.className = 'alert alert-danger';
                resultMessage.innerHTML = '<i class="fa fa-exclamation-triangle"></i> ' + (data.error || 'Error.');
            }
        })
        .catch(() => {
            resultMessage.className = 'alert alert-danger';
            resultMessage.innerHTML = '<i class="fa fa-times-circle"></i> Gagal terhubung ke server.';
        });
    }
})();
</script>
@endpush