@extends('layouts.default')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Update Menu</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Custom CSS for sortable list -->
    <style>
    #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #sortable li {
        margin: 0 0 4px 0;
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        cursor: move;
    }

    .sub-menu {
        margin-left: 20px;
    }
    </style>

    <a class="btn btn-primary btn-sm open-edit-modal background_color actionBtn me-1 mb-1 d" data-bs-toggle="modal"
        data-bs-target="#mainmenuModal">
        Create Main Menu
    </a>

    <a class="btn btn-primary btn-sm open-edit-modal background_color actionBtn me-1 mb-1 d" data-bs-toggle="modal"
        data-bs-target="#submenuModal">
        Create Sub Menu
    </a>

    <!-- Main Menu Modal -->
    <div class="modal fade" id="mainmenuModal" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="myModalLabel">Create Main Menu</h4>
                    <button type="button" class="closemainModal" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <form action="{{ url('addmainmenu') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="box-body">
                            <div id="inputform" class="">
                                <label for="" class="form-label"> <b>Main Menu Name</b></label>
                                <input type="text" class="form-control" name="mainmenu">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="closeModalbtnprimarymain"
                            data-dismiss="modal">Close</button>
                        {!! Form::submit('Submit', ['class' => 'btn btn-success']) !!}
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Sub Menu Modal -->
    <div class="modal fade" id="submenuModal" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="myModalLabel">Create Sub Menu</h4>
                    <button type="button" id="closesubmenu" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <form action="{{ url('addsubmenu') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="box-body">
                            <div>
                                <label for="firstName" class="form-label">Select Main Menu </label>