@extends('layout.app')

@section('title', 'Add New User')

@include('admin.shared.admin-styles')

@section('content')
<div class="admin-container container-fluid">
    <!-- Page Header -->
    <div class="page-header animate-fade-in">
        <div class="row align-items-center">
            <div class="col-12">
                <h3 class="mb-2 text-white">
                    <i class="fas fa-user-plus me-2"></i>Add New User
                </h3>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('admindash') }}" class="text-white-50">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('datauser') }}" class="text-white-50">Users</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">Add User</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="admin-card animate-fade-in">
                <div class="card-body">
                    <h5 class="card-title mb-4">
                        <i class="fas fa-user-edit me-2"></i>User Information
                    </h5>

                    <form id="AddUserForm" method="POST" action="{{ route('storeuser') }}">
                        @csrf
                        
                        <div class="row g-4">
                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-user me-2"></i>Name
                                    </label>
                                    <input type="text" 
                                           class="admin-form-control" 
                                           name="name" 
                                           placeholder="Enter user's name"
                                           required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-envelope me-2"></i>Email
                                    </label>
                                    <input type="email" 
                                           class="admin-form-control" 
                                           name="email" 
                                           placeholder="Enter email address"
                                           required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-phone me-2"></i>Phone Number
                                    </label>
                                    <input type="text" 
                                           class="admin-form-control" 
                                           name="no_telp" 
                                           placeholder="Enter phone number"
                                           required>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-user-tag me-2"></i>Role
                                    </label>
                                    <select class="admin-form-control" name="role_id" required>
                                        <option value="" disabled selected>Select a role</option>
                                        @foreach($roles as $role)
                                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-key me-2"></i>Password
                                    </label>
                                    <div class="input-group">
                                        <input type="password" 
                                               class="admin-form-control" 
                                               name="password" 
                                               id="passwordField"
                                               placeholder="Minimum 4 characters"
                                               required>
                                        <button type="button" 
                                                class="btn btn-outline-secondary" 
                                                onclick="togglePasswordVisibility('passwordField', 'toggleIcon')">
                                            <i class="fas fa-eye" id="toggleIcon"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="admin-form-group">
                                    <label class="admin-form-label">
                                        <i class="fas fa-key me-2"></i>Confirm Password
                                    </label>
                                    <div class="input-group">
                                        <input type="password" 
                                               class="admin-form-control" 
                                               name="password_confirmation" 
                                               id="confirmPasswordField"
                                               placeholder="Re-enter password"
                                               required>
                                        <button type="button" 
                                                class="btn btn-outline-secondary" 
                                                onclick="togglePasswordVisibility('confirmPasswordField', 'toggleConfirmIcon')">
                                            <i class="fas fa-eye" id="toggleConfirmIcon"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-end mt-4">
                            <a href="{{ route('datauser') }}" class="btn btn-secondary me-2">
                                <i class="fas fa-arrow-left me-2"></i>Back
                            </a>
                            <button type="button" class="btn btn-primary" onclick="confirmSave()">
                                <i class="fas fa-save me-2"></i>Save User
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.admin-form-group {
    margin-bottom: 1.5rem;
}

.admin-form-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #333;
}

.admin-form-label i {
    width: 20px;
    color: #2196f3;
}

.admin-form-control {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    width: 100%;
    transition: all 0.3s ease;
}

.admin-form-control:focus {
    border-color: #2196f3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
}

.input-group .btn {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    background: #f8f9fa;
    color: #6c757d;
}

.input-group .btn:hover {
    background: #e9ecef;
    color: #2196f3;
}

.input-group .admin-form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .admin-form-control {
        padding: 0.625rem 0.875rem;
    }
    
    .input-group .btn {
        padding: 0.625rem;
    }
}
</style>

@endsection

@push('scripts')
<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
function togglePasswordVisibility(fieldId, iconId) {
    var field = document.getElementById(fieldId);
    var icon = document.getElementById(iconId);
    
    if (field.type === "password") {
        field.type = "text";
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        field.type = "password";
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

function confirmSave() {
    // Get password fields
    const password = document.getElementById('passwordField').value;
    const confirmPassword = document.getElementById('confirmPasswordField').value;

    // Validate password
    if (password.length < 4) {
        Swal.fire({
            title: 'Password Error',
            text: 'Password must be at least 4 characters long',
            icon: 'error',
            confirmButtonColor: '#2196f3',
            confirmButtonText: 'OK'
        });
        return;
    }

    // Check if passwords match
    if (password !== confirmPassword) {
        Swal.fire({
            title: 'Password Mismatch',
            text: 'Password and confirmation do not match',
            icon: 'error',
            confirmButtonColor: '#2196f3',
            confirmButtonText: 'OK'
        });
        return;
    }

    Swal.fire({
        title: 'Save User',
        text: "Are you sure you want to save this user?",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#2196f3',
        cancelButtonColor: '#6c757d',
        confirmButtonText: '<i class="fas fa-save me-2"></i>Yes, save it!',
        cancelButtonText: '<i class="fas fa-times me-2"></i>Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            document.getElementById('AddUserForm').submit();
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const animateElements = document.querySelectorAll('.animate-fade-in');
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = 1;
                entry.target.style.transform = 'translateY(0)';
            }
        });
    });

    animateElements.forEach(element => {
        element.style.opacity = 0;
        element.style.transform = 'translateY(20px)';
        observer.observe(element);
    });
});
</script>
@endpush