<!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 — School Profile</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 slide { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
        @keyframes bar { from{width:0} }
        .fade-up { animation: fadeUp 0.3s ease 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.6; cursor: not-allowed; }
        @media (hover: hover) { .app-container button:not(:disabled):hover { translate: 0 -1px; } }
        @media (max-width: 640px) { .app-shell { padding: 0; } .app-container { width: 100vw; height: 100vh; 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 } = React;

        /* ── Helpers & Data ── */
        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 AMENITY_ICONS = {
            'پارکینگ اختصاصی': { icon:'local_parking', color:'#102A43' },
            'بوفه و رستوران': { icon:'restaurant', color:'#D32F2F' },
            'رختکن استاندارد': { icon:'checkroom', color:'#486581' },
            'روشنایی شبانه': { icon:'light_mode', color:'#FBC02D' },
            'نمازخانه': { icon:'mosque', color:'#2E7D32' },
            'زمین چمن مصنوعی': { icon:'grass', color:'#388E3C' },
            'زمین چمن طبیعی': { icon:'nature', color:'#2E7D32' },
            'پزشک ورزشی': { icon:'medical_services', color:'#C62828' },
            'سرویس بهداشتی': { icon:'wc', color:'#486581' },
            'دوش حمام': { icon:'shower', color:'#0288D1' },
            'رختکن': { icon:'checkroom', color:'#486581' },
            'جایگاه تماشاگران': { icon:'stadium', color:'#E65100' },
            'اجاره تجهیزات': { icon:'sports', color:'#7B1FA2' },
        };
        // Grab the data safely from Laravel
        const s = JSON.parse(document.getElementById('school-data').textContent);

        /* ────────────────────────────────────────────
           SCREEN — SCHOOL PROFILE
        ──────────────────────────────────────────── */
        const SchoolScreen = () => {
            const [tab, setTab] = useState('about');
            const tabs = [{ id:'about', l:'درباره' }, { id:'coaches', l:'مربیان' }, { id:'sessions', l:'سانس‌ها' }];

            const handleLogout = () => {
                document.getElementById('logout-form').submit();
            };

            return (
                <div className="absolute inset-0 bg-[#F5F7FA] flex flex-col slide-in">

                    {/* Logout Form */}
                    <form id="logout-form" action="/logout" method="POST" style={{ display: 'none' }}>
                        <input type="hidden" name="_token" value={document.querySelector('meta[name="csrf-token"]').content} />
                    </form>

                    {/* Header */}
                    <header className="h-14 bg-white border-b border-gray-100 shadow-sm flex items-center justify-between px-4 shrink-0 z-10">
                        <button onClick={() => window.location.href = '/dashboard'} className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-50 active:scale-90 transition-transform">
                            <Ico n="arrow_forward" style={{color:'#D32F2F'}}/>
                        </button>
                        <h1 className="font-bold text-sm text-[#102A43]">پروفایل مدرسه</h1>
                        <button className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-gray-50 active:scale-90 transition-transform">
                            <Ico n="favorite" style={{color:'#D32F2F'}}/>
                        </button>
                    </header>

                    {/* Scrollable Content */}
                    <div className="flex-1 overflow-y-auto pb-24 hide-sb"> {/* Added pb-24 for bottom menu clearance */}
                        {/* Hero */}
                        <div className="relative h-52 bg-gray-200 shrink-0">
                            <img src={s.img} alt={s.name} className="w-full h-full object-cover"/>
                            <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"/>
                        </div>

                        {/* Info card */}
                        <div className="mx-4 -mt-5 bg-white rounded-2xl shadow-lg p-4 relative z-10 border border-gray-100 fade-up">
                            <div className="flex items-start justify-between gap-2">
                                <div className="flex-1">
                                    <div className="flex items-center gap-1.5 mb-1">
                                        <h2 className="font-bold text-lg text-[#102A43] leading-tight">{s.name}</h2>
                                        <Ico n="verified" fill size={20} style={{color:'#2E7D32'}}/>
                                    </div>
                                    <div className="flex items-center gap-1 text-[#486581] text-sm">
                                        <Ico n="location_on" size={14}/>
                                        <span>{s.location}</span>
                                    </div>
                                </div>
                            </div>
                            <div className="flex gap-4 mt-3 pt-3 border-t border-gray-100">
                                {[['امتیاز', s.rating, 'star'], ['سانس فعال', s.sessions, null], ['رده‌های سنی', s.ageGroups.length, null]].map(([l,v,icon],i) => (
                                    <React.Fragment key={i}>
                                        {i>0 && <div className="w-px bg-gray-100"/>}
                                        <div>
                                            <p className="text-[9px] font-black text-[#486581] uppercase tracking-wider">{l}</p>
                                            <div className="flex items-center gap-0.5 mt-0.5 text-base font-bold text-[#102A43]">
                                                {icon && <Ico n={icon} fill size={14} style={{color:'#FBC02D'}}/>}
                                                {v}
                                            </div>
                                        </div>
                                    </React.Fragment>
                                ))}
                            </div>
                        </div>

                        {/* Tabs */}
                        <div className="mx-4 mt-4">
                            <div className="flex border-b border-gray-200">
                                {tabs.map(t => (
                                    <button key={t.id} onClick={()=>setTab(t.id)}
                                            className={`flex-1 py-3 text-xs font-bold transition-all whitespace-nowrap ${tab===t.id?'text-[#D32F2F] border-b-2 border-[#D32F2F]':'text-[#486581]'}`}>
                                        {t.l}
                                    </button>
                                ))}
                            </div>

                            {tab==='about' && (
                                <div className="mt-4 bg-white rounded-2xl p-4 shadow-sm border border-gray-100 slide-in">
                                    <h3 className="font-bold text-sm text-[#102A43] mb-2.5">درباره آکادمی</h3>
                                    <p className="text-[#486581] text-xs leading-relaxed">{s.description}</p>

                                    {/* Age groups */}
                                    <div className="mt-4">
                                        <p className="text-[10px] font-black text-[#486581] uppercase tracking-widest mb-2">رده‌های سنی پذیرش</p>
                                        <div className="flex flex-wrap gap-1.5">
                                            {s.ageGroups.map(ag=>(
                                                <span key={ag} className="bg-[#fff0ef] border border-[#D32F2F]/30 text-[#D32F2F] text-[11px] font-black px-3 py-1 rounded-full">{ag}</span>
                                            ))}
                                        </div>
                                    </div>

                                    {/* Amenities grid */}
                                    {s.amenities.length > 0 && (
                                        <div className="mt-4">
                                            <p className="text-[10px] font-black text-[#486581] uppercase tracking-widest mb-2">امکانات رفاهی</p>
                                            <div className="grid grid-cols-2 gap-2">
                                                {s.amenities.map(am=>{
                                                    const {icon,color}=AMENITY_ICONS[am]||{icon:'check_circle',color:'#2E7D32'};
                                                    return (
                                                        <div key={am} className="flex items-center gap-2 bg-[#F5F7FA] rounded-xl px-3 py-2.5 border border-gray-100">
                                                            <div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0" style={{background:color+'18'}}>
                                                                <Ico n={icon} fill size={16} style={{color}}/>
                                                            </div>
                                                            <span className="text-[10px] font-semibold text-[#102A43] leading-tight">{am}</span>
                                                        </div>
                                                    );
                                                })}
                                            </div>
                                        </div>
                                    )}

                                    <div className="grid grid-cols-2 gap-2.5 mt-4">
                                        <button className="bg-[#102A43] text-white h-11 rounded-xl flex items-center justify-center gap-1.5 text-xs font-bold active:scale-[0.97] transition-transform">
                                            <Ico n="call" fill size={16}/> {s.phone}
                                        </button>
                                    </div>
                                </div>
                            )}

                            {tab==='coaches' && (
                                <div className="mt-4 bg-white rounded-2xl p-4 shadow-sm border border-gray-100 slide-in text-center py-10">
                                    <Ico n="groups" size={48} style={{color: '#d1d5db'}} />
                                    <p className="text-sm font-bold text-[#486581] mt-3">مربیان به زودی اضافه می‌شوند</p>
                                </div>
                            )}

                            {tab==='sessions' && (
                                <div className="mt-4 flex flex-col gap-3 slide-in">
                                    {s.sessionsList.length === 0 ? (
                                        <div className="text-center py-10 bg-white rounded-2xl border border-gray-100">
                                            <p className="text-sm font-bold text-[#486581]">هیچ سانسی ثبت نشده است.</p>
                                        </div>
                                    ) : s.sessionsList.map(sess => {
                                        const pct = sess.enrolled / sess.cap * 100;
                                        const barC = sess.full ? '#C62828' : pct >= 85 ? '#FBC02D' : '#2E7D32';
                                        return (
                                            <div key={sess.id} className={`bg-white rounded-2xl p-4 shadow-sm border border-gray-100 ${sess.full?'opacity-65':''}`}>
                                                <div className="flex items-start justify-between mb-3">
                                                    <div className="flex-1">
                                                        <div className="flex items-center gap-1.5 mb-2 flex-wrap">
                                                            <span className="bg-[#d1e4ff] text-[#011d35] text-[10px] font-bold px-2 py-0.5 rounded-lg">{sess.cat}</span>
                                                            <span className="bg-[#fff0ef] text-[#D32F2F] text-[10px] font-bold px-2 py-0.5 rounded-lg">{sess.level}</span>
                                                        </div>
                                                        <h4 className="font-bold text-sm text-[#102A43]">{sess.name}</h4>
                                                    </div>

                                                    <div className="text-left mr-2 shrink-0 bg-[#F5F7FA] rounded-xl px-3 py-2 flex flex-col items-center">
                                                        <div className="font-black text-xs text-[#102A43] flex items-center gap-1" dir="ltr">
                                                            <span>{sess.startTime}</span>
                                                            <span className="text-gray-400 font-normal">-</span>
                                                            <span>{sess.endTime}</span>
                                                        </div>
                                                        <div className="text-[10px] font-bold text-[#486581] text-center mt-0.5">{sess.day}</div>
                                                    </div>
                                                </div>
                                                <div className="flex items-center gap-1.5 text-xs text-[#486581] mb-3">
                                                    <Ico n="sports" size={13}/>
                                                    <span>مربی: <span className="font-bold text-[#102A43]">{sess.coach}</span></span>
                                                </div>
                                                <div className="mb-3">
                                                    <div className="flex justify-between text-[10px] font-bold mb-1.5">
                                                        <span className="text-[#486581]">ظرفیت</span>
                                                        <span style={{color:barC}}>
                                                            {sess.enrolled} از {sess.cap} نفر
                                                            {sess.full?' (تکمیل)':pct>=85?` (${sess.cap-sess.enrolled} جای خالی)` :''}
                                                        </span>
                                                    </div>
                                                    <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                                                        <div className="h-2 rounded-full transition-all" style={{width:`${pct}%`,backgroundColor:barC,animation:'bar 0.8s ease both'}}/>
                                                    </div>
                                                </div>
                                                <button disabled={sess.full}
                                                        onClick={() => window.location.href = `/enrollment/${sess.id}`}
                                                        className={`w-full h-11 rounded-xl text-xs font-bold flex items-center justify-center gap-1.5 transition-all active:scale-[0.97] ${sess.full?'bg-gray-100 text-gray-400 cursor-not-allowed':'bg-[#D32F2F] text-white shadow-sm shadow-red-200 hover:bg-[#b71c1c]'}`}>
                                                    {sess.full ? (
                                                        <><Ico n="block" size={14}/>تکمیل ظرفیت</>
                                                    ):(
                                                        <><Ico n="how_to_reg" size={14}/>ثبت‌نام در این سانس</>
                                                    )}
                                                </button>
                                            </div>
                                        );
                                    })}
                                </div>
                            )}
                        </div>
                    </div>

                    {/* Bottom Navigation Menu */}
                    <div className="h-16 bg-white border-t border-gray-100 flex items-center justify-around shrink-0 w-full z-30 relative px-2 shadow-[0_-4px_20px_rgba(0,0,0,0.03)] pb-[env(safe-area-inset-bottom)]">
                        <button onClick={() => window.location.href = '/dashboard'} className="flex flex-col items-center gap-1 w-16 transition-colors text-[#486581] hover:text-[#D32F2F]">
                            <Ico n="dashboard" size={24} />
                            <span className="text-[10px] font-bold">داشبورد</span>
                        </button>
                        <button onClick={() => window.location.href = '/orders'} className="flex flex-col items-center gap-1 w-16 transition-colors text-[#486581] hover:text-[#102A43]">
                            <Ico n="receipt_long" size={24} />
                            <span className="text-[10px] font-bold">سفارشات</span>
                        </button>
                        <button onClick={() => window.location.href = '/profile'} className="flex flex-col items-center gap-1 w-16 transition-colors text-[#486581] hover:text-[#102A43]">
                            <Ico n="person" size={24} />
                            <span className="text-[10px] font-bold">پروفایل</span>
                        </button>
                        <button onClick={handleLogout} className="flex flex-col items-center gap-1 w-16 transition-colors text-[#486581] hover:text-[#D32F2F]">
                            <Ico n="logout" size={24} />
                            <span className="text-[10px] font-bold">خروج</span>
                        </button>
                    </div>

                </div>
            );
        };

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

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

<!-- Transfer Live Data to React -->
<script type="application/json" id="school-data">
    {!! json_encode($schoolData) !!}
</script>

</body>
</html>
