@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">
        {{-- Header --}}
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Treinador</div>
                <div class="azp-page-subtitle">#{{ $coach->id }} · {{ $coach->name }}</div>
            </div>

            <div class="azp-actions">
                <a href="{{ route('admin.coaches.index') }}" class="btn outline xs">Voltar</a>
                <a href="{{ route('admin.coaches.edit', $coach) }}" class="btn outline xs">Editar</a>
            </div>
        </div>

        @if(session('status'))
            <div class="flash success">{{ session('status') }}</div>
        @endif

        @if($errors->any())
            <div class="flash error">
                <strong>Revê os campos:</strong>
                <ul style="margin:6px 0 0 18px">
                    @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        @push('styles')
            <style>
                /* ======= HARD RULE: no horizontal scroll ======= */
                .azp-page, .azp-card { min-width: 0; }
                .azp-page * { box-sizing: border-box; }
                .azp-page img { max-width: 100%; height: auto; }
                .azp-page { overflow-x: hidden; }

                /* ======= TOP GRID (desktop: 2 columns, mobile: stack) ======= */
                .azp-coach-top{
                    display:grid;
                    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
                    gap:14px;
                    align-items:start;
                }

                /* ======= PROFILE CARD ======= */
                .azp-profile-head{
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    gap:12px;
                }

                .azp-profile-main{
                    display:flex;
                    gap:12px;
                    align-items:center;
                    min-width:0;
                }

                .azp-avatar{
                    width:68px; height:68px;
                    border-radius:18px;
                    overflow:hidden;
                    background:#f3f3f3;
                    border:1px solid rgba(0,0,0,0.10);
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    flex:0 0 auto;
                }
                .azp-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
                .azp-avatar-initial{ font-weight:1000; color:#666; font-size:18px; }

                .azp-profile-text{ min-width:0; }
                .azp-profile-name{
                    font-weight:1000;
                    letter-spacing:-.02em;
                    line-height:1.15;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }
                .azp-profile-sub{
                    font-size:12px;
                    color:#777;
                    margin-top:4px;
                }

                .azp-kv-grid{
                    display:grid;
                    grid-template-columns: repeat(2, minmax(0,1fr));
                    gap:10px;
                    margin-top:12px;
                }
                .azp-kv{
                    border:1px solid rgba(0,0,0,0.08);
                    border-radius:14px;
                    padding:10px 12px;
                    background:#fff;
                    min-width:0;
                }
                .azp-kv .k{
                    font-size:11px;
                    color:#777;
                    letter-spacing:.02em;
                }
                .azp-kv .v{
                    margin-top:4px;
                    font-weight:900;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }

                .azp-clubs{
                    margin-top:14px;
                    padding-top:12px;
                    border-top:1px solid rgba(0,0,0,0.08);
                }
                .azp-tags{
                    display:flex;
                    flex-wrap:wrap;
                    gap:8px;
                    margin-top:8px;
                }

                /* ======= RATES CARD ======= */
                .azp-rates-head{
                    display:flex;
                    align-items:flex-start;
                    justify-content:space-between;
                    gap:12px;
                }
                .azp-rates-grid{
                    display:grid;
                    grid-template-columns: repeat(2, minmax(0,1fr));
                    gap:10px;
                    margin-top:12px;
                }
                .azp-rate{
                    border:1px solid rgba(0,0,0,0.10);
                    border-radius:18px;
                    padding:12px;
                    background:#fff;
                    position:relative;
                    overflow:hidden;
                    min-width:0;
                }
                .azp-rate::after{
                    content:"";
                    position:absolute;
                    right:-26px; top:-26px;
                    width:110px; height:110px;
                    border-radius:999px;
                    background:rgba(0,0,0,0.03);
                }
                .azp-rate-top{
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    gap:10px;
                }
                .azp-pill{
                    font-size:11px;
                    font-weight:1000;
                    padding:4px 10px;
                    border-radius:999px;
                    border:1px solid rgba(0,0,0,0.10);
                    background:#fff;
                    white-space:nowrap;
                }
                .azp-rate-dur{
                    font-size:12px;
                    font-weight:1000;
                    color:#555;
                    white-space:nowrap;
                }
                .azp-rate-price{
                    margin-top:10px;
                    font-size:22px;
                    font-weight:1100;
                    letter-spacing:-.02em;
                    line-height:1.05;
                }
                .azp-rate-note{
                    margin-top:4px;
                    font-size:11px;
                    color:#777;
                }

                /* ======= AGENDA ======= */
                .azp-agenda-head{
                    display:flex;
                    align-items:flex-start;
                    justify-content:space-between;
                    gap:12px;
                    margin-bottom:12px;
                }
                .azp-agenda-nav{
                    display:flex;
                    align-items:center;
                    gap:8px;
                    flex-wrap:wrap;
                    justify-content:flex-end;
                }

                .azp-agenda-shell{
                    display:grid;
                    grid-template-columns: minmax(0,1fr) minmax(0,420px);
                    gap:14px;
                    align-items:start;
                }

                /* Real calendar grid (no pills, no weird vertical stacks) */
                .azp-cal-weekdays{
                    display:grid;
                    grid-template-columns: repeat(7, minmax(0,1fr));
                    gap:8px;
                    margin-bottom:8px;
                }
                .azp-cal-grid{
                    display:grid;
                    grid-template-columns: repeat(7, minmax(0,1fr));
                    gap:8px;
                }
                .azp-cal-cell{
                    border:1px solid rgba(0,0,0,0.08);
                    border-radius:18px;
                    background:#fff;
                    padding:10px;
                    cursor:pointer;
                    user-select:none;
                    aspect-ratio: 1 / 1;
                    display:flex;
                    flex-direction:column;
                    justify-content:space-between;
                    min-width:0;
                    transition:transform .08s ease, box-shadow .12s ease, border-color .12s ease;
                }
                .azp-cal-cell:hover{
                    transform:translateY(-1px);
                    box-shadow:0 10px 24px rgba(0,0,0,0.06);
                }
                .azp-cal-cell.is-out{
                    opacity:.32;
                    background:rgba(0,0,0,0.02);
                }
                .azp-cal-cell.is-today{ border-color:#111; }
                .azp-cal-cell.has-lessons{ border-color:rgba(17,17,17,.45); }
                .azp-cal-cell.is-selected{
                    border-color:#111;
                    box-shadow:0 10px 24px rgba(0,0,0,0.08);
                }

                .azp-cal-day{
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    gap:8px;
                }
                .azp-cal-daynum{
                    font-weight:1100;
                    font-size:16px;
                    letter-spacing:-.02em;
                    line-height:1;
                }
                .azp-cal-badge{
                    font-size:11px;
                    font-weight:1000;
                    padding:3px 8px;
                    border-radius:999px;
                    border:1px solid rgba(0,0,0,0.10);
                    background:#fff;
                    white-space:nowrap;
                    flex:0 0 auto;
                }
                .azp-cal-badge.is-empty{ opacity:.35; }
                .azp-cal-foot{
                    display:flex;
                    align-items:center;
                    justify-content:space-between;
                    gap:8px;
                    min-width:0;
                }
                .azp-cal-label{
                    font-size:11px;
                    color:#666;
                    font-weight:800;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                }

                /* Day panel (desktop) */
                .azp-day-panel .azp-day-lessons{
                    margin-top:12px;
                    display:flex;
                    flex-direction:column;
                    gap:8px;
                }

                /* ======= MOBILE ======= */
                @media (max-width: 1100px){
                    .azp-coach-top{ grid-template-columns: 1fr; }
                    .azp-agenda-shell{ grid-template-columns: 1fr; }
                    .azp-day-panel{ display:none; } /* mobile uses drawer */
                }
                @media (max-width: 520px){
                    .azp-kv-grid{ grid-template-columns: 1fr; }
                    .azp-rates-grid{ grid-template-columns: 1fr; }
                    .azp-cal-weekdays, .azp-cal-grid{ gap:6px; }
                    .azp-cal-cell{ border-radius:16px; padding:10px; }
                    .azp-cal-daynum{ font-size:15px; }
                }

                /* ======= DRAWER (mobile bottom sheet) ======= */
                .azp-drawer-backdrop{
                    position:fixed;
                    inset:0;
                    background:rgba(0,0,0,0.25);
                    opacity:0;
                    pointer-events:none;
                    transition:opacity .18s ease;
                    z-index:9998;
                }
                .azp-drawer-backdrop.open{
                    opacity:1;
                    pointer-events:auto;
                }

                .azp-drawer{
                    position:fixed;
                    left:0; right:0; bottom:0;
                    background:#fff;
                    border-top-left-radius:22px;
                    border-top-right-radius:22px;
                    border:1px solid rgba(0,0,0,0.10);
                    box-shadow:0 -18px 40px rgba(0,0,0,0.18);
                    transform:translateY(110%);
                    transition:transform .18s ease;
                    z-index:9999;
                    max-height:72vh;
                    display:flex;
                    flex-direction:column;
                }
                .azp-drawer.open{ transform:translateY(0); }

                .azp-drawer-head{
                    padding:12px 14px;
                    display:flex;
                    align-items:flex-start;
                    justify-content:space-between;
                    gap:12px;
                    border-bottom:1px solid rgba(0,0,0,0.08);
                }
                .azp-drawer-title{
                    font-weight:1100;
                    letter-spacing:-.02em;
                    line-height:1.1;
                }
                .azp-drawer-body{
                    padding:12px 14px 16px;
                    overflow:auto;
                }
            </style>
        @endpush

        {{-- ===== TOP ===== --}}
        <div class="azp-coach-top">
            {{-- Profile card (includes clubs) --}}
            <div class="azp-card">
                <div class="azp-profile-head">
                    <div class="azp-profile-main">
                        <div class="azp-avatar">
                            @if(!empty($coach->image_path))
                                <img src="{{ asset('storage/'.$coach->image_path) }}" alt="">
                            @else
                                <div class="azp-avatar-initial">{{ mb_strtoupper(mb_substr($coach->name,0,1)) }}</div>
                            @endif
                        </div>

                        <div class="azp-profile-text">
                            <div class="azp-profile-name">{{ $coach->name }}</div>
                            <div class="azp-profile-sub">Treinador (Coach)</div>
                        </div>
                    </div>

                    <span class="azp-tag">#{{ $coach->id }}</span>
                </div>

                <div class="azp-kv-grid">
                    <div class="azp-kv">
                        <div class="k">Email</div>
                        <div class="v">{{ $coach->email ?? '—' }}</div>
                    </div>
                    <div class="azp-kv">
                        <div class="k">Contacto</div>
                        <div class="v">{{ $coach->contact ?? '—' }}</div>
                    </div>
                    <div class="azp-kv">
                        <div class="k">NIF</div>
                        <div class="v">{{ $coach->nif ?? '—' }}</div>
                    </div>
                    <div class="azp-kv">
                        <div class="k">Tipo</div>
                        <div class="v">Coach</div>
                    </div>
                </div>

                <div class="azp-clubs">
                    <div class="azp-section-title" style="margin:0;">Clubes</div>
                    @php $clubs = $coach->clubs ?? collect(); @endphp

                    @if($clubs->isEmpty())
                        <div class="azp-muted" style="font-size:13px; margin-top:8px;">Sem clubes associados.</div>
                    @else
                        <div class="azp-tags">
                            @foreach($clubs as $club)
                                <span class="azp-tag">{{ $club->name }}</span>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>

            {{-- Rates card --}}
            <div class="azp-card">
                <div class="azp-rates-head">
                    <div>
                        <div class="azp-section-title" style="margin:0;">Preços (pagos ao treinador)</div>
                        <div class="azp-muted" style="font-size:12px; margin-top:6px;">
                            OFF = fora de ponta · PEAK = hora de ponta
                        </div>
                    </div>
                    <span class="azp-tag">Tabela</span>
                </div>

                @php $r = $coach->rates; @endphp

                @if(!$r)
                    <div class="azp-muted" style="font-size:13px; margin-top:10px;">
                        Ainda sem preços definidos.
                    </div>
                @else
                    <div class="azp-rates-grid">
                        <div class="azp-rate">
                            <div class="azp-rate-top">
                                <span class="azp-pill">OFF</span>
                                <span class="azp-rate-dur">1h</span>
                            </div>
                            <div class="azp-rate-price">{{ number_format((float)$r->off_60, 2, ',', ' ') }} €</div>
                            <div class="azp-rate-note">Pagamento ao treinador</div>
                        </div>

                        <div class="azp-rate">
                            <div class="azp-rate-top">
                                <span class="azp-pill">OFF</span>
                                <span class="azp-rate-dur">1,5h</span>
                            </div>
                            <div class="azp-rate-price">{{ number_format((float)$r->off_90, 2, ',', ' ') }} €</div>
                            <div class="azp-rate-note">Pagamento ao treinador</div>
                        </div>

                        <div class="azp-rate">
                            <div class="azp-rate-top">
                                <span class="azp-pill">PEAK</span>
                                <span class="azp-rate-dur">1h</span>
                            </div>
                            <div class="azp-rate-price">{{ number_format((float)$r->peak_60, 2, ',', ' ') }} €</div>
                            <div class="azp-rate-note">Pagamento ao treinador</div>
                        </div>

                        <div class="azp-rate">
                            <div class="azp-rate-top">
                                <span class="azp-pill">PEAK</span>
                                <span class="azp-rate-dur">1,5h</span>
                            </div>
                            <div class="azp-rate-price">{{ number_format((float)$r->peak_90, 2, ',', ' ') }} €</div>
                            <div class="azp-rate-note">Pagamento ao treinador</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- ===== AGENDA ===== --}}
        <div class="azp-card" style="margin-top:14px;">
            <div class="azp-agenda-head">
                <div>
                    <div class="azp-page-title" style="font-size:16px;">Agenda</div>
                    <div class="azp-page-subtitle">
                        Clica num dia para ver as aulas. Só podes cancelar aulas futuras.
                    </div>
                </div>

                <div class="azp-agenda-nav">
                    <a class="btn outline xs" href="{{ route('admin.coaches.show', $coach) }}?month={{ $prevMonth }}">‹ Mês anterior</a>
                    <span class="azp-tag">{{ \Carbon\Carbon::parse($month)->translatedFormat('F Y') }}</span>
                    <a class="btn outline xs" href="{{ route('admin.coaches.show', $coach) }}?month={{ $nextMonth }}">Próximo mês ›</a>
                </div>
            </div>

            <script>
                window.AZP_LESSONS_BY_DATE = @json($lessonsByDate ?? []);
            </script>

            <div class="azp-agenda-shell">
                {{-- Calendar --}}
                <div>
                    <div class="azp-cal-weekdays">
                        @foreach($weekdays as $wd)
                            <div class="azp-muted" style="font-size:12px; padding:4px 6px;">{{ $wd }}</div>
                        @endforeach
                    </div>

                    <div class="azp-cal-grid">
                        @foreach($days as $d)
                            @php
                                $classes = 'azp-cal-cell';
                                if(!$d['in_month']) $classes .= ' is-out';
                                if($d['is_today']) $classes .= ' is-today';
                            @endphp

                            <div class="{{ $classes }}"
                                 data-date="{{ $d['date'] }}"
                                 onclick="AzpCoachCalendar.pickDay(this)">
                                <div class="azp-cal-day">
                                    <div class="azp-cal-daynum">{{ $d['day'] }}</div>
                                    <div class="azp-cal-badge is-empty azp-lesson-count">—</div>
                                </div>

                                <div class="azp-cal-foot">
                                    <div class="azp-cal-label">Aulas</div>
                                    <span class="azp-dot" style="opacity:.10;"></span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Day panel (desktop only) --}}
                <div class="azp-card azp-day-panel" style="margin:0;">
                    <div class="azp-section-title" style="margin:0;">Aulas do dia</div>

                    <div class="azp-muted" style="font-size:12px; margin-top:6px;">
                        Dia selecionado: <strong id="azpCoachSelectedDay">—</strong>
                    </div>

                    <div id="azpCoachDayLessons" class="azp-day-lessons">
                        <div class="azp-muted" style="font-size:12px;">Seleciona um dia no calendário.</div>
                    </div>

                    <div class="azp-muted" style="font-size:12px; margin-top:10px;">
                        Cancelamentos: só aulas futuras com estado “Marcada”.
                    </div>
                </div>
            </div>
        </div>

        {{-- Mobile Drawer --}}
        <div id="azpDrawerBackdrop" class="azp-drawer-backdrop" onclick="AzpCoachCalendar.closeDrawer()"></div>

        <div id="azpDayDrawer" class="azp-drawer" aria-hidden="true">
            <div class="azp-drawer-head">
                <div>
                    <div class="azp-drawer-title">Aulas do dia</div>
                    <div class="azp-muted" style="font-size:12px; margin-top:4px;">
                        <strong id="azpDrawerSelectedDay">—</strong>
                    </div>
                </div>
                <button type="button" class="btn outline xs" onclick="AzpCoachCalendar.closeDrawer()">Fechar</button>
            </div>

            <div class="azp-drawer-body">
                <div id="azpDrawerLessons">
                    <div class="azp-muted" style="font-size:12px;">Seleciona um dia no calendário.</div>
                </div>

                <div class="azp-muted" style="font-size:12px; margin-top:10px;">
                    Cancelamentos: só aulas futuras com estado “Marcada”.
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.AzpCoachCalendar = (function () {
            var lessonsByDate = window.AZP_LESSONS_BY_DATE || {};
            var selectedDate = null;

            var csrf = "{{ csrf_token() }}";
            var cancelTpl = "{{ route('admin.users.lessons.cancel', ['user' => 'USER_ID', 'lesson' => 'LESSON_ID']) }}";
            var userTpl = "{{ route('admin.users.show', ['user' => 'USER_ID']) }}";

            function isMobile(){
                try { return window.matchMedia && window.matchMedia('(max-width: 1100px)').matches; }
                catch(e){ return false; }
            }

            function fmtMoney(v){
                try { return Number(v || 0).toFixed(2).replace('.', ',') + ' €'; }
                catch(e){ return (v || 0) + ' €'; }
            }

            function markCalendarDays(){
                var cells = document.querySelectorAll('[data-date]');
                for (var i=0; i<cells.length; i++){
                    var date = cells[i].getAttribute('data-date');
                    var list = lessonsByDate[date] || [];
                    var badge = cells[i].querySelector('.azp-lesson-count');

                    if (list.length > 0) {
                        cells[i].classList.add('has-lessons');
                        if (badge) {
                            badge.classList.remove('is-empty');
                            badge.textContent = String(list.length);
                        }
                    } else {
                        cells[i].classList.remove('has-lessons');
                        if (badge) {
                            badge.classList.add('is-empty');
                            badge.textContent = '—';
                        }
                    }
                }
            }

            function buildLessonsHtml(date){
                if (!date) {
                    return '<div class="azp-muted" style="font-size:12px;">Seleciona um dia no calendário.</div>';
                }

                var list = lessonsByDate[date] || [];
                if (list.length === 0) {
                    return '<div class="azp-muted" style="font-size:12px;">Sem aulas neste dia.</div>';
                }

                var html = '';
                for (var i=0; i<list.length; i++){
                    var l = list[i];
                    var dur = (parseInt(l.duration,10) === 90) ? '1,5h' : '1h';
                    var mode = (l.pricing_mode === 'peak') ? 'PEAK' : 'OFF';

                    var statusLabel = l.status;
                    if (l.status === 'booked') statusLabel = 'Marcada';
                    if (l.status === 'completed') statusLabel = 'Concluída';
                    if (l.status === 'cancelled') statusLabel = 'Cancelada';

                    var userUrl = userTpl.replace('USER_ID', l.user_id);

                    var cancelHtml = '';
                    if (l.is_future && l.status === 'booked') {
                        var cancelUrl = cancelTpl.replace('USER_ID', l.user_id).replace('LESSON_ID', l.id);
                        cancelHtml =
                            '<form method="POST" action="' + cancelUrl + '" onsubmit="return confirm(\'Cancelar esta aula? O valor será devolvido à wallet.\')">' +
                            '<input type="hidden" name="_token" value="' + csrf + '">' +
                            '<button type="submit" class="btn danger xs">Cancelar</button>' +
                            '</form>';
                    }

                    html +=
                        '<div class="azp-card" style="margin:0; padding:10px;">' +
                        '<div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;">' +
                        '<div style="min-width:0;">' +
                        '<div style="font-weight:1100; letter-spacing:-.02em;">' + (l.time || '') + ' · ' + dur + ' · ' + mode + '</div>' +
                        '<div class="azp-muted" style="font-size:12px;margin-top:3px;">Utilizador: <strong>' + (l.user_name || ('#' + l.user_id)) + '</strong></div>' +
                        '<div class="azp-muted" style="font-size:12px;margin-top:2px;">Preço: ' + fmtMoney(l.price) + '</div>' +
                        '</div>' +
                        '<div style="display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex:0 0 auto;">' +
                        '<span class="azp-tag">' + statusLabel + '</span>' +
                        '<a class="btn outline xs" href="' + userUrl + '">Ver utilizador</a>' +
                        cancelHtml +
                        '</div>' +
                        '</div>' +
                        '</div>';
                }
                return html;
            }

            function renderDesktop(date){
                var wrap = document.getElementById('azpCoachDayLessons');
                var title = document.getElementById('azpCoachSelectedDay');
                if (!wrap || !title) return;

                title.textContent = date || '—';
                wrap.innerHTML = buildLessonsHtml(date);
            }

            function openDrawer(date){
                var drawer = document.getElementById('azpDayDrawer');
                var backdrop = document.getElementById('azpDrawerBackdrop');
                var title = document.getElementById('azpDrawerSelectedDay');
                var body = document.getElementById('azpDrawerLessons');

                if (!drawer || !backdrop || !title || !body) return;

                title.textContent = date || '—';
                body.innerHTML = buildLessonsHtml(date);

                backdrop.classList.add('open');
                drawer.classList.add('open');
                drawer.setAttribute('aria-hidden', 'false');
            }

            function closeDrawer(){
                var drawer = document.getElementById('azpDayDrawer');
                var backdrop = document.getElementById('azpDrawerBackdrop');
                if (!drawer || !backdrop) return;

                backdrop.classList.remove('open');
                drawer.classList.remove('open');
                drawer.setAttribute('aria-hidden', 'true');
            }

            function pickDay(card){
                var all = document.querySelectorAll('[data-date]');
                for (var i=0;i<all.length;i++){
                    all[i].classList.remove('is-selected');
                }
                card.classList.add('is-selected');

                selectedDate = card.getAttribute('data-date');

                // desktop panel update
                renderDesktop(selectedDate);

                // mobile: open drawer
                if (isMobile()){
                    openDrawer(selectedDate);
                }
            }

            document.addEventListener('DOMContentLoaded', function(){
                markCalendarDays();
            });

            return {
                pickDay: pickDay,
                closeDrawer: closeDrawer
            };
        })();
    </script>
@endpush