@extends('backend.layout.master-tailwind')
@section('title', __('Add New Page'))

@section('admin_styles')
    <x-media.css />
    <x-summernote.summernote-css />
    <x-tags.tag-input-css />
    <style>
        /* variant image selector */
        .variant-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 8px;
        }

        .variant-item {
            border: 2px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: border-color .15s;
            position: relative;
        }

        .variant-item img {
            width: 100%;
            display: block;
            height: auto;
        }

        .variant-item.selected {
            border-color: var(--accent, #6366f1);
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent, #6366f1) 20%, transparent);
        }

        .variant-item.selected::before {
            content: '✓';
            position: absolute;
            top: 8px;
            right: 8px;
            width: 22px;
            height: 22px;
            background: var(--accent, #6366f1);
            color: #fff;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
        }

        .variant-item.selected::after {
            content: none;
        }

        /* summernote overrides */
        .note-editor.note-frame {
            border: 1px solid var(--border) !important;
            border-radius: 8px !important;
            overflow: hidden;
        }

        .note-toolbar {
            background: var(--surface-2) !important;
            border-bottom: 1px solid var(--border) !important;
        }

        .note-editable {
            background: var(--surface) !important;
            color: var(--text) !important;
            min-height: 200px;
        }

        /* meta upload zone */
        .meta-img-preview {
            width: 80px;
            height: 56px;
            border-radius: 6px;
            object-fit: cover;
            border: 1px solid var(--border);
            display: none
        }

        .page-form-grid {
            display: grid;
            grid-template-columns: 1fr 320px;
            gap: 20px;
            align-items: start;
        }
        @@media (max-width: 900px) {
            .page-form-grid { grid-template-columns: 1fr; }
        }
    </style>
@endsection

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

        <div class="page-head">
            <div>
                <h1 class="page-title">{{ __('Add New Page') }}</h1>
                <p class="page-sub">{{ __('Create a new page for your site') }}</p>
            </div>
        </div>

        @if ($errors->any())
            <div
                style="background:color-mix(in oklch,var(--danger,#ef4444) 8%,transparent);border:1px solid color-mix(in oklch,var(--danger,#ef4444) 30%,transparent);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--danger,#ef4444);display:flex;flex-direction:column;gap:4px;margin-bottom:16px">
                @foreach ($errors->all() as $error)
                    <div>{{ $error }}</div>
                @endforeach
            </div>
        @endif

        <form action="{{ route('admin.page.new') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="page-form-grid">

                {{-- Main column --}}
                <div style="display:flex;flex-direction:column;gap:16px">

                    {{-- Core content --}}
                    <div class="card" style="padding:20px;display:flex;flex-direction:column;gap:16px">

                        <div>
                            <label class="field-label">{{ __('Title') }}</label>
                            <input type="text" name="title" id="title" class="input wide"
                                placeholder="{{ __('Page title') }}" value="{{ old('title') }}">
                        </div>

                        <div>
                            <label class="field-label">{{ __('Slug') }}</label>
                            <input type="text" name="slug" id="slug" class="input wide"
                                placeholder="{{ __('page-slug') }}" value="{{ old('slug') }}">
                            <div id="slug-preview" style="font-size:11px;color:var(--text-3);margin-top:4px"></div>
                        </div>

                        <div>
                            <label class="field-label">{{ __('Content') }}</label>
                            <textarea id="content" name="page_content" class="summernote"></textarea>
                        </div>

                    </div>

                    {{-- SEO / Meta --}}
                    <div class="card" style="padding:0;overflow:hidden">
                        <div style="padding:14px 20px;border-bottom:1px solid var(--border)">
                            <span style="font-size:13px;font-weight:600;color:var(--text)">{{ __('SEO & Meta') }}</span>
                        </div>

                        {{-- Page Meta --}}
                        <details open style="border-bottom:1px solid var(--border)">
                            <summary
                                style="padding:12px 20px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between">
                                {{ __('Page Meta') }}
                                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="6 9 12 15 18 9" />
                                </svg>
                            </summary>
                            <div style="padding:0 20px 16px;display:flex;flex-direction:column;gap:12px">
                                <div>
                                    <label class="field-label">{{ __('Meta Title') }}</label>
                                    <input type="text" name="meta_title" class="input wide"
                                        placeholder="{{ __('Meta title') }}" value="{{ old('meta_title') }}">
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Meta Tags') }}</label>
                                    <input type="text" name="meta_tags" class="input wide"
                                        placeholder="{{ __('Tags') }}" data-role="tagsinput"
                                        value="{{ old('meta_tags') }}">
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Meta Description') }}</label>
                                    <textarea name="meta_description" class="input wide" rows="3" style="height:auto;resize:vertical"
                                        placeholder="{{ __('Meta description') }}">{{ old('meta_description') }}</textarea>
                                </div>
                            </div>
                        </details>

                        {{-- Facebook Meta --}}
                        <details style="border-bottom:1px solid var(--border)">
                            <summary
                                style="padding:12px 20px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between">
                                {{ __('Facebook Meta') }}
                                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="6 9 12 15 18 9" />
                                </svg>
                            </summary>
                            <div style="padding:0 20px 16px;display:flex;flex-direction:column;gap:12px">
                                <div>
                                    <label class="field-label">{{ __('Facebook Meta Title') }}</label>
                                    <input type="text" name="facebook_meta_tags" class="input wide"
                                        value="{{ old('facebook_meta_tags') }}">
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Facebook Meta Description') }}</label>
                                    <textarea name="facebook_meta_description" class="input wide" rows="3" style="height:auto;resize:vertical">{{ old('facebook_meta_description') }}</textarea>
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Facebook Meta Image') }}</label>
                                    <div style="display:flex;align-items:center;gap:10px">
                                        <img id="fb-meta-img-preview" class="meta-img-preview" src=""
                                            alt="">
                                        <input type="hidden" name="facebook_meta_image" id="fb-meta-image-input">
                                        <button type="button" class="btn ghost sm media_upload_form_btn"
                                            data-btntitle="{{ __('Select Image') }}"
                                            data-modaltitle="{{ __('Upload Image') }}" data-bs-toggle="modal"
                                            data-bs-target="#media_upload_modal" data-id="fb-meta-image-input"
                                            data-preview="fb-meta-img-preview">
                                            {{ __('Upload Image') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </details>

                        {{-- Twitter Meta --}}
                        <details>
                            <summary
                                style="padding:12px 20px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between">
                                {{ __('Twitter Meta') }}
                                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="6 9 12 15 18 9" />
                                </svg>
                            </summary>
                            <div style="padding:0 20px 16px;display:flex;flex-direction:column;gap:12px">
                                <div>
                                    <label class="field-label">{{ __('Twitter Meta Title') }}</label>
                                    <input type="text" name="twitter_meta_tags" class="input wide"
                                        value="{{ old('twitter_meta_tags') }}">
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Twitter Meta Description') }}</label>
                                    <textarea name="twitter_meta_description" class="input wide" rows="3" style="height:auto;resize:vertical">{{ old('twitter_meta_description') }}</textarea>
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Twitter Meta Image') }}</label>
                                    <div style="display:flex;align-items:center;gap:10px">
                                        <img id="tw-meta-img-preview" class="meta-img-preview" src=""
                                            alt="">
                                        <input type="hidden" name="twitter_meta_image" id="tw-meta-image-input">
                                        <button type="button" class="btn ghost sm media_upload_form_btn"
                                            data-btntitle="{{ __('Select Image') }}"
                                            data-modaltitle="{{ __('Upload Image') }}" data-bs-toggle="modal"
                                            data-bs-target="#media_upload_modal" data-id="tw-meta-image-input"
                                            data-preview="tw-meta-img-preview">
                                            {{ __('Upload Image') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </details>

                    </div>

                    {{-- Navbar Variant --}}
                    <div class="card" style="padding:20px">
                        <label class="field-label" style="margin-bottom:10px">{{ __('Navbar Variant') }}</label>
                        <input type="hidden" id="navbar_variant" name="navbar_variant"
                            value="{{ get_static_option('navbar_variant') ?? '01' }}">
                        <div class="variant-grid">
                            @if (moduleExists('CoinPaymentGateway'))
                                @for ($i = 1; $i < 4; $i++)
                                    <div class="variant-item img-select-navbar {{ $i == 1 ? 'selected' : '' }}"
                                        data-id="0{{ $i }}">
                                        <img src="{{ asset('assets/frontend/navbar-variant/' . $i . '.jpg') }}"
                                            alt="Navbar {{ $i }}">
                                    </div>
                                @endfor
                            @else
                                <div class="variant-item img-select-navbar selected" data-id="01">
                                    <img src="{{ asset('assets/frontend/navbar-variant/1.jpg') }}" alt="Navbar 1">
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Footer Variant --}}
                    <div class="card" style="padding:20px">
                        <label class="field-label" style="margin-bottom:10px">{{ __('Footer Variant') }}</label>
                        <input type="hidden" id="footer_variant" name="footer_variant" value="01">
                        <div class="variant-grid">
                            @for ($i = 1; $i < 3; $i++)
                                <div class="variant-item img-select-footer {{ $i == 1 ? 'selected' : '' }}"
                                    data-id="0{{ $i }}">
                                    <img src="{{ asset('assets/frontend/footer-variant/' . $i . '.png') }}"
                                        alt="Footer {{ $i }}">
                                </div>
                            @endfor
                        </div>
                    </div>

                </div>

                {{-- Sidebar --}}
                <div style="display:flex;flex-direction:column;gap:16px">

                    <div class="card" style="padding:20px;display:flex;flex-direction:column;gap:16px">

                        {{-- Page Builder toggle --}}
                        <div class="setting-row">
                            <div class="info">
                                <div class="ttl">{{ __('Page Builder') }}</div>
                                <div class="desc">{{ __('Enable drag-and-drop builder') }}</div>
                            </div>
                            <div class="switch" id="pb-switch"></div>
                            <input type="hidden" name="page_builder_status" id="page_builder_status" value="">
                        </div>

                        {{-- Page builder only fields (hidden by default) --}}
                        <div id="pb-fields" style="display:none;flex-direction:column;gap:12px">
                            <div>
                                <label class="field-label">{{ __('Page Layout') }}</label>
                                <select name="layout" class="input wide" style="height:38px;appearance:auto">
                                    <option value="normal_layout">{{ __('Normal Layout') }}</option>
                                    <option value="home_page_layout">{{ __('Home Page') }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="field-label">{{ __('Page Class') }}</label>
                                <select name="page_class" class="input wide" style="height:38px;appearance:auto">
                                    <option value="">{{ __('None') }}</option>
                                    <option value="nav-absolute">{{ __('Custom Class') }}</option>
                                </select>
                                <div style="font-size:11px;color:var(--text-3);margin-top:4px">
                                    {{ __('Adjust page frontend view') }}</div>
                            </div>
                            <div>
                                <span
                                    style="font-size:12px;color:var(--text-3)">{{ __('Page builder option is available in page edit only.') }}</span>
                            </div>
                        </div>

                        <div style="height:1px;background:var(--border)"></div>

                        {{-- Breadcrumb toggle --}}
                        <div class="setting-row">
                            <div class="info">
                                <div class="ttl">{{ __('Breadcrumb') }}</div>
                                <div class="desc">{{ __('Show breadcrumb on this page') }}</div>
                            </div>
                            <div class="switch" id="breadcrumb-switch"></div>
                            <input type="hidden" name="breadcrumb_status" id="breadcrumb_status" value="">
                        </div>

                        <div style="height:1px;background:var(--border)"></div>

                        {{-- Visibility --}}
                        <div>
                            <label class="field-label">{{ __('Visibility') }}</label>
                            <select name="visibility" class="input wide" style="height:38px;appearance:auto">
                                <option value="all">{{ __('All') }}</option>
                                <option value="user">{{ __('Only Logged In User') }}</option>
                            </select>
                        </div>

                        {{-- Status --}}
                        <div>
                            <label class="field-label">{{ __('Status') }}</label>
                            <select name="status" class="input wide" style="height:38px;appearance:auto">
                                <option value="1">{{ __('Active') }}</option>
                                <option value="0">{{ __('Inactive') }}</option>
                            </select>
                        </div>

                        @can('page-add')
                            <button type="submit" class="btn primary sm"
                                style="width:100%">{{ __('Create Page') }}</button>
                        @endcan

                    </div>

                </div>

            </div>
        </form>

        <x-media.markup />
    </div>
@endsection

@section('script')
    <x-media.js />
    <x-summernote.summernote-js />
    <x-tags.tag-input-js />
    <script>
        (function($) {
            'use strict';

            // slug auto-generate
            function makeSlug(val) {
                return val.replace(/\s+/g, '-').toLowerCase().replace(/[^\w-]+/g, '-');
            }
            $('#title').on('keyup', function() {
                var slug = makeSlug($(this).val());
                $('#slug').val(slug);
                $('#slug-preview').text('{{ url('/') }}/' + slug);
            });
            $('#slug').on('keyup', function() {
                $('#slug-preview').text('{{ url('/') }}/' + $(this).val());
            });

            // page builder toggle
            $('#pb-switch').on('click', function() {
                $(this).toggleClass('on');
                var isOn = $(this).hasClass('on');
                $('#page_builder_status').val(isOn ? 'on' : '');
                if (isOn) {
                    $('#pb-fields').css('display', 'flex');
                } else {
                    $('#pb-fields').hide();
                }
            });

            // breadcrumb toggle
            $('#breadcrumb-switch').on('click', function() {
                $(this).toggleClass('on');
                $('#breadcrumb_status').val($(this).hasClass('on') ? 'on' : '');
            });

            // navbar variant
            var $navbarInput = $('#navbar_variant');
            $(document).on('click', '.img-select-navbar', function() {
                $('.img-select-navbar').removeClass('selected');
                $(this).addClass('selected');
                $navbarInput.val($(this).data('id'));
            });
            // init selected state from hidden input
            var currentNavbar = $navbarInput.val();
            if (currentNavbar) {
                $('.img-select-navbar').removeClass('selected');
                $('.img-select-navbar[data-id="' + currentNavbar + '"]').addClass('selected');
            }

            // footer variant
            var $footerInput = $('#footer_variant');
            $(document).on('click', '.img-select-footer', function() {
                $('.img-select-footer').removeClass('selected');
                $(this).addClass('selected');
                $footerInput.val($(this).data('id'));
            });
            var currentFooter = $footerInput.val();
            if (currentFooter) {
                $('.img-select-footer').removeClass('selected');
                $('.img-select-footer[data-id="' + currentFooter + '"]').addClass('selected');
            }

            // media upload: update hidden input + show preview
            $(document).on('mediaSelected', function(e, data) {
                var btn = $('.media_upload_form_btn[data-triggered="1"]');
                if (!btn.length) return;
                var inputId = btn.data('id');
                var previewId = btn.data('preview');
                if (inputId) $('#' + inputId).val(data.url);
                if (previewId) {
                    var $img = $('#' + previewId);
                    $img.attr('src', data.url).show();
                }
                btn.removeAttr('data-triggered');
            });

            $('.media_upload_form_btn').on('click', function() {
                $(this).attr('data-triggered', '1');
            });

        }(jQuery));
    </script>
@endsection