@extends('tenants.layouts.master')
@section('title')
    @lang('Menu List')
@endsection
@section('css')

    <link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
    <link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />    

@endsection
@section('content')
    @component('tenants.components.breadcrumb')
        @slot('li_1')
            Menu
        @endslot
        @slot('title')
        Menu List
        @endslot
    @endcomponent
<div class="row">
        <div class="col-12 p-0">
            <div class="card">
            <div class="px-3 pt-3 flex-wrap">
                    <div class="row">
                        <div class="col-auto my-auto">
                            <div class="ctl-pag-tit-con">
                               Menu List
                            </div>
                        </div>
                        <div class="col-8 col-lg-3 ps-lg-0 ms-lg-auto mb-2">
                            <div class="ctl-input-field">
                                <span class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                        <g clip-path="url(#clip0_224_12492)">
                                            <path d="M6.60568 0C2.96341 0 0 2.96341 0 6.60568C0 10.2482 2.96341 13.2114 6.60568 13.2114C10.2482 13.2114 13.2114 10.2482 13.2114 6.60568C13.2114 2.96341 10.2482 0 6.60568 0ZM6.60568 11.9919C3.63577 11.9919 1.21951 9.57562 1.21951 6.60571C1.21951 3.6358 3.63577 1.21951 6.60568 1.21951C9.57559 1.21951 11.9919 3.63577 11.9919 6.60568C11.9919 9.57559 9.57559 11.9919 6.60568 11.9919Z" fill="#868C98"></path>
                                            <path d="M14.8215 13.9588L11.3255 10.4628C11.0873 10.2246 10.7015 10.2246 10.4633 10.4628C10.2251 10.7008 10.2251 11.087 10.4633 11.325L13.9593 14.821C14.0158 14.8777 14.083 14.9227 14.157 14.9533C14.231 14.984 14.3103 14.9997 14.3904 14.9996C14.4705 14.9997 14.5498 14.984 14.6237 14.9533C14.6977 14.9227 14.7649 14.8777 14.8215 14.821C15.0597 14.583 15.0597 14.1968 14.8215 13.9588Z" fill="#868C98"></path>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_224_12492">
                                                <rect width="15" height="15" fill="white"></rect>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </span>
                                <input autocomplete="off" type="text" name="search" class="form-control" placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                            </div>
                        </div>
                    </div> 
                </div>

                <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box">
                    <table id="menuTable" class="table theme_table dt-responsive nowrap align-middle w-100">
                            <thead>
                                <tr>
                                    <th>Main Menu</th>
                                    <th>Publish</th>
                                    <th>Submenus</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                        @foreach ($menus as $menu)
                            <tr>
                                <td>{{ $menu->name }}</td>                                
                                <td>{{ $menu->publish==1 ? 'Published' : 'Unpublished' }}</td>
                                <td>
                                   {{-- <button class="btn btn-info toggleSubMenuBtn">+ Submenus</button> --}}
                                    <div class="subMenuContent">
                                        <table class="table table-sm theme_table">
                                            <thead>
                                                <tr>
                                                    <th class="space_nowrap">SubMenu Name</th>
                                                    <th class="space_nowrap">Actions</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($menu->subMenus as $submenu)
                                                    <tr>
                                                        <td>{{ $submenu->name }}</td>
                                                        <td>
                                                            {{--<button class="btn btn-warning editSubMenuBtn" data-submenu-id="{{ $submenu->id }}">Edit</button>--}}
                                                            <button class="btn {{ $submenu->publish!=1 ? 'btn-danger-unpublish Unpublish' : 'btn_primary publish'}} togglePublishBtn" data-menu-id="{{ $submenu->id }}">{{ $submenu->publish!=1 ? 'Unpublish' : 'Publish' }}</button>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                                <td>
                                    {{-- <button class="btn btn-warning editMenuBtn">Edit</button> --}}
                                    <button class="btn {{ $menu->publish!=1 ? 'btn-danger-unpublish Unpublish' : 'btn_primary publish'}} togglePublishBtn" data-menu-id="{{ $menu->id }}">{{ $menu->publish!=1 ? 'Unpublish' : 'Publish' }}</button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    </table>
                </div>
            </div>
        </div>        
        <!--end col-->
    </div>

<!-- Modal for creating menu and submenu -->
<div id="menuModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Menu</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="menuForm">
                    <div class="form-group">
                        <label for="menuName">Menu Name</label>
                        <input type="text" class="form-control" id="menuName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="menuSlug">Menu Slug</label>
                        <input type="text" class="form-control" id="menuSlug" name="slug" required>
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" name="create_permissions" class="form-check-input" value="1">
                        <label class="form-check-label" for="create_permissions">Create permissions for this menu</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Save Menu</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal for creating submenu -->
