@extends('layouts.master')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/hr-forms.css') }}">
@endpush

@section('content')
<div class="hr-page-container">
    <div class="hr-breadcrumb">
        <a href="{{ url('admin') }}"><i class="fa-solid fa-house"></i> Home</a>
        <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
        <a href="{{ url('users') }}">Users Management</a>
        <i class="fa-solid fa-chevron-right" style="font-size: 10px;"></i>
        <span class="current">Edit User</span>
    </div>

    <div class="hr-page-header">
        <div class="hr-header-left">
            <h2><i class="fa-solid fa-user-pen"></i> Edit User Account</h2>
            <p>Update credentials, role permissions, or account status</p>
        </div>
        <div class="hr-header-actions">
            <a href="{{ url('users') }}" class="hr-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Users List
            </a>
        </div>
    </div>

    <div class="hr-card">
        <div class="hr-card-header">
            <div class="hr-card-title">
                <i class="fa-solid fa-user-gear"></i> Account: {{ $user->name }}
            </div>
            <div>
                <span class="badge {{ $user->status == 1 ? 'badge-success' : 'badge-danger' }}" style="padding: 6px 12px; font-size: 12px; border-radius: 6px;">
                    {{ $user->status == 1 ? 'Active' : 'Inactive' }}
                </span>
            </div>
        </div>
        <div class="hr-card-body">
            @if (Session('alert'))
                <div class="alert alert-{{ Session('alert-class') }} alert-dismissible fade show" role="alert">
                    {{ Session('alert') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif

            @if (isset($errors) && $errors->any())
                <div class="hr-alert-error">
                    <strong><i class="fa-solid fa-triangle-exclamation"></i> Please fix the following errors:</strong>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ url('users/update/' . Crypt::encrypt($user->id)) }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('post')

                {{-- Option: Link to employee --}}
                <div class="p-3 mb-4 rounded border bg-light">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="create_employee" name="create_employee" {{ $user->employee_id ? 'checked' : '' }}>
                        <label class="custom-control-label fw-bold text-dark" for="create_employee" style="cursor: pointer;">
                            <i class="fa-solid fa-link text-primary me-1"></i> Link this account to an existing Employee
                        </label>
                    </div>
                    <small class="text-muted d-block mt-1">
                        Connect this user profile with an HR employee record.
                    </small>
                </div>

                {{-- Employee Select --}}
                <div class="row mb-3" id="employee_select_div" style="display: {{ $user->employee_id ? 'block' : 'none' }};">
                    <div class="col-md-6">
                        <div class="hr-form-group">
                            <label class="hr-label" for="employee_id">Select Employee Profile</label>
                            <select id="employee_id" name="employee_id" class="hr-select">
                                <option value="">— Choose an Employee —</option>
                                @foreach ($employees as $employee)
                                    <option
                                        value="{{ $employee->id }}"
                                        data-name="{{ $employee->first_name.' '.$employee->last_name }}"
                                        data-email="{{ $employee->email }}"
                                        {{ $user->employee_id == $employee->id ? 'selected' : '' }}
                                    >
                                        {{ $employee->first_name.' '.$employee->last_name }} ({{ $employee->employee_no ?? ('EMP-' . $employee->id) }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <div class="hr-section-divider">
                    <h4 class="hr-section-title"><i class="fa-solid fa-user"></i> Basic Information</h4>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="hr-form-group">
                            <label class="hr-label" for="name">
                                Full Name <span class="required">*</span>
                            </label>
                            <div class="hr-input-icon-wrap">
                                <i class="fa-solid fa-user"></i>
                                <input type="text" name="name" id="name" class="hr-input" value="{{ old('name', $user->name) }}" required />
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="hr-form-group">
                            <label class="hr-label" for="email">
                                Email Address <span class="required">*</span>
                            </label>
                            <div class="hr-input-icon-wrap">
                                <i class="fa-solid fa-envelope"></i>
                                <input type="email" name="email" id="email" class="hr-input" value="{{ old('email', $user->email) }}" required />
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="hr-form-group">
                            <label class="hr-label" for="role_id">
                                Role &amp; Permissions <span class="required">*</span>
                            </label>
                            <select id="role_id" name="role_id" class="hr-select" required>
                                <option value="">— Select Role —</option>
                                @foreach ($roles as $role)
                                    <option value="{{ $role['id'] }}" {{ old('role_id', $user->role_id) == $role['id'] ? 'selected' : '' }}>
                                        {{ $role['name'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="hr-form-group">
                            <label class="hr-label" for="status">
                                Account Status <span class="required">*</span>
                            </label>
                            <select name="status" id="status" class="hr-select" required>
                                <option value="1" {{ old('status', $user->status) == '1' ? 'selected' : '' }}>Active</option>
                                <option value="2" {{ old('status', $user->status) == '2' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="hr-section-divider">
                    <h4 class="hr-section-title"><i class="fa-solid fa-shield-halved"></i> Update Password (Optional)</h4>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="hr-form-group">
                            <label class="hr-label" for="password">New Password</label>
                            <div class="hr-input-icon-wrap">
                                <i class="fa-solid fa-lock"></i>
                                <input type="password" name="password" id="password" class="hr-input" placeholder="Leave empty to keep current password" />
                            </div>
                            <small class="text-muted" style="font-size: 11.5px;">Only fill if you want to reset password</small>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="hr-form-group">
                            <label class="hr-label" for="password_confirmation">Confirm New Password</label>
                            <div class="hr-input-icon-wrap">
                                <i class="fa-solid fa-lock-check"></i>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="hr-input" placeholder="Re-type new password" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="hr-form-actions">
                    <a href="{{ url('users') }}" class="hr-btn-cancel">
                        <i class="fa-solid fa-xmark"></i> Cancel
                    </a>
                    <button type="submit" class="hr-btn-submit">
                        <i class="fa-solid fa-floppy-disk"></i> Update User
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkbox = document.getElementById('create_employee');
        const employeeDiv = document.getElementById('employee_select_div');
        const employeeSelect = document.getElementById('employee_id');
        const usernameInput = document.getElementById('name');
        const emailInput = document.getElementById('email');

        // Toggle employee select
        if (checkbox) {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    employeeDiv.style.display = 'block';
                } else {
                    employeeDiv.style.display = 'none';
                    if (employeeSelect) employeeSelect.value = '';
                }
            });
        }

        // Auto-fill name and email from selected employee
        if (employeeSelect) {
            employeeSelect.addEventListener('change', function() {
                const selectedOption = this.options[this.selectedIndex];
                if (selectedOption && selectedOption.value) {
                    usernameInput.value = selectedOption.getAttribute('data-name') || '';
                    emailInput.value = selectedOption.getAttribute('data-email') || '';
                }
            });
        }
    });
</script>
@endpush