@extends('admin.layouts.app')

@push('styles')
    {{-- mesmo CSS dos clubs (troca pelo path real que já usas lá) --}}
    <link rel="stylesheet" href="{{ asset('css/admin/clubs.css') }}">

    <style>
        /* layout específico da página Settings (mantém linguagem azp-*) */
        .azp-settings-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap:16px;
            align-items:start;
        }
        @media (max-width: 992px){
            .azp-settings-grid{ grid-template-columns: 1fr; }
        }
        .azp-card-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
            margin-bottom:12px;
        }
        .azp-card-head .left{
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .azp-card-title{
            font-size:14px;
            font-weight:600;
            color:#111;
        }
        .azp-card-sub{
            font-size:12px;
            color:#777;
        }
        .azp-divider{
            height:1px;
            background:#eee;
            margin:14px 0;
        }
        .azp-2fa-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }
    </style>
@endpush

@section('content')
    <div class="azp-page">

        {{-- Header --}}
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Definições</div>
                <div class="azp-page-subtitle">Conta e segurança do admin</div>
            </div>

            <span class="azp-badge-pill">
            <span class="azp-dot active"></span>
            {{ $user->email }}
        </span>
        </div>

        {{-- Flash / Errors no estilo do css --}}
        @if(session('success'))
            <div class="flash success">{{ session('success') }}</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 $err)
                        <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="azp-settings-grid">

            {{-- Perfil --}}
            <div class="azp-card">
                <div class="azp-card-head">
                    <div class="left">
                        <div class="azp-card-title">Perfil</div>
                        <div class="azp-card-sub">Atualiza o teu nome</div>
                    </div>
                </div>

                <form method="POST" action="{{ route('admin.settings.profile.update') }}">
                    @csrf

                    <div class="field-group">
                        <div class="field">
                            <div class="label">Nome</div>
                            <input type="text" name="name" value="{{ old('name', $user->name) }}" required>
                            <div class="hint">Este nome aparece no backoffice.</div>
                        </div>
                    </div>

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

            {{-- Segurança --}}
            <div class="azp-card">
                <div class="azp-card-head">
                    <div class="left">
                        <div class="azp-card-title">Segurança</div>
                        <div class="azp-card-sub">Password e autenticação</div>
                    </div>
                </div>

                {{-- Password --}}
                <div class="azp-section-title">Alterar password</div>

                <form method="POST" action="{{ route('admin.settings.password.update') }}">
                    @csrf

                    <div class="field-group">
                        <div class="field">
                            <div class="label">Password atual</div>
                            <input type="password" name="current_password" required>
                        </div>
                    </div>

                    <div class="azp-form-grid">
                        <div class="field">
                            <div class="label">Nova password</div>
                            <input type="password" name="password" required>
                            <div class="hint">Mínimo 8 caracteres.</div>
                        </div>

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

                    <div class="form-actions">
                        <button class="btn primary" type="submit">Alterar password</button>
                    </div>
                </form>

                <div class="azp-divider"></div>

                {{-- 2FA --}}
                <div class="azp-section-title">2FA</div>

                <div class="azp-2fa-row">
                    <div style="font-size:13px;color:#555;">
                        Ativar ou inativar autenticação em dois fatores.
                    </div>


                    <a class="btn outline" href="{{ route('admin.twofactor.show') }}">Gerir</a>
                </div>
            </div>

        </div>
    </div>
@endsection