@if ($errors->any())
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Check if errors are for add or edit form
            @if(session('show_edit_modal'))
                var editModalId = 'editUserModal' + {{ session('edit_user_id') }};
                var editModal = new bootstrap.Modal(document.getElementById(editModalId));
                editModal.show();
            @else
                var addModal = new bootstrap.Modal(document.getElementById('addUserModal'));
                addModal.show();
            @endif
        });
    </script>
@endif
@extends('admin.admin_master')
@section('admin')
<div class="page-content">
    <div class="container-fluid">
    @if(session('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif

    <!-- Enhanced Success Alert -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <div class="avatar-xs me-3">
                    <div class="avatar-title bg-success text-white rounded-circle">
                        <i class="ri-check-line font-size-16"></i>
                    </div>
                </div>
                <div class="flex-grow-1">
                    <h6 class="alert-heading mb-1 font-size-15">Success!</h6>
                    <div class="font-size-13">{{ session('success') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show shadow-sm border-0" role="alert">
            <div class="d-flex align-items-center">
                <div class="avatar-xs me-3">
                    <div class="avatar-title bg-danger text-white rounded-circle">
                        <i class="ri-error-warning-line font-size-16"></i>
                    </div>
                </div>
                <div class="flex-grow-1">
                    <h6 class="alert-heading mb-1 font-size-15">Error!</h6>
                    <div class="font-size-13">{{ session('error') }}</div>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif

    <!-- Enhanced Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-header-card">
                <div class="page-header-content">
                    <div class="d-flex align-items-center justify-content-between">
                        <!-- Left side: Page Icon & Title -->
                        <div class="d-flex align-items-center">
                            <!-- Page Icon -->
                            <div class="page-icon me-3">
                                <div class="avatar-md">
                                    <div class="avatar-title bg-primary-subtle text-primary rounded-circle">
                                        <i class="ri-team-line font-size-24"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Page Title & Description -->
                            <div class="flex-grow-1">
                                <h4 class="page-title mb-1">User Management</h4>
                            </div>
                        </div>
  
                </div>
            </div>
        </div>
    </div>
    <!-- End Enhanced Page Header -->    
    <!-- Add User Button -->
    <div class="row mb-3">
    <div class="col-auto">
    </div>
</div>

    <!-- Users Table Card -->
<div class="row">
    <div class="col-12">
        <div class="card shadow-sm border-0">
            <div class="card-body p-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h5 class="card-title font-size-16 mb-1">All Users</h5>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="location.reload()" data-bs-toggle="tooltip" title="Refresh Table">
                            <i class="ri-refresh-line font-size-12"></i>
                        </button>
                        @can('Create User')
                        <button type="button" class="btn btn-primary btn-sm d-flex align-items-center" data-bs-toggle="modal" data-bs-target="#addUserModal" title="Add User">
        <i class="ri-user-add-line font-size-14 me-1"></i>
        <span>Add User</span>
    </button>
                        @endcan
                    </div>
                </div>
                    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <form action="{{ route('users.store') }}" method="POST">
                    @csrf
                    <div class="modal-header" style="background-color: #0069A7; color: #ffffff;">
                        <h5 class="modal-title mb-0" id="addUserModalLabel">
                            <i class="ri-user-add-line me-2"></i> Add New User
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label">First Name</label>
                                    <input type="text" name="first_name" class="form-control" required placeholder="Enter first name" value="{{ old('first_name') }}">
                                    @error('first_name') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                                <div class="mb-4">
                                    <label class="form-label">Email</label>
                                    <input type="email" name="email" class="form-control" required placeholder="Enter email address" value="{{ old('email') }}">
                                    @error('email') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                                <div class="mb-4">
                                    <label class="form-label">Role</label>
                                    <select class="selectpicker form-control" name="roles[]" multiple title="Select Roles" data-actions-box="true">
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}" {{ (collect(old('roles'))->contains($role->id)) ? 'selected' : '' }}>{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('roles') <span class="text-danger">{{ $message }}</span> @enderror
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label class="form-label">Last Name</label>
                                    <input type="text" name="last_name" class="form-control" required placeholder="Enter last name" value="{{ old('last_name') }}">
                                    @error('last_name') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                                <div class="mb-4">
                                    <label class="form-label">Password</label>
                                    <input type="password" name="password" class="form-control" required placeholder="Enter password" value="{{ old('password') }}">
                                    @error('password') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                                <div class="mb-4">
                                    <label class="form-label">Confirm Password</label>
                                    <input type="password" name="password_confirmation" class="form-control" required placeholder="Confirm password" value="{{ old('password_confirmation') }}">
                                    @error('password_confirmation') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="submit" class="btn btn-success px-4">
                            <i class="ri-user-add-line me-1"></i> Add User
                        </button>
                        <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
                <div class="table-responsive mx-4">
                <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap w-100">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                @canany(['Edit User', 'Delete User'])
                                <th>Actions</th>
                                @endcanany
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($users as $key => $user)
                            <tr>
                                <td class="text-center">
                                    <span class="badge badge-soft-primary font-size-12">{{ $key + 1 }}</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-xs me-2">
                                            <div class="avatar-title rounded-circle bg-soft-primary text-primary">
                                                <i class="ri-user-line font-size-16"></i>
                                            </div>
                                        </div>
                                        <div>
                                            <h6 class="mb-1 font-size-14">{{ $user->first_name }} {{ $user->last_name }}</h6>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ $user->email }}</td>
                                <td>
                                    <span class="badge badge-soft-primary font-size-12">
                                        {{ $user->roles->pluck('name')->join(', ') ?? 'N/A' }}
                                    </span>
                                </td>
                                @canany(['Edit User', 'Delete User'])
                                <td>
                                    <div class="d-flex gap-2 justify-content-center align-items-center">
                                        @can('Edit User')
                                        <button class="btn btn-soft-warning btn-sm" data-bs-toggle="modal" data-bs-target="#editUserModal{{ $user->id }}">
                                            <i class="ri-edit-line font-size-14"></i>
                                        </button>
                                        @endcan
                                        @can('Delete User')
                                        <form action="{{ route('users.destroy', $user->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-soft-danger btn-sm" onclick="return confirm('Are you sure?')">
                                                <i class="ri-delete-bin-line font-size-14"></i>
                                            </button>
                                        </form>
                                        @endcan
                                    </div>
                                </td>
                                @endcanany
                            </tr>

            <!-- Edit User Modal -->
            <div class="modal fade" id="editUserModal{{ $user->id }}" tabindex="-1" aria-labelledby="editUserModalLabel{{ $user->id }}" aria-hidden="true">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content border-0 shadow">
                        <form action="{{ route('users.update', $user->id) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="modal-header" style="background-color: #0069A7; color: #ffffff;">
                                <h5 class="modal-title" id="editUserModalLabel{{ $user->id }}">
                                    <i class="ri-edit-line me-2"></i>Edit User
                                </h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                @if ($errors->any())
                                    <div class="alert alert-danger">
                                        <ul class="mb-0">
                                            @foreach ($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                                <div class="row g-4">
                                    <div class="col-md-6">
                                        <div class="mb-4">
                                            <label class="form-label">First Name</label>
                                            <input type="text" name="first_name" class="form-control" value="{{ old('first_name', $user->first_name) }}" required placeholder="Enter first name">
                                            @error('first_name') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="mb-4">
                                            <label class="form-label">Email</label>
                                            <input type="email" name="email" class="form-control" value="{{ old('email', $user->email) }}" required placeholder="Enter email address">
                                            @error('email') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="mb-4">
                                            <label class="form-label">Role</label>
                                            <select class="selectpicker form-control" name="roles[]" multiple title="Select Roles" data-actions-box="true">
                                                @foreach($roles as $role)
                                                    <option value="{{ $role->id }}" 
                                                        {{ (collect(old('roles', $user->roles->pluck('id')))->contains($role->id)) ? 'selected' : '' }}>
                                                        {{ $role->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('roles') <span class="text-danger">{{ $message }}</span> @enderror
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-4">
                                            <label class="form-label">Last Name</label>
                                            <input type="text" name="last_name" class="form-control" value="{{ old('last_name', $user->last_name) }}" required placeholder="Enter last name">
                                            @error('last_name') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="mb-4">
                                            <label class="form-label">Password <small class="text-muted">(leave blank to keep current)</small></label>
                                            <input type="password" name="password" class="form-control" placeholder="Enter new password" value="{{ old('password') }}">
                                            @error('password') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="mb-4">
                                            <label class="form-label">Confirm Password</label>
                                            <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm new password" value="{{ old('password_confirmation') }}">
                                            @error('password_confirmation') <span class="text-danger">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer border-top">
                                <button type="submit" class="btn btn-success px-4">
                                    <i class="ri-check-line me-1"></i>Update User
                                </button>
                                <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection