@extends('layouts.app')

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
    body {
        font-family: 'DM Sans', sans-serif;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        min-height: 100vh;
    }

    .unsubscribe-card {
        background: white;
        border-radius: 24px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 10px 40px -10px rgb(0 0 0 / 0.1);
        overflow: hidden;
        position: relative;
    }

    .unsubscribe-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #C7160E, #ef4444);
    }

    .icon-container {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .icon-warning {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border: 2px solid #fcd34d;
    }

    .icon-done {
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        border: 2px solid #d1d5db;
    }

    .btn-cancel {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: white;
        padding: 14px 32px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 15px;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 14px -3px rgba(220, 38, 38, 0.4);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-cancel:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px -3px rgba(220, 38, 38, 0.5);
    }

    .btn-cancel:active {
        transform: translateY(0);
    }

    .notice-box {
        background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
        border: 1px solid #fde047;
        border-radius: 12px;
        padding: 16px 20px;
    }

    .header-bar {
        background: white;
        border-bottom: 1px solid #e5e7eb;
        padding: 20px 0;
    }
</style>

@section('content')
    <div class="header-bar">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between">
                <img class="h-12" src="/assets/loghi/iul.jpg" alt="IUL">
                <div class="text-right">
                    <h3 class="text-lg font-semibold text-[#C7160E]">Selezione Docenti TFA</h3>
                    <p class="text-sm text-gray-500">Gestione iscrizione</p>
                </div>
            </div>
        </div>
    </div>

    <div class="py-16">
        <div class="max-w-xl mx-auto px-4">
            <div class="unsubscribe-card">
                <div class="p-10">
                    @if($invite->isUnsubscribed())
                        <div class="text-center">
                            <div class="icon-container icon-done">
                                <svg class="w-8 h-8 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                </svg>
                            </div>

                            <h2 class="mt-6 text-2xl font-bold text-gray-900">
                                Cancellazione già effettuata
                            </h2>

                            <p class="mt-4 text-gray-600 leading-relaxed">
                                Hai già confermato la tua cancellazione da questa selezione in data
                                <strong class="text-gray-900">{{ $invite->unsubscribed_at?->format('d/m/Y') }}</strong>
                                alle ore <strong class="text-gray-900">{{ $invite->unsubscribed_at?->format('H:i') }}</strong>.
                            </p>

                            <div class="mt-8 pt-6 border-t border-gray-100">
                                <p class="text-sm text-gray-500">
                                    Per assistenza contatta
                                    <a href="mailto:reclutamentotfa@iuline.it" class="text-[#C7160E] hover:underline font-medium">reclutamentotfa@iuline.it</a>
                                </p>
                            </div>
                        </div>
                    @else
                        <div class="text-center">
                            <div class="icon-container icon-warning">
                                <svg class="w-8 h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                </svg>
                            </div>

                            <h2 class="mt-6 text-2xl font-bold text-gray-900">
                                Conferma cancellazione
                            </h2>

                            <p class="mt-4 text-gray-600 leading-relaxed">
                                Gentile <strong class="text-gray-900">{{ $invite->anagrafica->nome ?? '' }} {{ $invite->anagrafica->cognome ?? '' }}</strong>,<br>
                                stai per cancellarti dalla selezione
                            </p>

                            <p class="mt-2 text-lg font-semibold text-gray-900">
                                "{{ $invite->docentSelection->nome ?? 'Selezione Docenti' }}"
                            </p>

                            <div class="notice-box mt-6 text-left">
                                <div class="flex gap-3">
                                    <svg class="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                    <p class="text-sm text-amber-800">
                                        <strong>Attenzione:</strong> questa azione non potrà essere annullata. Non riceverai ulteriori comunicazioni relative a questa selezione.
                                    </p>
                                </div>
                            </div>

                            <form method="POST" action="{{ route('selezione-docenti.confirm-unsubscribe', $invite->token) }}" class="mt-8">
                                @csrf
                                <button type="submit" class="btn-cancel">
                                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                    Conferma cancellazione
                                </button>
                            </form>

                            <p class="mt-8 text-sm text-gray-500">
                                Hai cambiato idea? Puoi semplicemente chiudere questa pagina.
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection