@extends('layouts.app')

@section('title', 'Create Stock Transfer - Pavitram Agroz')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('inventory.transfers.index') }}">Stock Transfers</a></li>
                <li class="breadcrumb-item active">New Transfer</li>
            </ol>
        </nav>
        <h2 class="h3 fw-bold mb-0">Create Inter-Facility Stock Transfer</h2>
        <p class="text-muted small mb-0">Allocate physical units from central warehouse or retail store for transfer dispatch.</p>
    </div>
</div>

<form method="POST" action="{{ route('inventory.transfers.store') }}" id="transferForm">
    @csrf

    <div class="row g-4 mb-4">
        <!-- Source & Destination Card -->
        <div class="col-lg-5">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3">
                    <h5 class="card-title fw-bold mb-0">1. Transfer Route</h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label for="source_id" class="form-label fw-bold">Source Facility</label>
                        <select name="source_id" id="source_id" class="form-select @error('source_id') is-invalid @enderror" onchange="window.location.href='{{ route('inventory.transfers.create') }}?source_type=warehouse&source_id=' + this.value">
                            <optgroup label="Central Warehouses">
                                @foreach($warehouses as $wh)
                                    <option value="{{ $wh->id }}" {{ $sourceId === $wh->id ? 'selected' : '' }}>
                                        {{ $wh->name }} ({{ $wh->code }}) {{ $wh->is_default ? '★ Hub' : '' }}
                                    </option>
                                @endforeach
                            </optgroup>
                        </select>
                        <input type="hidden" name="source_type" value="{{ $sourceType }}">
                        @error('source_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="text-center my-3 text-muted">
                        <i class="bi bi-arrow-down-circle-fill fs-3 text-primary"></i>
                    </div>

                    <div class="mb-4">
                        <label for="destination_id" class="form-label fw-bold">Destination Store</label>
                        <select name="destination_id" id="destination_id" class="form-select @error('destination_id') is-invalid @enderror" required>
                            <option value="">Select Destination Store...</option>
                            @foreach($stores as $st)
                                <option value="{{ $st->id }}" {{ old('destination_id') == $st->id ? 'selected' : '' }}>
                                    {{ $st->name }} ({{ $st->code }}) - {{ $st->city }}
                                </option>
                            @endforeach
                        </select>
                        <input type="hidden" name="destination_type" value="store">
                        @error('destination_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="mb-3">
                        <label for="dispatch_notes" class="form-label fw-semibold">Dispatch Instructions / Remarks</label>
                        <textarea name="dispatch_notes" id="dispatch_notes" rows="3" class="form-control" placeholder="e.g. Replenishment shipment for festive weekend demand...">{{ old('dispatch_notes') }}</textarea>
                    </div>

                    <div class="bg-light p-3 rounded">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted small">Units Selected for Transfer:</span>
                            <span class="badge bg-primary fs-6 font-monospace" id="selectedCountBadge">0 units</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Unit Selection Card -->
        <div class="col-lg-7">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="card-title fw-bold mb-0">2. Select Physical Units</h5>
                    <span class="badge bg-light text-dark border">{{ $availableUnits->count() }} Available Units in Stock</span>
                </div>
                <div class="card-body p-0">
                    @if($availableUnits->isEmpty())
                        <div class="text-center py-5 text-muted">
                            <i class="bi bi-boxes display-4 text-warning mb-2 d-block"></i>
                            <h6>No Available Units at Source Location</h6>
                            <p class="small">Perform warehouse intake from verified batches before dispatching transfers.</p>
                            <a href="{{ route('inventory.receiving.terminal') }}" class="btn btn-sm btn-primary">Warehouse Intake</a>
                        </div>
                    @else
                        <div class="p-3 bg-light border-bottom d-flex justify-content-between align-items-center">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)">
                                <label class="form-check-label fw-semibold small" for="selectAllCheckbox">
                                    Select All Displayed Units
                                </label>
                            </div>
                            <small class="text-muted">Showing available stock at source</small>
                        </div>

                        <div class="table-responsive" style="max-height: 440px; overflow-y: auto;">
                            <table class="table table-hover align-middle mb-0 small">
                                <thead class="table-light sticky-top">
                                    <tr>
                                        <th width="40"></th>
                                        <th>Serial Number</th>
                                        <th>Product</th>
                                        <th>Batch</th>
                                        <th>QR Token</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($availableUnits as $unit)
                                        <tr>
                                            <td>
                                                <input class="form-check-input unit-checkbox" 
                                                       type="checkbox" 
                                                       name="unit_ids[]" 
                                                       value="{{ $unit->id }}" 
                                                       id="unit_{{ $unit->id }}"
                                                       onchange="updateSelectedCount()">
                                            </td>
                                            <td>
                                                <label for="unit_{{ $unit->id }}" class="font-monospace fw-bold mb-0 cursor-pointer text-dark">
                                                    {{ $unit->serial_number }}
                                                </label>
                                            </td>
                                            <td>{{ $unit->product->name }}</td>
                                            <td class="font-monospace">{{ $unit->batch->batch_number }}</td>
                                            <td class="font-monospace text-muted">{{ substr($unit->qr_token, 0, 8) }}...</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
                <div class="card-footer bg-white py-3 d-flex justify-content-between align-items-center">
                    <a href="{{ route('inventory.transfers.index') }}" class="btn btn-outline-secondary">Cancel</a>
                    <button type="submit" class="btn btn-primary px-4 fw-bold" id="submitTransferBtn" disabled>
                        <i class="bi bi-send me-1"></i> Create Transfer Draft
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    function updateSelectedCount() {
        const checkboxes = document.querySelectorAll('.unit-checkbox:checked');
        const count = checkboxes.length;
        document.getElementById('selectedCountBadge').innerText = count + ' units';
        document.getElementById('submitTransferBtn').disabled = (count === 0);
    }

    function toggleSelectAll(master) {
        const checkboxes = document.querySelectorAll('.unit-checkbox');
        checkboxes.forEach(cb => cb.checked = master.checked);
        updateSelectedCount();
    }
</script>
@endsection