@extends('admin.layout.app')
@section('title', 'CMS')
@section('content')
    <style>
        .tfcl-dashboard {
            --primary: #4f46e5;
            --primary-light: #eef2ff;
            --danger: #ef4444;
            --border: #e5e7eb;
            --radius: 14px;
        }

        .admin-title {
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        /* page switcher */
        #pageSwitcher {
            border-radius: 10px;
            border: 1px solid var(--border);
            padding: 8px 14px;
            font-weight: 500;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
            transition: all .2s;
        }

        #pageSwitcher:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        }

        /* header row */
        #currentPageName {
            font-weight: 600;
            font-size: 18px;
            color: #111827;
        }

        /*#addFieldBtn {*/
        /*    border-radius: 10px;*/
        /*    padding: 8px 18px;*/
        /*    font-weight: 600;*/
        /*    background: linear-gradient(135deg, #4f46e5, #6366f1);*/
        /*    border: none;*/
        /*    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);*/
        /*    transition: transform .15s ease, box-shadow .15s ease;*/
        /*}*/

        /*#addFieldBtn:hover {*/
        /*    transform: translateY(-1px);*/
        /*    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);*/
        /*}*/

        /* block cards */
        #blocksList .cms-card {
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: #fff;
            padding: 16px;
            height: 100%;
            transition: box-shadow .2s ease, transform .2s ease;
            position: relative;
            overflow: hidden;
        }

        #blocksList .cms-card:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            transform: translateY(-2px);
        }

        .cms-badge {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 3px 10px;
            border-radius: 20px;
            background: var(--primary-light);
            color: var(--primary);
            margin-bottom: 8px;
        }

        .cms-card-title {
            font-weight: 600;
            font-size: 15px;
            color: #111827;
            margin-bottom: 6px;
        }

        .cms-card-preview {
            color: #6b7280;
            font-size: 13.5px;
            line-height: 1.5;
            max-height: 60px;
            overflow: hidden;
        }

        .cms-card-preview img {
            border-radius: 10px;
            width: 100%;
            object-fit: cover;
            max-height: 130px;
        }

        .cms-card-actions {
            margin-top: 12px;
            display: flex;
            gap: 8px;
        }

        .cms-card-actions button {
            border-radius: 8px;
            font-size: 13px;
            padding: 5px 12px;
            font-weight: 500;
        }

        /* empty state */
        .cms-empty {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
            border: 2px dashed var(--border);
            border-radius: var(--radius);
            width: 100%;
        }

        /* modal polish */
        #fieldModal .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        }

        #fieldModal .modal-header {
            border-bottom: 1px solid var(--border);
            padding: 20px 24px;
        }

        #fieldModal .modal-body {
            padding: 24px;
        }

        #fieldModal .form-label {
            font-weight: 600;
            font-size: 13px;
            color: #374151;
        }

        #fieldModal .form-control,
        #fieldModal .form-select {
            border-radius: 10px;
            border: 1px solid #0d6efd;
            padding: 10px 14px;
        }

        #fieldModal .form-control:focus,
        #fieldModal .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }

        #fieldModal .btn-primary {
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            border: none;
            border-radius: 10px;
            padding: 8px 20px;
            font-weight: 600;
        }

        /* ── DRAG & DROP UPLOAD ── */
        .cms-dropzone {
            border: 2px dashed #c7d2fe;
            border-radius: 14px;
            background: #f8f9ff;
            text-align: center;
            padding: 28px 16px;
            cursor: pointer;
            transition: all .2s ease;
            position: relative;
        }

        .cms-dropzone.dragover {
            border-color: var(--primary);
            background: var(--primary-light);
        }

        .cms-dropzone i {
            font-size: 28px;
            color: var(--primary);
            margin-bottom: 8px;
            display: block;
        }

        .cms-dropzone p {
            margin: 0;
            font-size: 13.5px;
            color: #6b7280;
        }

        .cms-dropzone input[type="file"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
        }

        .cms-preview-wrap {
            margin-top: 12px;
            display: none;
        }

        .cms-preview-wrap img {
            width: 100%;
            max-height: 160px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid var(--border);
        }

        .cms-preview-wrap .remove-preview {
            display: block;
            margin-top: 6px;
            font-size: 12px;
            color: var(--danger);
            cursor: pointer;
            text-align: center;
        }

        #listItemsWrap {
            max-height: 250px; /* Keeps the list container from blowing up the modal */
            overflow-y: auto; /* Adds a scrollbar only when items overflow */
            overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
            padding-right: 8px; /* Spacing so scrollbar doesn't overlap text fields */
            border: 1px solid #eee; /* Light visual border to group the list items */
            border-radius: 6px;
            padding: 10px;
            background: #fafafa; /* Subtle background contrast */
        }

        /* Optional styling to make the scrollbar look clean */
        #listItemsWrap::-webkit-scrollbar {
            width: 6px;
        }

        #listItemsWrap::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 3px;
        }
    </style>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h1 class="admin-title mb-0">CMS</h1>
                                <select id="pageSwitcher" class="form-select" style="width:220px;">
                                    @foreach($pages as $p)
                                        <option value="{{ $p->slug }}" {{ $p->slug == $page->slug ? 'selected' : '' }}>
                                            {{ $p->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div id="status-message" style="display:none;" class="status-alert-bar">
                                <span id="msg-text"></span>
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <h5 id="currentPageName" class="mb-0">{{ $page->name }}</h5>
                                {{--                                <button type="button" class="btn btn-primary btn-sm" id="addFieldBtn">--}}
                                {{--                                    <i class="fa fa-plus"></i> Add Field--}}
                                {{--                                </button>--}}
                            </div>

                            <div id="blocksList" class="row g-3">
                                {{-- filled by JS --}}
                            </div>

                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal --}}
    <div class="modal fade" id="fieldModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="fieldForm">
                    <div class="modal-header">
                        <h5 class="modal-title">Add / Edit Field</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="oldKey" name="old_key">

                        <div class="mb-3">
                            <label class="form-label">Field Key (label)</label>
                            <input type="text" class="form-control" id="fieldKey" name="key" required
                                   placeholder="e.g. hero_title">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Type</label>
                            <select class="form-select" id="fieldType" name="type" required>
                                <option value="">-- select --</option>
                                <option value="title">Title (H1)</option>
                                <option value="subtitle">Sub Title (H3)</option>
                                <option value="description">Description</option>
                                <option value="image">Image</option>
                                <option value="card">Card (Title + Description)</option>
                                <option value="list">List (Title + Items)</option>
                            </select>
                        </div>

                        <div id="dynamicInputWrap"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
    <script>
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
        let currentSlug = "{{ $page->slug }}";
        let currentContent = @json($page->content ?? []);

        const routes = {
            data: "{{ route('admin.cms.data', ['slug' => '__SLUG__']) }}",
            store: "{{ route('admin.cms.block.store', ['slug' => '__SLUG__']) }}",
            {{--delete: "{{ route('admin.cms.block.delete', ['slug' => '__SLUG__', 'key' => '__KEY__']) }}",--}}
            edit: "{{ route('admin.cms.index', ['slug' => '__SLUG__']) }}",
        };

        function buildRoute(name, params = {}) {
            let url = routes[name];
            for (const key in params) {
                url = url.replace(`__${key.toUpperCase()}__`, params[key]);
            }
            return url;
        }

        const modalEl = new bootstrap.Modal(document.getElementById('fieldModal'));

        function showMsg(msg, ok = true) {
            const box = document.getElementById('status-message');
            box.style.display = 'block';
            box.className = 'status-alert-bar ' + (ok ? 'alert alert-success' : 'alert alert-danger');
            document.getElementById('msg-text').innerText = msg;
            setTimeout(() => box.style.display = 'none', 2500);
        }


        function renderBlocks() {
            const wrap = document.getElementById('blocksList');
            wrap.innerHTML = '';
            const keys = Object.keys(currentContent);

            if (keys.length === 0) {
                wrap.innerHTML = '<div class="cms-empty">No fields added yet. Click "Add Field" to get started.</div>';
                return;
            }

            keys.forEach(key => {
                const block = currentContent[key];
                let preview = '';

                if (block.type === 'image') {
                    preview = `<img src="{{ asset('storage') }}/${block.value}" alt="">`;

                } else if (block.type === 'card') {
                    preview = `
                <div class="cms-card-preview">
                    <strong>${block.value?.title ?? ''}</strong>
                    <p class="mb-0">${block.value?.description ?? ''}</p>
                </div>`;

                } else if (block.type === 'list') {
                    const items = block.value?.items ?? [];
                    const desc = block.value?.description ?? '';
                    preview = `
        <div class="cms-card-preview">
            <strong>${block.value?.title ?? ''}</strong>
            ${desc ? `<p class="mb-1">${desc}</p>` : ''}
            <ul class="mb-0 ps-3">
                ${items.map(i => `<li>${i}</li>`).join('')}
            </ul>
        </div>`;
                } else {
                    preview = `<div class="cms-card-preview">${block.value ?? ''}</div>`;
                }

                wrap.innerHTML += `
        <div class="col-md-4">
            <div class="cms-card">
                <span class="cms-badge">${block.type}</span>
                <div class="cms-card-title">${block.label}</div>
                ${preview}
                <div class="cms-card-actions">
                    <button class="btn btn-sm btn-outline-primary" onclick="editBlock('${key}')">Edit</button>
<!--                    <button class="btn btn-sm btn-outline-danger" onclick="deleteBlock('${key}')">Delete</button>-->
                </div>
            </div>
        </div>`;
            });
        }

        function renderDynamicInput(type, value = '') {
            const wrap = document.getElementById('dynamicInputWrap');

            if (type === 'title') {
                wrap.innerHTML = `<label class="form-label">Title (H1)</label>
            <input type="text" class="form-control" name="value" value="${value}">`;

            } else if (type === 'subtitle') {
                wrap.innerHTML = `<label class="form-label">Sub Title (H3)</label>
            <input type="text" class="form-control" name="value" value="${value}">`;

            } else if (type === 'description') {
                wrap.innerHTML = `<label class="form-label">Description</label>
            <textarea class="form-control" name="value" rows="4">${value}</textarea>`;

            } else if (type === 'image') {
                wrap.innerHTML = `
            <label class="form-label">Image</label>
            <div class="cms-dropzone" id="dropzone">
                <i class="fa fa-cloud-upload-alt"></i>
                <p>Drag & drop image here, or click to browse</p>
                <input type="file" name="image" id="imageInput" accept="image/*">
            </div>
            <div class="cms-preview-wrap" id="previewWrap">
                <img id="previewImg" src="" alt="">
                <span class="remove-preview" id="removePreview">Remove image</span>
            </div>
        `;
                initDropzone();

            } else if (type === 'card') {
                wrap.innerHTML = `
            <label class="form-label">Card Title</label>
            <input type="text" class="form-control mb-3" name="card_title" placeholder="e.g. Fast Delivery">

            <label class="form-label">Card Description</label>
            <textarea class="form-control" name="card_description" rows="3" placeholder="Short description..."></textarea>
        `;

            } else if (type === 'list') {
                wrap.innerHTML = `
        <label class="form-label">List Title</label>
        <input type="text" class="form-control mb-3" name="list_title" placeholder="e.g. Our Services">

        <label class="form-label">List Description <span class="text-muted fw-normal">(optional)</span></label>
        <textarea class="form-control mb-3" name="list_description" rows="2" placeholder="Short description (optional)..."></textarea>

        <label class="form-label">List Items</label>
        <!-- Container with scrolling styling applied -->
        <div id="listItemsWrap"></div>

        <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addListItemBtn">
            <i class="fa fa-plus"></i> Add Item
        </button>
    `;
                initListItems();
            } else {
                wrap.innerHTML = '';
            }
        }

        function initListItems(existingItems = []) {
            const itemsWrap = document.getElementById('listItemsWrap');
            const addBtn = document.getElementById('addListItemBtn');

            function addItemRow(value = '') {
                const row = document.createElement('div');
                row.className = 'input-group mb-2 list-item-row';
                row.innerHTML = `
            <input type="text" class="form-control" name="list_items[]" value="${value}" placeholder="List item...">
            <button type="button" class="btn btn-outline-danger remove-item-btn"><i class="fa fa-times"></i></button>
        `;
                row.querySelector('.remove-item-btn').addEventListener('click', () => row.remove());
                itemsWrap.appendChild(row);
            }

            itemsWrap.innerHTML = '';

            if (existingItems.length > 0) {
                existingItems.forEach(item => addItemRow(item));
            } else {
                addItemRow(); // ek khaali row start me
            }

            addBtn.addEventListener('click', () => addItemRow());
        }

        function initDropzone() {
            const dropzone = document.getElementById('dropzone');
            const input = document.getElementById('imageInput');
            const previewWrap = document.getElementById('previewWrap');
            const previewImg = document.getElementById('previewImg');
            const removeBtn = document.getElementById('removePreview');

            function showPreview(file) {
                if (!file) return;
                const reader = new FileReader();
                reader.onload = e => {
                    previewImg.src = e.target.result;
                    previewWrap.style.display = 'block';
                    dropzone.style.display = 'none';
                };
                reader.readAsDataURL(file);
            }

            input.addEventListener('change', function () {
                if (this.files && this.files[0]) showPreview(this.files[0]);
            });

            ['dragover', 'dragenter'].forEach(evt => {
                dropzone.addEventListener(evt, function (e) {
                    e.preventDefault();
                    dropzone.classList.add('dragover');
                });
            });

            ['dragleave', 'dragend'].forEach(evt => {
                dropzone.addEventListener(evt, function () {
                    dropzone.classList.remove('dragover');
                });
            });

            dropzone.addEventListener('drop', function (e) {
                e.preventDefault();
                dropzone.classList.remove('dragover');
                const file = e.dataTransfer.files[0];
                if (file && file.type.startsWith('image/')) {
                    input.files = e.dataTransfer.files; // form submit ke liye zaroori
                    showPreview(file);
                }
            });

            removeBtn.addEventListener('click', function () {
                input.value = '';
                previewWrap.style.display = 'none';
                dropzone.style.display = 'block';
            });
        }

        document.getElementById('fieldType').addEventListener('change', function () {
            renderDynamicInput(this.value);
        });

        // document.getElementById('addFieldBtn').addEventListener('click', function () {
        //     document.getElementById('fieldForm').reset();
        //     document.getElementById('oldKey').value = '';
        //     document.getElementById('dynamicInputWrap').innerHTML = '';
        //     modalEl.show();
        // });

        window.editBlock = function (key) {
            const block = currentContent[key];
            document.getElementById('oldKey').value = key;

            // Set the value and make the field read-only
            const fieldKeyInput = document.getElementById('fieldKey');
            fieldKeyInput.value = block.label;
            fieldKeyInput.readOnly = true; // <-- Added this line

            document.getElementById('fieldType').value = block.type;

            if (block.type === 'card') {
                renderDynamicInput('card');
                setTimeout(() => {
                    document.querySelector('[name="card_title"]').value = block.value?.title ?? '';
                    document.querySelector('[name="card_description"]').value = block.value?.description ?? '';
                }, 0);

            } else if (block.type === 'list') {
                renderDynamicInput('list');
                setTimeout(() => {
                    document.querySelector('[name="list_title"]').value = block.value?.title ?? '';
                    document.querySelector('[name="list_description"]').value = block.value?.description ?? '';
                    initListItems(block.value?.items ?? []);
                }, 0);
            } else {
                renderDynamicInput(block.type, block.type !== 'image' ? block.value : '');

                if (block.type === 'image' && block.value) {
                    setTimeout(() => {
                        document.getElementById('previewImg').src = "