@extends('layouts.admin')

@section('title', 'Delivery Challans')

@section('page-title', 'Delivery Challans')

@section('breadcrumbs')
    <span class="text-primary font-medium">Delivery Challans</span>
@endsection

@section('content')
<div class="max-w-[1400px] mx-auto">
    <!-- Header Section -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
        <h1 class="text-2xl font-bold text-gray-900 text-gray-900">Delivery Challans</h1>
        <div class="flex items-center gap-3">
            <a href="{{ route('admin.delivery-challans.create') }}" class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium shadow-lg shadow-primary/30 hover:bg-blue-600 transition-colors">
                <span class="material-symbols-outlined text-lg">add</span>
                <span>New Challan</span>
            </a>
            <select class="px-3 py-2 text-sm border border-gray-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary">
                <option>10 / page</option>
                <option>25 / page</option>
                <option>50 / page</option>
                <option>100 / page</option>
            </select>
        </div>
    </div>

    <!-- Search Bar -->
    <div class="mb-4">
        <input type="text" placeholder="Search challans..." class="w-full max-w-md h-10 px-4 rounded-lg border border-gray-200 bg-white text-gray-900 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-primary">
    </div>

    <!-- Delivery Challans Table -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">#</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">CHALLAN #</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">INVOICE</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">CUSTOMER</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">DELIVERY DATE</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">ITEMS</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500">STATUS</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-gray-500 text-right">ACTIONS</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($challans ?? [] as $challan)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                        <td class="py-4 px-6 text-sm text-gray-600">{{ $challans->firstItem() + $loop->index }}</td>
                        <td class="py-4 px-6">
                            <a href="{{ route('admin.delivery-challans.show', $challan->id) }}" class="text-sm font-medium text-primary hover:underline">{{ $challan->challan_number }}</a>
                        </td>
                        <td class="py-4 px-6 text-sm text-gray-600">{{ $challan->invoice->invoice_number ?? '-' }}</td>
                        <td class="py-4 px-6 text-sm text-gray-900 dark:text-gray-900">{{ $challan->customer->name ?? 'N/A' }}</td>
                        <td class="py-4 px-6 text-sm text-gray-600">{{ $challan->delivery_date->format('M d, Y') }}</td>
                        <td class="py-4 px-6 text-sm text-gray-600">{{ $challan->items->count() }} items</td>
                        <td class="py-4 px-6">
                            @php
                                $status = $challan->status ?? 'pending';
                                $statusClasses = [
                                    'pending' => 'bg-yellow-100 text-yellow-800',
                                    'shipped' => 'bg-blue-100 text-blue-800',
                                    'delivered' => 'bg-green-100 text-green-800',
                                    'cancelled' => 'bg-red-100 text-red-800',
                                ];
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $statusClasses[$status] ?? $statusClasses['pending'] }}">
                                {{ ucfirst($status) }}
                            </span>
                        </td>
                        <td class="py-4 px-6 text-right">
                            <div class="flex items-center justify-end gap-2">
                                <a href="{{ route('admin.delivery-challans.show', $challan->id) }}" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                                    <span class="material-symbols-outlined text-lg">visibility</span>
                                </a>
                                <a href="#" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                                    <span class="material-symbols-outlined text-lg">print</span>
                                </a>
                                <form action="{{ route('admin.delivery-challans.destroy', $challan->id) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this delivery challan?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-gray-500 hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                                        <span class="material-symbols-outlined text-lg">delete</span>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="py-12 px-6 text-center text-gray-500">
                            <span class="material-symbols-outlined text-4xl mb-2 block">local_shipping</span>
                            <p>No delivery challans found</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if(isset($challans) && method_exists($challans, 'hasPages') && $challans->hasPages())
        <div class="px-6 py-4 border-t border-gray-200">
            {{ $challans->links() }}
        </div>
        @endif
    </div>
</div>
@endsection