@extends('layouts.app')

@section('content')
<section class="mx-auto max-w-2xl card p-8 text-center">
    <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 text-4xl text-emerald-700 ring-1 ring-emerald-200">
        <i class="fa-solid fa-circle-check"></i>
    </div>

    <h2 class="mt-5 text-3xl font-black text-slate-950">
        Permohonan Surat Terkirim
    </h2>

    <p class="mt-3 text-slate-500">
        Simpan kode tracking berikut untuk mengecek status permohonan surat Anda.
    </p>

    <div class="mt-6 rounded-3xl bg-slate-950 p-5 text-white">
        <p class="inline-flex items-center justify-center gap-2 text-sm font-bold text-slate-400">
            <i class="fa-solid fa-barcode text-emerald-300"></i>
            Kode Tracking
        </p>

        <p class="mt-1 text-3xl font-black tracking-wider">
            {{ $letter->tracking_code }}
        </p>
    </div>

    <div class="mt-6 grid gap-3 rounded-3xl bg-slate-50 p-5 text-left ring-1 ring-slate-100">
        <p class="flex items-center gap-2">
            <i class="fa-solid fa-user text-teal-600"></i>
            <span>
                <b>Nama:</b> {{ $letter->name }}
            </span>
        </p>

        <p class="flex items-center gap-2">
            <i class="fa-solid fa-file-lines text-teal-600"></i>
            <span>
                <b>Jenis:</b> {{ $letter->letter_type }}
            </span>
        </p>

        <p class="flex items-center gap-2">
            <i class="fa-solid fa-signal text-teal-600"></i>
            <span>
                <b>Status:</b>
                <span class="badge inline-flex items-center gap-2">
                    @if($letter->status === 'selesai' || $letter->status === 'completed')
                        <i class="fa-solid fa-circle-check"></i>
                    @elseif($letter->status === 'diproses' || $letter->status === 'process' || $letter->status === 'in_progress')
                        <i class="fa-solid fa-spinner"></i>
                    @elseif($letter->status === 'ditolak' || $letter->status === 'rejected')
                        <i class="fa-solid fa-circle-xmark"></i>
                    @else
                        <i class="fa-solid fa-clock"></i>
                    @endif

                    {{ $letter->status }}
                </span>
            </span>
        </p>
    </div>

    @if(!empty($letter->file_path))
        <div class="mt-6 rounded-3xl border border-emerald-200 bg-emerald-50 p-5 text-left">
            <p class="font-black text-emerald-800">
                <i class="fa-solid fa-file-arrow-down mr-2"></i>
                File surat sudah tersedia
            </p>

            <p class="mt-2 text-sm leading-6 text-emerald-700">
                Surat yang sudah selesai dapat diunduh melalui tombol berikut.
            </p>

            <a
                href="{{ asset('storage/' . $letter->file_path) }}"
                target="_blank"
                class="mt-4 btn-primary inline-flex items-center gap-2"
            >
                <i class="fa-solid fa-download"></i>
                Download Surat
            </a>
        </div>
    @endif

    <p class="mt-6 text-sm leading-6 text-slate-500">
        <i class="fa-solid fa-bell text-emerald-600"></i>
        Pengurus akan menerima notifikasi WA/Email dan menindaklanjuti sampai selesai.
    </p>

    <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
        <a href="{{ route('letters.create') }}" class="btn-soft inline-flex items-center justify-center gap-2">
            <i class="fa-solid fa-plus"></i>
            Buat Permohonan Baru
        </a>

        <a href="{{ route('home') }}" class="btn-primary inline-flex items-center justify-center gap-2">
            <i class="fa-solid fa-house"></i>
            Kembali ke Beranda
        </a>
    </div>
</section>
@endsection