@extends('layouts.app')

@section('title', 'SI #'.optional($si)->si_number)

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('export.dashboard') }}">Export</a></li>
        <li class="breadcrumb-item"><a href="{{ route('export.shipping-instructions.index') }}">Shipping Instructions</a></li>
        <li class="breadcrumb-item active">{{ $si->si_number }}</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">{{ $si->si_number }}</h1><p class="text-muted mb-0">Shipping Instruction</p></div>
    <div class="d-flex gap-2">
        <a href="{{ route('export.shipping-instructions.edit', $si) }}" class="btn btn-outline-primary"><i class="bi bi-pencil me-1"></i> Edit</a>
        <button class="btn btn-outline-secondary" onclick="window.print()"><i class="bi bi-printer me-1"></i> Print</button>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <h6 class="fw-semibold text-muted mb-2">Shipper</h6>
                        <div class="fw-medium">{{ $si->shipper->name ?? 'N/A' }}</div>
                        <div class="text-muted small">{{ $si->shipper_address ?? '' }}</div>
                        <div class="text-muted small">Contact: {{ $si->shipper_contact ?? '' }} {{ $si->shipper_phone ?? '' }}</div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-semibold text-muted mb-2">Consignee</h6>
                        <div class="fw-medium">{{ $si->consignee->name ?? 'N/A' }}</div>
                        <div class="text-muted small">{{ $si->consignee_address ?? '' }}</div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-semibold text-muted mb-2">Notify Party</h6>
                        <div class="fw-medium">{{ $si->notifyParty->name ?? 'Same as Consignee' }}</div>
                        <div class="text-muted small">{{ $si->notify_address ?? '' }}</div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-semibold text-muted mb-2">Route</h6>
                        <table class="table table-sm table-borderless mb-0">
                            <tr><td class="text-muted">Loading Port</td><td>{{ $si->portOfLoading->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Discharge Port</td><td>{{ $si->portOfDischarge->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Vessel</td><td>{{ $si->vessel_name ?? 'TBD' }} V.{{ $si->voyage_number ?? '' }}</td></tr>
                        </table>
                    </div>
                    <div class="col-12">
                        <h6 class="fw-semibold text-muted mb-2">Cargo</h6>
                        <div class="bg-light rounded p-3 small">{{ $si->cargo_description ?? 'N/A' }}</div>
                        <div class="row mt-2">
                            <div class="col"><small class="text-muted">Gross Weight: <strong>{{ $si->gross_weight ?? 0 }} MT</strong></small></div>
                            <div class="col"><small class="text-muted">Volume: <strong>{{ $si->volume ?? 0 }} CBM</strong></small></div>
                            <div class="col"><small class="text-muted">Packages: <strong>{{ $si->no_of_packages ?? 0 }}</strong></small></div>
                            <div class="col"><small class="text-muted">Freight: <strong>{{ ucfirst($si->freight_terms ?? 'prepaid') }}</strong></small></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="fw-semibold text-muted mb-3">Details</h6>
                <table class="table table-sm table-borderless mb-0">
                    <tr><td class="text-muted">SI #</td><td class="text-end fw-medium">{{ $si->si_number }}</td></tr>
                    <tr><td class="text-muted">Date</td><td class="text-end">{{ $si->date?->format('d M Y') ?? 'N/A' }}</td></tr>
                    <tr><td class="text-muted">Type</td><td class="text-end">{{ ucfirst($si->si_type ?? 'Direct') }}</td></tr>
                    <tr><td class="text-muted">BL Type</td><td class="text-end">{{ ucfirst(str_replace('_', ' ', $si->bl_type ?? '')) }}</td></tr>
                    <tr><td class="text-muted">Status</td><td class="text-end"><span class="badge bg-{{ $si->status === 'submitted' ? 'success' : 'secondary' }}">{{ ucfirst($si->status) }}</span></td></tr>
                    <tr><td class="text-muted">Order</td><td class="text-end"><a href="{{ route('export.orders.show', $si->order) }}">{{ $si->order->order_number ?? 'N/A' }}</a></td></tr>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection