@section('title', __('general.header_user_profile'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/profile.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.top_menu_item_general')],
        ['label' => __('general.page_profile_breadcrumb')],
    ];

    $theme = user_theme();

    $themeCards = [
        'light' => ['label' => __('general.theme_light'), 'icon' => 'fa-sun', 'desc' => __('general.theme_light_desc')],
        'dark' => ['label' => __('general.theme_dark'), 'icon' => 'fa-moon', 'desc' => __('general.theme_dark_desc')],
    ];

    $languages = [
        'pt' => 'Português',
        'en' => 'English',
        'es' => 'Español',
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('general.header_user_profile') }}</h1>
            <p class="page-sub">{{ __('general.profile_intro') }}</p>
        </div>
    </header>

    @include('includes.flash')

    <form class="prof" method="POST" action="{{ route('doProfile') }}" data-msg-saving="{{ __('site.configs_saving') }}">

        <section class="sec">
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-id-card"></i> {{ __('general.profile_account') }}</h2>
            </div>

            <div class="sec__body">
                <div class="grid-2">
                    <label class="field">
                        <span class="field__label">{{ __('general.table_name') }}</span>
                        <input class="input" type="text" name="name" value="{{ $userLogged->name }}" maxlength="255" required>
                    </label>

                    <label class="field">
                        <span class="field__label">{{ __('general.table_email') }}</span>
                        <input class="input" type="text" value="{{ $userLogged->email }}" disabled>
                    </label>
                </div>
            </div>
        </section>

        <section class="sec">
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-sliders"></i> {{ __('general.profile_prefs') }}</h2>
            </div>

            <div class="sec__body">
                <label class="field field--half">
                    <span class="field__label">{{ __('general.profile_language') }}</span>
                    <select class="input" name="lang">
                        @foreach($languages as $code => $name)
                            <option value="{{ $code }}" @selected($userLogged->lang === $code)>{{ $name }}</option>
                        @endforeach
                    </select>
                </label>

                <div class="field">
                    <span class="field__label">{{ __('general.profile_theme') }}</span>

                    <div class="themes" data-current="{{ $theme }}">
                        @foreach($themeCards as $key => $card)
                            <label class="theme" data-theme-pick="{{ $key }}">
                                <input type="radio" name="theme" value="{{ $key }}" @checked($theme === $key)>

                                <span class="theme__demo theme__demo--{{ $key }}" aria-hidden="true">
                                    <span class="theme__bar">
                                        <span class="theme__dot"></span>
                                        <span class="theme__line theme__line--wide"></span>
                                    </span>
                                    <span class="theme__body">
                                        <span class="theme__card">
                                            <span class="theme__line"></span>
                                            <span class="theme__line theme__line--short"></span>
                                        </span>
                                        <span class="theme__card">
                                            <span class="theme__line"></span>
                                            <span class="theme__line theme__line--short"></span>
                                        </span>
                                    </span>
                                </span>

                                <span class="theme__foot">
                                    {{-- check desenhado: o glifo do Font Awesome tem a tinta toda
                                         acima da linha de base e nasce fora do eixo do circulo --}}
                                    <span class="theme__mark">
                                        <svg class="theme__check" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
                                    </span>
                                    <span class="theme__text">
                                        <strong class="theme__name"><i class="fa-solid {{ $card['icon'] }}"></i> {{ $card['label'] }}</strong>
                                        <span class="theme__desc">{{ $card['desc'] }}</span>
                                    </span>
                                </span>
                            </label>
                        @endforeach
                    </div>

                    <p class="themewarn" hidden>
                        <i class="fa-solid fa-circle-info"></i>
                        <span>{{ __('general.profile_theme_unsaved') }}</span>
                    </p>
                </div>
            </div>
        </section>

        <div class="prof__foot">
            <button class="btn btn--primary prof__submit" type="submit">
                @include('includes.spinner')
                <span class="btn__label">{{ __('general.action_save') }}</span>
            </button>
        </div>
    </form>

</main>

@section('scripts')
    <script src="{{ assetv('/assets/js/site-profile.js') }}"></script>
@endsection

@include('includes/footer-novo')