{{-- @extends('admin.admin_master')
@section('content')
    <div class="content-wrapper">
        <div class="row">
            <div class="col-lg-4">
                <h2>Add Menu Item</h2>
                <form action="{{ route('menus.store') }}" method="POST">
                    @csrf
                    <div class="mb-2">
                        <label for="name">Name:</label>
                        <input type="text" name="name" id="name" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label for="url">URL:</label>
                        <input type="url" name="url" id="url" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label for="parent_id">Parent Menu:</label>
                        <select name="parent_id" id="parent_id" class="form-control">
                            <option value="">None</option>
                            @foreach ($menus as $menu)
                                <option value="{{ $menu->id }}">{{ $menu->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">Add</button>
                </form>
            </div>
            <div class="col-lg-8">
                <ul id="sortable">
                    @foreach ($menus as $menu)
                        <li class="menu-item" data-menu-id="{{ $menu->id }}">
                            <div class="menu-header">{{ $menu->name }}</div>

                            <div class="menu-form" style="display: none;">
                                <form action="{{ route('menus.update') }}" method="POST">
                                    @csrf
                                    <input type="text" class="name-input" value="{{ $menu->name }}" required>
                                    <input type="url" class="url-input" value="{{ $menu->url }}" required>
                                    <button type="submit">Update</button>
                                </form>
                                <form action="{{ route('menus.destroy', ['menu' => $menu]) }}" method="POST"
                                    class="remove-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger">Remove</button>
                                </form>
                            </div>
                            @if ($menu->children->count() > 0)
                                <ul>
                                    @foreach ($menu->children as $child)
                                        <li id="menu_{{ $child->id }}"><a
                                                href="{{ $child->url }}">{{ $child->name }}</a></li>
                                    @endforeach
                                </ul>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <style>
        ul#menu-ul li {
            padding: 10px;
            border: 1px solid;
            background: white;
            margin-bottom: 5px;
        }

        ul.nested-sortable {
            margin-left: 20px;
            padding-left: 10px;
            border-left: 1px solid;
        }
    </style>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $(function() {
            // Accordion functionality
            $(".menu-item").click(function() {
                $(this).toggleClass("active");
                $(this).find(".menu-form").slideToggle();
            });
            // Save the edited menu item on form submission
            $(".menu-form").submit(function(event) {
                event.preventDefault();
                var form = $(this);
                var menuItem = form.closest(".menu-item");
                // Make an AJAX request to update the menu item
                $.ajax({
                    type: "POST",
                    url: "{{ route('menus.update') }}",
                    data: {
                        _token: "{{ csrf_token() }}",
                        id: menuItem.attr("data-menu-id"),
                        name: form.find(".name-input").val(),
                        url: form.find(".url-input").val()
                    },
                    success: function(response) {
                        console.log(response);
                        menuItem.find(".menu-name").text(form.find(".name-input").val());
                        menuItem.find(".menu-link").attr("href", form.find(".url-input").val());
                    }
                });
            });
            // Sortable functionality
            $("#sortable").sortable({
                update: function(event, ui) {
                    var data = $(this).sortable("serialize");
                    $.ajax({
                        data: data,
                        type: "POST",
                        url: "{{ route('menus.updateOrder') }}",
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            console.log(response);
                        }
                    });
                }
            });
            // Add an event listener to handle the removal form submission
            $(".remove-form").submit(function(event) {
                event.preventDefault();

                var form = $(this);
                var menuItem = form.closest(".menu-item");

                // Make an AJAX request to remove the menu item
                $.ajax({
                    type: "POST",
                    url: form.attr("action"),
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "DELETE"
                    },
                    success: function(response) {
                        console.log(response);

                        // Remove the menu item from the DOM
                        menuItem.remove();

                        // Show a success message
                        toastr.success("Menu item removed successfully.");
                    },
                    error: function(xhr, status, error) {
                        console.log(xhr.responseText);

                        // Show an error message
                        toastr.error("Failed to remove the menu item.");
                    }
                });
            });


            $("#sortable").disableSelection();
        });
    </script>
@endpush --}}

