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

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

@php
    $cores = [
        'none' => '', 'red' => '#e53935', 'orange' => '#fb8c00', 'green' => '#43a047',
        'blue' => '#1e88e5', 'ciano' => '#00897b', 'purple' => '#8e24aa',
        'pink' => '#e91e8c', 'yellow' => '#bdad27',
    ];

    $corAtual = $curPage->color ?? 'none';
    $paginaUrl = 'https://' . $siteData->domain . '/links';
@endphp

@include('includes/header-novo')

<main class="app-main">

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

        <div class="page-head__acts">
            <span class="pllogo__status" id="save-status"></span>

            <button type="button" class="btn btn--primary" data-save>
                <i class="fa-solid fa-floppy-disk"></i> {{ __('site.action_save') }}
            </button>

            <a class="btn btn--ghost" href="{{ $paginaUrl }}" target="_blank" rel="noopener">
                <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('site.page_themes_open_site') }}
            </a>
        </div>
    </header>

    <div class="plwrap">
        <div class="plform">

            <section class="plcard">
                <div class="plcard__head">
                    <span class="plcard__step">1</span>
                    <span class="plcard__titles">
                        <span class="plcard__title">{{ __('site.pagelink_logo_title') }}</span>
                        <span class="plcard__sub">{{ __('site.pagelink_logo_help') }}</span>
                    </span>
                </div>

                <div class="plcard__body">
                    <input type="file" id="logo-file-input" accept="image/*" hidden>

                    <div id="logo-empty-state" class="pllogo">
                        <span class="pllogo__thumb"></span>

                        <div class="pllogo__acts">
                            <span class="pllogo__hint">{{ __('site.pagelink_logo_empty') }}</span>

                            <button type="button" class="btn btn--ghost" id="btn-logo-pick">
                                <i class="fa-solid fa-upload"></i> {{ __('site.pagelink_logo_desc') }}
                            </button>
                        </div>
                    </div>

                    <div id="logo-loaded-state" class="pllogo is-hidden">
                        <span class="pllogo__thumb">
                            <img id="thumb-sq" src="" alt="">
                            <span id="logo-removing-overlay" class="pllogo__overlay" style="display:none">
                                <i class="fa-solid fa-rotate fa-spin"></i>
                            </span>
                        </span>

                        <div class="pllogo__acts" id="logo-actions">
                            <span class="pllogo__status" id="logo-upload-status"></span>

                            <button type="button" class="btn btn--ghost" id="btn-logo-edit">
                                <i class="fa-solid fa-pen"></i> {{ __('site.action_edit') }}
                            </button>

                            <button type="button" class="btn btn--ghost" id="btn-logo-remove">
                                <i class="fa-solid fa-trash"></i> {{ __('site.btn_remove') }}
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <section class="plcard">
                <div class="plcard__head">
                    <span class="plcard__step">2</span>
                    <span class="plcard__titles">
                        <span class="plcard__title">{{ __('site.pagelink_general_title') }}</span>
                        <span class="plcard__sub">{{ __('site.pagelink_general_desc') }}</span>
                    </span>
                </div>

                <div class="plcard__body">
                    <label class="plfield">
                        <span class="plfield__top">
                            <span class="plfield__label">{{ __('site.pagelink_input_name') }}</span>
                            <span class="plfield__count"><span id="nome-count">0</span>/150</span>
                        </span>
                        <input type="text" class="plinput" id="input-nome" maxlength="150"
                               placeholder="{{ __('site.pagelink_input_name') }}"
                               value="{{ $curPage->name ?? __('site.pagelink_default_name') }}">
                        <span class="plfield__help">{{ __('site.pagelink_name_help') }}</span>
                    </label>

                    <label class="plfield">
                        <span class="plfield__top">
                            <span class="plfield__label">{{ __('site.pagelink_input_desc_place') }}</span>
                            <span class="plfield__count"><span id="desc-count">0</span>/255</span>
                        </span>
                        <textarea class="plinput" id="input-desc" rows="2" maxlength="255"
                                  placeholder="{{ __('site.pagelink_input_desc_place') }}">{{ $curPage->description ?? __('site.pagelink_default_desc_radio') }}</textarea>
                        <span class="plfield__help">{{ __('site.pagelink_desc_help') }}</span>
                    </label>

                    @if(isset($siteData->stream_port))
                        <label class="plswitch">
                            <span>{{ __('site.pagelink_show_player') }}</span>
                            <input type="checkbox" id="switchPlayer" {{ ($curPage->player ?? '1') === '1' ? 'checked' : '' }}>
                            <span class="plswitch__track"></span>
                        </label>
                    @endif
                </div>
            </section>

            <section class="plcard">
                <div class="plcard__head">
                    <span class="plcard__step">3</span>
                    <span class="plcard__titles">
                        <span class="plcard__title">{{ __('site.pagelink_colors_title') }}</span>
                        <span class="plcard__sub">{{ __('site.pagelink_colors_help') }}</span>
                    </span>
                </div>

                <div class="plcard__body">
                    <div class="plfield">
                        <span class="plfield__label">{{ __('site.pagelink_theme_label') }}</span>

                        <div class="plthemes">
                            <button type="button" id="theme-light"
                                    class="btn {{ ($curPage->theme ?? 'light') === 'light' ? 'btn--primary' : 'btn--ghost' }}">
                                {{ __('site.pagelink_theme_light') }}
                            </button>

                            <button type="button" id="theme-dark"
                                    class="btn {{ ($curPage->theme ?? 'light') === 'dark' ? 'btn--primary' : 'btn--ghost' }}">
                                {{ __('site.pagelink_theme_dark') }}
                            </button>
                        </div>
                    </div>

                    <div class="plfield">
                        <span class="plfield__label">{{ __('site.pagelink_color_label') }}</span>

                        <div class="swatch-wrap">
                            <div class="swatch-none {{ $corAtual === 'none' ? 'selected' : '' }}" id="swatch-none"
                                 data-color="" title="{{ __('site.pagelink_color_default') }}"></div>

                            @foreach($cores as $nome => $hex)
                                @continue($nome === 'none')

                                <div class="swatch {{ $corAtual === $nome ? 'selected' : '' }}"
                                     style="background: {{ $hex }}" data-color="{{ $hex }}"></div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>

            <section class="plcard">
                <div class="plcard__head">
                    <span class="plcard__step">4</span>
                    <span class="plcard__titles">
                        <span class="plcard__title">{{ __('site.pagelink_social_title') }}</span>
                        <span class="plcard__sub">{{ __('site.pagelink_social_help') }}</span>
                    </span>
                </div>

                <div class="plcard__body">
                    @forelse($redes as $i => $rede)
                        <div class="social-row {{ $rede['active'] ? '' : 'disabled-item' }}"
                             id="social-row-{{ $i }}" data-id="{{ $i }}" data-slug="{{ $rede['slug'] }}">
                            <span class="social-info">
                                <span class="social-info__icon"><i class="{{ $rede['icon'] }}"></i></span>
                                <span class="social-info__value">{{ $rede['value'] }}</span>
                            </span>

                            <label class="plswitch">
                                <input type="checkbox" {{ $rede['active'] ? 'checked' : '' }}>
                                <span class="plswitch__track"></span>
                            </label>
                        </div>
                    @empty
                        <p class="plempty">{{ __('site.pagelink_social_none') }}</p>
                    @endforelse

                    <a class="plcard__link" href="/settings">
                        <i class="fa-solid fa-arrow-up-right-from-square"></i> {{ __('site.pagelink_social_manage') }}
                    </a>
                </div>
            </section>

            <section class="plcard">
                <div class="plcard__head">
                    <span class="plcard__step">5</span>
                    <span class="plcard__titles">
                        <span class="plcard__title">{{ __('site.menu_item_3_sub_10') }}</span>
                        <span class="plcard__sub">{{ __('site.pagelink_links_help') }}</span>
                    </span>
                </div>

                <div class="plcard__body">
                    <div id="links-container"></div>

                    <div class="placts">
                        <button type="button" class="btn btn--ghost" id="btn-add-link">
                            <i class="fa-solid fa-plus"></i> {{ __('site.page_links_new_h1') }}
                        </button>

                        <button type="button" class="btn btn--primary" data-save>
                            <i class="fa-solid fa-floppy-disk"></i> {{ __('site.action_save') }}
                        </button>
                    </div>
                </div>
            </section>
        </div>

        <aside class="plpreview">
            <div class="preview-header">
                <div class="publish-row">
                    <div class="publish-row-left">
                        <span class="publish-icon on" id="publish-icon">
                            <i class="fa-solid fa-wifi" id="publish-icon-i"></i>
                        </span>

                        <span>
                            <span class="publish-label" id="publish-label">{{ __('site.pagelink_publish_label') }}</span>
                            <span class="publish-sub" id="publish-sub">{{ __('site.pagelink_publish_sub') }}</span>
                        </span>
                    </div>

                    <label class="plswitch">
                        <span class="publish-sub" id="publish-switch-label">{{ __('site.pagelink_publish_switch') }}</span>
                        <input type="checkbox" id="publish-switch" {{ ($curPage->status ?? '1') === '1' ? 'checked' : '' }}>
                        <span class="plswitch__track"></span>
                    </label>
                </div>

                <a class="preview-url-badge" href="{{ $paginaUrl }}" target="_blank" rel="noopener">
                    <span class="preview-url-icon"><i class="fa-solid fa-globe"></i></span>
                    <span class="preview-url-text">{{ $paginaUrl }}</span>
                    <i class="fa-solid fa-arrow-up-right-from-square preview-url-ext"></i>
                </a>
            </div>

            <div class="phone-outer">
                <div class="phone-wrap">
                    <span class="phone-btn-r"></span>
                    <span class="phone-btn-l1"></span>
                    <span class="phone-btn-l2"></span>
                    <span class="phone-btn-l3"></span>

                    <div class="phone-frame" id="phone-frame">
                        <span class="phone-notch"></span>

                        <div class="phone-inner" id="phone-inner">
                            <div class="phone-globe">
                                <button type="button" class="phone-globe-btn" id="phone-globe-btn" tabindex="-1">
                                    <i class="fa-solid fa-globe"></i>
                                </button>
                            </div>

                            <div class="phone-content" id="phone-content">
                                <div class="phone-logo-box" id="phone-logo-box">
                                    <span id="phone-logo-empty" class="phone-logo-empty"><i class="fa-regular fa-image"></i></span>
                                    <img id="phone-logo-img" src="" alt="" style="display:none">
                                </div>

                                <div class="phone-radio-name" id="preview-name">{{ $curPage->name ?? __('site.pagelink_default_name') }}</div>
                                <div class="phone-radio-desc" id="preview-desc">{{ $curPage->description ?? __('site.pagelink_default_desc') }}</div>

                                @if(isset($siteData->stream_port))
                                    <div id="phone-player-wrap" class="phone-player-wrap">
                                        <div class="phone-player" id="phone-player">
                                            <span class="phone-player-thumb"><i class="fa-solid fa-music"></i></span>

                                            <div class="phone-player-left">
                                                <div class="phone-player-label">{{ __('radio.home_player_current') }}</div>
                                                <div class="phone-player-track">{{ __('site.pagelink_player_click') }}</div>
                                                <div class="phone-player-status">
                                                    <span class="phone-player-dot"></span>
                                                    <span>{{ __('site.pagelink_player_onair') }}</span>
                                                </div>
                                            </div>

                                            <div class="phone-player-right">
                                                <button type="button" class="phone-play-btn" id="phone-play-btn" tabindex="-1">
                                                    <span class="phone-play-icon"></span>
                                                </button>

                                                <div id="phone-vol-wrap" class="phone-vol-wrap">
                                                    <i class="fa-solid fa-volume-low"></i>
                                                    <span class="phone-vol-bar"><span class="phone-vol-fill" id="phone-vol-fill"></span></span>
                                                    <i class="fa-solid fa-volume-high"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <div class="phone-socials" id="preview-socials"></div>

                                <div class="phone-links-area" id="preview-links"></div>

                                <div class="phone-footer">by <strong>BRASCAST</strong></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>

</main>

@section('scripts')
    <script>
        window.PAGELINK = {
            theme: @json($curPage->theme ?? 'light'),
            color: @json($hexColor),
            showPlayer: @json(($curPage->player ?? '1') === '1'),
            published: @json(($curPage->status ?? '1') === '1'),
            logoUrl: @json(isset($siteData->stream_port) ? '/assets-page/' . $siteData->stream_port . '.png' : null),
            links: @json($allLinks),
            urls: {
                save: @json(route('site.pagelink.r.do')),
                asset: @json(route('site.pagelink.r.asdo')),
                assetRemove: @json(route('site.pagelink.r.asdoDel')),
                publish: @json(route('site.pagelink.r.publish'))
            },
            txt: {
                defaultName: @json(__('site.pagelink_default_name')),
                defaultDesc: @json(__('site.pagelink_default_desc')),
                noLinks: @json(__('site.pagelink_links_none')),
                previewEmpty: @json(__('site.pagelink_links_empty')),
                linkTitlePlace: @json(__('site.pagelink_link_title_place')),
                urlInvalid: @json(__('site.pagelink_url_invalid')),
                remove: @json(__('site.btn_remove')),
                sending: @json(__('site.pagelink_logo_sending')),
                saved: @json(__('site.pagelink_logo_saved')),
                uploadError: @json(__('site.pagelink_logo_error')),
                removing: @json(__('site.pagelink_logo_removing')),
                removeError: @json(__('site.pagelink_logo_remove_error')),
                tooBig: @json(__('site.pagelink_logo_too_big')),
                saving: @json(__('site.configs_saving')),
                savedOk: @json(__('site.pagelink_saved')),
                saveError: @json(__('site.pagelink_save_error')),
                fixErrors: @json(__('site.pagelink_fix_errors')),
                published: @json(__('site.pagelink_state_published')),
                unpublished: @json(__('site.pagelink_state_unpublished')),
                publishedLabel: @json(__('site.pagelink_publish_label')),
                publishedSub: @json(__('site.pagelink_publish_sub')),
                unpublishedLabel: @json(__('site.pagelink_unpublish_label')),
                unpublishedSub: @json(__('site.pagelink_unpublish_sub')),
                publishAsk: @json(__('site.pagelink_publish_ask')),
                publishText: @json(__('site.pagelink_publish_text')),
                publishDo: @json(__('site.pagelink_publish_do')),
                unpublishAsk: @json(__('site.pagelink_unpublish_ask')),
                unpublishText: @json(__('site.pagelink_unpublish_text')),
                unpublishDo: @json(__('site.pagelink_unpublish_do')),
                publishError: @json(__('site.pagelink_publish_error'))
            }
        };
    </script>
    <script src="{{ assetv('/assets/js/site-pagelink.js') }}"></script>
@endsection

@include('includes/footer-novo')