@extends('layouts.app')

@section('content')


<div class="pagetitle">
    <h1>App Meniu</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('home')}}">Acasa</a></li>
        <li class="breadcrumb-item">App Meniu</li>
        <li class="breadcrumb-item active">Management</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->
  
  <!--Add page modal -->
  <div class="modal fade" id="add-main-page" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-plus"></i> Pagina Principala</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form action="{{route('store-page')}}" id="add-page-form" method="post">
                @csrf 
                <label for="">Denumire <span class="text-danger">*</span></label>
                <input type="text" name="name" value="{{old('name')}}" class="form-control" autofocus  required>

                <label for="">Ruta <span class="text-danger">*</span></label>
                <input type="text" name="route" value="{{old('route')}}" class="form-control" required>

                <label for="">Rol <span class="text-danger">*</span></label>
                <select name="role_id" id="" class="form-control" required>
                    <option value="" selected >Alegeti Rol</option>
                    @foreach($roles as $role)
                        <option value="{{$role->id}}">{{$role->name}}</option>
                    @endforeach
                </select>

                <label for="">Status <span class="text-danger">*</span></label>
                <select name="status" id="" class="form-control" required>
                    <option value="1" selected >Activ</option>
                 
                    <option value="0"  >Suspendat</option>

               
                </select>

                <label for="">Restrictii <span class="text-danger">*</span></label>
                <select name="restrictions" id="" class="form-control" required>
                    <option value="1"  >Cu restrictii</option>
                 
                    <option value="0" selected >Liber de restrictii</option>

               
                </select>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" form="add-page-form" class="btn btn-success"><i class="bi bi-check"></i> Salveaza</button>
        </div>
      </div>
    </div>
  </div><!-- End Basic Modal-->
  <!--End of add page modal -->


  <!--Add submenu -->
  <div class="modal fade" id="add-submenu-modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-plus"></i> Submeniu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form action="{{route('store-submenu')}}" id="add-submenu-form" method="post">
                @csrf 
                <label for="">Denumire <span class="text-danger">*</span></label>
                <input type="text" name="name" value="{{old('name')}}" class="form-control" autofocus  required>

                <label for="">Pagina Principala <span class="text-danger">*</span></label>
                <select name="page_id" id="" class="form-control" required>
                    <option value="" selected >Alegeti Pagina</option>
                    @foreach($pages->where('status',1) as $parent)
                        <option value="{{$parent->id}}">{{$parent->name}}</option>
                    @endforeach
                </select>

                <label for="">Ruta <span class="text-danger">*</span></label>
                <input type="text" name="route" value="{{old('route')}}" class="form-control" required>

                <label for="">Rol <span class="text-danger">*</span></label>
                <select name="role_id" id="" class="form-control" required>
                    <option value="" selected >Alegeti Rol</option>
                    @foreach($roles as $role)
                        <option value="{{$role->id}}">{{$role->name}}</option>
                    @endforeach
                </select>

                <label for="">Status <span class="text-danger">*</span></label>
                <select name="status" id="" class="form-control" required>
                    <option value="1" selected >Activ</option>
                 
                    <option value="0"  >Suspendat</option>

               
                </select>

                <label for="">Restrictii <span class="text-danger">*</span></label>
                <select name="restrictions" id="" class="form-control" required>
                    <option value="1"  >Cu restrictii</option>
                 
                    <option value="0" selected >Liber de restrictii</option>

               
                </select>
            </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
          <button type="submit" form="add-submenu-form" class="btn btn-success"><i class="bi bi-check"></i>Salveaza</button>
        </div>
      </div>
    </div>
  </div><!-- End Basic Modal-->

  <!--End of add submenu -->
  <section class="section">
    <div class="row">

        @if(session('success'))
        <div class="col-md-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{session('success')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
        </div>
        @endif

        @if(session('error'))
        <div class="col-md-12">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{session('error')}}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
        </div>
        @endif
      <div class="col-lg-6">

        <div class="card table-responsive">
          <div class="card-body">
            <h5 class="card-title">Pagini Principale <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#add-main-page"><i class="bi bi-plus">Adauga Pagina</i></button></h5>
            <table class="table table-borderless datatable">
                <thead>
                  <tr>
                    <th scope="col">#ID</th>
                    <th scope="col">Denumire</th>
                    <th scope="col">Ruta</th>
                    <th scope="col">Rol</th>
                    <th scope="col">Status</th>
                    <th scope="col">Optiuni</th>
                  </tr>
                </thead>
                <tbody id="menu-tbody">
                @foreach($pages as $page)
                @php $status = 'Suspendat'; if($page->status){ $status = 'Active'; } @endphp
                  <tr class="menu" data-id="{{$page->id}}">
                    <th scope="row"><a href="#">#{{$page->id}}</a></th>
                    <td>{{$page->name}}</td>
                    <td><a @if(Route::has(''.$page->route.'')) href="{{route(''.$page->route.'')}}" @else href="#" @endif target="_blank" class="text-primary">{{$page->route}}</a></td>
                    <td>{{$page->role->name}}</td>
                    <td><span @if($page->status) class="badge bg-success" @else class="badge bg-danger" @endif >{{$status}}</span></td>
                  
                    <td>
                        <button class="btn btn-warning btn-sm"><i class="bi bi-pencil" data-bs-toggle="modal" data-bs-target="#edit-page-modal{{$page->id}}"></i></button>
                        <a href="{{route('destroy-page',$page->id)}}" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></a>
                    </td>
                  </tr>


                  <!--Edit page modal -->
                  <div class="modal fade" id="edit-page-modal{{$page->id}}" tabindex="-1">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title"><i class="bi bi-pencil"></i> {{$page->name}}</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form action="{{route('update-page',$page->id)}}" id="update-page-form{{$page->id}}" method="post">
                                @csrf 
                                @method('PUT')
                                <label for="">Denumire <span class="text-danger">*</span></label>
                                <input type="text" name="name" value="{{$page->name}}" class="form-control" autofocus  required>
                                @error('name')
                                <span class="text-danger">{{$message}}</span><br>
                              @enderror
                                <label for="">Ruta <span class="text-danger">*</span></label>
                                <input type="text"  name="route" value="{{$page->route}}" class="form-control" required>
                                @error('route')
                                <span class="text-danger">{{$message}}</span><br>
                              @enderror
                                <label for="">Rol <span class="text-danger">*</span></label>
                                <select name="role_id" id="" class="form-control" required>
                                    <option value="{{$page->role_id}}" selected >{{$page->role->name}}</option>
                                    @foreach($roles->where('id','!=',$page->role_id) as $main_role)
                                        <option value="{{$main_role->id}}">{{$main_role->name}}</option>
                                    @endforeach
                                </select>

                                @error('role_id')
                                  <span class="text-danger">{{$message}}</span><br>
                                @enderror
                
                                <label for="">Status <span class="text-danger">*</span></label>
                                <select name="status" id="" class="form-control" required>
                                    <option value="1" @if($page->status) selected @endif  >Activ</option>
                                 
                                    <option value="0"  @if(!$page->status) selected @endif >Suspendat</option>
                
                               
                                </select>
                
                                <label for="">Restrictii <span class="text-danger">*</span></label>
                                <select name="restrictions" id="" class="form-control" required>
                                    <option value="1" @if($page->restrictions) selected @endif  >Cu restrictii</option>
                                 
                                    <option value="0" @if(!$page->restrictions) selected @endif  >Liber de restrictii</option>
                
                               
                                </select>
                            </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                          <button type="submit" form="update-page-form{{$page->id}}" class="btn btn-warning"> <i class="bi bi-pencil"></i> Salveaza</button>
                        </div>
                      </div>
                    </div>
                  </div><!-- End Basic Modal-->

                  <!--End of edit page modal -->
                @endforeach
                </tbody>
            </table>
          </div>
        </div>

      </div>

      <div class="col-lg-6">

        <div class="card table-responsive">
          <div class="card-body">
            <form action="" id="pages-filter-form" class="mt-3 mb-3">
            <div class="row">
              <div class="col-md-9">
                <label for="">Filtru pentru sortare</label>
                <select name="page" id="page_id" class="form-control">
                  @foreach($pages->where('status',1) as $menu_filter)
                  <option value="{{$menu_filter->id}}" @if(isset($_GET['page'])) @if($_GET['page']==$page->id) selected @endif @endif >{{$menu_filter->name}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-3">
                <label for="" style="visibility:hidden">Reset</label>
                <a href="{{route('app-menu')}}" class="btn btn-success form-control"><i class="bx bx-undo"></i> Reset</a>
              </div>
            </div>
          </form>
            <h5 class="card-title">Pagini Subordonate <button class="btn btn-sm btn-success" data-bs-toggle="modal" data-bs-target="#add-submenu-modal"><i class="bi bi-plus">Adauga Submeniu</i></button></h5>
            <table class="table table-borderless datatable">
                <thead>
                  <tr>
                    <th scope="col">#ID</th>
                    <th scope="col">Denumire</th>
                    <th scope="col">Ruta</th>
                    <th scope="col">Rol</th>
                    <th scope="col">Status</th>
                    <th scope="col">Optiuni</th>
                  </tr>
                </thead>
                @if(isset($_GET['page']))
                <tbody id="submenu-tbody">
                  @foreach($submenus->where('page_id',$_GET['page']) as $submenu)
                  @php $submenu_status = 'Suspendat'; if($submenu->status){ $submenu_status = 'Active';} @endphp
                  <tr class="submenu" data-id="{{$submenu->id}}">
                  <th scope="row"><a href="#">#{{$submenu->id}}</a></th>
                  <td>{{$submenu->name}}</td>
                  <td><a @if(Route::has(''.$submenu->route.'')) href="{{route(''.$submenu->route.'')}}" @else href="#" @endif class="text-primary">{{$submenu->route}}</a></td>
                  <td>{{$submenu->role->name}}</td>
                  <td><span @if($submenu->status) class="badge bg-success" @else class="badge bg-danger" @endif >{{$submenu_status}}</span></td>
                  <td>
                          <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#edit-submenu-modal{{$submenu->id}}"><i class="bi bi-pencil"></i></button>

                          <a href="{{route('destroy-submenu',$submenu->id)}}" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></a> 
                    
                  </td>
                  </tr>
                  <!--Edit submenu modal -->
                  <div class="modal fade" id="edit-submenu-modal{{$submenu->id}}" tabindex="-1">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-pencil"></i> {{$submenu->name}}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                          <form action="{{route('update-submenu',$submenu->id)}}" id="edit-submenu-form{{$submenu->id}}" method="post">
                              @csrf 
                              @method('PUT')
                              <label for="">Denumire <span class="text-danger">*</span></label>
                              <input type="text" name="name" value="{{$submenu->name}}" class="form-control" autofocus  required>

                              <label for="">Pagina Principala <span class="text-danger">*</span></label>
                              <select name="page_id" id="" class="form-control" required>
                                  <option value="{{$submenu->page_id}}" selected >{{$submenu->page->name}}</option>
                                  @foreach($pages->where('id','!=',$submenu->page_id) as $parent)
                                      <option value="{{$parent->id}}">{{$parent->name}}</option>
                                  @endforeach
                              </select>

                              <label for="">Ruta <span class="text-danger">*</span></label>
                              <input type="text" name="route" value="{{$submenu->route}}" class="form-control" required>

                              <label for="">Rol <span class="text-danger">*</span></label>
                              <select name="role_id" id="" class="form-control" required>
                                  <option value="{{$submenu->role_id}}" selected >{{$submenu->role->name}}</option>
                                  @foreach($roles->where('id','!=',$submenu->role_id) as $role)
                                      <option value="{{$role->id}}">{{$role->name}}</option>
                                  @endforeach
                              </select>

                              <label for="">Status <span class="text-danger">*</span></label>
                              <select name="status" id="" class="form-control" required>
                                  <option value="1" @if($submenu->status) selected @endif  >Activ</option>
                              
                                  <option value="0" @if(!$submenu->status) selected @endif  >Suspendat</option>

                            
                              </select>

                              <label for="">Restrictii <span class="text-danger">*</span></label>
                              <select name="restrictions" id="" class="form-control" required>
                                  <option value="1" @if($submenu->restrictions) selected @endif  >Cu restrictii</option>
                              
                                  <option value="0" @if(!$submenu->restrictions) selected @endif >Liber de restrictii</option>

                            
                              </select>
                          </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                        <button type="submit" form="edit-submenu-form{{$submenu->id}}" class="btn btn-primary"><i class="bi bi-check"></i> Salveaza</button>
                      </div>
                    </div>
                  </div>
                  </div><!-- End Basic Modal-->

                  <!--End of edit submenu modal -->
                  @endforeach
                @else 



                <tbody>

                  @foreach($submenus as $submenu)
                  @php $submenu_status = 'Suspendat'; if($submenu->status){ $submenu_status = 'Active';} @endphp
                  <tr>
                  <th scope="row"><a href="#">#{{$submenu->id}}</a></th>
                  <td>{{$submenu->name}}</td>
                  <td><a href="{{route(''.$submenu->route.'')}}" class="text-primary">{{$submenu->route}}</a></td>
                  <td>{{$submenu->role->name}}</td>
                  <td><span @if($submenu->status) class="badge bg-success" @else class="badge bg-danger" @endif >{{$submenu_status}}</span></td>
                  <td>
                          <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#edit-submenu-modal{{$submenu->id}}"><i class="bi bi-pencil"></i></button>

                          <a href="{{route('destroy-submenu',$submenu->id)}}" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></a> 
                    
                  </td>
                  </tr>
                  <!--Edit submenu modal -->
                  <div class="modal fade" id="edit-submenu-modal{{$submenu->id}}" tabindex="-1">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title"><i class="bi bi-pencil"></i> {{$submenu->name}}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <div class="modal-body">
                          <form action="{{route('update-submenu',$submenu->id)}}" id="edit-submenu-form{{$submenu->id}}" method="post">
                              @csrf 
                              @method('PUT')
                              <label for="">Denumire <span class="text-danger">*</span></label>
                              <input type="text" name="name" value="{{$submenu->name}}" class="form-control" autofocus  required>

                              <label for="">Pagina Principala <span class="text-danger">*</span></label>
                              <select name="page_id" id="" class="form-control" required>
                                  <option value="{{$submenu->page_id}}" selected >{{$submenu->page->name}}</option>
                                  @foreach($pages->where('id','!=',$submenu->page_id) as $parent)
                                      <option value="{{$parent->id}}">{{$parent->name}}</option>
                                  @endforeach
                              </select>

                              <label for="">Ruta <span class="text-danger">*</span></label>
                              <input type="text" name="route" value="{{$submenu->route}}" class="form-control" required>

                              <label for="">Rol <span class="text-danger">*</span></label>
                              <select name="role_id" id="" class="form-control" required>
                                  <option value="{{$submenu->role_id}}" selected >{{$submenu->role->name}}</option>
                                  @foreach($roles->where('id','!=',$submenu->role_id) as $role)
                                      <option value="{{$role->id}}">{{$role->name}}</option>
                                  @endforeach
                              </select>

                              <label for="">Status <span class="text-danger">*</span></label>
                              <select name="status" id="" class="form-control" required>
                                  <option value="1" @if($submenu->status) selected @endif  >Activ</option>
                              
                                  <option value="0" @if(!$submenu->status) selected @endif  >Suspendat</option>

                            
                              </select>

                              <label for="">Restrictii <span class="text-danger">*</span></label>
                              <select name="restrictions" id="" class="form-control" required>
                                  <option value="1" @if($submenu->restrictions) selected @endif  >Cu restrictii</option>
                              
                                  <option value="0" @if(!$submenu->restrictions) selected @endif >Liber de restrictii</option>

                            
                              </select>
                          </form>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
                        <button type="submit" form="edit-submenu-form{{$submenu->id}}" class="btn btn-primary"><i class="bi bi-check"></i> Salveaza</button>
                      </div>
                    </div>
                  </div>
                  </div><!-- End Basic Modal-->

                  <!--End of edit submenu modal -->
                  @endforeach

                @endif
                <tbody>
                   
                </tbody>
            </table>
          </div>    
        </div>

      </div>
    </div>
  </section>


@endsection

@push('js')
<script>
$(document).on('change','#page_id',function(){
  $('#pages-filter-form').submit();
});

  $(function () {

// this is need to Move Ordera accordin user wish Arrangement
      $('#menu-tbody').sortable({
      
        update: function() {
            sendOrderToServer();
        }
      });
      function sendOrderToServer() {
        var order = [];

      //   by this function User can Update hisOrders or Move to top or under
        $('.menu').each(function(index,element) {
          order.push({
            id: $(this).attr('data-id'),
            position: index+1
          });
        });
// the Ajax Post update 
        $.ajax({
          type: "POST", 
          dataType: "json", 
          url: '/sort-menu',
              data: {
              order: order,
            "_token": "{{ csrf_token() }}",
          },
          success: function(response) {
              if (response.status == "success") {
                console.log(response);
              } else {
                console.log(response);
              }
          }
        });
      }
    });


    $(function () {

// this is need to Move Ordera accordin user wish Arrangement
      $('#submenu-tbody').sortable({
      
        update: function() {
            sendOrderToServer();
        }
      });
      function sendOrderToServer() {
        var order = [];

      //   by this function User can Update hisOrders or Move to top or under
        $('.submenu').each(function(index,element) {
          order.push({
            id: $(this).attr('data-id'),
            position: index+1
          });
        });
// the Ajax Post update 
        $.ajax({
          type: "POST", 
          dataType: "json", 
          url: '/sort-submenu',
              data: {
              order: order,
            "_token": "{{ csrf_token() }}",
          },
          success: function(response) {
              if (response.status == "success") {
                console.log(response);
              } else {
                console.log(response);
              }
          }
        });
      }
    });
</script>

@endpush