@extends('layouts.admin')

@section('title', 'Shipments Management')

@section('content')

<div class="p-4">

    <!-- Header -->
    <div class="flex items-center justify-between mb-4">
        <div>
            <h1 class="text-xl font-bold text-gray-900">Shipments Management</h1>
            <p class="text-xs text-gray-500">Manage customer shipments, pricing, and delivery progress</p>
        </div>

        <a href="{{ route('admin.shipments.create') }}"
           class="px-3 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold shadow transition">
            + New Shipment
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white border rounded-xl shadow-sm p-3 mb-4">
        <div class="flex flex-wrap gap-2 items-center text-sm">
            <select class="border rounded-lg px-2 py-1">
                <option>All Status</option>
            </select>

            <select class="border rounded-lg px-2 py-1">
                <option>All Customers</option>
            </select>

            <button class="px-2 py-1 rounded-lg border text-sm hover:bg-gray-100">
                Export CSV
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white border rounded-xl shadow-sm overflow-hidden">

        <div class="overflow-x-auto">
            <table class="w-full text-xs">

                <thead class="bg-gray-100 text-gray-600 uppercase">
                    <tr>
                        <th class="px-2 py-2 text-left">Tracking</th>
                        <th class="px-2 py-2 text-left">Customer</th>
                        <th class="px-2 py-2 text-left">Wt</th>
                        <th class="px-2 py-2 text-left">Original</th>
                        <th class="px-2 py-2 text-left">Disc</th>
                        <th class="px-2 py-2 text-left">Final</th>
                        <th class="px-2 py-2 text-left">Status</th>
                        <th class="px-2 py-2 text-left">Pay</th>
                        <th class="px-2 py-2 text-left">Actions</th>
                    </tr>
                </thead>

                <tbody class="divide-y">

                    @forelse($shipments as $shipment)
                    @php
                        $customer = $shipment->customer;
                        $isPremium = $customer?->customer_type === 'premium';
                    @endphp

                    <tr class="hover:bg-gray-50">

                        <td class="px-2 py-2 font-semibold text-indigo-700">
                            {{ $shipment->tracking_number }}
                        </td>

                        <td class="px-2 py-2">
                            {{ $customer?->name ?? 'N/A' }}
                            @if($isPremium)
                                <span class="ml-1 px-1 py-0.5 text-[10px] rounded bg-yellow-100 text-yellow-700">P</span>
                            @endif
                        </td>

                        <td class="px-2 py-2">{{ number_format($shipment->weight,2) }}kg</td>

                        <td class="px-2 py-2">£{{ number_format($shipment->original_price,2) }}</td>

                        <td class="px-2 py-2">
                            @if($shipment->discount_amount > 0)
                                <span class="text-green-700">-£{{ number_format($shipment->discount_amount,2) }}</span>
                            @else
                                <span class="text-gray-400">—</span>
                            @endif
                        </td>

                        <td class="px-2 py-2 font-semibold">£{{ number_format($shipment->final_price,2) }}</td>

                        <td class="px-2 py-2">
                            @include('components.shipment-status-badge', ['status'=>$shipment->status])
                        </td>

                        <td class="px-2 py-2">
                            @if($shipment->invoice && strtolower($shipment->invoice->status) === 'paid')
                                <span class="text-green-700 text-xs font-semibold">Paid</span>
                            @else
                                <span class="text-red-600 text-xs font-semibold">Unpaid</span>
                            @endif
                        </td>

                        <td class="px-2 py-2 flex gap-1">

                            <a href="{{ route('admin.shipments.show',$shipment->id) }}"
                               class="px-2 py-1 border rounded text-xs hover:bg-gray-100">
                               View
                            </a>

                            @if(!$shipment->invoice || strtolower($shipment->invoice->status) !== 'paid')
                                <a href="{{ route('admin.shipments.edit',$shipment->id) }}"
                                   class="px-2 py-1 rounded bg-indigo-600 text-white text-xs hover:bg-indigo-700">
                                   Edit
                                </a>
                            @endif

                        </td>
                    </tr>

                    @empty
                    <tr>
                        <td colspan="9" class="px-3 py-6 text-center text-gray-500">
                            No shipments found.
                        </td>
                    </tr>
                    @endforelse

                </tbody>
            </table>
        </div>

        <div class="px-3 py-2 border-t bg-gray-50 text-xs">
            {{ $shipments->links() }}
        </div>

    </div>

</div>
@endsection