@extends('layouts.app')

@section('content')
<!--restriction modal starts -->
<div class="modal fade" id="add-restriction-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> Restrictie</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
        <form id="restriction-form" method="post">
            @csrf 
            <label for="">Tip Restrictie</label>
            <select name="type" id="restriction_type" class="form-control">
                <option value=""selected>Alegeti Restrictie</option>
                <option value="1">Vizualizare</option>
                <option value="2">Actionare</option>
            </select>
             <input type="hidden" name="user_id" value="{{$user->id}}" class="form-control">
            <div class="pages-restriction d-none">
   
                <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>

            <div class="backend-restirctions d-none">
                <label for="">Alegeti Ruta</label>
                <select name="route" id="route" class="form-control">
                    <option value="">Alegeti Ruta</option>
                    @foreach($backend_routes as $back)
                    @php $userback = \App\Models\Backendrestriction::where('user_id',$user->id)->where('route',$back->route)->first(); @endphp
                    @if(!$userback)
                        <option value="{{$back->route}}">{{$back->route}}</option>
                    @endif
                    @endforeach
                </select>
               
            </div>
        </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Inchide</button>
          <button type="submit" form="restriction-form" class="btn btn-success">Salveaza</button>
      
        </div>
      </div>
    </div>
  </div><!-- End Basic Modal-->

<!--End of restriction modal -->

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

  <section class="section profile">
    <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-xl-4">

        <div class="card">
          <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">

            <img src="../assets/img/profile-img.jpg" alt="Profile" class="rounded-circle">
            <h6>{{$user->username}}</h6>
            <h3>{{$user->access->role->name}}</h3>
            <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#add-restriction-modal"><i class="bi bi-plus"></i>Restrictioneaza</button>
          </div>
        </div>

      </div>

      <div class="col-xl-8">

        <div class="card">
          <div class="card-body pt-3">
            <!-- Bordered Tabs -->
            <ul class="nav nav-tabs nav-tabs-bordered">

              <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#frontend">Restrictii Vizualizare</button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#backend">Restrictii Actionare</button>
              </li>


             

            </ul>
            <div class="tab-content pt-2">

              <div class="tab-pane fade show active profile-overview" id="frontend">
               
                <table class="table table-borderless datatable">
                    <thead>
                      <tr>
                        <th scope="col">#ID</th>
                        <th scope="col">Pagina</th>
                        <th scope="col">Submeniu</th>
                        <th scope="col">Optiuni</th>
                        
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($user->restriction as $restriction)
                      <tr>
                        <th scope="row"><a href="#">#{{$restriction->id}}</a></th>
                        @if($restriction->page)
                         <td>{{$restriction->page->name}}</td>
                        @else 
                        <td>---</td>
                        @endif
                        @if($restriction->submenu)
                        <td>{{$restriction->submenu->name}}</td>
                        @else 
                        <td>----</td>
                        @endif 
                       
                        <td>
                            <a href="{{route('destroy-restriction',$restriction->id)}}" class="btn btn-danger btn-sm"><i class="bi bi-trash"></i></a>
                        </td>
                       
                      </tr>
                    @endforeach
                    </tbody>
                </table>

              </div>

              <div class="tab-pane fade profile-edit pt-3" id="backend">
                <table class="table table-borderless datatable">
                    <thead>
                      <tr>
                        <th scope="col">#</th>
                        <th scope="col">Customer</th>
                       
                        <th scope="col">Eliminare</th>
                        <th scope="col"><label><input type="checkbox" class="remove_all" value="all"> Elimina Toate<label></th>
                      </tr>
                    </thead>
                    <tbody>
                    @foreach($user->backend as $backend)
                      <tr>
                        <th scope="row"><a href="#">#{{$backend->id}}</a></th>
                        <td>{{$backend->route}}</td>
                        
                     
                        <td>
                          
                            <label for="">
                              <input type="checkbox" name="" id="permit" data-id="{{$backend->id}}"> Permite
                            </label>
                        </td>
                      </tr>
                    @endforeach
                    </tbody>
                </table>
              

              </div>

              <div class="tab-pane fade pt-3" id="profile-settings">

                <!-- Settings Form -->
                <form>

                  <div class="row mb-3">
                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email Notifications</label>
                    <div class="col-md-8 col-lg-9">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="changesMade" checked>
                        <label class="form-check-label" for="changesMade">
                          Changes made to your account
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="newProducts" checked>
                        <label class="form-check-label" for="newProducts">
                          Information on new products and services
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="proOffers">
                        <label class="form-check-label" for="proOffers">
                          Marketing and promo offers
                        </label>
                      </div>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="securityNotify" checked disabled>
                        <label class="form-check-label" for="securityNotify">
                          Security alerts
                        </label>
                      </div>
                    </div>
                  </div>

                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                  </div>
                </form><!-- End settings Form -->

              </div>

              <div class="tab-pane fade pt-3" id="profile-change-password">
                <!-- Change Password Form -->
                <form>

                  <div class="row mb-3">
                    <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current Password</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="password" type="password" class="form-control" id="currentPassword">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">New Password</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="newpassword" type="password" class="form-control" id="newPassword">
                    </div>
                  </div>

                  <div class="row mb-3">
                    <label for="renewPassword" class="col-md-4 col-lg-3 col-form-label">Re-enter New Password</label>
                    <div class="col-md-8 col-lg-9">
                      <input name="renewpassword" type="password" class="form-control" id="renewPassword">
                    </div>
                  </div>

                  <div class="text-center">
                    <button type="submit" class="btn btn-primary">Change Password</button>
                  </div>
                </form><!-- End Change Password Form -->

              </div>

            </div><!-- End Bordered Tabs -->

          </div>
        </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','#restriction_type',function(){
    var restriction = $(this).val();

    if(restriction==1)
    {
        $('.pages-restriction').removeClass('d-none');
        $('.backend-restirctions').addClass('d-none');
        $('#route').removeAttr('required');
        $('#restriction-form').attr('action','/store-restriction');
       
    }
    if(restriction==2)
    {
        $('.backend-restirctions').removeClass('d-none');
        $('.pages-restriction').addClass('d-none');
        $('#route').attr('required','required');
        $('#restriction-form').attr('action','/restrict-back');
    }

    if(restriction=='')
    {
        $('.pages-restriction').addClass('d-none');
        $('.backend-restirctions').addClass('d-none');
        $('#restriction-form').removeAttr('action');
        $('#route').removeAttr('required');
    }

});
  $(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);
            }
        }
      });
  });

 $(document).on('click','#permit',function(){
      var permit_id = $(this).attr('data-id');
      $.ajax({
        url:'/destroy-ajax-restriction',
        type:'GET',
        data:{'permit_id':permit_id},
        success:function(response)
        {
            location.reload();
        }
      });
 });

 $(document).on('click','.remove_all',function(){
      var permit_id = 'all';
      var user_id = '{{$user->id}}';           
      $.ajax({
        url:'/destroy-ajax-restriction',
        type:'GET',
        data:{'permit_id':permit_id,'user_id':user_id},
        success:function(response)
        {
            location.reload();
        }
      });
 })
</script>
@endpush