@extends('layouts.admin')

@section('page_title', 'Gate Keberangkatan')
@section('title', 'Gate Keberangkatan')
@section('breadcrumb')
    <li><a href="{{ route('admin.checkout.gate') }}">Gate</a></li>
    <li class="active">Keberangkatan</li>
@endsection

@push('css')
<style>
    .gate-departure-page {
        min-height: calc(100vh - 180px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .gate-card {
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08);
        overflow: hidden;
        width: 100%;
        max-width: 520px;
        margin: 0 auto;
    }
    .gate-header {
        background: linear-gradient(135deg, #00d52e 0%, #009e23 100%);
        padding: 28px 24px;
        text-align: center;
        color: #fff;
    }
    .gate-header h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .gate-header p {
        margin: 6px 0 0;
        opacity: 0.85;
        font-size: 14px;
    }
    .gate-body {
        padding: 32px 24px;
    }
    .scan-area {
        text-align: center;
    }
    .scan-icon {
        width: 90px;
        height: 90px;
        background: #f0f4f8;
        border: 3px dashed #00d52e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        animation: gatePulse 2s ease-in-out infinite;
    }
    @keyframes gatePulse {
        0%, 100% { border-color: #c8e6c9; transform: scale(1); }
        50% { border-color: #00d52e; transform: scale(1.03); }
    }
    .scan-icon i {
        font-size: 36px;
        color: #00d52e;
    }
    .scan-hint {
        font-size: 14px;
        color: #8b949e;
        margin-bottom: 20px;
    }
    .gate-input-wrap input {
        width: 100%;
        padding: 16px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        font-size: 18px;
        text-align: center;
        font-family: 'Courier New', monospace;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #333;
        transition: border-color 0.2s;
    }
    .gate-input-wrap input:focus {
        outline: none;
        border-color: #00d52e;
        box-shadow: 0 0 0 3px rgba(0,213,46,0.1);
    }
    .gate-input-wrap input::placeholder {
        font-family: 'Segoe UI', sans-serif;
        letter-spacing: 0;
        text-transform: none;
        font-size: 15px;
        color: #aaa;
    }
    .btn-gate-depart {
        width: 100%;
        padding: 16px;
        background: #00d52e;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
        margin-top: 12px;
        transition: all 0.2s;
        text-transform: uppercase;
    }
    .btn-gate-depart:hover { background: #00b526; transform: translateY(-1px); }
    .btn-gate-depart:active { transform: translateY(0); }
    .btn-gate-depart:disabled { background: #ccc; cursor: not-allowed; transform: none; }

    /* Result */
    .result-area { display: none; }
    .result-area.show { display: block; }
    .scan-area.hidden { display: none; }

    .result-badge {
        display: inline-block;
        padding: 4px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 8px;
    }
    .badge-ready { background: #e8f5e9; color: #00d52e; border: 1px solid #00d52e; }
    .badge-success { background: #e3f2fd; color: #1976d2; border: 1px solid #1976d2; }
    .badge-error { background: #ffebee; color: #d32f2f; border: 1px solid #d32f2f; }

    .driver-info-box {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 16px;
        margin: 16px 0;
        border-left: 4px solid #00d52e;
    }
    .driver-info-box table { width: 100%; }
    .driver-info-box th {
        color: #888;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
        padding: 2px 0;
        font-weight: 600;
    }
    .driver-info-box td {
        font-size: 16px;
        font-weight: 700;
        color: #222;
        padding: 2px 0 10px;
    }
    .driver-info-box tr:last-child td { padding-bottom: 0; }

    .btn-depart-action {
        width: 100%;
        padding: 18px;
        background: #00d52e;
        color: #fff;
        border: none;
        border-radius: 12px;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 1px;
        cursor: pointer;
        margin-top: 12px;
        transition: all 0.2s;
        text-transform: uppercase;
    }
    .btn-depart-action:hover { background: #00b526; }
    .btn-depart-action:active { transform: scale(0.98); }

    .reset-link {
        display: block;
        text-align: center;
        margin-top: 16px;
        color: #888;
        font-size: 13px;
        cursor: pointer;
        text-decoration: none;
    }
    .reset-link:hover { color: #333; }

    .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,0.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        vertical-align: middle;
        margin-right: 6px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    .recent-departures {
        margin-top: 32px;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
    }
    .recent-departures h5 {
        font-size: 14px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }
    .recent-departures table {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    }
    .recent-departures table th {
        background: #f0f4f8;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #888;
        font-weight: 600;
        padding: 10px 12px;
    }
    .recent-departures table td {
        padding: 10px 12px;
        font-size: 13px;
        vertical-align: middle;
    }
</style>
@endpush

@section('content')
<div class="gate-departure-page">
    <div class="gate-card">
        <div class="gate-header">
            <h2><i class="fa fa-sign-out"></i> Gate Keberangkatan</h2>
            <p>Tap Vehicle Card untuk mencatat keberangkatan armada</p>
        </div>
        <div class="gate-body">

            {{-- SCAN AREA --}}
            <div class="scan-area" id="scanArea">
                <div class="scan-icon">
                    <i class="fa fa-truck"></i>
                </div>
                <p class="scan-hint">Arahkan kartu kendaraan ke scanner NFC / RFID<br>atau ketik Vehicle Card ID di bawah ini</p>

                <div class="gate-input-wrap">
                    <input type="text"
                        id="vehicleCardInput"
                        placeholder="Ketik atau tap Vehicle Card ID"
                        autocomplete="off"
                        autofocus>
                </div>

                <button class="btn-gate-depart" id="btnResolve" onclick="resolveVehicle()">
                    PROSES KEBERANGKATAN
                </button>
            </div>

            {{-- RESULT AREA --}}
            <div class="result-area" id="resultArea">
                <div style="text-align:center; margin-bottom: 16px;">
                    <span class="result-badge" id="resultBadge"></span>
                    <h4 id="resultTitle" style="margin:4px 0 0;font-size:18px;"></h4>
                </div>

                <div class="driver-info-box" id="driverInfoBox">
                    <table>
                        <tr><th>DRIVER</th></tr>
                        <tr><td id="infoDriver">-</td></tr>
                        <tr><th>KENDARAAN</th></tr>
                        <tr><td id="infoVehicle">-</td></tr>
                        <tr><th>WAKTU CHECKOUT</th></tr>
                        <tr><td id="infoCheckout">-</td></tr>
                        <tr id="haulingRow" style="display:none"><th>HAULING TERAKHIR</th></tr>
                        <tr id="haulingDataRow" style="display:none"><td id="infoHauling">-</td></tr>
                    </table>
                </div>

                <div id="actionArea"></div>

                <a class="reset-link" onclick="resetForm()">
                    <i class="fa fa-refresh"></i> &nbsp;Scan Kendaraan Lain
                </a>
            </div>

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

{{-- Recent departures today --}}
{{-- @php
    $recentDepartures = \App\Models\CheckoutKendaraan::with(['supir', 'kendaraan'])
        ->whereNotNull('leave_date')
        ->where('leave_date', now()->toDateString())
        ->orderByDesc('leave_time')
        ->limit(5)
        ->get();
@endphp --}}
{{-- @if($recentDepartures->count() > 0)
<div class="recent-departures">
    <h5><i class="fa fa-clock-o"></i> &nbsp;Keberangkatan Hari Ini</h5>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Jam</th>
                <th>Driver</th>
                <th>Kendaraan</th>
            </tr>
        </thead>
        <tbody>
            @foreach($recentDepartures as $dep)
            <tr>
                <td>{{ $dep->leave_time }}</td>
                <td>{{ $dep->supir->nama_supir ?? '-' }}</td>
                <td>{{ $dep->kendaraan->no_lambung ?? '-' }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endif --}}
@endsection

@push('js')
<script>
    var currentCheckoutId = null;
    var csrfToken = document.querySelector('meta[name="csrf-token"]').content;

    function resolveVehicle() {
        var card = document.getElementById('vehicleCardInput').value.trim();
        if (!card) {
            alert('Masukkan Vehicle Card ID terlebih dahulu.');
            return;
        }

        var btn = document.getElementById('btnResolve');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner"></span> Memproses...';

        fetch('/gate-out/resolve', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ vehicle_id: card }),
        })
        .then(function(r) {
            if (!r.ok) {
                return r.json().then(function(err) {
                    throw { status: r.status, data: err };
                });
            }
            return r.json();
        })
        .then(data => {
            btn.disabled = false;
            btn.innerHTML = 'PROSES KEBERANGKATAN';

            if (data.success) {
                showReady(data);
            } else {
                showError(data.error || 'Terjadi kesalahan.', data);
            }
        })
        .catch(function(err) {
            btn.disabled = false;
            btn.innerHTML = 'PROSES KEBERANGKATAN';
            var msg = 'Tidak dapat terhubung ke server.';
            if (err && err.data) {
                var errData = err.data;
                if (err.status === 422) {
                    // Validation error — ambil pesan dari Laravel
                    var msgs = Object.values(errData.errors || {}).flat();
                    msg = msgs.length > 0 ? msgs.join(', ') : (errData.message || 'Validasi gagal.');
                } else {
                    msg = errData.error || errData.message || msg;
                }
            }
            showError(msg, err && err.data ? err.data : null);
        });
    }

    function showReady(data) {
        currentCheckoutId = data.checkout_id;

        document.getElementById('resultBadge').className = 'result-badge badge-ready';
        document.getElementById('resultBadge').textContent = 'Siap Berangkat';
        document.getElementById('resultTitle').textContent = 'Kendaraan Ditemukan';
        document.getElementById('infoDriver').textContent = data.supir.nama;
        document.getElementById('infoVehicle').textContent = data.kendaraan.no_lambung;
        document.getElementById('infoCheckout').textContent = data.checkout_at;

        // Tampilkan info hauling terakhir (jika ada)
        var haulingRow = document.getElementById('haulingRow');
        var haulingDataRow = document.getElementById('haulingDataRow');
        if (data.last_hauling) {
            var haulingLabel = '#' + (data.last_hauling.hauling_number || data.last_hauling.id_hauling);
            if (data.last_hauling.departure_date) {
                haulingLabel += ' | Berangkat ' + data.last_hauling.departure_date + ' ' + (data.last_hauling.departure_time || '');
            }
            document.getElementById('infoHauling').textContent = haulingLabel;
            haulingRow.style.display = '';
            haulingDataRow.style.display = '';
        } else {
            haulingRow.style.display = 'none';
            haulingDataRow.style.display = 'none';
        }

        document.getElementById('actionArea').innerHTML =
            '<button class="btn-depart-action" onclick="doGateOut()">' +
                '<i class="fa fa-sign-out"></i> KEBERANGKATAN' +
            '</button>';

        document.getElementById('scanArea').classList.add('hidden');
        document.getElementById('resultArea').classList.add('show');
    }

    function showSuccess(data) {
        document.getElementById('resultBadge').className = 'result-badge badge-success';
        document.getElementById('resultBadge').textContent = 'Berhasil';
        document.getElementById('resultTitle').textContent = data.message || 'Keberangkatan Tercatat!';
        document.getElementById('actionArea').innerHTML =
            '<div style="text-align:center;color:#1976d2;font-size:14px;margin-top:12px;">' +
                '<i class="fa fa-check-circle" style="font-size:32px;display:block;margin-bottom:8px;"></i>' +
                'Waktu: ' + (data.time || new Date().toLocaleString('id-ID')) +
            '</div>';
    }

    function showError(msg, data) {
        document.getElementById('resultBadge').className = 'result-badge badge-error';
        document.getElementById('resultBadge').textContent = 'Gagal';
        document.getElementById('resultTitle').textContent = msg;
        document.getElementById('infoDriver').textContent = data?.supir?.nama || '-';
        document.getElementById('infoVehicle').textContent = data?.kendaraan?.no_lambung || '-';
        document.getElementById('infoCheckout').textContent = data?.checkout_at || '-';
        document.getElementById('actionArea').innerHTML = '';

        document.getElementById('scanArea').classList.add('hidden');
        document.getElementById('resultArea').classList.add('show');
    }

    function doGateOut() {
        if (!currentCheckoutId) return;

        var btn = event.target;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner"></span> Mencatat...';

        fetch('/gate-out/do', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
            },
            body: JSON.stringify({ checkout_id: currentCheckoutId }),
        })
        .then(function(r) {
            if (!r.ok) {
                return r.json().then(function(err) {
                    throw { status: r.status, data: err };
                });
            }
            return r.json();
        })
        .then(data => {
            if (data.success) {
                showSuccess(data);
                // Refresh page after 2s to update recent departures
                setTimeout(function() { location.reload(); }, 2500);
            } else {
                btn.disabled = false;
                btn.innerHTML = '<i class="fa fa-sign-out"></i> KEBERANGKATAN';
                showError(data.error || 'Gate out gagal.', data);
            }
        })
        .catch(function(err) {
            btn.disabled = false;
            btn.innerHTML = '<i class="fa fa-sign-out"></i> KEBERANGKATAN';
            var msg = 'Tidak dapat terhubung ke server.';
            if (err && err.data) {
                msg = err.data.error || err.data.message || msg;
            }
            showError(msg);
        });
    }

    function resetForm() {
        currentCheckoutId = null;
        document.getElementById('vehicleCardInput').value = '';
        document.getElementById('scanArea').classList.remove('hidden');
        document.getElementById('resultArea').classList.remove('show');
        document.getElementById('haulingRow').style.display = 'none';
        document.getElementById('haulingDataRow').style.display = 'none';
        document.getElementById('vehicleCardInput').focus();
    }

    // Enter key triggers resolve
    document.getElementById('vehicleCardInput').addEventListener('keyup', function(e) {
        if (e.key === 'Enter') resolveVehicle();
    });

    // Auto-focus on load
    window.addEventListener('load', function() {
        document.getElementById('vehicleCardInput').focus();
    });

    // Keep session alive — ping setiap 60 detik
    setInterval(function() {
        fetch('/gate-keep-alive', {
            method: 'GET',
            headers: { 'Accept': 'application/json' }
        }).catch(function() {});
    }, 60000);
</script>
@endpush