<div id="submenuModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create SubMenu</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="submenuForm">
                    <div class="form-group">
                        <label for="submenuName">SubMenu Name</label>
                        <input type="text" class="form-control" id="submenuName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="submenuSlug">SubMenu Slug</label>
                        <input type="text" class="form-control" id="submenuSlug" name="slug" required>
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" name="create_permissions" class="form-check-input" value="1">
                        <label class="form-check-label" for="create_permissions">Create permissions for this menu</label>
                    </div>
                    <input type="hidden" id="menuIdForSubMenu">
                    <button type="submit" class="btn btn-primary">Save SubMenu</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
        <script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>


        <script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
        <script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
        <script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
        <script src="{{ url('js/datatables-1.11.5_cdn/datatables.buttons.min.js') }}"></script>

        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script type="text/javascript">
       
        $(document).ready(function() {
            var table = $('#menuTable').DataTable({
            paging:true,
            searching:false,
            pagingType: "simple_numbers",
            scrollCollapse: true,
            info:true,
            responsive: false,
            scrollX:true,
            ordering: false,
            // scrollY: '63vh',
            language: {
                paginate: {
                    previous: '<span class="fa fa-chevron-left"></span>',
                    next: '<span class="fa fa-chevron-right"></span>',
                },
            },
            
        });
        // Initialize DataTable
        // $('#menuTable').DataTable();

        // Toggle submenus display
        /*$(document).on('click', '.toggleSubMenuBtn', function() {
            var $row = $(this).closest('tr');
            $row.find('.subMenuContent').toggle();
        });*/

        // Show create menu modal
        /*$('#createMenuBtn').click(function() {
            $('#menuModal').modal('show');
        });*/

        // Show create submenu modal
        /*$(document).on('click', '.toggleSubMenuBtn', function() {
            var menuId = $(this).closest('tr').data('menu-id');
            $('#menuIdForSubMenu').val(menuId);
            $('#submenuModal').modal('show');
        });*/

        // Create menu AJAX
        /*$('#menuForm').submit(function(e) {
            e.preventDefault();
            var data = $(this).serialize();
            $.ajax({
                url: '{{ route("menu.store") }}',
                method: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        $('#menuModal').modal('hide');
                        location.reload(); // Reload the page after creating a menu
                    }
                }
            });
        });*/

        // Create submenu AJAX
        /*$('#submenuForm').submit(function(e) {
            e.preventDefault();
            var data = $(this).serialize();
            var menuId = $('#menuIdForSubMenu').val();
            $.ajax({
                url: '/menus/' + menuId + '/submenus',
                method: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        $('#submenuModal').modal('hide');
                        location.reload(); // Reload the page after creating a submenu
                    }
                }
            });
        });*/

        // Edit menu functionality (AJAX)
        /*$(document).on('click', '.editMenuBtn', function() {
            var menuId = $(this).closest('tr').data('menu-id');
            $.ajax({
                url: '/menus/' + menuId + '/edit',
                method: 'GET',
                success: function(response) {
                    // Populate the edit modal with the data
                    $('#menuName').val(response.name);
                    $('#menuSlug').val(response.slug);
                    // Handle updating menu data
                }
            });
        });*/

        // Publish or Unpublish menu
        $(document).on('click', '.togglePublishBtn', function() {
            var menuId = $(this).data('menu-id');
            var type = $(this).hasClass('publish') ? 'UnPublished' : 'Published';
            var status = $(this).hasClass('publish') ? 0 : 1;
            Swal.fire({
                    title: 'Are you sure?',
                    text: "This Menu will "+type+".",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'Cancel',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Proceed with the AJAX delete request if the user confirms
                        $.ajax({
                            url: 'menu/' + menuId + '/publish',
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                status: status,
                            },
                            success: function(response) {
                                // Reload the DataTable after successful deletion
                                // table.ajax.reload();
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success'
                                });
                                window.location.href = '{{ route('menu.index') }}';
                            },
                            error: function(response) {
                                Swal.fire({
                                    title: 'Error!',
                                    text: response.message ||
                                        'An error occurred. Please try again.',
                                    icon: 'error',
                                    confirmButtonText: 'Try Again'
                                });
                            }
                        });
                    }
                });
        });

        // Delete menu functionality
        /*$(document).on('click', '.deleteMenuBtn', function() {
            var menuId = $(this).closest('tr').data('menu-id');
            if (confirm('Are you sure you want to delete this menu?')) {
                $.ajax({
                    url: '/menus/' + menuId,
                    method: 'DELETE',
                    success: function(response) {
                        alert(response.message);
                        location.reload(); // Reload to reflect deletion
                    }
                });
            }
        });*/

        // Delete submenu functionality
        /*$(document).on('click', '.deleteSubMenuBtn', function() {
            var submenuId = $(this).data('submenu-id');
            if (confirm('Are you sure you want to delete this submenu?')) {
                $.ajax({
                    url: '/submenus/' + submenuId,
                    method: 'DELETE',
                    success: function(response) {
                        alert(response.message);
                        location.reload(); // Reload to reflect deletion
                    }
                });
            }
        });*/
    });
    </script>

    <script src="{{ URL('js/app.js') }}"></script>
@endsection