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

@section('admin_styles')
<x-media.css/>
<x-summernote.summernote-css />
<x-tags.tag-input-css />
<style>
.edit-page-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}

@@media (max-width: 900px) {
    .edit-page-grid { grid-template-columns: 1fr; }
}

/* ── Variant selector ───────────────────────── */
.variant-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.variant-option:hover { border-color: var(--border-strong); }

.variant-option.selected { border-color: var(--accent); }

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

.variant-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: var(--accent);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.variant-option.selected .variant-check { display: flex; }

/* ── Toggle switch ──────────────────────────── */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.toggle-row:last-of-type { border-bottom: none; }

.toggle-row-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }

.toggle-track {
    position: absolute;
    inset: 0;
    background: var(--border-strong);
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s;
}

.toggle-switch input:checked ~ .toggle-track { background: var(--accent); }

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
    pointer-events: none;
}

.toggle-switch input:checked ~ .toggle-track .toggle-thumb { transform: translateX(18px); }

/* ── Meta accordion ─────────────────────────── */
.meta-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
}

.meta-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    list-style: none;
    user-select: none;
    border-radius: 8px;
}

.meta-section[open] > summary {
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--border);
}

.meta-section > summary::-webkit-details-marker { display: none; }

.meta-section > summary .toggle-icon { transition: transform .2s; color: var(--text-2); }
.meta-section[open] > summary .toggle-icon { transform: rotate(180deg); }

.meta-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface-2);
    border-radius: 0 0 8px 8px;
}

/* ── Media upload ───────────────────────────── */
.img-preview-wrap {
    width: 80px;
    height: 60px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface);
    margin-bottom: 8px;
}

.img-preview-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* ── Slug preview ───────────────────────────── */
.slug-preview {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 4px;
    word-break: break-all;
}

/* ── Content area hidden state ──────────────── */
.page-content-hidden { display: none; }
</style>
@endsection

