@extends('layouts.app')

@section('title', 'Jenis Jalan — Pengaturan — ' . config('app.name', 'Website Pemetaan PJU'))

@section('content')
@php $base = rtrim(request()->getBasePath(), '/'); @endphp
    <div class="page-header">
        <div>
            <h1 class="page-title">Jenis Jalan</h1>
            <p class="page-subtitle">Pengaturan master jenis jalan</p>
        </div>
        <a href="{{ route('pengaturan.jenis-jalan.create') }}" class="btn-primary inline-flex items-center gap-2">
            <i class="fa-solid fa-plus"></i> Tambah
        </a>
    </div>

    @if(session('success'))
        <div class="mb-5 flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium"
             style="background:color-mix(in srgb, var(--color-primary) 12%, transparent); color:var(--color-primary); border:1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent);">
            <i class="fa-solid fa-circle-check text-base"></i>
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="mb-5 flex items-center gap-3 px-4 py-3 rounded-lg alert-error text-sm font-medium">
            <i class="fa-solid fa-circle-exclamation text-base"></i>
            {{ session('error') }}
        </div>
    @endif

    @if ($items->isEmpty())
        <div class="flex flex-col items-center justify-center py-20 rounded-xl border border-theme bg-surface gap-4">
            <div class="w-16 h-16 rounded-full flex items-center justify-center"
                 style="background:color-mix(in srgb, var(--color-primary) 10%, transparent);">
                <i class="fa-solid fa-road text-2xl" style="color:var(--color-primary);"></i>
            </div>
            <p class="text-muted text-sm">Belum ada jenis jalan.</p>
            <a href="{{ route('pengaturan.jenis-jalan.create') }}" class="btn-primary inline-flex items-center gap-2 text-sm">
                <i class="fa-solid fa-plus"></i> Tambah Sekarang
            </a>
        </div>
    @else
        <div class="mb-3">
            <p class="text-sm text-muted">Menampilkan <strong class="text-body">{{ $items->count() }}</strong> data</p>
        </div>
        <div class="rounded-xl border border-theme bg-surface shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm" aria-label="Tabel Jenis Jalan">
                    <thead>
                        <tr style="background:var(--color-primary);">
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">#</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Nama</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Urutan</th>
                            <th class="px-4 py-3 text-center text-xs font-bold uppercase tracking-wider text-white opacity-90 whitespace-nowrap">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($items as $index => $item)
                            @php $isEven = $index % 2 === 0; @endphp
                            <tr style="{{ $isEven ? 'background:var(--color-surface);' : 'background:color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));' }}"
                                class="border-b border-theme last:border-0 transition-colors"
                                onmouseover="this.style.background='color-mix(in srgb, var(--color-primary) 12%, var(--color-surface))'"
                                onmouseout="this.style.background='{{ $isEven ? 'var(--color-surface)' : 'color-mix(in srgb, var(--color-primary) 5%, var(--color-surface))' }}'">
                                <td class="px-4 py-3.5 text-muted font-medium text-center w-10">{{ $index + 1 }}</td>
                                <td class="px-4 py-3.5">
                                    <a href="{{ route('pengaturan.jenis-jalan.edit', $item) }}" class="font-bold hover:underline" style="color:var(--color-primary);">{{ $item->nama }}</a>
                                </td>
                                <td class="px-4 py-3.5 text-body">{{ $item->urutan ?? 0 }}</td>
                                <td class="px-4 py-3.5">
                                    <div class="flex items-center justify-center gap-2">
                                        <a href="{{ route('pengaturan.jenis-jalan.edit', $item) }}"
                                           class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-all"
                                           style="background:#fef3c7; color:#92400e; border:1.5px solid #f59e0b;"
                                           title="Edit"
                                           onmouseover="this.style.background='#f59e0b';this.style.color='#fff';this.style.borderColor='#f59e0b'"
                                           onmouseout="this.style.background='#fef3c7';this.style.color='#92400e';this.style.borderColor='#f59e0b'">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </a>
                                        <form action="{{ route('pengaturan.jenis-jalan.destroy', $item) }}" method="POST" class="inline"
                                              onsubmit="return confirm('Yakin ingin menghapus jenis jalan ini?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit"
                                                    class="inline-flex items-center justify-center w-9 h-9 rounded-lg transition-all cursor-pointer"
                                                    style="background:#fee2e2; color:#991b1b; border:1.5px solid #f87171;"
                                                    title="Hapus"
                                                    onmouseover="this.style.background='#dc2626';this.style.color='#fff';this.style.borderColor='#dc2626'"
                                                    onmouseout="this.style.background='#fee2e2';this.style.color='#991b1b';this.style.borderColor='#f87171'">
                                                <i class="fa-solid fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection