@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-teal-100 text-4xl text-teal-700 ring-1 ring-teal-200">
        <i class="fa-solid fa-bullhorn"></i>
    </div>

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

    <p class="mt-3 text-slate-500">
        Pengurus akan menindaklanjuti laporan 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-teal-300"></i>
            Kode Tracking
        </p>

        <p class="mt-1 text-3xl font-black tracking-wider">
            {{ $complaint->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> {{ $complaint->name }}
            </span>
        </p>

        <p class="flex items-center gap-2">
            <i class="fa-solid fa-heading text-teal-600"></i>
            <span>
                <b>Subjek:</b> {{ $complaint->subject }}
            </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($complaint->status === 'selesai' || $complaint->status === 'completed')
                        <i class="fa-solid fa-circle-check"></i>
                    @elseif($complaint->status === 'diproses' || $complaint->status === 'process' || $complaint->status === 'in_progress')
                        <i class="fa-solid fa-spinner"></i>
                    @elseif($complaint->status === 'ditolak' || $complaint->status === 'rejected')
                        <i class="fa-solid fa-circle-xmark"></i>
                    @else
                        <i class="fa-solid fa-clock"></i>
                    @endif

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

    <p class="mt-6 text-sm leading-6 text-slate-500">
        <i class="fa-solid fa-bell text-emerald-600"></i>
        Notifikasi WA/Email dikirim ke pengurus agar laporan dapat diproses sampai selesai.
    </p>

    <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:justify-center">
        <a href="{{ route('complaints.create') }}" class="btn-soft inline-flex items-center justify-center gap-2">
            <i class="fa-solid fa-plus"></i>
            Buat Pengaduan 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