@extends('layouts.admin')

@section('content')
<div class="container-fluid px-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="bg-gradient-brand rounded-4 p-4 shadow-lg">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="text-white mb-2"><i class="fas fa-users-cog me-2"></i>Admin Team</h2>
                        <p class="text-white-50 mb-0">
                            <i class="fas fa-users me-1"></i> Total: {{ $users->total() }} 
                            <!-- <i class="fas fa-user-tie me-1 ms-2"></i> -->
                        </p>
                    </div>
                    <button class="btn btn-light btn-lg rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#createUserModal">
                        <i class="fas fa-plus-circle me-2" style="color: #7D26C2;"></i>Create User
                    </button>
                </div>
            </div>
        </div>
    </div>


    <!-- Filter Section -->
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-4">
            <form method="GET" action="{{ route('role_user.index') }}">
                <div class="row g-3">
                    <div class="col-md-5">
                        <div class="position-relative">
                            <i class="fas fa-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                            <input type="text" name="search" class="form-control form-control-lg rounded-pill border-0 bg-light ps-5"
                                   placeholder="Search..." value="{{ request('search') }}">
                        </div>
                    </div>
                    {{--
                    <div class="col-md-3">
                        <select name="role" class="form-select form-select-lg rounded-pill border-0 bg-light" onchange="this.form.submit()">
                            <option value="">All Roles</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}" {{ request('role') == $role->name ? 'selected' : '' }}>{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    --}}
                    <div class="col-md-3">
                        <select name="status" class="form-select form-select-lg rounded-pill border-0 bg-light" onchange="this.form.submit()">
                            <option value="">All Status</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="deactivated" {{ request('status') == 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                            <option value="terminated" {{ request('status') == 'terminated' ? 'selected' : '' }}>Terminated</option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <a href="{{ route('role_user.index') }}" class="btn btn-outline-secondary rounded-pill btn-lg w-100">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Users Table -->
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-header bg-white border-0 rounded-top-4 p-4">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold"><i class="fas fa-list-ul me-2" style="color: #7D26C2;"></i>Users</h5>
                <span class="text-muted">Showing {{ $users->firstItem() ?? 0 }} to {{ $users->lastItem() ?? 0 }} of {{ $users->total() }}</span>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="bg-light">
                        <tr>
                            <th class="py-3 px-4 border-0">User</th>
                            <th class="py-3 border-0">Contact</th>
                            <th class="py-3 border-0">Role</th>
                            <th class="py-3 border-0">Status</th>
                            <th class="py-3 border-0 text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                            <tr>
                                <td class="px-4">
                                    <div class="d-flex align-items-center">
                                        @php
                                            $colors = ['#7D26C2', '#28a745', '#17a2b8', '#ffc107'];
                                            $color = $colors[$user->id % count($colors)];
                                        @endphp
                                        <div class="user-avatar me-3" style="background: {{ $color }}20; color: {{ $color }};">
                                            {{ strtoupper(substr($user->name, 0, 2)) }}
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-bold">{{ $user->name }}</h6>
                                            <small class="text-muted">#{{ $user->id }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>{{ $user->email }}</div>
                                    @if($user->phone_number)<small class="text-muted">{{ $user->phone_number }}</small>@endif
                                </td>
                                <td>
                                    @foreach($user->roles as $role)
                                        @php
                                            $roleColors = ['admin'=>'#7D26C2', 'lawyer'=>'#28a745', 'editor'=>'#17a2b8'];
                                            $roleColor = $roleColors[strtolower($role->name)] ?? '#6c757d';
                                        @endphp
                                        <span class="badge py-2 px-3 rounded-pill" style="background: {{ $roleColor }}; color: white;">
                                            {{ $role->name }}
                                        </span>
                                    @endforeach
                                </td>
                                <td>
                                @if($user->status == 'active')
                                    <span class="badge bg-success bg-opacity-10 text-success py-2 px-3 rounded-pill">
                                        <i class="fas fa-check-circle me-1"></i>Active
                                    </span>
                                @elseif($user->status == 'deactivated')
                                    <span class="badge bg-secondary bg-opacity-10 text-secondary py-2 px-3 rounded-pill">
                                        <i class="fas fa-ban me-1"></i>Deactivated
                                    </span>
                                @else
                                    <span class="badge bg-danger bg-opacity-10 text-danger py-2 px-3 rounded-pill">
                                        <i class="fas fa-exclamation-triangle me-1"></i>Terminated
                                    </span>
                                @endif
                                </td>
                                <td class="text-end pe-4">
                                    <!-- EDIT BUTTON -->
                                    <button class="btn btn-sm action-btn me-1"
                                            style="background: rgba(125, 38, 194, 0.1); color: #7D26C2;"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editUserModal{{ $user->id }}"
                                            title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </button>

                                    <!-- DELETE -->
                                    <form action="{{ route('role_user.destroy', $user->id) }}" method="POST" class="d-inline delete-form">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-sm action-btn" style="background: rgba(220, 53, 69, 0.1); color: #dc3545;" title="Delete">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>

                            <!-- EDIT USER MODAL (PER USER) -->
                            <div class="modal fade" id="editUserModal{{ $user->id }}" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content border-0 rounded-4">
                                        <div class="modal-header bg-gradient-brand text-white border-0 rounded-top-4">
                                            <h5 class="modal-title"><i class="fas fa-user-edit me-2"></i>Edit User</h5>
                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                        </div>

                                        <form action="{{ route('role_user.update', $user->id) }}" method="POST">
                                            @csrf
                                            @method('PUT')

                                            <div class="modal-body p-4">
                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Name</label>
                                                    <input type="text" name="name" class="form-control border-0 bg-light" value="{{ $user->name }}" required>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Email</label>
                                                    <input type="email" name="email" class="form-control border-0 bg-light" value="{{ $user->email }}" required>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Phone</label>
                                                    <input type="text" name="phone_number" class="form-control border-0 bg-light" value="{{ $user->phone_number }}">
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Status</label>
                                                    <select name="status" class="form-select border-0 bg-light">
                                                        <option value="active" {{ $user->status == 'active' ? 'selected' : '' }}>Active</option>
                                                        <option value="deactivated" {{ $user->status == 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                                                        <option value="terminated" {{ $user->status == 'terminated' ? 'selected' : '' }}>Terminated</option>
                                                    </select>
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Role</label>
                                                    <select name="role" class="form-select border-0 bg-light" required>
                                                        <option value="">Select Role</option>
                                                        @foreach($roles as $role)
                                                            <option value="{{ $role->id }}"
                                                                {{ $user->roles->first()?->id == $role->id ? 'selected' : '' }}>
                                                                {{ $role->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>

                                                <hr>

                                                <div class="alert alert-light small">
                                                    Leave password empty if you don't want to change it.
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">New Password</label>
                                                    <input type="password" name="password" class="form-control border-0 bg-light">
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label fw-bold">Confirm Password</label>
                                                    <input type="password" name="password_confirmation" class="form-control border-0 bg-light">
                                                </div>
                                            </div>

                                            <div class="modal-footer border-0">
                                                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                                                <button type="submit" class="btn rounded-pill px-4" style="background: #7D26C2; color: white;">Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <tr><td colspan="5" class="text-center py-5">No users found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card-footer bg-white border-0 rounded-bottom-4 p-4">
            {{ $users->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>
    </div>
</div>

<!-- Create User Modal -->
<div class="modal fade" id="createUserModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 rounded-4">
            <div class="modal-header bg-gradient-brand text-white border-0 rounded-top-4">
                <h5 class="modal-title"><i class="fas fa-user-plus me-2"></i>Create User</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('role_user.store') }}" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-bold">Name</label>
                        <input type="text" name="name" class="form-control border-0 bg-light" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Email</label>
                        <input type="email" name="email" class="form-control border-0 bg-light" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Phone</label>
                        <input type="text" name="phone_number" class="form-control border-0 bg-light">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-bold">Status</label>
                        <select name="status" class="form-select border-0 bg-light">
                            <option value="active">Active</option>
                            <option value="deactivated">Deactivated</option>
                            <option value="terminated">Terminated</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Password</label>
                        <input type="password" name="password" class="form-control border-0 bg-light" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Confirm Password</label>
                        <input type="password" name="password_confirmation" class="form-control border-0 bg-light" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Role</label>
                        <select name="role" class="form-select border-0 bg-light" required>
                            <option value="">Select Role</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn rounded-pill px-4" style="background: #7D26C2; color: white;">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if ($errors->any())
<script>
document.addEventListener('DOMContentLoaded', () => {
    new bootstrap.Modal(document.getElementById('createUserModal')).show();
});
</script>
@endif

<style>
    .bg-gradient-brand { background: linear-gradient(45deg, #7D26C2, #9b4de0); }
    .avatar-md { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
    .user-avatar { width: 45px; height: 45px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
    .stats-card { transition: all 0.3s ease; cursor: pointer; }
    .stats-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(125, 38, 194, 0.1) !important; }
    .action-btn { width: 35px; height: 35px; border-radius: 10px; border: none; transition: all 0.2s ease; }
    .action-btn:hover { transform: scale(1.1); }
    .rounded-4 { border-radius: 1rem !important; }
    .form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.25rem rgba(125, 38, 194, 0.25); border-color: #7D26C2; }
    .pagination .page-item.active .page-link { background: #7D26C2; border-color: #7D26C2; }
    .pagination .page-link { color: #7D26C2; }
</style>

<script>
document.querySelectorAll('.delete-form').forEach(form => {
    form.addEventListener('submit', e => {
        e.preventDefault();
        Swal.fire({
            title: 'Confirm Delete',
            text: 'This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#7D26C2',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Delete'
        }).then(result => result.isConfirmed && form.submit());
    });
});
</script>
@endsection