@extends('layouts.app')

@section('title', 'COO #'.optional($certificate)->coo_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.certificates-of-origin.index') }}">Certificates of Origin</a></li>
        <li class="breadcrumb-item active">{{ $certificate->coo_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">{{ $certificate->coo_number }}</h1><p class="text-muted mb-0">Certificate of Origin</p></div>
    <div class="d-flex gap-2">
        <a href="{{ route('export.certificates-of-origin.edit', $certificate) }}" 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="card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
        <div class="text-center mb-4">
            <h4 class="fw-bold text-primary mb-0">CERTIFICATE OF ORIGIN</h4>
            <p class="text-muted">Certificate #{{ $certificate->coo_number }}</p>
        </div>
        <div class="row g-4">
            <div class="col-md-6">
                <h6 class="fw-semibold text-muted">Exporter</h6>
                <div class="bg-light rounded p-3">{{ $company->name ?? config('app.name') }}<br>{{ $company->address ?? '' }}</div>
            </div>
            <div class="col-md-6">
                <h6 class="fw-semibold text-muted">Consignee</h6>
                <div class="bg-light rounded p-3">{{ $certificate->order->customer->name ?? 'N/A' }}<br>{{ $certificate->order->customer->address ?? '' }}</div>
            </div>
            <div class="col-md-6">
                <h6 class="fw-semibold text-muted">Country of Origin</h6>
                <div class="fw-medium fs-5">{{ $certificate->country_of_origin ?? 'N/A' }}</div>
            </div>
            <div class="col-md-6">
                <h6 class="fw-semibold text-muted">Destination Country</h6>
                <div class="fw-medium fs-5">{{ $certificate->destination_country ?? 'N/A' }}</div>
            </div>
            <div class="col-12">
                <h6 class="fw-semibold text-muted">Description of Goods</h6>
                <div class="bg-light rounded p-3">{{ $certificate->goods_description ?? 'N/A' }}</div>
            </div>
            <div class="col-md-4"><h6 class="fw-semibold text-muted">H.S. Code</h6><div>{{ $certificate->hs_code ?? 'N/A' }}</div></div>
            <div class="col-md-4"><h6 class="fw-semibold text-muted">Quantity / Weight</h6><div>{{ $certificate->quantity_weight ?? 'N/A' }}</div></div>
            <div class="col-md-4"><h6 class="fw-semibold text-muted">Invoice Value</h6><div>{{ $certificate->invoice_value ?? 'N/A' }}</div></div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-4">
        <div class="card border-0 shadow-sm"><div class="card-body">
            <h6 class="fw-semibold text-muted mb-3">Type</h6><div>{{ ucfirst(str_replace('_', ' ', $certificate->coo_type ?? '')) }}</div>
        </div></div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm"><div class="card-body">
            <h6 class="fw-semibold text-muted mb-3">Issuing Authority</h6><div>{{ ucfirst($certificate->issuing_authority ?? '') }}</div>
        </div></div>
    </div>
    <div class="col-md-4">
        <div class="card border-0 shadow-sm"><div class="card-body">
            <h6 class="fw-semibold text-muted mb-3">Status</h6><span class="badge bg-{{ $certificate->status === 'issued' ? 'success' : 'warning' }} px-3 py-2">{{ ucfirst($certificate->status) }}</span>
        </div></div>
    </div>
</div>
@endsection