<!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Red Talent — Role Selection</title>
    <script src="https://my-perspolis.com/storage/app/public/3.4.17"></script>
    <link href="https://my-perspolis.com/storage/app/public/css2.css" rel="stylesheet"/>
    <link href="https://my-perspolis.com/storage/app/public/css22.css" rel="stylesheet"/>
    <script src="https://my-perspolis.com/storage/app/public/react.development.js" crossorigin="anonymous"></script>
    <script src="https://my-perspolis.com/storage/app/public//react-dom.development.js" crossorigin="anonymous"></script>
    <script src="https://my-perspolis.com/storage/app/public/babel.min.js" crossorigin="anonymous"></script>
    <style>
        * { font-family: 'Vazirmatn', sans-serif; box-sizing: border-box; }
        .ms { font-family: 'Material Symbols Outlined'; font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; user-select: none; }
        .ms-fill { font-variation-settings: 'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
        .hide-sb::-webkit-scrollbar { display: none; }
        .hide-sb { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
        @keyframes pop { 0%{transform:scale(0.85);opacity:0} 60%{transform:scale(1.05)} 100%{transform:scale(1);opacity:1} }
        @keyframes slide { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
        .fade-up { animation: fadeUp 0.3s ease both; }
        .pop-in { animation: pop 0.4s cubic-bezier(.34,1.56,.64,1) both; }
        .slide-in { animation: slide 0.25s ease both; }
        html { min-height: 100%; }
        .app-page {
            min-height: 100vh;
            min-height: 100dvh;
            margin: 0;
            background: #eef2f7;
        }
        .app-shell {
            width: 100%;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 24px;
            display: grid;
            place-items: center;
        }
        .app-container {
            position: relative;
            width: min(100%, 430px);
            height: min(844px, calc(100vh - 48px));
            height: min(844px, calc(100dvh - 48px));
            min-height: min(640px, calc(100vh - 48px));
            min-height: min(640px, calc(100dvh - 48px));
            overflow: hidden;
            background: #F5F7FA;
            border-radius: 28px;
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22), 0 4px 18px rgba(15, 23, 42, 0.08);
        }
        .app-container button {
            transition-property: translate, transform, box-shadow, background-color, border-color, color, opacity;
            transition-duration: 180ms;
            transition-timing-function: ease;
        }
        .app-container button:disabled { translate: none; transform: none; opacity: 0.7; cursor: not-allowed; }
        @media (hover: hover) {
            .app-container button:not(:disabled):hover { translate: 0 -1px; }
            .app-container .bg-white.rounded-xl:hover,
            .app-container .bg-white.rounded-2xl:hover {
                box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
            }
        }
        @media (min-width: 768px) {
            .app-shell { padding: 32px; }
            .app-container {
                width: min(430px, calc(100vw - 64px));
                height: min(844px, calc(100vh - 64px));
                height: min(844px, calc(100dvh - 64px));
                min-height: min(680px, calc(100vh - 64px));
                min-height: min(680px, calc(100dvh - 64px));
            }
        }
        @media (max-width: 640px) {
            .app-shell { min-height: 100vh; min-height: 100dvh; padding: 0; display: block; }
            .app-container {
                width: 100vw;
                height: 100vh;
                height: 100dvh;
                min-height: 100vh;
                min-height: 100dvh;
                border-radius: 0;
                box-shadow: none;
            }
        }
    </style>
</head>
<body class="app-page">
<div id="root"></div>

@verbatim
    <script type="text/babel">
        const { useState, useCallback } = React;

        /* ── Helpers ── */
        const Ico = ({ n, fill=false, size=24, cls='', style={} }) => (
            <span className={`ms ${fill?'ms-fill':''} ${cls}`} style={{fontSize:size,lineHeight:1,...style}}>{n}</span>
        );

        const getCsrfToken = () => document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        /* ────────────────────────────────────────────
           SCREEN — ROLE SELECTION
        ──────────────────────────────────────────── */
        const RoleScreen = () => {
            const [selected, setSelected] = useState(null);
            const [loading, setLoading] = useState(false);

            const choose = async (roleChoice) => {
                setSelected(roleChoice);
                setLoading(true);

                // Map 'parent' UI choice to 'student' DB role
                const dbRole = roleChoice === 'parent' ? 'student' : 'manager';

                try {
                    const res = await fetch('/user/set-role', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': getCsrfToken(),
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ role: dbRole })
                    });

                    if (res.ok) {
                        // Role saved successfully, go to dashboard!
                        window.location.href = '/dashboard';
                    } else {
                        alert('خطا در ثبت نقش. لطفاً دوباره تلاش کنید.');
                        setLoading(false);
                    }
                } catch (e) {
                    alert('خطا در ارتباط با سرور.');
                    setLoading(false);
                }
            };

            return (
                <div className="absolute inset-0 bg-[#F5F7FA] flex flex-col slide-in">
                    {/* Brand header */}
                    <div className="bg-[#D32F2F] pt-2 pb-6 px-5 shrink-0 relative overflow-hidden">
                        <div className="absolute -top-8 -left-8 w-32 h-32 rounded-full bg-white/5"/>
                        <div className="absolute -bottom-4 -right-4 w-24 h-24 rounded-full bg-white/5"/>
                        <div className="flex items-center gap-2 mb-4 relative z-10">
                            <Ico n="sports_soccer" fill size={20} cls="text-white"/>
                            <span className="text-sm font-black uppercase text-white tracking-wider">Red Talent</span>
                        </div>
                        <div className="relative z-10">
                            <h1 className="text-2xl font-black text-white leading-tight">به آکادمی فوتبال<br/>پرسپولیس خوش آمدید</h1>
                            <p className="text-white/70 text-xs mt-2">نقش خود را انتخاب کنید تا وارد داشبورد شوید</p>
                        </div>
                    </div>

                    <div className="flex-1 overflow-y-auto px-5 py-5 flex flex-col gap-4 hide-sb">

                        {loading && (
                            <div className="bg-blue-50 text-blue-800 p-3 rounded-xl text-center text-sm font-bold border border-blue-100 animate-pulse">
                                در حال ثبت اطلاعات و ورود...
                            </div>
                        )}

                        {/* Parent card */}
                        <button onClick={()=>choose('parent')} disabled={loading}
                                className={`group flex flex-row items-center bg-white rounded-2xl overflow-hidden border-2 shadow-sm text-right transition-all duration-300 active:scale-[0.98] fade-up ${selected==='parent'?'border-[#D32F2F] shadow-red-100 bg-[#fff8f7]':'border-gray-100 hover:border-[#D32F2F]/50 hover:shadow-md'}`}
                                style={{animationDelay:'0.05s'}}>
                            <div className="w-28 h-28 bg-[#fff0ef] flex items-center justify-center flex-shrink-0 relative">
                                <div className="w-14 h-14 rounded-full bg-[#D32F2F]/15 flex items-center justify-center">
                                    <Ico n="directions_run" fill size={32} style={{color:'#D32F2F'}}/>
                                </div>
                                <div className="absolute top-2 right-2 bg-[#D32F2F] rounded-full p-1 shadow">
                                    <Ico n="sports_soccer" fill size={11} cls="text-white"/>
                                </div>
                            </div>
                            <div className="px-4 py-3 flex-1 flex flex-col items-start">
                                <span className="text-[10px] font-black text-[#D32F2F] uppercase tracking-widest mb-1">والدین / بازیکن</span>
                                <h2 className="font-bold text-sm text-[#102A43] group-hover:text-[#D32F2F] transition-colors leading-snug">می‌خواهم در مدرسه<br/>فوتبال ثبت‌نام کنم</h2>
                                <p className="text-[#486581] text-[11px] mt-1.5 leading-relaxed">ثبت‌نام فرزند در برنامه‌های پرسپولیس</p>
                            </div>
                            <div className={`ml-3 w-7 h-7 rounded-full flex items-center justify-center transition-colors ${selected==='parent'?'bg-[#D32F2F]':'bg-gray-100 group-hover:bg-[#D32F2F]/10'}`}>
                                <Ico n="chevron_left" size={18} style={{color: selected==='parent'?'#fff':'#D32F2F'}}/>
                            </div>
                        </button>

                        {/* Manager card */}
                        <button onClick={()=>choose('manager')} disabled={loading}
                                className={`group flex flex-row items-center bg-white rounded-2xl overflow-hidden border-2 shadow-sm text-right transition-all duration-300 active:scale-[0.98] fade-up ${selected==='manager'?'border-[#102A43] shadow-slate-200 bg-[#f8fafc]':'border-gray-100 hover:border-[#102A43]/40 hover:shadow-md'}`}
                                style={{animationDelay:'0.1s'}}>
                            <div className="w-28 h-28 bg-[#e8ecf2] flex items-center justify-center flex-shrink-0 relative">
                                <div className="w-14 h-14 rounded-full bg-[#102A43]/10 flex items-center justify-center">
                                    <Ico n="admin_panel_settings" fill size={32} style={{color:'#102A43'}}/>
                                </div>
                                <div className="absolute top-2 right-2 bg-[#102A43] rounded-full p-1 shadow">
                                    <Ico n="verified" fill size={11} cls="text-white"/>
                                </div>
                            </div>
                            <div className="px-4 py-3 flex-1 flex flex-col items-start">
                                <span className="text-[10px] font-black text-[#102A43] uppercase tracking-widest mb-1">نماینده / مدیر</span>
                                <h2 className="font-bold text-sm text-[#102A43] leading-snug">مدیر مدرسه<br/>فوتبال هستم</h2>
                                <p className="text-[#486581] text-[11px] mt-1.5 leading-relaxed">مدیریت سانس‌ها، ثبت‌نام و هنرجویان</p>
                            </div>
                            <div className={`ml-3 w-7 h-7 rounded-full flex items-center justify-center transition-colors ${selected==='manager'?'bg-[#102A43]':'bg-gray-100 group-hover:bg-[#102A43]/10'}`}>
                                <Ico n="chevron_left" size={18} style={{color: selected==='manager'?'#fff':'#102A43'}}/>
                            </div>
                        </button>

                        <p className="text-center text-[10px] text-[#486581]/50 mt-4 fade-up" style={{animationDelay:'0.15s'}}>
                            زیرمجموعه رسمی باشگاه پرسپولیس
                        </p>
                    </div>
                </div>
            );
        };

        /* ────────────────────────────────────────────
           APP
        ──────────────────────────────────────────── */
        const App = () => {
            return (
                <div className="app-shell">
                    <div className="app-container">
                        <div className="absolute inset-0 overflow-hidden">
                            <RoleScreen />
                        </div>
                    </div>
                </div>
            );
        };

        ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
    </script>
@endverbatim
</body>
</html>
