@extends('layouts.app')
@section('content')
<div class="container-fluid py-3">
    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-user-plus me-2"></i>Create New User Account</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('users.store') }}" id="userForm">
                        @csrf

                        <div id="timeout">
                            @if($errors->any())
                                <div class="alert alert-danger">
                                    @foreach ($errors->all() as $error)
                                        <div>{{ $error }}</div>
                                    @endforeach
                                </div>
                            @endif
                            @if(Session::has('success'))
                                <div class="alert alert-success">{{ Session('success') }}</div>
                            @endif
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label"><strong>Full Name:</strong> <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                       id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label class="form-label"><strong>Email Address:</strong> <span class="text-danger">*</span></label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                       id="email" name="email" value="{{ old('email') }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label"><strong>Password:</strong> <span class="text-danger">*</span></label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror"
                                       id="password" name="password" required minlength="8">
                                <div class="form-text">Password must be at least 8 characters long.</div>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label"><strong>Confirm Password:</strong> <span class="text-danger">*</span></label>
                                <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror"
                                       id="password_confirmation" name="password_confirmation" required>
                                @error('password_confirmation')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <label class="form-label"><strong>User Role:</strong> <span class="text-danger">*</span></label>
                                <select class="form-control @error('role') is-invalid @enderror" id="role" name="role" required>
                                    <option value="">Select Role</option>
                                    <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Administrator</option>
                                    <option value="loan_officer" {{ old('role') == 'loan_officer' ? 'selected' : '' }}>Loan Officer</option>
                                    <option value="auditor" {{ old('role') == 'auditor' ? 'selected' : '' }}>Auditor</option>
                                    <option value="user" {{ old('role') == 'user' ? 'selected' : '' }}>User</option>
                                </select>
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <button type="submit" class="btn btn-success me-2">
                                <i class="fas fa-save me-1"></i> CREATE USER
                            </button>
                            <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-1"></i> CANCEL
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Password confirmation validation
        const password = document.getElementById('password');
        const passwordConfirmation = document.getElementById('password_confirmation');

        function validatePasswordConfirmation() {
            if (password.value !== passwordConfirmation.value && passwordConfirmation.value.length > 0) {
                passwordConfirmation.classList.add('is-invalid');
                passwordConfirmation.classList.remove('is-valid');
                document.querySelector('#password_confirmation + .invalid-feedback').textContent = 'Passwords do not match.';
            } else if (passwordConfirmation.value.length > 0) {
                passwordConfirmation.classList.remove('is-invalid');
                passwordConfirmation.classList.add('is-valid');
            }
        }

        passwordConfirmation.addEventListener('input', validatePasswordConfirmation);
        password.addEventListener('input', validatePasswordConfirmation);

        // Form submission confirmation
        const form = document.getElementById('userForm');
        form.addEventListener('submit', function(e) {
            if (!confirm('Are you sure you want to create this user account?')) {
                e.preventDefault();
            }
        });

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            const alerts = document.querySelectorAll('#timeout .alert');
            alerts.forEach(alert => {
                const fadeEffect = setInterval(() => {
                    if (!alert.style.opacity) {
                        alert.style.opacity = 1;
                    }
                    if (alert.style.opacity > 0) {
                        alert.style.opacity -= 0.1;
                    } else {
                        clearInterval(fadeEffect);
                        alert.style.display = 'none';
                    }
                }, 50);
            });
        }, 5000);
    });
</script>

<style>
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.form-control {
    border-radius: 4px;
}
.form-control:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}
.invalid-feedback {
    display: block;
}
.alert {
    border-radius: 4px;
    border: none;
}
.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}
.alert-success {
    background-color: #d1e7dd;
    color: #0f5132;
}
.btn-success {
    padding: 0.5rem 2rem;
}
.btn-outline-secondary {
    border-color: #6c757d;
    color: #6c757d;
}
.btn-outline-secondary:hover {
    background-color: #6c757d;
    color: white;
}
</style>
@endsection