@extends('admin.layout')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4>Add 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.store') }}" enctype="multipart/form-data">
                @csrf
                @include('admin.site-content._fields', ['mainMenus' => $mainMenus])
                <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">Save</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 modal = select.closest('.modal-content');
            const textFields = modal.querySelector('.text-fields');
            const pdfFields = modal.querySelector('.pdf-fields');
            const videoFields = modal.querySelector('.video-fields');
            const linkFields = modal.querySelector('.link-fields');

            textFields.style.display = 'none';
            pdfFields.style.display = 'none';
            videoFields.style.display = 'none';
            linkFields.style.display = 'none';

            if (select.value === 'text') {
                textFields.style.display = 'block';
            } else if (select.value === 'pdf') {
                pdfFields.style.display = 'block';
            } else if (select.value === 'video') {
                videoFields.style.display = 'block';
            } else if (select.value === 'link') {
                linkFields.style.display = 'block';
            }
        }

        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 = '';
        }
    </script>
@endsection