@include('layouts.header')
  
                   @if (Auth::user()->referencesUser == "admin")
                   
                         @include('layouts.navigationAdmin')
                    @else
                        @include('layouts.navigationDepartment')
                    @endif
            
               
             <form method="POST" action="{{ route('logout') }}">
                            @csrf

                            <x-dropdown-link :href="route('logout')"
                                    onclick="event.preventDefault();
                                                this.closest('form').submit();" style="color: red;">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
        </aside>

        <!-- Main Content -->
         @include('layouts.readingUser')
      
            
                    @if (session()->has('success'))
                        <div class="alert alert-success">
                            <span class="text-green font-bold">{{ session('success') }}</span>
                        </div>
                    @endif
            <!-- Charts Row -->
           

            <section class="charts-grid" style="margin-top: 40px;">
          
                <div class="form-container" style=""> 
                    <div style="direction: rtl;">
                    
                         <button style="direction: ltr;" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#UserModal" > 
                              New User for Administration <li class="fa fa-plus"></li> 
                          </button>
                    
                    </div>
                     <h3 class="mb-4"  >  List of Users:    </h3>
         <table id="User-table" class="display" style="width: 1180px;">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th> Full Name  </th>
                                <th> User Name</th>
                                <th> User Administration </th>
                                <th> Created At </th>
                                <th> -- </th>
                              
                                
                            </tr>
                        </thead>
                     </table>
</div>

                </div>
               
            </section>
        </main>
    </div>
</body>


<!-----User----->
<div class="modal fade" id="UserModal" tabindex="-1" aria-labelledby="UserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered"> 
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="UserModalLabel"> <li class="fa fa-plus"></li>   New User     </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body">
          <h3 class="mb-4"  >  <u>Register a New User </u></h3>
       <form action="{{ route('Administrations.store') }}" method="POST">
        @csrf

        <div class="mb-3">
            <label class="form-label"> Department Name  </label>
           <select name="sector_id" id="">
           <option value="0" selected>---Choose One----</option>
                @foreach ($sectors as $item)
                    <option value="{{ $item->id }}">{{ $item->sectorName }}</option>
                @endforeach
           </select>
        </div>

        <div class="mb-3">
            <label class="form-label">  Sub-Department  </label>
            <input type="text" placeholder="Ex: M&E,Secretariat..etc" name="Sub_manager_name" class="form-control">
        </div>
       
        <div class="mb-3">
            <label class="form-label"> Contact Person </label>
            <input type="text" name="contact_person" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label"> E-mail </label>
            <input type="email" name="contact_email" class="form-control">
        </div>

        <div class="mb-3">
            <label class="form-label"> Telephone </label>
            <input type="text" name="contact_Tel" class="arabicNumbers form-control">
        </div>

        <button type="submit" class="btn btn-success">save</button>
    </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
       
      </div>
    </div>
  </div>
</div>




<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

 <script>
        $(function() {
            $('#User-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('Manager.userdata') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'sectorName', name: 'sectorName' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'Delete', name: 'Delete', orderable: false, searchable: false },
                   
                ]
            });
        });
    </script>
</html>
@include('layouts.footer')
