@extends('layouts.admin')
@section('title', 'Check-out Armada Baru')
@section('page_title', 'Check-out Armada Baru')
@section('breadcrumb')
    <li><a href="{{ route('admin.checkout.index') }}">Check out Armada</a></li>
    <li class="active">Baru</li>
@endsection

@push('css')
<style>
    .checkout-fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 160px);
        padding: 20px 0;
    }
    .checkout-card {
        width: 100%;
        max-width: 600px;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    }
    .checkout-card .card-header {
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        color: #fff;
        padding: 24px 28px;
        border-radius: 16px 16px 0 0;
    }
    .checkout-card .card-header h4 {
        color: #fff;
        margin: 0;
        font-size: 22px;
        font-weight: 700;
    }
    .checkout-card .card-body {
        padding: 28px;
    }
    .checkout-card .card-footer {
        padding: 20px 28px;
        border-radius: 0 0 16px 16px;
        background: #f8f9fa;
        border-top: 1px solid #eee;
    }
    .scan-hint {
        font-size: 15px;
        color: #6c757d;
        margin-bottom: 20px;
        padding: 12px 16px;
        background: #eaf4ea;
        border-radius: 8px;
        border-left: 4px solid #28a745;
    }
    .scan-hint i {
        color: #28a745;
        margin-right: 6px;
    }
    .form-group label {
        font-weight: 600;
        font-size: 15px;
        margin-bottom: 8px;
        color: #333;
    }
    .form-control-lg {
        height: 60px !important;
        font-size: 20px !important;
        font-family: 'Courier New', monospace;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
        border-radius: 10px !important;
        border: 2px solid #ced4da;
    }
    .form-control-lg:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40,167,69,0.15);
    }
    .btn-checkout {
        background: #28a745;
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 16px 32px;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        width: 100%;
        cursor: pointer;
        transition: all 0.2s;
    }
    .btn-checkout:hover {
        background: #218838;
        transform: translateY(-1px);
    }
    .btn-checkout:active {
        transform: translateY(0);
    }
    .btn-checkout:disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
    }
    .btn-batal {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 12px;
        border-radius: 10px;
        text-align: center;
        color: #6c757d;
        text-decoration: none;
        font-size: 15px;
        transition: all 0.2s;
    }
    .btn-batal:hover {
        background: #e9ecef;
        color: #333;
    }
    .step-indicator {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
        gap: 8px;
    }
    .step {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #dee2e6;
    }
    .step.active {
        background: #28a745;
        width: 32px;
        border-radius: 6px;
    }
    .form-control-lg.next-focus {
        border-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40,167,69,0.2);
    }
</style>
@endpush

@section('content')
<div class="checkout-fullscreen">
    <div class="checkout-card">
        <div class="card-header">
            <h4><i class="fa fa-truck"></i> &nbsp;Check-out Armada</h4>
        </div>
        <form method="POST" action="{{ route('admin.checkout.store') }}" id="checkout-form">
            @csrf
            <div class="card-body">
                @if(session('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                @endif

                <div class="scan-hint">
                    <i class="icon-info"></i> Tap Vehicle Card, lalu tap Driver Card untuk checkout armada.
                </div>

                <div class="step-indicator">
                    <div class="step active"></div>
                    <div class="step"></div>
                </div>

                <div class="form-group">
                    <label>Vehicle ID (Vehicle Card)</label>
                    <input type="text"
                        name="vehicle_id"
                        id="vehicle_id"
                        class="form-control form-control-lg"
                        value="{{ old('vehicle_id') }}"
                        placeholder="TAP VEHICLE CARD"
                        autocomplete="off"
                        required>
                    @error('vehicle_id')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label>Driver Card</label>
                    <input type="text"
                        name="driver_card"
                        id="driver_card"
                        class="form-control form-control-lg"
                        value="{{ old('driver_card') }}"
                        placeholder="TAP DRIVER CARD"
                        autocomplete="off"
                        required>
                    @error('driver_card')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="card-footer">
                <button type="button" class="btn-checkout" id="btn-checkout-submit">
                    <i class="fa fa-sign-out"></i> &nbsp;Check-out Sekarang
                </button>
                <a href="{{ route('admin.checkout.index') }}" class="btn-batal">
                    Batal
                </a>
            </div>
        </form>
    </div>
</div>
@endsection

@push('js')
<script>
$(function() {
    var vehicleFilled = false;
    var driverFilled = false;

    // Handle input: debounce + move to next field when value is filled
    function handleCardInput($input, $next, onFilled) {
        var timeout;
        $input.on('input', function() {
            clearTimeout(timeout);
            var val = $(this).val().trim();
            timeout = setTimeout(function() {
                if (val.length > 0) {
                    $input.addClass('next-focus');
                    if (onFilled) onFilled();
                    if ($next && $next.length) {
                        $next.focus();
                    }
                }
            }, 150);
        });

        // Enter key also moves to next
        $input.on('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                var val = $(this).val().trim();
                if (val.length > 0) {
                    $input.addClass('next-focus');
                    if (onFilled) onFilled();
                    if ($next && $next.length) {
                        $next.focus();
                        // Trigger input event on next field to handle any auto-fill
                        $next.trigger('input');
                    }
                }
            }
        });
    }

    var $vehicle = $('#vehicle_id');
    var $driver  = $('#driver_card');

    handleCardInput($vehicle, $driver, function() { vehicleFilled = true; });
    handleCardInput($driver, null,        function() { driverFilled  = true; });

    // Focus vehicle_id on load
    $vehicle.focus();

    $('#btn-checkout-submit').on('click', function() {
        var vehicleId = $('#vehicle_id').val().trim();
        var driverCard = $('#driver_card').val().trim();

        if (!vehicleId) {
            Swal.fire({
                icon: 'warning',
                title: 'Data Belum Lengkap',
                text: 'Vehicle ID wajib diisi.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#f0ad4e'
            });
            $('#vehicle_id').focus();
            return;
        }
        if (!driverCard) {
            Swal.fire({
                icon: 'warning',
                title: 'Data Belum Lengkap',
                text: 'Driver Card wajib diisi.',
                confirmButtonText: 'OK',
                confirmButtonColor: '#f0ad4e'
            });
            $('#driver_card').focus();
            return;
        }

        Swal.fire({
            title: 'Check-out Armada?',
            html: 'Pastikan data sudah benar.<br><br>' +
                  '<strong>Vehicle ID:</strong> ' + vehicleId + '<br>' +
                  '<strong>Driver Card:</strong> ' + driverCard,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: '<i class="fa fa-sign-out"></i> Ya, Check-out',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            reverseButtons: true,
        }).then((result) => {
            if (result.isConfirmed) {
                $('#checkout-form').submit();
            }
        });
    });

    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: '{{ session('success') }}',
            confirmButtonText: 'OK',
            confirmButtonColor: '#28a745',
            timer: 4000,
            timerProgressBar: true
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Gagal',
            text: '{{ session('error') }}',
            confirmButtonText: 'OK',
            confirmButtonColor: '#dc3545'
        });
    @endif
});
</script>
@endpush