@extends('admin.layouts.app')

@section('page-title')
Menu builder
@endsection

@section('content')
<div class="container-xxl">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center gap-1">
                    <h4 class="card-title flex-grow-1">Menu builder</h4>
                    <!-- <a href="#" class="btn btn-sm btn-primary" onclick="openMenuModal()" data-bs-toggle="modal" data-bs-target="#addeditMenu">Add Menu</a> -->
                    <button type="button" class="btn btn-primary btn-sm" onclick="openMenuModal('menu')">Add Menu</button>
                </div>
                <div class="card-body">
                    <div id="menu-items" class="">
                        @foreach($menu as $menu)
                        <div class="card mb-2" style="background-color: #f4f4f4;">
                            <div class="card-body d-flex justify-content-between align-items-center py-2">
                                <span class="drag-handle me-3"><iconify-icon icon="solar:hamburger-menu-linear" class="align-middle fs-18"></iconify-icon></span>
                                <span class="flex-grow-1">{{ $menu->name }}</span>
                                <div class="btn-group1" role="group1">
                                    <a href="{{ route('admin.menu.show', $menu->id) }}" class="btn btn-soft-info btn-sm">Builder</a>
                                    <!-- <a href="#" onclick="openMenuModal({{ $menu->id }})" class="btn btn-soft-primary btn-sm align-middle fs-18"><iconify-icon icon="solar:pen-2-broken" data-bs-toggle="modal" data-bs-target="#addeditMenu"></iconify-icon></a> -->
                                     <button type="button" class="btn btn-soft-primary btn-sm" onclick="openMenuModal('menu', '{{ $menu->id }}');" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit menu"><iconify-icon icon="solar:pen-2-broken"></iconify-icon></button>
                                    <form action="{{ route('admin.menu.destroy', $menu->id) }}" method="POST" style="display:inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-soft-danger btn-sm deletemenu" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete menu"><iconify-icon icon="solar:trash-bin-minimalistic-2-broken"></iconify-icon></button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="menuModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addeditMenuLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="menuForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addeditMenuLabel">Add/Edit Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" id="menuId" name="id" value="" />
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')

    <script>
        // Define routes for use in menu-modal.js
        var routes = {
            menuEdit: "{{ route('admin.menu.edit', ':id') }}",
            menuUpdate: "{{ route('admin.menu.update', ':id') }}",
            menuStore: "{{ route('admin.menu.store') }}",
            menuItemEdit: "{{ route('admin.menuitem.edit', ':id') }}",
            menuItemUpdate: "{{ route('admin.menuitem.update', ':id') }}",
            menuItemStore: "{{ route('admin.menuitem.store') }}"
        };
    </script>
    <script src="{{ asset('admin/assets/js/pages/menu.js') }}" type="text/javascript"></script>

<!-- <script>
    function openMenuModal(menuId = null) {
        const $modal = $('#menuModal');
        const $form = $('#menuForm');
        const $nameInput = $('#name');
        const $menuIdInput = $('#menuid');

        if (menuId) {
            // Edit mode
            $.get("{{ route('admin.menu.edit', ':menuId') }}".replace(':menuId', menuId), function(data) {
                $nameInput.val(data.name);
                $menuIdInput.val(data.id);
                $form.attr('action', "{{ route('admin.menu.update', ':menuId') }}".replace(':menuId', menuId));
                $form.append('<input type="hidden" name="_method" value="PUT">');
            });
        } else {
            // Add mode
            $form[0].reset();
            $form.attr('action', "{{ route('admin.menu.store') }}");
            $menuIdInput.val('');
        }

        $modal.modal('show');
    }

    $(document).ready(function() {
        $('#menuModal').on('hidden.bs.modal', function () {
            const $form = $('#menuForm');
            $form[0].reset(); // Reset all form fields
            $form.find('input[name="_method"]').remove(); // Remove any _method field (used for PUT requests)
            $('#menuid').val(''); // Clear the post ID

            // Clear all text inputs and textareas
            $form.find('input[type="text"], textarea').val('');
        });


        $('#menuForm').on('submit', function(e) {
            e.preventDefault();
            const $form = $(this);

            $.ajax({
                url: $form.attr('action'),
                method: $form.attr('method'),
                data: $form.serialize(),
                dataType: 'json',
                success: function(data) {
                    if (data.success) {
                        $('#menuModal').modal('hide');
                        // Optionally, update the UI or reload the page
                        location.reload();
                    } else {
                        console.error('Error:', data.message);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    // console.error('AJAX error:', textStatus, errorThrown);
                }
            });
        });

        // Expose openmenuModal to global scope if needed
        window.openMenuModal = openMenuModal;
    });
</script> -->
@endsection