@extends('admin.layouts.app')

@section('title', 'Kategori Package')
@section('page-title', 'Kategori Package')
@section('page-subtitle', 'Kelola kategori untuk package perjalanan')

@section('header-actions')
    <a href="{{ route('admin.category-packages.create') }}" class="btn-primary">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
        </svg>
        Tambah Kategori
    </a>
@endsection

@section('content')

<div class="bg-white rounded-xl border border-slate-200">

    {{-- Toolbar --}}
    <div class="p-5 border-b border-slate-100 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <form method="GET" action="{{ route('admin.category-packages.index') }}" class="relative w-full sm:w-72">
            <svg class="w-4 h-4 text-slate-300 absolute left-3 top-1/2 -translate-y-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z"/>
            </svg>
            <input
                type="text"
                name="search"
                value="{{ request('search') }}"
                placeholder="Cari nama kategori..."
                class="w-full text-sm border border-slate-200 rounded-lg pl-9 pr-3 py-2.5 placeholder-slate-300 focus:outline-none focus:ring-2 focus:ring-brand-400 focus:border-transparent transition-all"
            />
        </form>
        <p class="text-xs text-slate-400 whitespace-nowrap">
            Total <span class="font-semibold text-slate-600">{{ $categories->total() }}</span> kategori
        </p>
    </div>

    {{-- Table --}}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-slate-50 text-left text-xs font-bold text-slate-400 uppercase tracking-wider">
                    <th class="px-5 py-3 w-16">ID</th>
                    <th class="px-5 py-3">Nama Kategori</th>
                    <th class="px-5 py-3 w-44">Dibuat</th>
                    <th class="px-5 py-3 w-32 text-right">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($categories as $category)
                <tr class="hover:bg-slate-50/60 transition-colors">
                    <td class="px-5 py-3.5 text-slate-400 font-mono text-xs">#{{ $category->id }}</td>
                    <td class="px-5 py-3.5">
                        <span class="font-medium text-slate-700">{{ $category->name }}</span>
                    </td>
                    <td class="px-5 py-3.5 text-slate-400 text-xs">
                        {{ \Carbon\Carbon::parse($category->created_at)->format('d M Y, H:i') }}
                    </td>
                    <td class="px-5 py-3.5">
                        <div class="flex items-center justify-end gap-1.5">
                            <a href="{{ route('admin.category-packages.edit', $category->id) }}"
                               class="p-2 text-slate-400 hover:text-brand-600 hover:bg-brand-50 rounded-lg transition-all"
                               title="Edit">
                                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                                </svg>
                            </a>
                            <form action="{{ route('admin.category-packages.destroy', $category->id) }}" method="POST"
                                  onsubmit="return confirm('Hapus kategori &quot;{{ $category->name }}&quot;?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit"
                                        class="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-all"
                                        title="Hapus">
                                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                    </svg>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="px-5 py-16 text-center">
                        <svg class="w-10 h-10 text-slate-200 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                        <p class="text-sm text-slate-400">
                            @if(request('search'))
                                Tidak ada kategori yang cocok dengan "{{ request('search') }}"
                            @else
                                Belum ada kategori. Klik "Tambah Kategori" untuk membuat yang pertama.
                            @endif
                        </p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($categories->hasPages())
    <div class="px-5 py-4 border-t border-slate-100">
        {{ $categories->links() }}
    </div>
    @endif

</div>
@endsection