@extends('admin.layout')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>Edit Site Content</h4>
        <a href="{{ route('admin.site-content.index') }}" class="btn btn-light">
            <i class="fa-solid fa-arrow-left"></i> Back to List
        </a>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('admin.site-content.update', $item) }}" enctype="multipart/form-data">
                @csrf @method('PUT')
                @include('admin.site-content._fields', ['mainMenus' => $mainMenus, 'item' => $item])
                <div class="mt-3 d-flex justify-content-end gap-2">
                    <a href="{{ route('admin.site-content.index') }}" class="btn btn-light">Cancel</a>
                    <button type="submit" class="btn site-content-btn">Update</button>
                </div>
            </form>
        </div>
    </div>

    <style>
        .site-content-btn {
            background-color: #1c1d46;
            color: #fff;
            border: none;
        }

        .site-content-btn:hover {
            background-color: #14152f;
            color: #fff;
        }
    </style>

    <!-- Quill.js rich text editor -->
  <link rel="stylesheet" href="{{ asset('assets/quill/quill.snow.min.css') }}">
<script src="{{ asset('assets/quill/quill.min.js') }}"></script>

    <script>
        document.querySelectorAll('.quill-editor').forEach(function (el) {
        const hiddenInput = document.getElementById(el.dataset.target);
        const quill = new Quill(el, {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ header: [false, 1, 2] }],
                    ['bold', 'italic', 'underline'],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    ['blockquote', 'link', 'image'],
                ]
            }
        });

        quill.root.innerHTML = hiddenInput.value;

        quill.on('text-change', function () {
            hiddenInput.value = quill.root.innerHTML;
        });
    });

    function toggleContentType(select) {
        const wrapper = select.closest('.card-body') || document;
        const type = select.value;
        wrapper.querySelector('.text-fields').style.display = (type === 'text') ? 'block' : 'none';
        wrapper.querySelector('.pdf-fields').style.display = (type === 'pdf') ? 'block' : 'none';
        wrapper.querySelector('.video-fields').style.display = (type === 'video') ? 'block' : 'none';
        wrapper.querySelector('.link-fields').style.display = (type === 'link') ? 'block' : 'none';
    }

    function filterSubmenus(select) {
        const wrapper = select.closest('.card-body') || document;
        const mainMenuId = select.value;
        const submenuSelect = wrapper.querySelector('.submenu-select');

        Array.from(submenuSelect.options).forEach(function (opt) {
            if (!opt.value) { opt.hidden = false; return; }
            opt.hidden = opt.dataset.parent !== mainMenuId;
        });
        submenuSelect.value = '';
    }

        function toggleContentType(select) {
            const wrapper = select.closest('.card-body') || document;
            const type = select.value;
            wrapper.querySelector('.text-fields').style.display = (type === 'text') ? 'block' : 'none';
            wrapper.querySelector('.pdf-fields').style.display = (type === 'pdf') ? 'block' : 'none';
        }

        function filterSubmenus(select) {
            const wrapper = select.closest('.card-body') || document;
            const mainMenuId = select.value;
            const submenuSelect = wrapper.querySelector('.submenu-select');

            Array.from(submenuSelect.options).forEach(function (opt) {
                if (!opt.value) { opt.hidden = false; return; }
                opt.hidden = opt.dataset.parent !== mainMenuId;
            });
            submenuSelect.value = '';
        }

        function toggleContentType(select) {
            const wrapper = select.closest('.card-body') || document;
            const type = select.value;
            wrapper.querySelector('.text-fields').style.display = (type === 'text') ? 'block' : 'none';
            wrapper.querySelector('.pdf-fields').style.display = (type === 'pdf') ? 'block' : 'none';
            wrapper.querySelector('.video-fields').style.display = (type === 'video') ? 'block' : 'none';
        }

       
    

    </script>
@endsection