@extends('layouts.app')

@section('content')


<div class="pagetitle">
    <h1>Restrictii</h1>
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{route('home')}}">Acasa</a></li>
        <li class="breadcrumb-item">Management</li>
        <li class="breadcrumb-item active">Restrictii</li>
      </ol>
    </nav>
  </div><!-- End Page Title -->

  <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">
          <div class="card-body">
            <h5 class="card-title">Lista cu restrictii</h5>
            <table class="table table-borderless datatable">
                <thead>
                  <tr>
                    <th scope="col">#ID</th>
                    <th scope="col">Utilizator</th>
                    <th scope="col">Pagina</th>
                
                    <th scope="col">Optiuni</th>
                  </tr>
                </thead>
                <tbody>
                @foreach($restrictions as $restriction)
                  <tr>
                    <th scope="row"><a href="#">#{{$restriction->id}}</a></th>
                    <td>{{$restriction->user->username}}</td>
                   
                    @if($restriction->page)
                    <td>{{$restriction->page->name}}</td>
                    @else
                    <td>{{$restriction->submenu->name}}</td>
                    @endif  
                    <td>
                        <a href="{{route('destroy-restriction',[$restriction->id])}}" class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></a>
                    </td>
                  </tr>
                @endforeach
                </tbody>
            </table>
          </div>
        </div>

      </div>

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

        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Formular Adaugare</h5>
             <form action="{{route('store-restriction')}}" method="post">
                @csrf 
                <label for="">Utilizator</label>
                <select name="user_id" id="" class="form-control">
                    <option value="">Alegeti Utilizator</option>
                    @foreach($users as $user)
                    <option value="{{$user->user_id}}">{{$user->user->username}}</option>
                    @endforeach
                </select>
                @error('user_id')
                  <span class="text-danger">{{$message}}</span><br>
                @enderror
                <label for="">Pagina</label>
                <select name="page_id" id="page_id" class="form-control">
                <option value="">Alegeti Pagina</option>
                    
                @foreach($pages as $page)
                    <option value="{{$page->id}}">{{$page->name}}</option>
                @endforeach
                </select>

                @error('page_id')
                <span class="text-danger">{{$message}}</span><br>
                @enderror
                <div class="submenu">
               
              

                @error('submenu_id')
                <span class="text-danger">{{$message}}</span><br>
                @enderror
              </div>
              </div>
              <button type="submit" class="btn btn-success form-control mt-3"><i class="bi bi-check"></i> Salveaza</button>
            </form>
        </div>

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



@endsection

@push('js')
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script>
  $(document).on('change','#page_id',function(){
      var page_id = $(this).val();
      var html = '';
      $.ajax({
        url:'/get-submenu',
        type:'GET',
        data:{'page_id':page_id},
        success:function(data)
        {
            if(data.length > 0)
            {
                html+='<label>Submeniu dupa pagina</label>';
                html+='<select class="form-control" name="submenu_id">';
                html+='<option value="">Alegeti Submeniu</option>';
                for(var i = 0; i < data.length; i++)
                {
                    html+='<option value="'+data[i].id+'">'+data[i].name+' </option>'
                }

               html+='</select>';

               html+='<br><label> Restrictionare doar submenu <input type="checkbox"name="submenu_only" value="1"></label>';
               
               $('.submenu').html(html);
            }
        }
      });
  });
</script>

@endpush