@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - Mapping Success')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Account Lawyer Mapping</span>
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Success</span>
@endsection

@push('styles')
<style>
    /* Full height relative to the content area without main padding */
    /* wrapper styled inline to avoid specificity issues */

    .success-card {
        width: 100%;
        max-width: 520px;
        background: #ffffff;
        border-radius: 2.5rem;
        padding: 46px 40px 38px;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
        text-align: center;
    }

    @keyframes successPop {
        0% { transform: scale(0.6); opacity: 0; }
        60% { transform: scale(1.08); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
    }

    .success-circle {
        animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        background: radial-gradient(circle at top left, #00ada8 0%, #007d79 100%);
        box-shadow: 0 20px 40px rgba(0,125,121,0.4);
    }

    .btn-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 999px;
        padding: 11px 40px;
        border: none;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        background: radial-gradient(circle at top left, #062a27 0%, #0f172a 45%, #1e293b 100%);
        color: #ffffff;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.45);
        transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.15s ease;
    }

    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.5);
        background: radial-gradient(circle at top left, #0b3b37 0%, #020617 100%);
    }

    .btn-primary:active {
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.4);
    }
</style>
</style>
@endpush

@section('content')
    <div style="display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 120px);background:radial-gradient(circle at top left,#005b58 0%,#00434a 40%,#002f35 100%);border-radius:24px;margin:-8px -32px -32px -32px;">
        <section class="success-card" aria-live="polite">
            <div
                class="success-circle w-20 h-20 rounded-full mx-auto flex items-center justify-center shadow-2xl"
                aria-hidden="true"
            >
                <i class="fa-solid fa-check text-white text-3xl"></i>
            </div>

            <h1 class="mt-8 text-2xl font-black text-slate-800 tracking-tight">Lawyer Assigned Successfully</h1>
            <p class="mt-3 text-[11px] font-black text-slate-400 uppercase tracking-[0.2em]">
                Account No: <span id="successAccountNo" class="text-[#00ada8] ml-1">{{ $accountNo }}</span>
            </p>

            <button id="btnDone" class="btn-primary mt-9" type="button">
                Done
            </button>
        </section>
    </div>
@endsection

@push('scripts')
<script>
    document.getElementById("btnDone").addEventListener("click", () => {
        // Typically goes to Account-Lawyer List, we don't have that yet, so resetting to search
        window.location.href = "{{ route('admin.account-lawyer.index') }}";
    });
</script>
@endpush