@extends('layouts.app')
@section('title', 'Gate Pass Details')

@section('content')
<div class="card">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Gate Pass Details</h5>
            <div class="d-flex gap-2">
                <a href="{{ route('gatepasses.index') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-2"></i>Back to List
                </a>
            </div>
        </div>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <!-- Basic Information -->
        <div class="row mb-4">
            <div class="col-md-6">
                <h6 class="text-muted mb-3">Basic Information</h6>
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold" style="width: 150px;">GP Number:</td>
                        <td>{{ $gatePass->gp_number }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Status:</td>
                        <td>
                            <span class="badge bg-{{ $gatePass->status === 'completed' ? 'success' : ($gatePass->status === 'cancelled' ? 'danger' : 'secondary') }}">
                                {{ ucfirst($gatePass->status) }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold">PO Number:</td>
                        <td>{{ optional($gatePass->purchaseOrder)->po_number ?? 'N/A' }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Created Date:</td>
                        <td>{{ $gatePass->created_at->format('M d, Y H:i') }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6 class="text-muted mb-3">Vehicle Details</h6>
                <table class="table table-borderless">
                    <tr>
                        <td class="fw-bold" style="width: 150px;">Vehicle Number:</td>
                        <td>{{ $gatePass->vehicle_no }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold">Driver Name:</td>
                        <td>{{ $gatePass->driver_name }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Items -->
        <div class="row mb-4">
            <div class="col-12">
                <h6 class="text-muted mb-3">Items</h6>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Item</th>
                                <th>PO Quantity</th>
                                <th>DN Quantity</th>
                                <th>Unit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($gatePass->items as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ optional($item->item)->name ?? 'N/A' }}</td>
                                <td>{{ number_format(optional($item->purchaseOrderItem)->quantity ?? 0, 2) }}</td>
                                <td>{{ number_format($item->dn_quantity, 2) }}</td>
                                <td>{{ optional($item->uom)->name ?? 'N/A' }}</td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center text-muted">No items found</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
