@extends('layout.dashboard.master')

@section('content')

<div class="flex flex-col w-full h-full">

    <div class="w-full grow items-center justify-between px-5 py-4 gap-2.5 transition-all duration-300">

        <img alt="Logo" class="dark:block" style="height: 60px" src="{{ asset('img/logo/sanbs_logo_es.png') }}" />

    </div>

    <div class="bg-gradient-to-br from-red-50 via-white to-red-100">

        <!-- Background Decorations -->
        <div class="absolute inset-0 overflow-hidden pointer-events-none">

            <div class="absolute top-0 left-0 h-72 w-72 rounded-full bg-red-100 blur-3xl opacity-40"></div>

            <div class="absolute bottom-0 right-0 h-96 w-96 rounded-full bg-red-200 blur-3xl opacity-30"></div>

        </div>

        <!-- Content -->
        <div class="relative flex items-center justify-center p-4">

            <div class="w-full max-w-2xl">

                <!-- Card -->
                <div class="overflow-hidden rounded-xl border border-gray-200 bg-white/90 shadow-2xl backdrop-blur-xl">

                    <!-- Top Accent -->
                    <div class="h-2 bg-gradient-to-r from-red-500 via-red-400 to-red-600"></div>

                    <div class="px-8 py-8 text-center">

                        <!-- Success Icon -->
                        <div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-100 shadow-inner">

                            <div class="flex h-16 w-16 items-center justify-center rounded-full bg-emerald-500 text-white shadow-lg">

                                <i class="fa-solid fa-check text-2xl"></i>

                            </div>

                        </div>

                        <!-- Heading -->
                        <div class="mt-7">

                            <h1 class="text-2xl font-bold tracking-tight text-gray-900">
                                Blood Drive Date Confirmed
                            </h1>

                            <p class="mt-5 text-base sm:text-lg leading-8 text-gray-600 max-w-xl mx-auto">
                                The blood drive date has been formally confirmed.
                                The designated DRP will now proceed with all outstanding tasks and coordination efforts
                                required to transition the ticket into the planning phase.

                            </p>

                        </div>

                        <!-- Date Card -->
                        <div class="mt-8 rounded-3xl border border-red-100 bg-red-50 px-6 py-5">

                            <div class="flex flex-col sm:flex-row items-center justify-center gap-3">

                                <div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-white text-red-500 shadow-sm">

                                    <i class="fa-solid fa-calendar-days text-lg"></i>

                                </div>

                                <div class="text-center sm:text-left">

                                    <p class="text-sm font-medium uppercase tracking-wide text-red-500">
                                        Confirmed Date
                                    </p>

                                    <p class="mt-1 text-lg font-semibold text-gray-900">
                                        {{ \Carbon\Carbon::parse($ticket->events()->where('is_assessment_event', 0)->first()?->start_time)->format('dS M - Y') }}
                                    </p>

                                </div>

                            </div>

                        </div>

                        <!-- Footer -->
                        <div class="mt-12 border-t border-gray-100 pt-6">

                            <p class="text-sm text-gray-400">
                                Thank you for confirming the blood drive date.
                            </p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection