@extends('layouts.app')

@push('style')
    @vite('resources/sass/landing.scss')
@endpush

@section('content')
    <div class="row">
        <div class="col-12 px-0">
            @include('components.alert_success')
            @include('components.alert_error')

            {{-- GRID WRAPPER --}}
            <div class="editor-row">

                {{-- ROW 1 : TOOLBAR FULL WIDTH --}}
                <div class="editor-toolbar">
                    @include('pages.landing_website.editor._toolbar')
                </div>

                {{-- ROW 2 / COL 1 : LEFT SIDEBAR --}}
                <div class="sidebar-left">
                    @include('pages.landing_website.editor._sidebar_left')
                </div>

                {{-- ROW 2 / COL 2 : CENTER CANVAS --}}
                <div class="editor-canvas">
                    <div class="smartphone-frame-container">
                        <div class="smartphone-frame">
                            <div class="smartphone-bezel">
                                <div class="smartphone-screen">
                                    <header class="status-bar">
                                        <div class="time" id="phone-time">{{ now()->format('H:i') }}</div>
                                        <div class="status-icons">
                                            <svg class="status-icon" viewBox="0 0 24 24" width="14" height="14"
                                                fill="currentColor">
                                                <path
                                                    d="M2 22h2V12H2v10zm4 0h2V8H6v14zm4 0h2V4h-2v18zm4 0h2V8h-2v14zm4 0h2V12h-2v10z" />
                                            </svg>
                                            <svg class="status-icon" viewBox="0 0 24 24" width="14" height="14"
                                                fill="currentColor">
                                                <path
                                                    d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
                                            </svg>
                                            <svg class="status-icon" viewBox="0 0 24 24" width="14" height="14"
                                                fill="currentColor">
                                                <path
                                                    d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z" />
                                            </svg>
                                        </div>
                                    </header>

                                    <div class="browser-address-bar">
                                        <div class="browser-icons-left">
                                            <i class="fas fa-home"></i>
                                        </div>
                                        <div class="browser-input">
                                            <i class="fas fa-lock text-success" style="font-size: 10px;"></i>
                                            <span class="url-text">https://c-lic.fr/<span
                                                    class="url-slug">{{ $landingWebsite->slug ?? 'mon-slug' }}</span></span>
                                        </div>
                                        <div class="browser-icons-right">
                                            <div class="browser-icons-separator">
                                                <i class="fas fa-microphone"></i>
                                            </div>
                                            <div class="browser-tabs-count">1</div>
                                            <i class="fas fa-ellipsis-v"></i>
                                        </div>
                                    </div>

                                    <div class="app-content">
                                        <div id="gjs" data-landing-website='@json($landingWebsite)'
                                            data-landing-website-assets='@json($landingWebsite->getAssets())'></div>
                                    </div>

                                    <div class="home-indicator"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ROW 2 / COL 3 : RIGHT SIDEBAR --}}
                <div class="sidebar-right">
                    @include('pages.landing_website.editor._sidebar_right')
                </div>
            </div>
        </div>
    </div>

    @include('pages.landing_website._modal_create_child')
    @include('pages.landing_website._modal_children')
    @include('pages.landing_website._modal_elements')
    @include('pages.landing_website._modal_tags')
@endsection

@push('scripts')
    <script>
        const landingWebsite = {!! json_encode($landingWebsite) !!};
        const landingWebsiteAssets = {!! json_encode($landingWebsite->getAssets()) !!};
        window.redirectPages = @json($redirectPages);
        window.wpAdmin = {
            allTags: @json($allTags)
        };
    </script>
    @vite('resources/js/views/tags.js')
    @vite('resources/js/views/landing_website_gjs.js')
    @vite('resources/js/views/landing_website_blocks_panel.js')
    @vite('resources/js/views/landing_website_layers_panel.js')
    @vite('resources/js/views/landing_website_sidebar_uploads.js')
    @vite('resources/js/views/landing_website_og_metadata.js')
    @vite('resources/js/views/landing_website_device_switcher.js')
@endpush