@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-dark mb-1">Dispatch Stock to Exhibition</h4>
            <p class="text-muted small mb-0">Transfer inventory from central warehouse to active exhibition on-field
                windows.</p>
        </div>
        <a href="{{ route('admin.stock-transfers.index') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-3">
            <i class="bi bi-arrow-left me-1"></i> Back to Logs
        </a>
    </div>

    <div class="card border-0 shadow-sm rounded-4 max-w-2xl mx-auto">
        <div class="card-body p-4">

            @if(session('error'))
            <div class="alert alert-danger border-0 mb-4" style="border-radius: 8px;">{{ session('error') }}</div>
            @endif

            <form action="{{ route('admin.stock-transfers.store') }}" method="POST">
                @csrf
                <div class="row g-3">
                    <div class="col-md-12">
                        <label class="form-label small fw-bold text-secondary">Select Destination Exhibition <span
                                class="text-danger">*</span></label>
                        <select name="exhibition_id" class="form-select" style="border-radius: 8px;" required>
                            <option value="">-- Choose Active Event --</option>
                            @foreach($exhibitions as $ex)
                            <option value="{{ $ex->id }}">{{ $ex->title ?? $ex->name }} ({{ $ex->city ?? 'On Field' }})
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-12">
                        <label class="form-label small fw-bold text-secondary">Select Product Article <span
                                class="text-danger">*</span></label>
                        <select name="product_id" id="product_id" class="form-select" style="border-radius: 8px;"
                            required onchange="updateMaxQty()">
                            <option value="">-- Choose Article --</option>
                            @foreach($products as $prod)
                            <option value="{{ $prod->id }}" data-avail="{{ $prod->available_stock }}">
                                {{ $prod->name }} [{{ $prod->product_code }}] — (Avail WH Stock: {{
                                $prod->available_stock }} Units)
                            </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-dark">Quantity to Transfer <span
                                class="text-danger">*</span></label>
                        <input type="number" name="transfer_qty" id="transfer_qty" class="form-control" min="1" required
                            style="border-radius: 8px;">
                        <small class="text-muted text-xs" id="wh_max_hint">Select an article to see limits.</small>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label small fw-bold text-secondary">Transfer Date <span
                                class="text-danger">*</span></label>
                        <input type="date" name="transfer_date" class="form-control" value="{{ date('Y-m-d') }}"
                            required style="border-radius: 8px;">
                    </div>
                </div>

                <div class="text-end mt-4 pt-2 border-top">
                    <button type="submit" class="btn btn-primary px-4 fw-bold"
                        style="background-color: #4f46e5; border: none; border-radius: 8px;">
                        <i class="bi bi-send me-1"></i> Authorize Dispatch
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function updateMaxQty() {
        let select = document.getElementById('product_id');
        let selectedOption = select.options[select.selectedIndex];
        let avail = selectedOption.getAttribute('data-avail') || 0;

        let qtyInput = document.getElementById('transfer_qty');
        qtyInput.max = avail;

        document.getElementById('wh_max_hint').innerText = "Max allowable: " + avail + " units.";
    }

    // ⚡ ADDED: Auto-hook selector from query string parameter parameters logic
    window.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const productId = urlParams.get('product_id');

        if (productId) {
            const productSelect = document.getElementById('product_id');
            productSelect.value = productId;
            // Fire layout state refresh loop
            updateMaxQty();
        }
    });
</script>
@endsection