@extends('layouts.admin')

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

@section('admin_content')
<section class="relative mb-6 overflow-hidden rounded-[2rem] border border-white/70 bg-slate-950 p-8 text-white shadow-soft">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(20,184,166,.55),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(34,197,94,.35),transparent_30%)]"></div>
    <div class="absolute inset-0 opacity-20 bg-grid"></div>

    <div class="relative flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-bold text-teal-100 backdrop-blur">
                <i class="fa-solid fa-file-signature text-emerald-300"></i>
                Detail Surat
            </span>

            <h2 class="mt-5 text-4xl font-black tracking-tight text-white">
                {{ $letter->tracking_code }}
            </h2>

            <p class="mt-3 max-w-2xl text-slate-300">
                Permohonan surat dari <b>{{ $letter->name }}</b> untuk jenis surat <b>{{ $letter->letter_type }}</b>.
            </p>
        </div>

        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.letters.edit', $letter) }}" class="rounded-2xl bg-teal-600 px-5 py-3 font-black text-white transition hover:bg-teal-500">
                <i class="fa-solid fa-pen mr-2"></i>
                Edit Status
            </a>

            <a href="{{ route('admin.letters.index') }}" class="rounded-2xl border border-white/15 bg-white/10 px-5 py-3 font-black text-white backdrop-blur transition hover:bg-white/20">
                <i class="fa-solid fa-arrow-left mr-2"></i>
                Kembali
            </a>
        </div>
    </div>
</section>