@section('content')
<div class="page">
    <div class="page-head">
        <div>
            <h1 class="page-title">{{ __('Edit Page') }}</h1>
            <p class="page-sub">{{ $page_details->title ?? '' }}</p>
        </div>
        <div class="page-actions">
            <a href="{{ route('admin.page.all') }}" class="btn ghost sm">
                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 12H5M5 12l7-7M5 12l7 7"/>
                </svg>
                {{ __('All Pages') }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.edit.page', $page_details->id) }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="edit-page-grid">

            {{-- ── Left: main content ─────────────────────────── --}}
            <div style="display:flex;flex-direction:column;gap:20px">

                {{-- Basic fields --}}
                <div class="card">
                    <div class="card-head">
                        <div class="card-title">{{ __('Page Content') }}</div>
                    </div>
                    <div class="card-body" style="display:flex;flex-direction:column;gap:16px">
                        <x-validation.error/>

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

                        <div>
                            <label class="field-label" for="slug">{{ __('Slug') }}</label>
                            <input type="text" class="input wide" name="slug" id="slug"
                                value="{{ $page_details->slug ?? '' }}"
                                placeholder="{{ __('Slug') }}">
                            <span class="slug-preview full-slug-show"></span>
                        </div>

                        <div class="page_content_wrapper {{ $page_details->page_builder_status == 'on' ? 'page-content-hidden' : '' }}">
                            <label class="field-label" for="content">{{ __('Content') }}</label>
                            <textarea id="content" name="page_content" class="summernote">{!! $page_details->page_content !!}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Meta sections --}}
                <div class="card">
                    <div class="card-head">
                        <div class="card-title">{{ __('SEO & Meta') }}</div>
                    </div>
                    <div class="card-body">

                        {{-- Page Meta --}}
                        <details class="meta-section" open>
                            <summary>
                                {{ __('Page Meta') }}
                                <svg class="icon toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
                            </summary>
                            <div class="meta-body">
                                <div>
                                    <label class="field-label">{{ __('Meta Title') }}</label>
                                    <input type="text" class="input wide" name="meta_title"
                                        value="{{ $page_details->meta_data->meta_title ?? '' }}">
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Meta Tags') }}</label>
                                    <input type="text" class="input wide" name="meta_tags"
                                        value="{{ $page_details->meta_data->meta_tags ?? '' }}"
                                        data-role="tagsinput">
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Meta Description') }}</label>
                                    <textarea name="meta_description" class="input wide" rows="3" style="height:auto;resize:vertical">{{ $page_details->meta_data->meta_description ?? '' }}</textarea>
                                </div>
                            </div>
                        </details>

                        {{-- Facebook Meta --}}
                        <details class="meta-section">
                            <summary>
                                {{ __('Facebook Meta') }}
                                <svg class="icon toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
                            </summary>
                            <div class="meta-body">
                                <div>
                                    <label class="field-label">{{ __('Facebook Meta Title') }}</label>
                                    <input type="text" class="input wide" name="facebook_meta_tags"
                                        value="{{ $page_details->meta_data->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">{{ $page_details->meta_data->facebook_meta_description ?? '' }}</textarea>
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Facebook Meta Image') }}</label>
                                    <div class="img-preview-wrap">
                                        {!! render_attachment_preview_for_admin($page_details->meta_data->facebook_meta_image ?? '') !!}
                                    </div>
                                    <input type="hidden" id="facebook_meta_image" name="facebook_meta_image"
                                        value="{{ $page_details->meta_data->facebook_meta_image ?? '' }}">
                                    <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">
                                        {{ __('Change Image') }}
                                    </button>
                                    <p style="font-size:11px;color:var(--text-3);margin-top:4px">{{ __('allowed: jpg, jpeg, png') }}</p>
                                </div>
                            </div>
                        </details>

                        {{-- Twitter Meta --}}
                        <details class="meta-section">
                            <summary>
                                {{ __('Twitter Meta') }}
                                <svg class="icon toggle-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
                            </summary>
                            <div class="meta-body">
                                <div>
                                    <label class="field-label">{{ __('Twitter Meta Title') }}</label>
                                    <input type="text" class="input wide" name="twitter_meta_tags"
                                        value="{{ $page_details->meta_data->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">{{ $page_details->meta_data->twitter_meta_description ?? '' }}</textarea>
                                </div>
                                <div>
                                    <label class="field-label">{{ __('Twitter Meta Image') }}</label>
                                    <div class="img-preview-wrap">
                                        {!! render_attachment_preview_for_admin($page_details->meta_data->twitter_meta_image ?? '') !!}
                                    </div>
                                    <input type="hidden" id="twitter_meta_image" name="twitter_meta_image"
                                        value="{{ $page_details->meta_data->twitter_meta_image ?? '' }}">
                                    <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">
                                        {{ __('Change Image') }}
                                    </button>
                                    <p style="font-size:11px;color:var(--text-3);margin-top:4px">{{ __('allowed: jpg, jpeg, png') }}</p>
                                </div>
                            </div>
                        </details>

                    </div>
                </div>

                {{-- Footer variant (only 3 and 4) --}}
                <div class="card">
                    <div class="card-head">
                        <div class="card-title">{{ __('Footer Variant') }}</div>
                    </div>
                    <div class="card-body">
                        <input type="hidden" id="footer_variant" name="footer_variant" value="{{ (int)$page_details->footer_variant ?: 3 }}">
                        <div class="variant-list">
                            @for($i = 3; $i <= 4; $i++)
                                <div class="variant-option img-select-footer {{ ((int)$page_details->footer_variant ?: 3) == $i ? 'selected' : '' }}">
                                    <img src="{{ asset('assets/frontend/footer-variant/'.$i.'.png') }}" data-home_id="{{ $i }}" alt="{{ __('Footer Variant') }} {{ $i }}">
                                    <div class="variant-check">
                                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>

            </div>

            {{-- ── Right sidebar ──────────────────────────────── --}}
            <div style="display:flex;flex-direction:column;gap:20px">

                {{-- Page settings --}}
                <div class="card">
                    <div class="card-head">
                        <div class="card-title">{{ __('Page Settings') }}</div>
                    </div>
                    <div class="card-body">

                        {{-- Page Builder toggle --}}
                        <div class="toggle-row">
                            <span class="toggle-row-label">{{ __('Page Builder') }}</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="page_builder_status" name="page_builder_status"
                                    {{ isset($page_details->page_builder_status) && $page_details->page_builder_status == 'on' ? 'checked' : '' }}>
                                <span class="toggle-track"><span class="toggle-thumb"></span></span>
                            </label>
                        </div>

                        {{-- Page Builder options --}}
                        <div class="page-builder-area-wrapper" style="{{ empty($page_details->page_builder_status) ? 'display:none' : '' }};display:flex;flex-direction:column;gap:12px;padding:12px 0">
                            <a href="{{ route('admin.dynamic.page.builder', ['type' => 'dynamic-page', 'id' => $page_details->id]) }}"
                                class="btn primary sm" style="text-align:center">
                                {{ __('Open Page Builder') }}
                            </a>
                            <p style="font-size:11px;color:var(--text-3);margin:0">{{ __('Page builder option is available in page edit only') }}</p>

                            <div>
                                <label class="field-label">{{ __('Page Layout') }}</label>
                                <select name="layout" class="input wide">
                                    <option value="normal_layout" {{ $page_details->layout == 'normal_layout' ? 'selected' : '' }}>{{ __('Normal Layout') }}</option>
                                    <option value="home_page_layout" {{ $page_details->layout == 'home_page_layout' ? 'selected' : '' }}>{{ __('Home Page') }}</option>
                                </select>
                            </div>

                            <div>
                                <label class="field-label">{{ __('Page Class') }}</label>
                                <select name="page_class" class="input wide">
                                    <option value="none" {{ $page_details->page_class == 'none' ? 'selected' : '' }}>{{ __('None') }}</option>
                                    <option value="nav-absolute" {{ $page_details->page_class == 'nav-absolute' ? 'selected' : '' }}>{{ __('Custom Class') }}</option>
                                </select>
                                <p style="font-size:11px;color:var(--text-3);margin-top:4px">{{ __('Adjust frontend view by selecting none or custom class') }}</p>
                            </div>
                        </div>

                        {{-- Breadcrumb toggle --}}
                        <div class="toggle-row">
                            <span class="toggle-row-label">{{ __('Breadcrumb') }}</span>
                            <label class="toggle-switch">
                                <input type="checkbox" id="breadcrumb_status" name="breadcrumb_status"
                                    {{ !empty($page_details->breadcrumb_status) ? 'checked' : '' }}>
                                <span class="toggle-track"><span class="toggle-thumb"></span></span>
                            </label>
                        </div>

                        {{-- Visibility --}}
                        <div style="padding:12px 0;border-bottom:1px solid var(--border)">
                            <label class="field-label">{{ __('Visibility') }}</label>
                            <select name="visibility" class="input wide">
                                <option value="all" {{ $page_details->visibility == 'all' ? 'selected' : '' }}>{{ __('All') }}</option>
                                <option value="user" {{ $page_details->visibility == 'user' ? 'selected' : '' }}>{{ __('Only Logged In User') }}</option>
                            </select>
                        </div>

                        {{-- Status --}}
                        <div style="padding:12px 0">
                            <label class="field-label">{{ __('Status') }}</label>
                            <select name="status" class="input wide">
                                <option value="1" {{ $page_details->status == 1 ? 'selected' : '' }}>{{ __('Active') }}</option>
                                <option value="0" {{ $page_details->status == 0 ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                            </select>
                        </div>

                        @can('page-update')
                            <button type="submit" class="btn primary" style="width:100%">{{ __('Save Changes') }}</button>
                        @endcan
                    </div>
                </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';

    $(document).ready(function () {

        // Page builder toggle
        $(document).on('change', '#page_builder_status', function () {
            if ($(this).is(':checked')) {
                $('.page-builder-area-wrapper').show();
                $('.page_content_wrapper').addClass('page-content-hidden');
            } else {
                $('.page-builder-area-wrapper').hide();
                $('.page_content_wrapper').removeClass('page-content-hidden');
            }
        });

        // Slug live preview
        $('.full-slug-show').text('{{ url('/') }}/' + '{{ $page_details->slug }}');

        function makeSlug(slug) {
            return slug.replace(/\s/g, '-').toLowerCase().replace(/[^\w-]+/g, '-');
        }

        $(document).on('keyup', '#slug', function () {
            var slug = makeSlug($(this).val());
            $('.full-slug-show').text('{{ url('/') }}/' + slug);
        });

        // Navbar variant selector
        $(document).on('click', '.img-select-navbar', function () {
            $('.img-select-navbar').removeClass('selected');
            $(this).addClass('selected');
            var id = $(this).find('img').data('home_id');
            $('#navbar_variant').val(id);
        });

        // Footer variant selector
        $(document).on('click', '.img-select-footer', function () {
            $('.img-select-footer').removeClass('selected');
            $(this).addClass('selected');
            var id = $(this).find('img').data('home_id');
            $('#footer_variant').val(id);
        });

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