@extends('layouts.admin')
@section('content')
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Users</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Users</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
          @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>Success!</strong> {{Session::get('success')}}
            </div>
            @endif
            @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong>Success!</strong> {{Session::get('error')}}
            </div>
            @endif
            <div class="card">
                
              <div class="card-header">
              
                @can('user-create')
                <button type="button" class="btn btn-success " data-toggle="modal"
                data-target="#user_modal"><i class="fas fa-plus me-1"></i>Add User
                </button>
                @endcan
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <table class="table table-bordered table-hover example2">
                  <thead>
                  <tr>
                  <th>No.</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                  </thead>
                  <tbody>
                @foreach($users as $user)
                @if($user->roles->contains('name', 'Admin') || $user->roles->contains('name', 'Dispatcher'))
                  <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>{{ $user->roles[0]->name ?? '' }}</td>
                    <td><span class="badge text-bg-{{$user->status ? 'success' :
                            'danger'}}">{{ $user->status ? 'Active' : 'Inactive' }}</span></td>
                    <td>
                        @can('user-edit')
                        <a class="btn btn-primary btn-sm my-1"
                            data-toggle="modal" data-target="#user_modal{{ $user->id }}">
                            <i class="bi bi-pencil-square me-1"></i>Edit</a>
                        @endcan
                        @can('user-delete')
                        <a class="btn btn-danger btn-sm my-1"
                            data-toggle="modal" data-target="#user_delete_modal{{ $user->id }}">
                            <i class="bi bi-trash me-1"></i>Delete</a>
                        
                        @endcan
                       
                        @can('user-edit')
                            @if($user->status == 1)
                            <a href="{{route('admin.users.deactivate',$user->id)}}" class="btn btn-danger btn-sm my-1">Deactivate</a>
                            @else
                            <a href="{{route('admin.users.activate',$user->id)}}" class="btn btn-primary btn-sm my-1">Activate</a>
                            @endif
                        @endcan
                        <a href="{{ route('admin.users.audits', $user->id) }}"
                            class="btn btn-primary btn-sm my-1">Audits</a>
                    </td>
                    <div class="modal fade" id="user_modal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="user_modal_label"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="user_modal_label">Edit User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success" style="display: none;" id="editsuccessDiv"></div>
                <div class="alert alert-danger" style="display: none;" id="editerrorDiv"></div>
                <form method="post" action="{{route('admin.users.update',$user->id)}}">
                    @csrf
                    <div class="form-floating mb-2">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" name="editname" id="name" value="{{$user->name}}">
                    </div>

                    <div class="form-floating mb-2">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" name="editemail" id="email"
                            value="{{$user->email}}">
                    </div>

                    <div class="form-floating mb-2">
                        <label for="phone">Phone</label>
                        <input type="phone" class="form-control" name="editphone" id="phone"
                            value="{{$user->phone}}">
                    </div>

                    <div class="form-floating mb-2">
                        <label for="role">Role</label>
                        <select name="editrole" class="form-control" id="role"
                            aria-label="Floating label select example">
                            @foreach ($roles as $role)
                            <option value="{{ $role->id }}" {{ $user->hasRole($role->name) ? 'selected' : '' }}>
                                {{ $role->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save & Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
                <div class="modal fade" id="user_delete_modal{{$user->id}}" tabindex="-1" role="dialog" aria-labelledby="user_modal_label"
                    aria-hidden="true" >
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="user_modal_label">Edit User</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </div>
                            <div class="modal-body">
                               <h4>Are you sure?</h4>
                               
                            </div>
                            <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                
                                <a href="{{route('admin.users.delete',$user->id)}}"  class="btn btn-danger">Delete</a>
                                
                            </div>
                        </div>
                    </div>
                </div>
                   
                  </tr>
                  @endif
                  @endforeach
                  </tbody>
                 
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    @include('admin.users.add')
@endsection
@section('scripts')
<script>
 
 function handleFormSubmit(formId, successDivId, errorDivId) {
    // Serialize the form data
    var formData = $(formId).serialize();

    // Make an AJAX request
    $.ajax({
        type: 'POST',
        url: $(formId).attr('action'),
        data: formData,
        success: function (response) {
            console.log(response);

            if (response.status == 200) {
                $(errorDivId).hide();
                $(successDivId).show();
                $(successDivId).text(response.msg);

                setTimeout(function () {
                    window.location.reload();
                }, 2000);
            } else {
                $(successDivId).hide();
                $(errorDivId).show();
                $(errorDivId).text(response.msg);
            }
        },
        error: function (xhr, status, error) {
            console.error(xhr.responseText);

            if (xhr.status === 422) {
                var errors = JSON.parse(xhr.responseText);
                $.each(errors.errors, function (key, value) {
                    // Display error messages on the form
                    $('#' + key).setCustomValidity(value[0]);
                    $('#' + key).reportValidity();
                });
            }
        }
    });
}

function Submit() {
    handleFormSubmit('#userForm', '#successDiv', '#errorDiv');
}

function Update() {
    handleFormSubmit('#edituserForm', '#editsuccessDiv', '#editerrorDiv');
}
</script>
@endsection