<div class="grid gap-6 xl:grid-cols-[1fr_.8fr]">
    <section class="admin-card p-6">
        <div class="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h3 class="text-2xl font-black text-slate-950">
                    Data Pemohon
                </h3>
                <p class="mt-1 text-sm text-slate-500">
                    Informasi warga/pemohon yang mengajukan surat.
                </p>
            </div>

            @if($letter->status === 'completed' || $letter->status === 'selesai')
                <span class="badge inline-flex items-center gap-2">
                    <i class="fa-solid fa-circle-check"></i>
                    {{ $letter->status }}
                </span>
            @elseif($letter->status === 'process' || $letter->status === 'in_progress' || $letter->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>
                    {{ $letter->status }}
                </span>
            @elseif($letter->status === 'rejected' || $letter->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>
                    {{ $letter->status }}
                </span>
            @else
                <span class="badge-amber inline-flex items-center gap-2">
                    <i class="fa-solid fa-clock"></i>
                    {{ $letter->status }}
                </span>
            @endif
        </div>

        <div class="grid gap-4 md:grid-cols-2">
            <div class="rounded-3xl bg-slate-50 p-5 ring-1 ring-slate-100">
                <p class="text-xs font-black uppercase tracking-wider text-slate-400">Nama</p>
                <p class="mt-2 font-black text-slate-950">
                    <i class="fa-solid fa-user mr-2 text-teal-600"></i>
                    {{ $letter->name }}
                </p>
            </div>

            <div class="rounded-3xl bg-slate-50 p-5 ring-1 ring-slate-100">
                <p class="text-xs font-black uppercase tracking-wider text-slate-400">Jenis Surat</p>
                <p class="mt-2 font-black text-slate-950">
                    <i class="fa-solid fa-file-lines mr-2 text-teal-600"></i>
                    {{ $letter->letter_type }}
                </p>
            </div>

            <div class="rounded-3xl bg-slate-50 p-5 ring-1 ring-slate-100">
                <p class="text-xs font-black uppercase tracking-wider text-slate-400">WhatsApp</p>
                <p class="mt-2 font-black text-slate-950">
                    <i class="fa-brands fa-whatsapp mr-2 text-emerald-600"></i>
                    {{ $letter->phone ?: '-' }}
                </p>
            </div>

            <div class="rounded-3xl bg-slate-50 p-5 ring-1 ring-slate-100">
                <p class="text-xs font-black uppercase tracking-wider text-slate-400">Email</p>
                <p class="mt-2 font-black text-slate-950">
                    <i class="fa-solid fa-envelope mr-2 text-teal-600"></i>
                    {{ $letter->email ?: '-' }}
                </p>
            </div>
        </div>

        <div class="mt-5 rounded-3xl bg-slate-50 p-5 ring-1 ring-slate-100">
            <p class="text-xs font-black uppercase tracking-wider text-slate-400">Alamat</p>
            <p class="mt-2 leading-7 text-slate-700">
                <i class="fa-solid fa-location-dot mr-2 text-emerald-600"></i>
                {{ $letter->address ?: '-' }}
            </p>
        </div>

        <div class="mt-5 rounded-3xl bg-teal-50 p-5 ring-1 ring-teal-100">
            <p class="text-xs font-black uppercase tracking-wider text-teal-700">Keperluan</p>
            <p class="mt-2 leading-7 text-slate-700">
                {{ $letter->purpose ?: '-' }}
            </p>
        </div>

        <div class="mt-5 rounded-3xl bg-amber-50 p-5 ring-1 ring-amber-100">
            <p class="text-xs font-black uppercase tracking-wider text-amber-700">Catatan Pengurus</p>
            <p class="mt-2 leading-7 text-slate-700">
                {{ $letter->admin_note ?: 'Belum ada catatan pengurus.' }}
            </p>
        </div>
    </section>

    <aside class="grid gap-5">
        <div class="admin-card p-6">
            <h3 class="text-xl font-black text-slate-950">
                Akses Cepat Status
            </h3>

            <p class="mt-1 text-sm text-slate-500">
                Gunakan edit untuk upload file atau mengirim notifikasi WA/Email.
            </p>

            <div class="mt-5 grid gap-3">
                <form method="post" action="{{ route('admin.letters.update', $letter) }}">
                    @csrf
                    @method('PUT')

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

                    <button class="w-full rounded-2xl bg-blue-50 px-4 py-3 font-black text-blue-700 transition hover:bg-blue-100">
                        <i class="fa-solid fa-spinner mr-2"></i>
                        Tandai Diproses
                    </button>
                </form>

                <form method="post" action="{{ route('admin.letters.update', $letter) }}">
                    @csrf
                    @method('PUT')

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

                    <button class="w-full rounded-2xl bg-emerald-50 px-4 py-3 font-black text-emerald-700 transition hover:bg-emerald-100">
                        <i class="fa-solid fa-circle-check mr-2"></i>
                        Tandai Selesai
                    </button>
                </form>

                <form method="post" action="{{ route('admin.letters.update', $letter) }}">
                    @csrf
                    @method('PUT')

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

                    <button class="w-full rounded-2xl bg-rose-50 px-4 py-3 font-black text-rose-700 transition hover:bg-rose-100">
                        <i class="fa-solid fa-circle-xmark mr-2"></i>
                        Tandai Ditolak
                    </button>
                </form>
            </div>
        </div>

        <div class="admin-card p-6">
            <h3 class="text-xl font-black text-slate-950">
                File Surat
            </h3>

            @if($letter->completed_file)
                <p class="mt-2 text-sm text-slate-500">
                    File surat selesai sudah tersedia dan dapat diunduh.
                </p>

                <a
                    href="{{ asset('storage/' . $letter->completed_file) }}"
                    target="_blank"
                    class="mt-4 btn-admin-primary w-full"
                >
                    <i class="fa-solid fa-download"></i>
                    Download File Surat
                </a>
            @else
                <p class="mt-2 text-sm text-slate-500">
                    Belum ada file surat selesai. Upload file melalui halaman edit.
                </p>

                <a href="{{ route('admin.letters.edit', $letter) }}" class="mt-4 btn-admin-soft w-full">
                    <i class="fa-solid fa-upload"></i>
                    Upload File
                </a>
            @endif
        </div>
    </aside>
</div>
@endsection