@extends('m3::liberty-theme.layout.main')
@section('title')
Solon Sentinel Portal - Scan Boxes To Pallet
@endsection
@section('content')
    <div class="container-fluid px-4">
        <h1 class="mt-4">Scan Boxes To Pallet</h1>
        <div class="card mb-4">
            <div class="card-header">
                <form id="palletForm" method="GET" action="{{ route('m3.BoxPackToPallet.getboxes') }}">
                    <div class="d-flex align-items-center gap-2">
                        <label for="R659PALT" class="col-form-label text-nowrap">Scan Pallet</label>
                        <input type="text"
                               id="R659PALT"
                               class="form-control"
                               name="R659PALT"
                               placeholder="S000000000000"
                               maxlength="12"
                               value=""
                               style="max-width: 220px;">
                        <div id="palletError" class="text-danger small" style="display:none;"></div>
                        <button type="submit" class="btn btn-primary text-nowrap">Scan Pallet</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $('#palletForm').on('submit', function (e) {
            const val = $('#R659PALT').val().trim();
            const $error = $('#palletError');

            if (!val.startsWith('S')) {
                e.preventDefault();
                $error.text('Pallet must start with "S".').show();
                $('#R659PALT').addClass('is-invalid');
                return;
            }

            if (val.length > 12) {
                e.preventDefault();
                $error.text('Pallet must be 12 characters max.').show();
                $('#R659PALT').addClass('is-invalid');
                return;
            }

            $error.hide();
            $('#R659PALT').removeClass('is-invalid');
        });

        // Clear error on input
        $('#R659PALT').on('input', function () {
            $('#palletError').hide();
            $(this).removeClass('is-invalid');
        });

        $('#R659PALT').on('change', function () {
            $('#palletForm').submit();
        });

    });
</script>
@endsection