@extends('admin.layout')

@section('heading', 'Pages')

@push('head')
    <link
        href="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.css"
        rel="stylesheet"
    >

    <style>
        .pages-admin {
            --pg-card: rgba(16, 19, 27, 0.94);
            --pg-border: rgba(255, 255, 255, 0.09);
            --pg-border-hover: rgba(255, 255, 255, 0.17);
            --pg-text: #f7f8fb;
            --pg-muted: #8f96a8;
            --pg-muted-light: #b9bfcb;
            --pg-primary: #ff2345;
            --pg-primary-light: #ff526d;
            --pg-primary-dark: #d90d31;
            --pg-success: #23d692;
            --pg-danger: #ff6078;
            --pg-warning: #ffbf3f;
            --pg-radius: 22px;
            --pg-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);

            width: 100%;
            color: var(--pg-text);
        }

        .pages-admin *,
        .pages-admin *::before,
        .pages-admin *::after {
            box-sizing: border-box;
        }

        .pages-shell {
            display: flex;
            flex-direction: column;
            gap: 22px;
        }

        .pages-hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 20px 22px;
            border: 1px solid var(--pg-border);
            border-radius: 20px;
            background:
                radial-gradient(circle at 100% 0%, rgba(255, 35, 69, 0.12), transparent 33%),
                radial-gradient(circle at 0% 100%, rgba(95, 122, 255, 0.08), transparent 34%),
                rgba(12, 14, 20, 0.9);
            box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
        }

        .pages-hero-title {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .pages-hero-icon {
            width: 47px;
            height: 47px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border-radius: 15px;
            color: #fff;
            background: linear-gradient(135deg, var(--pg-primary-light), var(--pg-primary-dark));
            box-shadow: 0 13px 28px rgba(255, 35, 69, 0.24);
        }

        .pages-hero-icon svg {
            width: 23px;
            height: 23px;
        }

        .pages-hero-copy h1 {
            margin: 0;
            font-size: 22px;
            line-height: 1.2;
            letter-spacing: -0.03em;
        }

        .pages-hero-copy p {
            margin: 6px 0 0;
            color: var(--pg-muted);
            font-size: 13px;
            line-height: 1.5;
        }

        .pages-count {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
            padding: 9px 12px;
            border: 1px solid rgba(35, 214, 146, 0.18);
            border-radius: 999px;
            color: #c9f8e4;
            background: rgba(35, 214, 146, 0.08);
            font-size: 11px;
            font-weight: 800;
        }

        .pages-count::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--pg-success);
            box-shadow: 0 0 12px rgba(35, 214, 146, 0.8);
        }

        .pages-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
            gap: 22px;
            align-items: start;
        }

        .pages-panel {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--pg-border);
            border-radius: var(--pg-radius);
            background:
                linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
                var(--pg-card);
            box-shadow: var(--pg-shadow);
        }

        .pages-panel::before {
            content: "";
            position: absolute;
            top: 0;
            left: 8%;
            right: 8%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
            pointer-events: none;
        }

        .panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding: 20px 22px;
            border-bottom: 1px solid rgba(255,255,255,.065);
        }

        .panel-title {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            min-width: 0;
        }

        .panel-title-icon {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            border: 1px solid rgba(255,255,255,.07);
            border-radius: 12px;
            color: var(--pg-primary-light);
            background: rgba(255, 35, 69, 0.09);
        }

        .panel-title-icon svg {
            width: 19px;
            height: 19px;
        }

        .panel-title h2 {
            margin: 0;
            font-size: 16px;
            line-height: 1.35;
            letter-spacing: -0.015em;
        }

        .panel-title p {
            margin: 4px 0 0;
            color: var(--pg-muted);
            font-size: 12px;
            line-height: 1.5;
        }

        .panel-badge {
            flex: 0 0 auto;
            padding: 7px 10px;
            border: 1px solid rgba(255,255,255,.075);
            border-radius: 999px;
            color: var(--pg-muted);
            background: rgba(255,255,255,.035);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .panel-body {
            padding: 22px;
        }

        .field {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 18px;
        }

        .field:last-child {
            margin-bottom: 0;
        }

        .field-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            color: #e1e5ed;
            font-size: 12px;
            font-weight: 750;
        }

        .field-meta {
            color: #687080;
            font-size: 10px;
            font-weight: 600;
        }

        .required {
            color: var(--pg-primary-light);
        }

        .page-input {
            width: 100%;
            height: 50px;
            padding: 0 15px;
            border: 1px solid rgba(255,255,255,.095);
            border-radius: 14px;
            outline: none;
            color: var(--pg-text);
            background: rgba(255,255,255,.045);
            box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
            font-size: 13px;
            transition:
                border-color .2s ease,
                background .2s ease,
                box-shadow .2s ease;
        }

        .page-input::placeholder {
            color: #606878;
        }

        .page-input:hover {
            border-color: var(--pg-border-hover);
            background: rgba(255,255,255,.06);
        }

        .page-input:focus {
            border-color: rgba(255,35,69,.72);
            background: rgba(255,255,255,.067);
            box-shadow:
                0 0 0 4px rgba(255,35,69,.09),
                0 10px 28px rgba(0,0,0,.15);
        }

        .field-error {
            margin: 0;
            color: var(--pg-danger);
            font-size: 11px;
            line-height: 1.45;
        }

        .active-toggle {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 66px;
            padding: 13px 14px;
            border: 1px solid rgba(255,255,255,.085);
            border-radius: 14px;
            background: rgba(255,255,255,.03);
            cursor: pointer;
            user-select: none;
        }

        .active-toggle input {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .toggle-switch {
            position: relative;
            width: 43px;
            height: 24px;
            flex: 0 0 auto;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 999px;
            background: rgba(255,255,255,.09);
            transition:
                background .2s ease,
                border-color .2s ease,
                box-shadow .2s ease;
        }

        .toggle-switch::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #aeb4c0;
            box-shadow: 0 2px 7px rgba(0,0,0,.28);
            transition:
                transform .22s ease,
                background .22s ease;
        }

        .active-toggle input:checked + .toggle-switch {
            border-color: rgba(255,35,69,.7);
            background: linear-gradient(135deg, var(--pg-primary-light), var(--pg-primary-dark));
            box-shadow: 0 0 0 4px rgba(255,35,69,.09);
        }

        .active-toggle input:checked + .toggle-switch::after {
            background: #fff;
            transform: translateX(19px);
        }

        .toggle-copy strong {
            display: block;
            margin-bottom: 3px;
            color: #e7eaf1;
            font-size: 12px;
        }

        .toggle-copy span {
            display: block;
            color: var(--pg-muted);
            font-size: 10px;
            line-height: 1.4;
        }

        .save-page-button {
            width: 100%;
            height: 51px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            padding: 0 18px;
            border: 0;
            border-radius: 14px;
            color: #fff;
            background: linear-gradient(135deg, var(--pg-primary-light), var(--pg-primary-dark));
            box-shadow:
                0 14px 30px rgba(255,35,69,.24),
                0 1px 0 rgba(255,255,255,.18) inset;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .save-page-button:hover {
            transform: translateY(-2px);
            box-shadow:
                0 18px 38px rgba(255,35,69,.33),
                0 1px 0 rgba(255,255,255,.2) inset;
        }

        .save-page-button:disabled {
            opacity: .72;
            cursor: not-allowed;
            transform: none;
        }

        .save-page-button svg,
        .button-spinner {
            width: 18px;
            height: 18px;
        }

        .button-spinner {
            display: none;
            border: 2px solid rgba(255,255,255,.35);
            border-top-color: #fff;
            border-radius: 50%;
            animation: pageSpin .72s linear infinite;
        }

        .save-page-button.is-loading .button-spinner {
            display: inline-block;
        }

        .save-page-button.is-loading svg {
            display: none;
        }

        .list-toolbar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255,255,255,.065);
        }

        .search-wrap {
            position: relative;
            flex: 1;
        }

        .search-wrap svg {
            position: absolute;
            top: 50%;
            left: 14px;
            width: 17px;
            height: 17px;
            color: #687080;
            pointer-events: none;
            transform: translateY(-50%);
        }

        .page-search {
            width: 100%;
            height: 43px;
            padding: 0 14px 0 41px;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 12px;
            outline: none;
            color: var(--pg-text);
            background: rgba(255,255,255,.04);
            font-size: 12px;
        }

        .page-search:focus {
            border-color: rgba(255,35,69,.58);
            box-shadow: 0 0 0 4px rgba(255,35,69,.08);
        }

        .pages-list {
            display: flex;
            flex-direction: column;
        }

        .page-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 14px;
            align-items: center;
            padding: 16px 18px;
            border-bottom: 1px solid rgba(255,255,255,.055);
            transition:
                background .2s ease,
                transform .2s ease;
        }

        .page-row:last-child {
            border-bottom: 0;
        }

        .page-row:hover {
            background: rgba(255,255,255,.025);
        }

        .page-info {
            min-width: 0;
        }

        .page-title-line {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 5px;
            min-width: 0;
        }

        .page-title-line strong {
            overflow: hidden;
            color: #f2f4f8;
            font-size: 13px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            flex: 0 0 auto;
            padding: 5px 8px;
            border-radius: 999px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .status-badge.active {
            color: #bdf6dc;
            background: rgba(35,214,146,.09);
            border: 1px solid rgba(35,214,146,.17);
        }

        .status-badge.inactive {
            color: #ffd3da;
            background: rgba(255,96,120,.08);
            border: 1px solid rgba(255,96,120,.16);
        }

        .page-slug {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            color: var(--pg-muted);
            font-size: 10.5px;
        }

        .page-slug svg {
            width: 14px;
            height: 14px;
            flex: 0 0 auto;
        }

        .page-slug span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .row-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 0 0 auto;
        }

        .action-button {
            min-height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 0 11px;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 10px;
            color: var(--pg-muted-light);
            background: rgba(255,255,255,.04);
            font-size: 10px;
            font-weight: 800;
            cursor: pointer;
            transition:
                color .2s ease,
                border-color .2s ease,
                background .2s ease,
                transform .2s ease;
        }

        .action-button:hover {
            color: #fff;
            border-color: rgba(255,255,255,.16);
            background: rgba(255,255,255,.07);
            transform: translateY(-1px);
        }

        .action-button.toggle-on {
            color: #bff8df;
            border-color: rgba(35,214,146,.18);
            background: rgba(35,214,146,.07);
        }

        .action-button.toggle-off {
            color: #ffd0d8;
            border-color: rgba(255,96,120,.17);
            background: rgba(255,96,120,.07);
        }

        .action-button.danger {
            color: #ffc2cc;
            border-color: rgba(255,96,120,.18);
            background: rgba(255,96,120,.07);
        }

        .action-button.danger:hover {
            color: #fff;
            border-color: rgba(255,96,120,.38);
            background: rgba(255,96,120,.14);
        }

        .action-button svg {
            width: 14px;
            height: 14px;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            padding: 36px 20px;
            color: var(--pg-muted);
            text-align: center;
        }

        .empty-state svg {
            width: 46px;
            height: 46px;
            margin-bottom: 14px;
            color: #555d6c;
        }

        .empty-state h3 {
            margin: 0 0 7px;
            color: var(--pg-muted-light);
            font-size: 15px;
        }

        .empty-state p {
            max-width: 320px;
            margin: 0;
            font-size: 11px;
            line-height: 1.6;
        }

        .no-search-results {
            display: none;
            padding: 24px;
            color: var(--pg-muted);
            text-align: center;
            font-size: 12px;
        }

        .pages-admin .note-editor.note-frame {
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.095);
            border-radius: 15px;
            background: rgba(255,255,255,.035);
        }

        .pages-admin .note-editor.note-frame:focus-within {
            border-color: rgba(255,35,69,.68);
            box-shadow: 0 0 0 4px rgba(255,35,69,.08);
        }

        .pages-admin .note-toolbar {
            border-bottom: 1px solid rgba(255,255,255,.07);
            background: #141821;
        }

        .pages-admin .note-btn {
            color: #d4d8e1;
            border-color: rgba(255,255,255,.08);
            background: rgba(255,255,255,.04);
        }

        .pages-admin .note-btn:hover {
            color: #fff;
            background: rgba(255,255,255,.08);
        }

        .pages-admin .note-editing-area,
        .pages-admin .note-editable {
            color: #f3f5f8;
            background: #0f1218;
        }

        .pages-admin .note-placeholder {
            color: #626978;
        }

        .pages-admin .note-statusbar {
            border-top: 1px solid rgba(255,255,255,.07);
            background: #141821;
        }

        @keyframes pageSpin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 1050px) {
            .pages-layout {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 650px) {
            .pages-hero {
                align-items: flex-start;
                flex-direction: column;
            }

            .page-row {
                grid-template-columns: 1fr;
            }

            .row-actions {
                width: 100%;
            }

            .row-actions form {
                flex: 1;
            }

            .action-button {
                width: 100%;
            }

            .panel-head,
            .panel-body {
                padding-left: 17px;
                padding-right: 17px;
            }
        }

        @media (max-width: 430px) {
            .pages-hero-icon,
            .panel-title-icon,
            .panel-badge,
            .pages-count {
                display: none;
            }

            .row-actions {
                flex-direction: column;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .pages-admin *,
            .pages-admin *::before,
            .pages-admin *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }
    </style>
@endpush

@section('content')
<div class="pages-admin">
    <div class="pages-shell">

        <section class="pages-hero">
            <div class="pages-hero-title">
                <span class="pages-hero-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M6 3h9l3 3v15H6z"></path>
                        <path d="M14 3v4h4"></path>
                        <path d="M9 12h6"></path>
                        <path d="M9 16h6"></path>
                    </svg>
                </span>

                <div class="pages-hero-copy">
                    <h1>Pages Management</h1>
                    <p>Create and manage static pages such as About Us, Privacy Policy, FAQ and Terms of Use.</p>
                </div>
            </div>

            <span class="pages-count">
                {{ $items->count() }} {{ \Illuminate\Support\Str::plural('page', $items->count()) }}
            </span>
        </section>

        <div class="pages-layout">

            <form
                id="createPageForm"
                method="POST"
                action="{{ route('admin.pages.store') }}"
                class="pages-panel"
            >
                @csrf

                <div class="panel-head">
                    <div class="panel-title">
                        <span class="panel-title-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                <path d="M12 5v14"></path>
                                <path d="M5 12h14"></path>
                            </svg>
                        </span>

                        <div>
                            <h2>Create New Page</h2>
                            <p>Add a title and format the page content using the editor.</p>
                        </div>
                    </div>

                    <span class="panel-badge">New page</span>
                </div>

                <div class="panel-body">
                    <div class="field">
                        <label class="field-label" for="pageTitle">
                            <span>
                                Title
                                <span class="required">*</span>
                            </span>

                            <span class="field-meta" id="titleCounter"></span>
                        </label>

                        <input
                            id="pageTitle"
                            name="title"
                            class="page-input @error('title') is-invalid @enderror"
                            value="{{ old('title') }}"
                            maxlength="255"
                            placeholder="Example: Privacy Policy"
                            autocomplete="off"
                            required
                        >

                        @error('title')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="field-label" for="summernote">
                            <span>Content</span>
                            <span class="field-meta">Rich text editor</span>
                        </label>

                        <textarea id="summernote" name="content">{{ old('content') }}</textarea>

                        @error('content')
                            <p class="field-error">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="field">
                        <label class="active-toggle">
                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                @checked(old('is_active', true))
                            >

                            <span class="toggle-switch"></span>

                            <span class="toggle-copy">
                                <strong>Active Page</strong>
                                <span>Make this page visible on the public website immediately.</span>
                            </span>
                        </label>
                    </div>

                    <button id="savePageButton" type="submit" class="save-page-button">
                        <span class="button-spinner" aria-hidden="true"></span>

                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                            <path d="M5 4h12l2 2v14H5z"></path>
                            <path d="M8 4v6h8V4"></path>
                            <path d="M8 20v-6h8v6"></path>
                        </svg>

                        <span class="button-label">Save Page</span>
                    </button>
                </div>
            </form>

            <section class="pages-panel">
                <div class="panel-head">
                    <div class="panel-title">
                        <span class="panel-title-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                <path d="M6 3h9l3 3v15H6z"></path>
                                <path d="M14 3v4h4"></path>
                                <path d="M9 12h6"></path>
                                <path d="M9 16h6"></path>
                            </svg>
                        </span>

                        <div>
                            <h2>Existing Pages</h2>
                            <p>Search, publish, unpublish or remove created pages.</p>
                        </div>
                    </div>

                    <span class="panel-badge">{{ $items->count() }} total</span>
                </div>

                @if($items->count())
                    <div class="list-toolbar">
                        <div class="search-wrap">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                <circle cx="11" cy="11" r="7"></circle>
                                <path d="m20 20-4-4"></path>
                            </svg>

                            <input
                                id="pageSearch"
                                type="search"
                                class="page-search"
                                placeholder="Search pages..."
                                autocomplete="off"
                            >
                        </div>
                    </div>

                    <div class="pages-list" id="pagesList">
                        @foreach($items as $x)
                            <article
                                class="page-row"
                                data-search="{{ strtolower($x->title . ' ' . $x->slug) }}"
                            >
                                <div class="page-info">
                                    <div class="page-title-line">
                                        <strong>{{ $x->title }}</strong>

                                        <span class="status-badge {{ $x->is_active ? 'active' : 'inactive' }}">
                                            {{ $x->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </div>

                                    <div class="page-slug">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                            <path d="M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1"></path>
                                            <path d="M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1"></path>
                                        </svg>

                                        <span>/page/{{ $x->slug }}</span>
                                    </div>
                                </div>

                                <div class="row-actions">
                                    <form
                                        method="POST"
                                        action="{{ route('admin.pages.toggle', $x) }}"
                                        class="toggle-form"
                                    >
                                        @csrf

                                        <button
                                            type="submit"
                                            class="action-button {{ $x->is_active ? 'toggle-on' : 'toggle-off' }}"
                                        >
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                                <path d="M12 2v10"></path>
                                                <path d="M6.3 5.3a8 8 0 1 0 11.4 0"></path>
                                            </svg>

                                            {{ $x->is_active ? 'ON' : 'OFF' }}
                                        </button>
                                    </form>

                                    <form
                                        method="POST"
                                        action="{{ route('admin.pages.destroy', $x) }}"
                                        class="delete-page-form"
                                        data-page-title="{{ $x->title }}"
                                    >
                                        @csrf
                                        @method('DELETE')

                                        <button type="submit" class="action-button danger">
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                                                <path d="M3 6h18"></path>
                                                <path d="M8 6V4h8v2"></path>
                                                <path d="m19 6-1 14H6L5 6"></path>
                                                <path d="M10 11v5"></path>
                                                <path d="M14 11v5"></path>
                                            </svg>

                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </article>
                        @endforeach
                    </div>

                    <div id="noSearchResults" class="no-search-results">
                        No pages match your search.
                    </div>
                @else
                    <div class="empty-state">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7">
                            <path d="M6 3h9l3 3v15H6z"></path>
                            <path d="M14 3v4h4"></path>
                            <path d="M9 12h6"></path>
                            <path d="M9 16h4"></path>
                        </svg>

                        <h3>No pages created yet</h3>
                        <p>Create your first page using the form. It will appear here after saving.</p>
                    </div>
                @endif
            </section>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.9.0/dist/summernote-lite.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            $('#summernote').summernote({
                height: 320,
                minHeight: 220,
                placeholder: 'Write the page content here...',
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ]
            });

            const createForm = document.getElementById('createPageForm');
            const saveButton = document.getElementById('savePageButton');

            if (createForm && saveButton) {
                createForm.addEventListener('submit', event => {
                    if (!createForm.checkValidity()) {
                        event.preventDefault();
                        createForm.reportValidity();
                        return;
                    }

                    saveButton.disabled = true;
                    saveButton.classList.add('is-loading');

                    const label = saveButton.querySelector('.button-label');

                    if (label) {
                        label.textContent = 'Saving...';
                    }
                });
            }

            const titleInput = document.getElementById('pageTitle');
            const titleCounter = document.getElementById('titleCounter');

            if (titleInput && titleCounter) {
                const updateTitleCounter = () => {
                    titleCounter.textContent = `${titleInput.value.length}/255`;
                };

                titleInput.addEventListener('input', updateTitleCounter);
                updateTitleCounter();
            }

            const searchInput = document.getElementById('pageSearch');
            const rows = Array.from(document.querySelectorAll('.page-row'));
            const noResults = document.getElementById('noSearchResults');

            if (searchInput && rows.length) {
                searchInput.addEventListener('input', () => {
                    const query = searchInput.value.trim().toLowerCase();
                    let visibleCount = 0;

                    rows.forEach(row => {
                        const matched = row.dataset.search.includes(query);
                        row.style.display = matched ? 'grid' : 'none';

                        if (matched) {
                            visibleCount++;
                        }
                    });

                    if (noResults) {
                        noResults.style.display = visibleCount ? 'none' : 'block';
                    }
                });
            }

            document.querySelectorAll('.delete-page-form').forEach(form => {
                form.addEventListener('submit', event => {
                    const title = form.dataset.pageTitle || 'this page';

                    const confirmed = window.confirm(
                        `Delete "${title}"?\n\nThis action cannot be undone.`
                    );

                    if (!confirmed) {
                        event.preventDefault();
                    }
                });
            });

            document.querySelectorAll('.toggle-form').forEach(form => {
                form.addEventListener('submit', () => {
                    const button = form.querySelector('button');

                    if (button) {
                        button.disabled = true;
                        button.style.opacity = '0.65';
                    }
                });
            });
        });
    </script>
@endpush
