@include('header')
       <!--start content-->
       <main class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
          <div class="breadcrumb-title pe-3">Dashboard</div>
          <div class="ps-3">
            <nav aria-label="breadcrumb">
              <ol class="breadcrumb mb-0 p-0">
                <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Users</li>
              </ol>
            </nav>
          </div>

          <form class="ms-auto" id="addForm" method="post" action="add_useraccount">
            @csrf
            <div class="btn-group">
              <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleVerticallycenteredModal">Add User Account</button>

              
              <div class="modal fade" id="exampleVerticallycenteredModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header border border-0">
                      <h5 class="modal-title">Add User</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">



                      <div class="col-md-12 mb-3">
                        <label for="validationDefault01" class="form-label">Full name</label>
                        <input type="text" id="new_name" name="new_name" class="form-control" id="validationDefault02" value="" required>
                      </div>
                      <div class="col-md-12 mb-3">
                        <label for="validationDefault01" class="form-label">Email</label>
                        <input type="text" id="new_email" name="new_email" class="form-control" id="validationDefault02" value="" required>
                      </div>
                      <div class="col-md-12 mb-3">
                        <label for="validationDefault01" class="form-label">Username</label>
                        <input type="text" id="new_username" name="new_username" class="form-control" id="validationDefault02" value="" required>
                      </div>
                      <div class="col-md-12 mb-3">
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="new_superadmin" value="0" onchange="switch_val(this)" name="new_superadmin">
                            <label class="form-check-label" for="flexSwitchCheckChecked">Super Admin</label>
                          </div>
    
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="new_sales" value="0" onchange="switch_val(this)" name="new_sales">
                            <label class="form-check-label" for="flexSwitchCheckChecked">Sales</label>
                          </div>
    
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="new_accounts" value="0" onchange="switch_val(this)" name="new_accounts">
                            <label class="form-check-label" for="flexSwitchCheckChecked">Accounts</label>
                          </div>
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="new_production" value="0" onchange="switch_val(this)" name="new_production">
                            <label class="form-check-label" for="flexSwitchCheckChecked">Production</label>
                          </div>
                          <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="new_stocks" value="0" onchange="switch_val(this)" name="new_stocks">
                            <label class="form-check-label" for="flexSwitchCheckChecked">Stocks</label>
                          </div>
                      </div>

                      
                      
                      



                    </div>
                    <div class="modal-footer border border-0">
                      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="submit" data-bs-dismiss="modal" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
        <!--end breadcrumb-->

           <div class="card">
             <div class="card-body">
               <div class="d-flex align-items-center">
                  <h5 class="mb-0">Users</h5>
                   <form class="ms-auto position-relative">
                     <div class="position-absolute top-50 translate-middle-y search-icon px-3"><i class="bi bi-search"></i></div>
                     <input class="form-control ps-5" type="text" placeholder="search">
                   </form>
               </div>
               <div class="table-responsive mt-3">
                 <table class="table align-middle">
                   <thead class="table-secondary">
                     <tr>
                      <th>#</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Username</th>
                      <th>Permissions</th>
                      <!-- <th>Sales</th>
                      <th>Account</th>
                      <th>Production</th>
                      <th>Stocks</th> -->
                      <th>Actions</th>
                     </tr>
                   </thead>
                   <tbody id="tableBody">
                      @foreach($users as $user)
                        <tr>
                          <td>#</td>
                          <td>{{$user->name}}</td>
                          <td>{{$user->email}}</td>
                          <td>{{$user->username}}</td>
                          <td>
                            {{$user->super_admin==1?'Super Admin':''}}<br>
                            {{$user->sales==1?'Sales':''}}<br>
                            {{$user->accounts==1?'Accounts':''}}<br>
                            {{$user->production==1?'Production':''}}<br>
                            {{$user->stocks==1?'Stocks':''}}<br>
                          </td>
                          <td>
                            <div class="table-actions d-flex align-items-center gap-3 fs-6">
                              <input class="id" type="hidden" value="'+item.id+'">
                                <a class="text-primary" data-bs-toggle="modal" data-bs-target="#updateModal{{$user->id}}" title="Edit">
                                  <i class="bi bi-pencil-fill"></i>
                                </a>
                                  <div class="modal fade" id="updateModal{{$user->id}}" tabindex="-1" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                      <form action="update_useracccount" class="modal-content" method="post">
                                        @csrf
                                        <div class="modal-header border border-0">
                                          <h5 class="modal-title">Update Users</h5>
                                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                          <input type="hidden" name="id" value="{{$user->id}}">
                                          <div class="col-md-12 mb-3">
                                            <label for="validationDefault01" class="form-label">
                                              Full name
                                            </label>
                                            <input type="text" name="name" class="form-control" value="{{$user->name}}">
                                          </div>
                                          
                                          <div class="col-md-12 mb-3">
                                            <label for="validationDefault02" class="form-label">
                                              Email
                                            </label>
                                            <input type="text" name="email" id="email" 
                                            value="{{$user->email}}" class="form-control" id="validationDefault02" required>
                                          </div>
                                          <div class="col-md-12 mb-3">
                                            <label for="validationDefault02" class="form-label">
                                              Username
                                            </label>
                                            <input type="text" name="username" id="username" value="{{$user->name}}" class="form-control" id="validationDefault02" required>
                                          </div>
                                          
                                          <div class="col-md-12 mb-3">
                                            <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" id="super_admin_{{$user->id}}" name="super_admin" 
                                              value="{{$user->super_admin}}" onchange="switch_val(this)" 
                                              {{$user->super_admin==1? "checked":""}}>
                                              <label class="form-check-label" for="flexSwitchCheckChecked">
                                                Super Admin
                                              </label>
                                            </div>

                                            <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" id="sales_{{$user->id}}" name="sales" value="{{$user->sales}}" onchange="switch_val(this)"
                                              {{$user->sales==1? "checked":""}}>
                                              <label class="form-check-label" for="flexSwitchCheckChecked">
                                                Sales
                                              </label>
                                            </div>
                                            
                                            <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" id="accounts_{{$user->id}}" name="accounts" value="{{$user->accounts}}" onchange="switch_val(this)" 
                                               {{$user->accounts==1? "checked":""}} >
                                              <label class="form-check-label" for="flexSwitchCheckChecked">
                                                Accounts
                                              </label>
                                              
                                            </div>
                                            
                                            <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" id="production_{{$user->id}}" name="production" value="{{$user->production}}" onchange="switch_val(this)"  {{$user->production==1? "checked":""}} >
                                              <label class="form-check-label" for="flexSwitchCheckChecked">
                                                Production
                                              </label>
                                            </div>
                                            
                                            <div class="form-check form-switch">
                                              <input class="form-check-input" type="checkbox" id="stocks" name="stocks" value="{{$user->stocks}}" onchange="switch_val(this)" {{$user->stocks==1? "checked":""}}>
                                              <label class="form-check-label" for="flexSwitchCheckChecked">
                                                Stocks
                                              </label>
                                            </div>
                                          </div>
                                        </div>
                                        
                                        <div class="modal-footer border border-0">
                                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                          <button type="submit" class="btn btn-primary">Save changes</button>
                                        </div>
                                      
                                      </form>
                                    
                                    </div>
                                  
                                  </div>
                                    
                                    <a href="delete_useraccount/{{$user->id}}" class="text-danger" title="Delete">
                                      <i class="bi bi-trash-fill"></i>
                                    </a>
                            </div>
                              
                          </td>
                        </tr>
                      @endforeach
                   </tbody>
                 </table>
               </div>
             </div>
           </div>

       </main>
       <!--end page main-->
@include('footer')
<script>
  function switch_val(x){
    if(x.value == 1){
      x.value = 0
    }else{
      x.value = 1
    }
  }
</script>

