@extends('layouts.admin')

@section('title', 'Permohonan Surat')

@section('admin_content')
<div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <form class="relative w-full sm:w-96">
        <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
        <input
            class="admin-input pl-11"
            name="q"
            value="{{ request('q') }}"
            placeholder="Cari kode, nama, jenis surat..."
        >
    </form>
</div>

<div class="admin-card overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full min-w-[980px] text-sm">
            <thead class="bg-slate-50 text-left text-xs uppercase tracking-wider text-slate-500">
                <tr>
                    <th class="p-4">Kode</th>
                    <th class="p-4">Nama</th>
                    <th class="p-4">Jenis</th>
                    <th class="p-4">WA</th>
                    <th class="p-4">Status</th>
                    <th class="p-4">Aksi</th>
                </tr>
            </thead>

            <tbody class="divide-y divide-slate-100">
                @forelse($letters as $l)
                    <tr class="transition hover:bg-teal-50/40">
                        <td class="p-4 font-black text-slate-950">
                            <span class="inline-flex items-center gap-2">
                                <i class="fa-solid fa-barcode text-teal-600"></i>
                                {{ $l->tracking_code }}
                            </span>
                        </td>

                        <td class="p-4">
                            <div class="font-black text-slate-950">{{ $l->name }}</div>
                            <div class="text-xs font-semibold text-slate-400">{{ $l->email ?: '-' }}</div>
                        </td>

                        <td class="p-4">
                            <span class="inline-flex items-center gap-2 font-bold text-slate-700">
                                <i class="fa-solid fa-file-lines text-teal-600"></i>
                                {{ $l->letter_type }}
                            </span>
                        </td>

                        <td class="p-4">
                            <span class="inline-flex items-center gap-2 text-slate-600">
                                <i class="fa-brands fa-whatsapp text-emerald-600"></i>
                                {{ $l->phone }}
                            </span>
                        </td>

                        <td class="p-4">
                            <div class="grid gap-3">
                                <div>
                                    @if($l->status === 'completed' || $l->status === 'selesai')
                                        <span class="badge inline-flex items-center gap-2">
                                            <i class="fa-solid fa-circle-check"></i>
                                            {{ $l->status }}
                                        </span>
                                    @elseif($l->status === 'process' || $l->status === 'in_progress' || $l->status === 'diproses')
                                        <span class="inline-flex items-center gap-2 rounded-full bg-blue-100 px-3 py-2 text-xs font-black text-blue-700">
                                            <i class="fa-solid fa-spinner"></i>
                                            {{ $l->status }}
                                        </span>
                                    @elseif($l->status === 'rejected' || $l->status === 'ditolak')
                                        <span class="inline-flex items-center gap-2 rounded-full bg-rose-100 px-3 py-2 text-xs font-black text-rose-700">
                                            <i class="fa-solid fa-circle-xmark"></i>
                                            {{ $l->status }}
                                        </span>
                                    @else
                                        <span class="badge-amber inline-flex items-center gap-2">
                                            <i class="fa-solid fa-clock"></i>
                                            {{ $l->status }}
                                        </span>
                                    @endif
                                </div>

                                <form method="post" action="{{ route('admin.letters.update', $l) }}" class="flex min-w-[260px] gap-2">
                                    @csrf
                                    @method('PUT')

                                    <input type="hidden" name="resident_id" value="{{ $l->resident_id }}">
                                    <input type="hidden" name="name" value="{{ $l->name }}">
                                    <input type="hidden" name="phone" value="{{ $l->phone }}">
                                    <input type="hidden" name="email" value="{{ $l->email }}">
                                    <input type="hidden" name="letter_type" value="{{ $l->letter_type }}">
                                    <input type="hidden" name="address" value="{{ $l->address }}">
                                    <input type="hidden" name="purpose" value="{{ $l->purpose }}">
                                    <input type="hidden" name="admin_note" value="{{ $l->admin_note }}">
                                    <input type="hidden" name="notify_channel" value="none">

                                    <select
                                        name="status"
                                        class="w-full rounded-2xl border border-slate-200 bg-white px-3 py-2 text-xs font-black text-slate-700 outline-none transition focus:border-teal-400 focus:ring-4 focus:ring-teal-100"
                                    >
                                        <option value="submitted" @selected($l->status === 'submitted')>Submitted</option>
                                        <option value="process" @selected($l->status === 'process' || $l->status === 'in_progress' || $l->status === 'diproses')>Diproses</option>
                                        <option value="completed" @selected($l->status === 'completed' || $l->status === 'selesai')>Selesai</option>
                                        <option value="rejected" @selected($l->status === 'rejected' || $l->status === 'ditolak')>Ditolak</option>
                                    </select>

                                    <button
                                        class="rounded-2xl bg-slate-950 px-3 py-2 text-xs font-black text-white transition hover:bg-teal-700"
                                        onclick="return confirm('Update status permohonan surat ini?')"
                                    >
                                        Update
                                    </button>
                                </form>
                            </div>
                        </td>

                        <td class="p-4">
                            <div class="flex flex-wrap gap-2">
                                <a class="btn-soft" href="{{ route('admin.letters.show', $l) }}">
                                    <i class="fa-solid fa-eye"></i>
                                    Detail
                                </a>

                                <a class="btn-soft" href="{{ route('admin.letters.edit', $l) }}">
                                    <i class="fa-solid fa-pen"></i>
                                    Edit
                                </a>

                                <form method="post" action="{{ route('admin.letters.destroy', $l) }}" onsubmit="return confirm('Yakin ingin menghapus permohonan surat ini?')">
                                    @csrf
                                    @method('DELETE')

                                    <button class="btn-danger">
                                        <i class="fa-solid fa-trash"></i>
                                        Hapus
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="p-10 text-center text-slate-500">
                            Belum ada data permohonan surat.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-4">
    {{ $letters->links() }}
</div>
@endsection