@extends('admin.admin_master')
@section('content')
    <div class="content-wrapper">
        <div class="container-fluid">
            <h2><span>Menus</span></h2>

            <div class="content info-box">
                <a href="{{ url('manage-menus?id=new') }}">Create a new menu</a>.
            </div>

            <div class="row" id="main-row">
                <div class="col-sm-3 cat-form @if (count($menus) == 0) disabled @endif">
                    <h3><span>Add Menu Items</span></h3>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                          <a href="#custom-links" data-toggle="collapse" data-parent="#menu-items">Custom Links <span class="caret pull-right"></span></a>
                        </div>
                        <div class="panel-collapse collapse" id="custom-links">
                          <div class="panel-body">
                            <div class="item-list-body">
                              <div class="form-group">
                                <label>URL</label>
                                <input type="url" id="url" class="form-control" placeholder="https://">
                              </div>
                              <div class="form-group">
                                <label>Link Text</label>
                                  <input type="text" id="linktext" class="form-control" placeholder="">
                                </div>
                              </div>
                              <div class="item-list-footer">
                                <button type="button" class="pull-right btn btn-default btn-sm" id="add-custom-link">Add to Menu</button>
                              </div>
                            </div>
                          </div>
                        </div>
                    <div class="panel-group" id="pages-items">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a href="#pages-list" data-toggle="collapse" data-parent="#pages-items">Pages <span
                                        class="caret pull-right"></span></a>
                            </div>
                            <div class="panel-collapse collapse in" id="pages-list">
                                <div class="panel-body">
                                    <div class="item-list-body">
                                        @foreach ($pages as $cat)
                                            <p><input type="checkbox" name="select-category[]" value="{{ $cat->id }}">
                                                {{ $cat->title }}</p>
                                        @endforeach
                                    </div>
                                    <div class="item-list-footer">
                                        <label class="btn btn-sm btn-default"><input type="checkbox"
                                                id="select-all-pages"> Select All</label>
                                        <button type="button" class="pull-right btn btn-default btn-sm"
                                            id="add-pages">Add to Menu</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-group" id="menu-items">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <a href="#categories-list" data-toggle="collapse" data-parent="#menu-items">Categories <span
                                        class="caret pull-right"></span></a>
                            </div>
                            <div class="panel-collapse collapse in" id="categories-list">
                                <div class="panel-body">
                                    <div class="item-list-body">
                                        @foreach ($categories as $cat)
                                            <p><input type="checkbox" name="select-category[]" value="{{ $cat->id }}">
                                                {{ $cat->title }}</p>
                                        @endforeach
                                    </div>
                                    <div class="item-list-footer">
                                        <label class="btn btn-sm btn-default"><input type="checkbox"
                                                id="select-all-categories"> Select All</label>
                                        <button type="button" class="pull-right btn btn-default btn-sm"
                                            id="add-categories">Add to Menu</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9 cat-view">
                    <h3><span>Menu Structure</span></h3>
                    @if(count($menus)== 0)
                      <h4>Create New Menu</h4>
                      <form method="post" action="{{ route('menus.store') }}">
                        {{csrf_field()}}
                        <div class="row">
                          <div class="col-sm-12">
                            <label>Name</label>
                          </div>
                          <div class="col-sm-6">
                            <div class="form-group">
                              <input type="text" name="title" class="form-control">
                            </div>
                          </div>
                          <div class="col-sm-6 text-right">
                            <button class="btn btn-sm btn-primary">Create Menu</button>
                          </div>
                        </div>
                      </form>
                    @endif
                  </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
<script>
    $('#select-all-categories').click(function(event) {
      if(this.checked) {
        $('#categories-list :checkbox').each(function() {
          this.checked = true;
        });
      }else{
        $('#categories-list :checkbox').each(function() {
          this.checked = false;
        });
      }
    });
    $('#select-all-pages').click(function(event) {
		    if(this.checked) {
			  $('#pages-list :checkbox').each(function() {
				this.checked = true;
			  });
			}else{
			  $('#pages-list :checkbox').each(function() {
				this.checked = false;
			  });
			}
		  });
  </script>
@endpush