@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <!-- Top Header -->
    <div class="mb-4">
        <div class="d-flex align-items-center gap-2 mb-1">
            <i class="bi bi-box-arrow-in-down text-indigo-600 fs-4" style="color: #4f46e5;"></i>
            <h4 class="fw-bold text-dark mb-0">Incoming Counter Shipments</h4>
        </div>
        <p class="text-muted small mb-0">Verify physical handloom inventory packages dispatched from headquarters before hitting sales ledger terminals.</p>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4">
            <i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="alert alert-danger border-0 shadow-sm rounded-3 mb-4">
            <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}
        </div>
    @endif

    <!-- 📑 INCOMING STOCK CHANNELS LIST GRID -->
    <div class="card border-0 shadow-sm rounded-4 bg-white">
        <div class="card-header bg-white border-bottom py-3 px-4">
            <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-truck text-indigo-600 me-2" style="color: #4f46e5;"></i>Pending Shipments Terminal</h6>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 bg-white">
                <thead class="table-light text-uppercase small fw-bold text-secondary" style="font-size: 11px;">
                    <tr>
                        <th class="py-3 ps-4">Challan No</th>
                        <th class="py-3">Dispatched Item</th>
                        <th class="py-3">Exhibition Destination</th>
                        <th class="py-3 text-center">Units Sent</th>
                        <th class="py-3 text-center">Status</th>
                        <th class="py-3 text-end pe-4">Operational Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($transfers as $transfer)
                    <tr>
                        <td class="py-3 ps-4 font-monospace fw-bold text-indigo-600" style="color: #4f46e5;">
                            {{ $transfer->transfer_challan_no }}
                        </td>
                        <td class="fw-bold text-dark">{{ $transfer->product->name ?? 'N/A' }}</td>
                        <td>
                            <span class="fw-semibold text-dark small d-block">{{ $transfer->exhibition->title ?? 'Counter' }}</span>
                            <small class="text-muted" style="font-size: 11px;">📍 {{ $transfer->exhibition->venue ?? '' }}</small>
                        </td>
                        <td class="text-center font-monospace fw-bold text-dark">{{ $transfer->quantity_sent }} pcs</td>
                        <td class="text-center">
                            <span class="badge border border-warning-subtle text-warning bg-warning-subtle px-2.5 py-1 rounded-pill" style="font-size: 10px; background-color: #fffbeb;">In Transit</span>
                        </td>
                        <td class="text-end pe-4">
                            <!-- Click-Trigger Form Action -->
                            <form action="{{ route('manager.inventory.accept', $transfer->id) }}" method="POST" onsubmit="return confirm('Have you physically counted and verified this product stock shipment?');">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-success px-3 fw-bold shadow-sm" style="background-color: #10b981; border: none; border-radius: 6px;">
                                    <i class="bi bi-check-lg me-1"></i> Receive & Unload Stock
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-5 text-muted">
                            <i class="bi bi-shield-check d-block mb-2 fs-3 text-secondary"></i> All incoming logistics cleared! No transit shipments currently awaiting allocation loop.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection