@extends('cargo_company.templates.layout')

@section('head')
<style>
    .create-head {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 16px; margin-bottom: 18px; flex-wrap: wrap;
    }
    .create-head h5 { font-size: 17px; font-weight: 700; color: #0f172a; margin: 0 0 3px; }
    .create-head p { font-size: 13px; color: #64748b; margin: 0; }
    .create-head .ref {
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        font-size: 12.5px; font-weight: 600; color: #3b5bfd;
    }

    /* ═══ Transporter card ═══ */
    .transporter-card .card-body { padding: 22px; }
    .transporter-card label {
        font-size: 12px; font-weight: 600; color: #334155;
        text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
    }
    .transporter-card .form-control {
        height: 46px; font-size: 15px;
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        padding: 0 16px;
    }
    .transporter-card .form-control::placeholder {
        text-transform: none; letter-spacing: 0;
        font-family: inherit; font-weight: 400;
        color: #94a3b8;
    }
    .transporter-card .form-control.is-valid {
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16,185,129,.12);
    }
    .transporter-card .form-control.is-invalid {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239,68,68,.12);
    }
    .transporter-card .hint {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12.5px; color: #64748b; margin-top: 10px;
    }
    .transporter-card .hint i { color: #3b5bfd; font-size: 15px; }

    /* ═══ Live feedback — shows CODE only ═══ */
    .transporter-feedback {
        display: none;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
        font-size: 13px;
        padding: 12px 16px;
        border-radius: 8px;
        line-height: 1.4;
    }
    .transporter-feedback.show { display: flex; }
    .transporter-feedback > i { font-size: 20px; flex-shrink: 0; }
    .transporter-feedback .code-label {
        font-family: 'SF Mono', ui-monospace, 'Menlo', monospace;
        font-weight: 700;
        letter-spacing: .8px;
        font-size: 14px;
    }
    .transporter-feedback .spinner-sm {
        width: 18px; height: 18px;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: tfeed-spin .7s linear infinite;
        display: inline-block;
        flex-shrink: 0;
    }
    @keyframes tfeed-spin { to { transform: rotate(360deg); } }

    .transporter-feedback.success { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
    .transporter-feedback.error   { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
    .transporter-feedback.loading { background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; }

    /* ═══ Items card ═══ */
    .items-card .card-header {
        display: flex; justify-content: space-between; align-items: center;
        padding: 16px 20px; border-bottom: 1px solid #e9edf2; background: #fff;
    }
    .items-card .card-header h5 { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
    .items-card .card-header p { font-size: 12.5px; color: #64748b; margin: 2px 0 0; }

    .items-card table thead th {
        background: #fafbfd; font-size: 11px; font-weight: 700; color: #64748b;
        text-transform: uppercase; letter-spacing: .6px;
        padding: 12px 20px; border-bottom: 1px solid #e9edf2; white-space: nowrap;
    }
    .items-card table tbody td {
        padding: 12px 20px; font-size: 13.5px; color: #334155;
        border-bottom: 1px solid #f1f4f9; vertical-align: middle;
    }
    .items-card table tbody tr:last-child td { border-bottom: none; }
    .items-card table tbody tr:hover { background: #fafbfd; }

    .items-card .item-name { font-weight: 600; color: #0f172a; }
    .items-card .variant-name { font-weight: 500; color: #334155; }
    .items-card .remaining {
        font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums;
    }
    .items-card .remaining.zero { color: #94a3b8; font-weight: 500; }

    .items-card .form-control-sm {
        height: 36px; font-size: 13.5px; border-color: #e5e9f0;
        font-variant-numeric: tabular-nums;
    }
    .items-card .form-control-sm:focus {
        border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1);
    }

    /* ═══ Live qty validation ═══ */
    .items-card .qty-input.is-invalid {
        border-color: #ef4444 !important;
        box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
    }
    .items-card .qty-input.is-valid {
        border-color: #10b981 !important;
    }
    .qty-error {
        font-size: 11px;
        color: #b91c1c;
        margin-top: 3px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .loading-state {
        text-align: center; padding: 60px 20px; color: #94a3b8;
    }
    .loading-state i { font-size: 36px; display: block; margin-bottom: 12px; opacity: .5; }
    .loading-state small { font-size: 13px; }

    #createBtn {
        display: inline-flex; align-items: center; gap: 6px;
        font-weight: 600; min-width: 170px; justify-content: center;
        height: 38px;
    }
    #createBtn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }
</style>
@endsection

@section('content')

<div class="create-head">
    <div>
        <h5>Create Delivery</h5>
        <p>Assign items to a transporter for order <span class="ref">{{ $order->order_reference }}</span></p>
    </div>
    <a href="{{ route('cargo_company.shipments.show', $order->id) }}" class="btn btn-sm btn-light">
        <i class="ri-arrow-left-line"></i> Back
    </a>
</div>

{{-- ═══════════════════════════════════════════════════════════
     TRANSPORTER CODE
     ═══════════════════════════════════════════════════════════ --}}
<div class="card transporter-card mb-3">
    <div class="card-body">
        <label class="form-label">Transporter Code</label>
        <input type="text" id="transporterCode" class="form-control"
               placeholder="e.g. TRANS-0001" autocomplete="off" spellcheck="false">

        <div class="hint">
            <i class="ri-information-line"></i>
            <span>Ask the transporter for their user code</span>
        </div>

        {{-- Feedback shows CODE only, never name --}}
        <div class="transporter-feedback" id="transporterFeedback"></div>
    </div>
</div>

{{-- ═══════════════════════════════════════════════════════════
     ITEMS
     ═══════════════════════════════════════════════════════════ --}}
<div class="card items-card">
    <div class="card-header">
        <div>
            <h5>Deliverable Items</h5>
            <p>Enter quantity and amount per variant</p>
        </div>
        <button type="button" class="btn btn-primary btn-sm" id="createBtn">
            <i class="ri-check-line"></i> Create Delivery
        </button>
    </div>

    <div class="card-body p-0" id="itemsContainer">
        <div class="loading-state">
            <i class="ri-loader-4-line"></i>
            <small>Loading items...</small>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
$(function () {
    var CSRF    = '{{ csrf_token() }}';
    var orderId = {{ $order->id }};

    /* ═══════════════════════════════════════════════════════════
       QTY VALIDATION HELPERS
       ═══════════════════════════════════════════════════════════ */
    function validateQtyInput($input) {
        var val = parseInt($input.val(), 10);
        var max = parseInt($input.attr('max'), 10) || 0;

        // Clear existing error message
        $input.siblings('.qty-error').remove();

        // Empty field — neutral state
        if ($input.val() === '' || isNaN(val)) {
            $input.removeClass('is-invalid is-valid');
            return true;
        }

        // Negative or zero — treat as neutral (won't be submitted)
        if (val < 1) {
            $input.removeClass('is-invalid is-valid');
            return true;
        }

        // Exceeds remaining — error immediately
        if (val > max) {
            $input.addClass('is-invalid').removeClass('is-valid');
            $input.after('<div class="qty-error">Max ' + max + '</div>');
            return false;
        }

        // Valid
        $input.removeClass('is-invalid').addClass('is-valid');
        return true;
    }

    function validateAllQtyInputs() {
        var allValid = true;

        $('.qty-input').each(function () {
            if (!validateQtyInput($(this))) {
                allValid = false;
            }
        });

        // Disable the button if any row is invalid
        $('#createBtn').prop('disabled', !allValid);

        return allValid;
    }

    /* ═══════════════════════════════════════════════════════════
       LOAD DELIVERABLE ITEMS
       ═══════════════════════════════════════════════════════════ */
    $.get('{{ route("cargo_company.deliveries.deliverable", $order->id) }}', function (res) {
        if (res.status !== 'success') {
            $('#itemsContainer').html(
                '<div class="loading-state"><i class="ri-error-warning-line"></i><small>Failed to load items</small></div>'
            );
            return;
        }

        var itemsData = res.data || [];
        var html = '<div class="table-responsive"><table class="table align-middle mb-0">';
        html += '<thead><tr>';
        html += '<th>Item</th><th>Variant</th>';
        html += '<th class="text-end">Total</th>';
        html += '<th class="text-end">Assigned</th>';
        html += '<th class="text-end">Remaining</th>';
        html += '<th class="text-end" style="width:120px;">Qty</th>';
        html += '<th class="text-end" style="width:150px;">Amount (AED)</th>';
        html += '</tr></thead><tbody>';

        if (!itemsData.length) {
            html += '<tr><td colspan="7">'
                 + '<div class="loading-state"><i class="ri-inbox-2-line"></i><small>No items to deliver</small></div>'
                 + '</td></tr>';
        } else {
            itemsData.forEach(function (item) {
                var variantCount = item.variants.length;
                if (variantCount === 0) {
                    html += '<tr>';
                    html += '<td class="item-name">' + item.name + '</td>';
                    html += '<td colspan="6" class="text-muted">No variants</td>';
                    html += '</tr>';
                    return;
                }

                item.variants.forEach(function (v, idx) {
                    var disabled = v.remaining === 0 ? 'disabled' : '';
                    html += '<tr>';
                    if (idx === 0) {
                        html += '<td rowspan="' + variantCount + '" class="item-name align-middle">' + item.name + '</td>';
                    }
                    html += '<td class="variant-name">' + v.variant + '</td>';
                    html += '<td class="text-end">' + v.total + '</td>';
                    html += '<td class="text-end">' + v.assigned + '</td>';
                    html += '<td class="text-end"><span class="remaining' + (v.remaining === 0 ? ' zero' : '') + '">' + v.remaining + '</span></td>';
                    html += '<td class="text-end">';
                    html += '<input type="number" class="form-control form-control-sm text-end qty-input" '
                         + 'data-variant-id="' + v.id + '" min="0" max="' + v.remaining + '" value="" '
                         + disabled + '>';
                    html += '</td>';
                    html += '<td class="text-end">';
                    html += '<input type="number" step="0.01" min="0" class="form-control form-control-sm text-end amount-input" '
                         + 'data-variant-id="' + v.id + '" value="" '
                         + disabled + '>';
                    html += '</td>';
                    html += '</tr>';
                });
            });
        }

        html += '</tbody></table></div>';
        $('#itemsContainer').html(html);

        // Initial pass — nothing to validate yet, but keeps the button state consistent
        validateAllQtyInputs();
    });

    /* ═══════════════════════════════════════════════════════════
       LIVE VALIDATION — fires on every keystroke
       ═══════════════════════════════════════════════════════════ */
    $(document).on('input', '.qty-input', function () {
        validateAllQtyInputs();
    });

    // Blur just re-runs the same check (no behavioural difference)
    $(document).on('blur', '.qty-input', function () {
        validateAllQtyInputs();
    });

    /* ═══════════════════════════════════════════════════════════
       LIVE TRANSPORTER CODE VALIDATION
       — shows CODE only
       ═══════════════════════════════════════════════════════════ */
    var $code         = $('#transporterCode');
    var $feedback     = $('#transporterFeedback');
    var validateTimer = null;
    var codeVerified  = false;

    function showFeedback(type, content) {
        $feedback
            .removeClass('success error loading show')
            .addClass(type + ' show')
            .html(content);
    }

    function clearFeedback() {
        $feedback.removeClass('success error loading show').html('');
        $code.removeClass('is-valid is-invalid');
        codeVerified = false;
    }

    function validateTransporterCode() {
        var code = $code.val().trim();

        clearFeedback();

        if (! code) return;

        // Wait for at least 4 chars before hitting the server
        if (code.length < 4) return;

        showFeedback('loading',
            '<span class="spinner-sm"></span><span>Checking code...</span>'
        );

        $.ajax({
            url: '{{ route("cargo_company.deliveries.validate_transporter") }}',
            type: 'POST',
            data: { _token: CSRF, transporter_code: code },
            success: function (res) {
                if (res.status === 'success') {
                    codeVerified = true;
                    $code.addClass('is-valid').removeClass('is-invalid');

                    // ═══ CODE ONLY — no name ═══
                    showFeedback('success',
                        '<i class="ri-checkbox-circle-fill"></i>'
                        + '<div>Transporter <span class="code-label">'
                        + res.data.user_code + '</span> verified</div>'
                    );
                } else {
                    $code.addClass('is-invalid').removeClass('is-valid');
                    showFeedback('error',
                        '<i class="ri-close-circle-fill"></i>'
                        + '<div>' + (res.message || 'Transporter not found.') + '</div>'
                    );
                }
            },
            error: function (xhr) {
                var msg = xhr.responseJSON?.message || 'Transporter not found.';
                $code.addClass('is-invalid').removeClass('is-valid');
                showFeedback('error',
                    '<i class="ri-close-circle-fill"></i>'
                    + '<div>' + msg + '</div>'
                );
            }
        });
    }

    $code.on('input', function () {
        clearTimeout(validateTimer);
        validateTimer = setTimeout(validateTransporterCode, 450);
    });

    $code.on('blur', function () {
        clearTimeout(validateTimer);
        validateTransporterCode();
    });

    /* ═══════════════════════════════════════════════════════════
       CREATE DELIVERY
       ═══════════════════════════════════════════════════════════ */
    $('#createBtn').on('click', function () {
        var code = $code.val().trim();

        if (! code) {
            $code.addClass('is-invalid').focus();
            showFeedback('error',
                '<i class="ri-close-circle-fill"></i>'
                + '<div>Please enter the transporter code.</div>'
            );
            return;
        }

        if (! codeVerified) {
            validateTransporterCode();
            toastr.warning('Please wait for the transporter code to be verified.');
            return;
        }

        // Final safety net — button should already be disabled
        if (!validateAllQtyInputs()) {
            toastr.error('Some quantities exceed the remaining amount.');
            return;
        }

        var items = [];

        $('.qty-input').each(function () {
            var qty    = parseInt($(this).val(), 10) || 0;
            var amount = parseFloat($('.amount-input[data-variant-id="' + $(this).data('variant-id') + '"]').val()) || 0;

            if (qty > 0) {
                items.push({
                    order_item_variant_id: $(this).data('variant-id'),
                    quantity: qty,
                    amount: Math.round(amount)
                });
            }
        });

        if (! items.length) {
            toastr.error('Please specify at least one item quantity.');
            return;
        }

        var $btn = $(this).prop('disabled', true).html(
            '<span class="spinner-border spinner-border-sm"></span> Creating...'
        );

        $.ajax({
            url: '{{ route("cargo_company.deliveries.store") }}',
            type: 'POST',
            data: {
                _token: CSRF,
                order_id: orderId,
                transporter_code: code,
                items: items
            },
            success: function (res) {
                if (res.status === 'success') {
                    toastr.success(res.message);
                    setTimeout(function () { window.location.href = res.redirect; }, 500);
                } else {
                    if (/transporter/i.test(res.message || '')) {
                        $code.addClass('is-invalid').removeClass('is-valid');
                        codeVerified = false;
                        showFeedback('error',
                            '<i class="ri-close-circle-fill"></i>'
                            + '<div>' + res.message + '</div>'
                        );
                    }
                    toastr.error(res.message);
                    $btn.prop('disabled', false).html('<i class="ri-check-line"></i> Create Delivery');
                    validateAllQtyInputs();
                }
            },
            error: function (xhr) {
                var msg = xhr.responseJSON?.message || 'Failed to create delivery';
                if (/transporter/i.test(msg)) {
                    $code.addClass('is-invalid').removeClass('is-valid');
                    codeVerified = false;
                    showFeedback('error',
                        '<i class="ri-close-circle-fill"></i>'
                        + '<div>' + msg + '</div>'
                    );
                }
                toastr.error(msg);
                $btn.prop('disabled', false).html('<i class="ri-check-line"></i> Create Delivery');
                validateAllQtyInputs();
            }
        });
    });
});
</script>
@endsection