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

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

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

    /**
     * One row per network so the markup is written once. The columns mix
     * formats on purpose: some hold a full URL, others a handle or a number,
     * which is what the hint under each field explains.
     */
    $socialFields = [
        ['name' => 'social_facebook', 'label' => 'Facebook', 'icon' => 'fa-facebook', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_instagram', 'label' => 'Instagram', 'icon' => 'fa-instagram', 'hint' => __('general.settings_hint_handle')],
        ['name' => 'social_whatsapp', 'label' => 'WhatsApp', 'icon' => 'fa-whatsapp', 'hint' => __('general.settings_hint_phone')],
        ['name' => 'social_youtube', 'label' => 'YouTube', 'icon' => 'fa-youtube', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_twitter', 'label' => 'X / Twitter', 'icon' => 'fa-x-twitter', 'hint' => __('general.settings_hint_handle')],
        ['name' => 'social_tiktok', 'label' => 'TikTok', 'icon' => 'fa-tiktok', 'hint' => __('general.settings_hint_handle')],
        ['name' => 'social_telegram', 'label' => 'Telegram', 'icon' => 'fa-telegram', 'hint' => __('general.settings_hint_handle')],
        ['name' => 'social_twitch', 'label' => 'Twitch', 'icon' => 'fa-twitch', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_linkedin', 'label' => 'LinkedIn', 'icon' => 'fa-linkedin', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_soundcloud', 'label' => 'SoundCloud', 'icon' => 'fa-soundcloud', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_mixcloud', 'label' => 'Mixcloud', 'icon' => 'fa-mixcloud', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_pinterest', 'label' => 'Pinterest', 'icon' => 'fa-pinterest', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_lastfm', 'label' => 'Last.fm', 'icon' => 'fa-lastfm', 'hint' => __('general.settings_hint_url')],
        ['name' => 'social_snapchat', 'label' => 'Snapchat', 'icon' => 'fa-snapchat', 'hint' => __('general.settings_hint_handle')],
    ];

    $filled = collect($socialFields)->filter(fn ($f) => ! empty($socialData->{$f['name']}))->count();
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

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

    @include('includes.flash')

    <form class="setf" method="POST" action="{{ route('settings.r.do') }}"
          data-msg-saving="{{ __('site.configs_saving') }}">

        <section class="sec sec--overflow">
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-tower-broadcast"></i> {{ __('general.settings_block_identity') }}</h2>
                <p class="sec__desc">{{ __('general.settings_block_identity_desc') }}</p>
            </div>
            <div class="sec__body">
                <div class="ident-row">
                    <div class="logo"
                         data-url-upload="{{ route('uploadCoverRadio') }}"
                         data-url-remove="{{ route('removeAvatarRadio') }}"
                         data-msg-error="{{ __('general.settings_logo_error') }}"
                         data-msg-saved="{{ __('general.settings_logo_saved') }}"
                         data-msg-removed="{{ __('general.settings_logo_removed') }}"
                         data-img-empty="/assets/media/avatars/noimage.jpg"
                         data-confirm-title="{{ __('general.settings_logo_remove') }}"
                         data-confirm-text="{{ __('site.confirm_delete_text') }}"
                         data-confirm-btn="{{ __('site.btn_remove') }}">
                        <span class="logo__frame">
                            <img class="logo__img" src="{{ $siteData->avatar ? env('APP_URL') . $siteData->avatar : '/assets/media/avatars/noimage.jpg' }}" alt="">
                            <span class="logo__busy"><span class="spin-wrap">@include('includes.spinner')</span></span>
                        </span>

                        <span class="logo__side">
                            <strong>{{ __('general.settings_logo') }}</strong>
                            <small>{{ __('general.settings_logo_hint') }}</small>
                            <span class="logo__acts">
                                <button class="btn btn--ghost logo__pick" type="button">
                                    <i class="fa-solid fa-arrow-up-from-bracket"></i> {{ __('general.action_change') }}
                                </button>
                                <button class="btn btn--ghost logo__del" type="button" {{ $siteData->avatar ? '' : 'hidden' }}>
                                    <i class="fa-solid fa-trash"></i> {{ __('site.btn_remove') }}
                                </button>
                            </span>
                            <input class="logo__file" type="file" accept="image/jpeg,image/png" hidden>
                        </span>
                    </div>

                    <div class="grid-2 ident-row__fields">
                        <label class="field">
                            <span class="field__label">{{ __('general.settings_radio_name') }}</span>
                            <input class="input" type="text" name="radio_name" value="{{ old('radio_name', $siteData->name) }}"
                                   placeholder="{{ __('general.settings_radio_name_placeholder') }}" autocomplete="off">
                        </label>

                        <div class="field tzpick">
                            <span class="field__label">{{ __('general.label_timezone') }}</span>
                            <button class="input tzpick__btn" type="button">
                                <span class="tzpick__value"></span>
                                <i class="fa-solid fa-chevron-down"></i>
                            </button>

                            <div class="tzpick__panel" hidden>
                                <div class="tzpick__search">
                                    <i class="fa-solid fa-magnifying-glass"></i>
                                    <input type="text" autocomplete="off" placeholder="{{ __('general.settings_tz_search') }}">
                                </div>
                                <div class="tzpick__list"></div>
                                <p class="tzpick__none" hidden>{{ __('general.settings_tz_none') }}</p>
                            </div>

                            <select class="tzpick__select" name="timezone" hidden>
                                @include('includes.timezone-options')
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="sec">
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-address-book"></i> {{ __('general.settings_block_contact') }}</h2>
                <p class="sec__desc">{{ __('general.settings_block_contact_desc') }}</p>
            </div>
            <div class="sec__body">
                <div class="grid-2">
                    <label class="field">
                        <span class="field__label">{{ __('general.label_contact_email') }}</span>
                        <input class="input" type="email" name="contact_email"
                               value="{{ old('contact_email', $contactData->contact_email) }}" autocomplete="off">
                    </label>

                    <label class="field">
                        <span class="field__label">{{ __('general.settings_phone_landline') }}</span>
                        <input class="input phone1" type="text" name="contact_phone"
                               value="{{ old('contact_phone', $contactData->contact_phone) }}" autocomplete="off">
                    </label>

                    <label class="field">
                        <span class="field__label">{{ __('general.settings_phone_mobile_placeholder') }}</span>
                        <input class="input phone2" type="text" name="contact_cellphone"
                               value="{{ old('contact_cellphone', $contactData->contact_cellphone) }}" autocomplete="off">
                    </label>

                    <label class="field field--full">
                        <span class="field__label">{{ __('general.label_address') }}</span>
                        <input class="input setf__address" type="text" name="address"
                               value="{{ old('address', $contactData->contact_address) }}" autocomplete="off">
                    </label>
                </div>

                <input type="hidden" name="address_latitude" value="{{ $contactData->contact_lat }}">
                <input type="hidden" name="address_longitude" value="{{ $contactData->contact_lng }}">

                <div class="row">
                    <div class="row__text">
                        <strong>{{ __('general.settings_show_map') }}</strong>
                        <small>{{ __('general.settings_show_map_desc') }}</small>
                    </div>
                    <label class="switch">
                        <input type="checkbox" name="contact_map" value="1" @checked($contactData->contact_map)>
                        <span class="switch__track"><span class="switch__knob"></span></span>
                    </label>
                </div>
            </div>
        </section>

        <section class="sec">
            <div class="sec__head">
                <h2 class="sec__title"><i class="fa-solid fa-share-nodes"></i> {{ __('general.label_social') }}</h2>
                <p class="sec__desc">
                    {{ trans_choice('general.settings_social_filled', $filled, ['n' => $filled, 'total' => count($socialFields)]) }}
                </p>
            </div>
            <div class="sec__body">
                <label class="field field--stack">
                    <span class="field__label">{{ __('general.settings_site_url') }}</span>
                    <input class="input" type="text" name="site_url" value="{{ old('site_url', $socialData->site_url) }}" autocomplete="off">
                </label>

                <div class="snets">
                    @foreach($socialFields as $f)
                        @php $value = old($f['name'], $socialData->{$f['name']}); @endphp
                        <label class="snetf {{ $value ? 'is-filled' : '' }}">
                            <span class="snetf__ico"><i class="fa-brands {{ $f['icon'] }}"></i></span>
                            <span class="snetf__text">
                                <span class="snetf__label">{{ $f['label'] }}</span>
                                <input class="input input--flat" type="text" name="{{ $f['name'] }}"
                                       value="{{ $value }}" placeholder="{{ $f['hint'] }}" autocomplete="off">
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>
        </section>

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

</main>

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

@include('includes/footer-novo')