@extends('layouts.app')

@section('title', 'Users')

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <h4 class="mb-3 mb-md-0">Users</h4>
        <button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddUser" aria-controls="offcanvasAddUser">
            <i class="icon-base ti tabler-plus me-1"></i>
            Create User
        </button>
    </div>

    @include('partials.alerts')

    <div class="card">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Employee</th>
                    <th>Roles</th>
                    <th>Status</th>
                    @if(isset($isSuperAdmin) && $isSuperAdmin)
                        <th class="text-end">Actions</th>
                    @endif
                </tr>
                </thead>
                <tbody>
                @forelse($users as $user)
                    <tr>
                        <td class="fw-medium">{{ $user->name }}</td>
                        <td>{{ $user->username ?? '—' }}</td>
                        <td>{{ $user->email }}</td>
                        <td>
                            @if($user->employee)
                                <span class="badge bg-label-info">
                                    {{ $user->employee->name }} 
                                    @if($user->employee->department)
                                        ({{ $user->employee->department->name }})
                                    @endif
                                </span>
                            @else
                                <span class="badge bg-label-secondary">Regular User</span>
                            @endif
                        </td>
                        <td>
                            @if($user->roles->isNotEmpty())
                                @foreach($user->roles as $role)
                                    <span class="badge bg-label-primary me-1">{{ $role->name }}</span>
                                @endforeach
                            @else
                                <span class="text-muted">No roles</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-label-success">Active</span>
                        </td>
                        @if(isset($isSuperAdmin) && $isSuperAdmin)
                            <td class="text-end">
                                <div class="btn-group">
                                    <a href="{{ route('users.roles.form', $user) }}" class="btn btn-sm btn-outline-success" title="Assign Roles">
                                        <i class="icon-base ti tabler-user-cog"></i>
                                    </a>
                                    <a href="{{ route('users.password.form', $user) }}" class="btn btn-sm btn-outline-primary" title="Set Password">
                                        <i class="icon-base ti tabler-key"></i>
                                    </a>
                                    @if($user->email)
                                        <form action="{{ route('users.password.send-reset-link', $user) }}" method="POST" class="d-inline" 
                                              onsubmit="return confirm('Send password reset link to {{ $user->email }}?');">
                                            @csrf
                                            <button type="submit" class="btn btn-sm btn-outline-info" title="Send Reset Link">
                                                <i class="icon-base ti tabler-mail"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        @endif
                    </tr>
                @empty
                    <tr>
                        <td colspan="{{ $isSuperAdmin ? '7' : '6' }}" class="text-center text-muted py-4">No users found.</td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
        @if($users->hasPages())
            <div class="card-footer d-flex justify-content-end">
                {{ $users->links() }}
            </div>
        @endif
    </div>

    <!-- Offcanvas to add new user -->
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasAddUser" aria-labelledby="offcanvasAddUserLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="offcanvasAddUserLabel" class="offcanvas-title">Create User</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body mx-0 flex-grow-0 p-6 h-100">
            <form id="createUserForm" method="POST" action="{{ route('users.store') }}">
                @csrf
                
                <div class="mb-4">
                    <label class="form-label">User Type <span class="text-danger">*</span></label>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="user_type" id="userTypeNew" value="new" checked onchange="toggleUserType()">
                        <label class="form-check-label" for="userTypeNew">
                            New User
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="user_type" id="userTypeEmployee" value="employee" onchange="toggleUserType()">
                        <label class="form-check-label" for="userTypeEmployee">
                            Create User for Employee
                        </label>
                    </div>
                </div>

                <!-- New User Form Fields -->
                <div id="newUserFields">
                    <div class="mb-4 form-control-validation">
                        <label class="form-label" for="name">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" placeholder="John Doe" value="{{ old('name') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4 form-control-validation">
                        <label class="form-label" for="contact_number">Contact Number</label>
                        <input type="text" class="form-control @error('contact_number') is-invalid @enderror" id="contact_number" name="contact_number" placeholder="+1 (555) 123-4567" value="{{ old('contact_number') }}">
                        @error('contact_number')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4 form-control-validation">
                        <label class="form-label" for="email">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="john.doe@example.com" value="{{ old('email') }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Employee User Form Fields -->
                <div id="employeeUserFields" style="display: none;">
                    <div class="mb-4 form-control-validation">
                        <label class="form-label" for="department_id">Department <span class="text-danger">*</span></label>
                        <select class="form-select @error('department_id') is-invalid @enderror" id="department_id" name="department_id" onchange="loadEmployees()" required>
                            <option value="">Select Department</option>
                            @foreach(\App\Models\Department::orderBy('name')->get() as $department)
                                <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>
                                    {{ $department->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('department_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4 form-control-validation">
                        <label class="form-label" for="employee_id">Employee <span class="text-danger">*</span></label>
                        <select class="form-select @error('employee_id') is-invalid @enderror" id="employee_id" name="employee_id" required disabled>
                            <option value="">Select Department First</option>
                        </select>
                        @error('employee_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Select a department to see available employees</small>
                    </div>
                </div>

                <div class="mb-4 d-flex flex-wrap gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="icon-base ti tabler-check me-1"></i> Create User
                    </button>
                    <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
                </div>
            </form>
        </div>
    </div>
    <!-- /Offcanvas to add new user -->
@endsection

@push('scripts')
<script>
    function toggleUserType() {
        const userType = document.querySelector('input[name="user_type"]:checked').value;
        const newUserFields = document.getElementById('newUserFields');
        const employeeUserFields = document.getElementById('employeeUserFields');
        const employeeSelect = document.getElementById('employee_id');
        const departmentSelect = document.getElementById('department_id');

        if (userType === 'new') {
            newUserFields.style.display = 'block';
            employeeUserFields.style.display = 'none';
            employeeSelect.removeAttribute('required');
            departmentSelect.removeAttribute('required');
            document.getElementById('name').setAttribute('required', 'required');
            document.getElementById('email').setAttribute('required', 'required');
        } else {
            newUserFields.style.display = 'none';
            employeeUserFields.style.display = 'block';
            document.getElementById('name').removeAttribute('required');
            document.getElementById('email').removeAttribute('required');
            employeeSelect.setAttribute('required', 'required');
            departmentSelect.setAttribute('required', 'required');
        }
    }

    function loadEmployees() {
        const departmentId = document.getElementById('department_id').value;
        const employeeSelect = document.getElementById('employee_id');

        employeeSelect.innerHTML = '<option value="">Loading...</option>';
        employeeSelect.disabled = true;

        if (!departmentId) {
            employeeSelect.innerHTML = '<option value="">Select Department First</option>';
            return;
        }

        fetch(`{{ url('/api/departments') }}/${departmentId}/employees`)
            .then(response => response.json())
            .then(data => {
                employeeSelect.innerHTML = '<option value="">Select Employee</option>';
                if (data.length === 0) {
                    employeeSelect.innerHTML = '<option value="">No employees available</option>';
                } else {
                    data.forEach(employee => {
                        const option = document.createElement('option');
                        option.value = employee.id;
                        option.textContent = employee.name + (employee.email ? ` (${employee.email})` : '');
                        if (employee.has_user) {
                            option.disabled = true;
                            option.textContent += ' - Already has account';
                        }
                        employeeSelect.appendChild(option);
                    });
                }
                employeeSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error:', error);
                employeeSelect.innerHTML = '<option value="">Error loading employees</option>';
            });
    }

    // Reset form when offcanvas is closed
    document.getElementById('offcanvasAddUser').addEventListener('hidden.bs.offcanvas', function () {
        document.getElementById('createUserForm').reset();
        document.getElementById('newUserFields').style.display = 'block';
        document.getElementById('employeeUserFields').style.display = 'none';
        document.getElementById('employee_id').innerHTML = '<option value="">Select Department First</option>';
        document.getElementById('employee_id').disabled = true;
        document.getElementById('userTypeNew').checked = true;
    });
</script>
@endpush