{{-- resources/views/admin/admins/create.blade.php --}}
@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Novo administrador</div>
                <div class="azp-page-subtitle">Cria um novo utilizador com permissões de backoffice.</div>
            </div>

            <div class="azp-page-actions">
                <a href="{{ route('admin.admins.index') }}" class="btn outline xs">Voltar à lista</a>
            </div>
        </div>

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

        @if(session('error'))
            <div class="flash error">{{ session('error') }}</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

        <div class="azp-card azp-form-card">
            <form action="{{ route('admin.admins.store') }}" method="POST" autocomplete="off">
                @csrf

                @php
                    $selectedRoleId  = old('role_id');
                    $selectedClubIds = old('club_ids', []);
                    if (!is_array($selectedClubIds)) $selectedClubIds = [];
                    $selectedClubIds = array_values(array_unique(array_map('intval', $selectedClubIds)));
                @endphp

                <div class="azp-section-title">Dados do administrador</div>

                <div class="azp-admin-form-2col">
                    {{-- COLUNA ESQUERDA --}}
                    <div class="azp-admin-col">
                        <div class="azp-form-grid">
                            <div class="field">
                                <label class="label">Nome</label>
                                <input type="text" name="name" value="{{ old('name') }}">
                            </div>

                            <div class="field">
                                <label class="label">Email</label>
                                <input type="email" name="email" value="{{ old('email') }}">
                            </div>

                            <div class="field">
                                <label class="label">Password</label>
                                <input type="password" name="password">
                            </div>

                            <div class="field">
                                <label class="label">Confirmar Password</label>
                                <input type="password" name="password_confirmation">
                            </div>

                            <div class="field">
                                <label class="label">Tipo de admin</label>
                                <select name="role_id" id="role_id">
                                    <option value="">-- Escolhe --</option>
                                    @foreach($roles as $role)
                                        <option value="{{ $role->id }}" {{ (int)old('role_id') === (int)$role->id ? 'selected' : '' }}>
                                            {{ $role->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="hint">Se for Club Admin, escolhe 1 ou mais clubes.</div>
                            </div>
                        </div>
                    </div>

                    {{-- COLUNA DIREITA --}}
                    <div class="azp-admin-col">
                        <div class="field" id="club-wrapper" style="display:none">
                            <label class="label">Clubes (para Club Admin)</label>

                            <input type="hidden" name="club_ids" value="">

                            <div class="azp-club-picker" data-target="club_ids[]">
                                <div class="azp-club-picker-top">
                                    <div class="azp-club-picker-search">
                                        <span class="azp-club-picker-ico" aria-hidden="true">⌕</span>
                                        <input type="text" class="azp-club-picker-input" placeholder="Pesquisar clube...">
                                    </div>

                                    <div class="azp-club-picker-actions">
                                        <button type="button" class="btn outline xs azp-club-btn" data-action="all">Selecionar todos</button>
                                        <button type="button" class="btn outline xs azp-club-btn" data-action="none">Limpar</button>
                                    </div>
                                </div>

                                <div class="azp-club-picker-list" role="listbox" aria-multiselectable="true">
                                    @foreach($clubs as $id => $name)
                                        @php $isOn = in_array((int)$id, $selectedClubIds, true); @endphp

                                        <button
                                            type="button"
                                            class="azp-club-item {{ $isOn ? 'is-selected' : '' }}"
                                            data-id="{{ (int)$id }}"
                                            aria-selected="{{ $isOn ? 'true' : 'false' }}"
                                            role="option"
                                        >
                                            <span class="azp-dot"></span>
                                            <span class="azp-club-name">{{ $name }}</span>
                                            <span class="azp-club-chip">{{ $isOn ? 'Selecionado' : 'Selecionar' }}</span>
                                        </button>

                                        @if($isOn)
                                            <input type="hidden" name="club_ids[]" value="{{ (int)$id }}" data-club-hidden="{{ (int)$id }}">
                                        @endif
                                    @endforeach
                                </div>

                                <div class="azp-club-picker-foot">
                                    <div class="azp-muted">
                                        Selecionados: <strong class="azp-club-count">{{ count($selectedClubIds) }}</strong>
                                    </div>
                                </div>
                            </div>

                            <div class="hint">Dica: podes pesquisar e clicar para alternar seleção.</div>
                        </div>
                    </div>
                </div>


                <div class="form-actions">
                    <button type="submit" class="btn primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Igual ao edit (mantém consistência) */
        .azp-club-picker{
            border:1px solid #e9e9e9;
            border-radius:16px;
            background:#fff;
            overflow:hidden;
            box-shadow: 0 1px 0 rgba(0,0,0,.03);
        }
        .azp-club-picker-top{
            display:flex;
            gap:10px;
            align-items:center;
            justify-content:space-between;
            padding:12px;
            border-bottom:1px solid #eee;
            background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
        }
        .azp-club-picker-search{
            flex:1;
            display:flex;
            align-items:center;
            gap:8px;
            padding:10px 12px;
            border:1px solid #e9e9e9;
            border-radius:12px;
            background:#fff;
        }
        .azp-club-picker-ico{opacity:.6; font-size:12px; line-height:1;}
        .azp-club-picker-input{
            width:100%;
            border:0;
            outline:0;
            font-size:14px;
            background:transparent;
        }
        .azp-club-picker-actions{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .azp-club-picker-list{
            max-height:280px;
            overflow:auto;
            padding:10px;
            display:grid;
            grid-template-columns: 1fr;
            gap:8px;
        }
        .azp-club-item{
            width:100%;
            text-align:left;
            border:1px solid #ededed;
            border-radius:14px;
            padding:12px 12px;
            background:#fff;
            display:flex;
            align-items:center;
            gap:10px;
            cursor:pointer;
            transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
        }
        .azp-club-item:hover{
            border-color:#dcdcdc;
            box-shadow: 0 10px 22px rgba(0,0,0,.06);
            transform: translateY(-1px);
        }
        .azp-club-item .azp-dot{
            width:10px;height:10px;border-radius:999px;
            background:#bbb;
            box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
            flex:0 0 auto;
        }
        .azp-club-name{
            flex:1;
            font-weight:600;
            letter-spacing:.1px;
        }
        .azp-club-chip{
            font-size:12px;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid #e9e9e9;
            background:#fafafa;
            opacity:.9;
        }
        .azp-club-item.is-selected{
            border-color:#111;
            box-shadow: 0 12px 26px rgba(0,0,0,.09);
        }
        .azp-club-item.is-selected .azp-dot{background:#111;}
        .azp-club-item.is-selected .azp-club-chip{
            border-color:#111;
            background:#111;
            color:#fff;
            opacity:1;
        }
        .azp-club-picker-foot{
            border-top:1px solid #eee;
            padding:10px 12px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            background:#fff;
        }
        .azp-muted{opacity:.75; font-size:13px;}
        .azp-club-picker-list::-webkit-scrollbar{width:10px}
        .azp-club-picker-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:999px}
        .azp-club-picker-list::-webkit-scrollbar-track{background:rgba(0,0,0,.03)}
        @media (min-width: 900px){
            .azp-club-picker-list{grid-template-columns: 1fr 1fr;}
        }
        /* ===== Layout 2 colunas (inputs esquerda / clubes direita) ===== */
        .azp-admin-form-2col{
            display:grid;
            grid-template-columns: 1fr;
            gap:16px;
            align-items:start;
        }

        /* desktop */
        @media (min-width: 980px){
            .azp-admin-form-2col{
                grid-template-columns: 1.05fr .95fr; /* ligeiramente mais espaço para os inputs */
                gap:18px;
            }
        }

        /* trava qualquer overflow maroto */
        .azp-admin-col{min-width:0;}
        .azp-admin-form-2col *{max-width:100%;}

        /* ===== Fix do overflow no topo do picker (sem scroll horizontal) ===== */
        .azp-club-picker-top{
            flex-wrap:wrap;            /* permite quebrar linha */
        }
        .azp-club-picker-actions{
            width:100%;
            justify-content:flex-end;
        }
        @media (min-width: 980px){
            .azp-club-picker-actions{
                width:auto;            /* em desktop volta a ficar ao lado */
            }
        }
        .azp-club-picker-search{
            min-width: 240px;
            flex: 1 1 240px;
        }

        /* garantir que a lista nunca força horizontal */
        .azp-club-picker-list{overflow-x:hidden;}
        .azp-club-item{min-width:0;}
        .azp-club-name{
            min-width:0;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
        }

    </style>
@endpush

@push('scripts')
    <script>
        (function () {
            var roleSelect  = document.getElementById('role_id');
            var clubWrapper = document.getElementById('club-wrapper');

            var clubAdminId = @json(
                $roles->firstWhere('code', \App\Models\Role::CLUB_ADMIN)->id ?? null
            );

            function toggleClub() {
                if (clubAdminId && parseInt(roleSelect.value || 0, 10) === parseInt(clubAdminId, 10)) {
                    clubWrapper.style.display = '';
                } else {
                    clubWrapper.style.display = 'none';
                    clearPickerSelections();
                }
            }

            function clearPickerSelections() {
                var picker = clubWrapper.querySelector('.azp-club-picker');
                if (!picker) return;

                var items = picker.querySelectorAll('.azp-club-item.is-selected');
                for (var i = 0; i < items.length; i++) {
                    setSelected(items[i], false);
                }
                updateCount(picker);
            }

            function setSelected(btn, on) {
                var id = btn.getAttribute('data-id');
                btn.classList.toggle('is-selected', !!on);
                btn.setAttribute('aria-selected', on ? 'true' : 'false');
                var chip = btn.querySelector('.azp-club-chip');
                if (chip) chip.textContent = on ? 'Selecionado' : 'Selecionar';

                var existing = clubWrapper.querySelector('input[type="hidden"][data-club-hidden="' + id + '"]');

                if (on) {
                    if (!existing) {
                        var inp = document.createElement('input');
                        inp.type = 'hidden';
                        inp.name = 'club_ids[]';
                        inp.value = id;
                        inp.setAttribute('data-club-hidden', id);
                        clubWrapper.appendChild(inp);
                    }
                } else {
                    if (existing) existing.parentNode.removeChild(existing);
                }
            }

            function updateCount(picker) {
                var countEl = picker.querySelector('.azp-club-count');
                if (!countEl) return;
                var hiddens = clubWrapper.querySelectorAll('input[type="hidden"][name="club_ids[]"]');
                countEl.textContent = String(hiddens.length);
            }

            function filterList(picker, q) {
                q = (q || '').toLowerCase();
                var items = picker.querySelectorAll('.azp-club-item');
                for (var i = 0; i < items.length; i++) {
                    var name = (items[i].querySelector('.azp-club-name') || {}).textContent || '';
                    name = name.toLowerCase();
                    items[i].style.display = (q === '' || name.indexOf(q) !== -1) ? '' : 'none';
                }
            }

            function initPicker() {
                var picker = clubWrapper.querySelector('.azp-club-picker');
                if (!picker) return;

                var list = picker.querySelector('.azp-club-picker-list');
                var search = picker.querySelector('.azp-club-picker-input');

                list.addEventListener('click', function (e) {
                    var btn = e.target.closest('.azp-club-item');
                    if (!btn) return;

                    var on = !btn.classList.contains('is-selected');
                    setSelected(btn, on);
                    updateCount(picker);
                });

                picker.addEventListener('click', function (e) {
                    var a = e.target.closest('[data-action]');
                    if (!a) return;

                    var action = a.getAttribute('data-action');

                    if (action === 'all') {
                        var items = picker.querySelectorAll('.azp-club-item');
                        for (var i = 0; i < items.length; i++) {
                            if (items[i].style.display === 'none') continue;
                            setSelected(items[i], true);
                        }
                        updateCount(picker);
                    }

                    if (action === 'none') {
                        clearPickerSelections();
                    }
                });

                if (search) {
                    search.addEventListener('input', function () {
                        filterList(picker, search.value);
                    });
                }

                updateCount(picker);
            }

            roleSelect.addEventListener('change', toggleClub);
            toggleClub();
            initPicker();
        })();
    </script>
@endpush