<x-filament-panels::page>

<style>
    .settings-card {
        background: #fff;
        border-radius: 16px;
        border: 1px solid #e5e7eb;
        overflow: hidden;
        margin-bottom: 28px;
        box-shadow: 0 1px 4px rgba(44,40,96,0.04);
    }
    .settings-card-header {
        padding: 20px 24px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .settings-card-title {
        font-size: 15px;
        font-weight: 700;
        color: #2c2860;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .settings-card-subtitle {
        font-size: 12px;
        color: #9ca3af;
        font-weight: 400;
        margin-top: 2px;
    }

    /* Global rate cards */
    .rate-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .rate-cell {
        padding: 20px 24px;
        border-right: 1px solid #f3f4f6;
    }
    .rate-cell:last-child { border-right: none; }
    .rate-label {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #9ca3af;
        font-weight: 600;
        margin-bottom: 6px;
    }
    .rate-value {
        font-size: 24px;
        font-weight: 800;
        color: #2c2860;
        line-height: 1;
        font-variant-numeric: tabular-nums;
    }
    .rate-unit {
        font-size: 12px;
        color: #9ca3af;
        margin-top: 4px;
    }
    .rate-note {
        font-size: 11px;
        color: #d97706;
        margin-top: 4px;
        font-weight: 500;
    }

    /* Tables */
    .settings-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    .settings-table thead tr {
        background: #f9fafb;
        border-bottom: 1px solid #f3f4f6;
    }
    .settings-table thead th {
        padding: 11px 20px;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: #9ca3af;
    }
    .settings-table thead th:last-child { text-align: center; }
    .settings-table tbody tr {
        border-bottom: 1px solid #f9fafb;
        transition: background 100ms;
    }
    .settings-table tbody tr:last-child { border-bottom: none; }
    .settings-table tbody tr:hover { background: #faf9fd; }
    .settings-table tbody td {
        padding: 14px 20px;
        color: #374151;
        font-weight: 500;
    }
    .settings-table tbody td:last-child { text-align: center; }
    .actions-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .settings-empty {
        padding: 48px 24px;
        text-align: center;
        color: #9ca3af;
        font-size: 14px;
    }
    .mono {
        font-size: 14px;
        font-weight: 700;
        color: #2c2860;
        font-variant-numeric: tabular-nums;
    }
    .type-chip {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 99px;
        font-size: 11px;
        font-weight: 700;
    }
    .type-air  { background: #eff6ff; color: #1d4ed8; }
    .type-sea  { background: #fffbeb; color: #92400e; }
    .type-both { background: #f5f3ff; color: #6d28d9; }

    .info-banner {
        padding: 12px 24px;
        background: #fffbeb;
        border-top: 1px solid #fde68a;
        font-size: 12px;
        color: #92400e;
        display: flex;
        align-items: center;
        gap: 6px;
    }
</style>


{{-- ── 1. Global Rates ──────────────────────────────────────────── --}}
<div class="settings-card">
    <div class="settings-card-header">
        <div>
            <div class="settings-card-title">
                <svg style="width:18px;height:18px;" fill="none"
                     stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                Global Rates
            </div>
            <div class="settings-card-subtitle">
                Default rates used when no route-specific override exists
            </div>
        </div>
        {{ ($this->updateRatesAction)([]) }}
    </div>

    @php $rates = $this->getCurrentRates(); @endphp

    <div class="rate-grid">
        <div class="rate-cell">
            <div class="rate-label">Exchange Rate</div>
            <div class="rate-value">{{ number_format($rates['exchange_rate'], 2) }}</div>
            <div class="rate-unit">KES per $1 USD</div>
        </div>
        <div class="rate-cell">
            <div class="rate-label">Air Freight — Default</div>
            <div class="rate-value">${{ number_format($rates['air_rate_per_kg'], 2) }}</div>
            <div class="rate-unit">USD per KG</div>
            <div class="rate-note">Overridden per route below</div>
        </div>
        <div class="rate-cell">
            <div class="rate-label">Sea Freight — Default</div>
            <div class="rate-value">{{ number_format($rates['sea_rate_per_cbm'], 0) }}</div>
            <div class="rate-unit">KES per CBM</div>
            <div class="rate-note">Overridden per route below</div>
        </div>
    </div>

    <div class="info-banner">
        <svg style="width:14px;height:14px;flex-shrink:0;" fill="none"
             stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Changing global rates only affects new invoices.
        Existing invoices keep their original calculated amounts.
    </div>
</div>


{{-- ── 2. Route-Specific Rate Overrides ────────────────────────── --}}
<div class="settings-card">
    <div class="settings-card-header">
        <div>
            <div class="settings-card-title">
                <svg style="width:18px;height:18px;" fill="none"
                     stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                </svg>
                Route-Specific Rate Overrides
            </div>
            <div class="settings-card-subtitle">
                These take priority over global rates for matching shipment routes
            </div>
        </div>
        {{ ($this->addRouteRateAction)([]) }}
    </div>

    @php $routeRates = $this->getRouteRates(); @endphp

    @if($routeRates->isEmpty())
        <div class="settings-empty">
            <p>No route overrides yet.</p>
            <p style="font-size:12px;margin-top:4px;">
                All routes use the global rates above.
            </p>
        </div>
    @else
        <table class="settings-table">
            <thead>
                <tr>
                    <th>Route</th>
                    <th>Type</th>
                    <th>Air Rate (USD/KG)</th>
                    <th>Sea Rate (KES/CBM)</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($routeRates as $rate)
                <tr>
                    <td style="font-weight:700;color:#111827;">
                        {{ $rate->route }}
                    </td>
                    <td>
                        <span class="type-chip type-{{ $rate->type }}">
                            {{ strtoupper($rate->type) }}
                        </span>
                    </td>
                    <td>
                        @if($rate->usd_rate_per_kg > 0)
                            <span class="mono">${{ number_format($rate->usd_rate_per_kg, 2) }}</span>
                            <span style="font-size:11px;color:#9ca3af;"> /KG</span>
                        @else
                            <span style="color:#d1d5db;font-size:12px;">uses global</span>
                        @endif
                    </td>
                    <td>
                        @if($rate->kes_rate_per_cbm > 0)
                            <span class="mono">
                                {{ number_format($rate->kes_rate_per_cbm, 0) }}
                            </span>
                            <span style="font-size:11px;color:#9ca3af;"> KES/CBM</span>
                        @else
                            <span style="color:#d1d5db;font-size:12px;">uses global</span>
                        @endif
                    </td>
                    <td>
                        @if($rate->is_active)
                            <span style="display:inline-flex;align-items:center;gap:5px;
                                         font-size:12px;font-weight:600;color:#15803d;">
                                <span style="width:7px;height:7px;border-radius:50%;
                                             background:#22c55e;display:inline-block;"></span>
                                Active
                            </span>
                        @else
                            <span style="display:inline-flex;align-items:center;gap:5px;
                                         font-size:12px;font-weight:600;color:#9ca3af;">
                                <span style="width:7px;height:7px;border-radius:50%;
                                             background:#d1d5db;display:inline-block;"></span>
                                Inactive
                            </span>
                        @endif
                    </td>
                    <td>
                        <div class="actions-cell">
                            {{ ($this->editRouteRateAction)(['id' => $rate->id]) }}
                            {{ ($this->deleteRouteRateAction)(['id' => $rate->id]) }}
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif

    <div class="info-banner">
        <svg style="width:14px;height:14px;flex-shrink:0;" fill="none"
             stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Route name must match the shipment's origin + destination.
        Example: origin = <strong>China</strong>, destination = <strong>KE</strong>
        → route name = <strong>ChinaKE</strong>
    </div>
</div>


{{-- ── 3. Tax Rates ─────────────────────────────────────────────── --}}
<div class="settings-card">
    <div class="settings-card-header">
        <div>
            <div class="settings-card-title">
                <svg style="width:18px;height:18px;" fill="none"
                     stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2z"/>
                </svg>
                Tax Rates
            </div>
        </div>
        {{ ($this->addTaxAction)([]) }}
    </div>

    @php $taxes = $this->getTaxRates(); @endphp

    @if($taxes->isEmpty())
        <div class="settings-empty">No tax rates configured yet.</div>
    @else
        <table class="settings-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Rate</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($taxes as $tax)
                <tr>
                    <td style="font-weight:600;color:#111827;">{{ $tax->name }}</td>
                    <td><span class="mono">{{ number_format($tax->rate, 2) }}%</span></td>
                    <td>
                        @if($tax->is_active)
                            <span style="display:inline-flex;align-items:center;gap:5px;
                                         font-size:12px;font-weight:600;color:#15803d;">
                                <span style="width:7px;height:7px;border-radius:50%;
                                             background:#22c55e;display:inline-block;"></span>
                                Active
                            </span>
                        @else
                            <span style="display:inline-flex;align-items:center;gap:5px;
                                         font-size:12px;font-weight:600;color:#9ca3af;">
                                <span style="width:7px;height:7px;border-radius:50%;
                                             background:#d1d5db;display:inline-block;"></span>
                                Inactive
                            </span>
                        @endif
                    </td>
                    <td>
                        <div class="actions-cell">
                            {{ ($this->editTaxAction)(['id' => $tax->id]) }}
                            {{ ($this->deleteTaxAction)(['id' => $tax->id]) }}
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

</x-filament-panels::page>