@extends('layouts.app')

@section('title', 'Receive Transfer ' . $transfer->transfer_number . ' - 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') }}">Transfers</a></li>
                <li class="breadcrumb-item"><a href="{{ route('inventory.transfers.show', $transfer) }}">{{ $transfer->transfer_number }}</a></li>
                <li class="breadcrumb-item active">Store Receiving</li>
            </ol>
        </nav>
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div>
                <h2 class="h3 fw-bold mb-0">Store Receiving Terminal</h2>
                <span class="text-muted small">
                    Transfer: <strong class="font-monospace text-dark">{{ $transfer->transfer_number }}</strong> &bull; 
                    Destination: <strong>{{ $transfer->destination_name }}</strong>
                </span>
            </div>
            <div>
                <span class="badge bg-warning text-dark fs-6"><i class="bi bi-truck me-1"></i> {{ $transfer->total_units_dispatched }} Units Dispatched</span>
            </div>
        </div>
    </div>
</div>

<form method="POST" action="{{ route('inventory.transfers.process-receive', $transfer) }}" id="receivingForm">
    @csrf

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="card-title fw-bold mb-0">Physical Item Inspection & Verification Checklist</h5>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-success btn-sm" onclick="markAllReceived()">
                    <i class="bi bi-check2-all me-1"></i> Mark All as Received
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light small text-uppercase">
                        <tr>
                            <th>Unit Serial</th>
                            <th>Product</th>
                            <th>Batch</th>
                            <th width="320">Physical Condition & Status</th>
                            <th>Discrepancy Justification</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($transfer->items as $item)
                            <tr>
                                <td>
                                    <div class="font-monospace fw-bold text-dark">{{ $item->unit->serial_number }}</div>
                                    <small class="text-muted font-monospace">{{ substr($item->unit->qr_token, 0, 8) }}...</small>
                                </td>
                                <td>
                                    <div class="fw-semibold">{{ $item->product->name }}</div>
                                    <small class="text-muted">{{ $item->product->size_or_weight }} {{ $item->product->unit_of_measurement }}</small>
                                </td>
                                <td>
                                    <span class="font-monospace small">{{ $item->batch->batch_number }}</span>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm w-100" role="group">
                                        <input type="radio" 
                                               class="btn-check" 
                                               name="items[{{ $item->id }}][status]" 
                                               id="recv_{{ $item->id }}" 
                                               value="received" 
                                               checked
                                               onchange="toggleReasonField({{ $item->id }}, false)">
                                        <label class="btn btn-outline-success" for="recv_{{ $item->id }}">
                                            <i class="bi bi-check2"></i> Received
                                        </label>

                                        <input type="radio" 
                                               class="btn-check" 
                                               name="items[{{ $item->id }}][status]" 
                                               id="dmg_{{ $item->id }}" 
                                               value="damaged"
                                               onchange="toggleReasonField({{ $item->id }}, true)">
                                        <label class="btn btn-outline-warning text-dark" for="dmg_{{ $item->id }}">
                                            <i class="bi bi-exclamation-triangle"></i> Damaged
                                        </label>

                                        <input type="radio" 
                                               class="btn-check" 
                                               name="items[{{ $item->id }}][status]" 
                                               id="miss_{{ $item->id }}" 
                                               value="missing"
                                               onchange="toggleReasonField({{ $item->id }}, true)">
                                        <label class="btn btn-outline-danger" for="miss_{{ $item->id }}">
                                            <i class="bi bi-x-circle"></i> Missing
                                        </label>
                                    </div>
                                </td>
                                <td>
                                    <input type="text" 
                                           name="items[{{ $item->id }}][reason]" 
                                           id="reason_{{ $item->id }}" 
                                           class="form-control form-control-sm" 
                                           placeholder="Required if damaged or missing..." 
                                           disabled>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-light p-4">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <label for="receiving_notes" class="form-label fw-semibold small">Store Receiving Remarks / Delivery Verification Notes</label>
                    <input type="text" name="receiving_notes" id="receiving_notes" class="form-control" placeholder="e.g. Unloaded and verified by Store Admin; carton seals intact.">
                </div>
                <div class="col-lg-4 text-end mt-3 mt-lg-0">
                    <a href="{{ route('inventory.transfers.show', $transfer) }}" class="btn btn-outline-secondary me-2">Cancel</a>
                    <button type="submit" class="btn btn-success px-4 fw-bold" onclick="return confirm('Confirm store receiving? Units marked as Received will immediately enter this store inventory.');">
                        <i class="bi bi-box-arrow-in-down me-1"></i> Confirm & Intake Stock
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
    function toggleReasonField(itemId, isDiscrepancy) {
        const input = document.getElementById('reason_' + itemId);
        if (input) {
            input.disabled = !isDiscrepancy;
            if (isDiscrepancy) {
                input.focus();
                input.required = true;
            } else {
                input.required = false;
                input.value = '';
            }
        }
    }

    function markAllReceived() {
        document.querySelectorAll('input[type="radio"][value="received"]').forEach(r => {
            r.checked = true;
            const itemId = r.name.match(/\[(\d+)\]/)[1];
            toggleReasonField(itemId, false);
        });
    }
</script>
@endsection