@extends('backend.adminlayouts.master')

@section('body')
    <div class="container mx-auto px-6 py-8">
        <h3 class="text-gray-700 text-3xl font-medium mb-6">Menu</h3>

        <form action="{{ route('menu.index', $menuType) }}" class="flex items-center space-x-4 mb-8" method="GET">
            <label for="menuType" class="block text-sm font-medium text-gray-700">Select Menu Type:</label>
            <select name="menuType" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" onchange="this.form.submit()">
                <option value="footer" {{ $menuType === 'footer' ? 'selected' : '' }}>Footer Menu</option>
                <option value="header" {{ $menuType === 'header' ? 'selected' : '' }}>Header</option>
            </select>
            @if($menuType === 'footer')
            <label for="columns" class="block text-sm font-medium text-gray-700 ml-4">Number of Columns:</label>
                <select id="columns" name="columns" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" onchange="this.form.submit()">
                    <option value="3" {{ $numColumns == 3 ? 'selected' : '' }}>3 Columns</option>
                    <option value="2" {{ $numColumns == 2 ? 'selected' : '' }}>2 Columns</option>
                    <option value="1" {{ $numColumns == 1 ? 'selected' : '' }}>1 Column</option>
                </select>
            @endif
        </form>

        <div class="grid grid-cols-{{ $numColumns }} gap-4" id="columnsContainer">
            @for ($col = 0; $col < $numColumns; $col++)
                <div class="bg-white shadow-md rounded-lg p-4">
                    <h3 class="text-lg font-semibold mb-4">Column {{ $col + 1 }}</h3>
                    <ul class="list-none space-y-2 menu-sortable mb-4" data-column="{{ $col }}">
                        @if (isset($menuItemsByColumns[$col]))
                            @foreach ($menuItemsByColumns[$col] as $menuItem)
                                <li class="flex justify-between items-center bg-gray-100 rounded-md p-2" data-id="{{ $menuItem->id }}">
                                    <span>{{ $menuItem->title }}</span>
                                    <form action="{{ route('menu.destroy', $menuItem->id) }}" method="POST" class="flex items-center">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="bg-red-500 hover:bg-red-700 text-white text-sm font-semibold py-1 px-2 rounded ml-2">Remove</button>
                                    </form>
                                </li>
                            @endforeach
                        @endif
                    </ul>

                    <form action="{{ route('menu.store') }}" method="POST" class="space-y-4">
                        @csrf
                        <div class="space-y-1">
                            <label for="url_type{{ $col }}" class="block text-sm font-medium text-gray-700">URL Type</label>
                            <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" name="is_custom" id="url_type{{ $col }}" onchange="toggleUrlType(this, {{ $col }})">
                                <option value="1">Custom URL</option>
                                <option value="0">Existing Page</option>
                            </select>
                        </div>
                        <div class="space-y-1">
                            <input type="hidden" name="menu_type" value="{{ $menuType }}">
                            <input type="hidden" name="column" value="{{ $col }}">
                            <label for="title-{{ $col }}" class="block text-sm font-medium text-gray-700">Title</label>
                            <input type="text" class="block w-full pl-3 pr-10 py-2 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" name="title" id="title-{{ $col }}" required>
                        </div>
                        <div class="space-y-1 custom-url-section-{{ $col }}">
                            <label for="url-{{ $col }}" class="block text-sm font-medium text-gray-700">URL</label>
                            <input type="text" class="block w-full pl-3 pr-10 py-2 border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" name="url" id="url-{{ $col }}" required>
                        </div>
                        <div class="space-y-1 existing-page-section-{{ $col }}" style="display: none;">
                            <label for="page_id-{{ $col }}" class="block text-sm font-medium text-gray-700">Select Page</label>
                            <select class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" name="page_id" id="page_id-{{ $col }}" onchange="autocompleteTitle(this, {{ $col }})">
                                <option value=""> --- Select a page --- </option>
                                @foreach($pages as $page)
                                    <option value="{{ $page->id }}" data-slug="{{ $page->slug }}">{{ $page->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Column {{ $col + 1 }}</button>
                    </form>
                </div>
            @endfor
        </div>
    </div>
@endsection

@section('javascript')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="application/javascript">
        function toggleUrlType(selectElement, column){
            const customUrlSection = document.querySelector(`.custom-url-section-${column}`);
            const existingPageSection = document.querySelector(`.existing-page-section-${column}`);
            const urlInput = document.querySelector(`#url-${column}`);

            if(selectElement.value == 1){
                customUrlSection.style.display = 'block';
                urlInput.setAttribute('required', 'required');
                existingPageSection.style.display = 'none';
            } else {
                customUrlSection.style.display = 'none';
                urlInput.removeAttribute('required');
                existingPageSection.style.display = 'block';
            }
        }

        function autocompleteTitle(selectElement, column){
            const selectedOption = selectElement.options[selectElement.selectedIndex];
            const slug = selectedOption.getAttribute('data-slug');
            document.getElementById(`title-${column}`).value = slug;
        }

        $(function() {
            @foreach($pages as $page)
            $('#page_id-{{ $col }}').append(`<option value="{{ $page->id }}" data-slug="{{ $page->slug }}">{{ $page->title }}</option>`);
            @endforeach

            $('.menu-sortable').sortable({
                update: function(event, ui) {
                    var order = $(this).sortable('toArray', { attribute: 'data-id' });
                    $.post("{{ route('menu.updateOrder') }}", {
                        _token: '{{ csrf_token() }}',
                        order: order
                    });
                }
            });
        });
    </script>
@endsection