@extends('layouts.app')

@section('title', 'Register - Room Monitoring Revenue')

@push('styles')
<style>
    .register-container {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%);
        padding: 20px;
    }

    .register-card {
        background: white;
        border-radius: 16px;
        padding: 48px;
        width: 100%;
        max-width: 500px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .register-header {
        text-align: center;
        margin-bottom: 32px;
    }

    .register-header h1 {
        font-size: 28px;
        font-weight: 700;
        color: #0066CC;
        margin-bottom: 8px;
    }

    .register-header p {
        color: #6c757d;
        font-size: 14px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: #333;
        font-size: 14px;
    }

    .form-control {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .form-control:focus {
        outline: none;
        border-color: #0066CC;
        box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
    }

    .form-control.is-invalid {
        border-color: #dc3545;
    }

    .form-error {
        color: #dc3545;
        font-size: 13px;
        margin-top: 6px;
    }

    .password-wrapper {
        position: relative;
    }

    .password-wrapper .form-control {
        padding-right: 45px;
    }

    .toggle-password {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
        font-size: 16px;
        transition: color 0.3s ease;
    }

    .toggle-password:hover {
        color: #0066CC;
    }

    .password-requirements {
        background: #f8f9fa;
        border-left: 4px solid #0066CC;
        padding: 12px 16px;
        border-radius: 4px;
        margin-top: 12px;
        font-size: 13px;
    }

    .password-requirements ul {
        margin: 8px 0 0 0;
        padding-left: 20px;
    }

    .password-requirements li {
        color: #6c757d;
        margin: 4px 0;
    }

    .btn-register {
        width: 100%;
        padding: 14px;
        background: #0066CC;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-top: 8px;
    }

    .btn-register:hover {
        background: #0052A3;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 102, 204, 0.3);
    }

    .btn-register:active {
        transform: translateY(0);
    }

    .register-footer {
        text-align: center;
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #e0e0e0;
    }

    .register-footer p {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 12px;
    }

    .register-footer a {
        color: #0066CC;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .register-footer a:hover {
        color: #0052A3;
        text-decoration: underline;
    }

    .alert {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
    }

    .alert-danger {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .copyright {
        text-align: center;
        margin-top: 16px;
        font-size: 13px;
        color: #999;
    }
</style>
@endpush

@section('content')
<div class="register-container">
    <div class="register-card">
        <div class="register-header">
            <h1><i class="fas fa-user-plus"></i> Create Account</h1>
            <p>Join Room Monitoring Revenue System</p>
        </div>

        @if($errors->has('error'))
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle"></i> {{ $errors->first('error') }}
            </div>
        @endif

        <form method="POST" action="{{ route('register.post') }}">
            @csrf

            <div class="form-group">
                <label for="name">
                    <i class="fas fa-user"></i> Full Name
                </label>
                <input 
                    type="text" 
                    id="name" 
                    name="name" 
                    class="form-control @error('name') is-invalid @enderror" 
                    value="{{ old('name') }}" 
                    required 
                    autofocus
                    placeholder="Enter your full name"
                >
                @error('name')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="email">
                    <i class="fas fa-envelope"></i> Email Address
                </label>
                <input 
                    type="email" 
                    id="email" 
                    name="email" 
                    class="form-control @error('email') is-invalid @enderror" 
                    value="{{ old('email') }}" 
                    required
                    placeholder="Enter your email address"
                >
                @error('email')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label for="password">
                    <i class="fas fa-lock"></i> Password
                </label>
                <div class="password-wrapper">
                    <input 
                        type="password" 
                        id="password" 
                        name="password" 
                        class="form-control @error('password') is-invalid @enderror" 
                        required
                        placeholder="Create a strong password"
                    >
                    <i class="fas fa-eye toggle-password" id="togglePassword"></i>
                </div>
                @error('password')
                    <div class="form-error">{{ $message }}</div>
                @enderror
                
                <div class="password-requirements">
                    <strong>Password must contain:</strong>
                    <ul>
                        <li>At least 8 characters</li>
                        <li>Mix of letters and numbers recommended</li>
                    </ul>
                </div>
            </div>

            <div class="form-group">
                <label for="password_confirmation">
                    <i class="fas fa-lock"></i> Confirm Password
                </label>
                <div class="password-wrapper">
                    <input 
                        type="password" 
                        id="password_confirmation" 
                        name="password_confirmation" 
                        class="form-control" 
                        required
                        placeholder="Re-enter your password"
                    >
                    <i class="fas fa-eye toggle-password" id="togglePasswordConfirm"></i>
                </div>
            </div>

            <button type="submit" class="btn-register">
                <i class="fas fa-user-plus"></i> Create Account
            </button>

            <div class="register-footer">
                <p>Already have an account?</p>
                <a href="{{ route('login') }}">
                    <i class="fas fa-sign-in-alt"></i> Login here
                </a>
            </div>

            <div class="copyright">
                <p>&copy; 2025 Room Monitoring Revenue System</p>
            </div>
        </form>
    </div>
</div>

<script>
    // Toggle password visibility for main password
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');

    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.classList.toggle('fa-eye');
        this.classList.toggle('fa-eye-slash');
    });

    // Toggle password visibility for confirm password
    const togglePasswordConfirm = document.getElementById('togglePasswordConfirm');
    const passwordConfirmInput = document.getElementById('password_confirmation');

    togglePasswordConfirm.addEventListener('click', function() {
        const type = passwordConfirmInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordConfirmInput.setAttribute('type', type);
        this.classList.toggle('fa-eye');
        this.classList.toggle('fa-eye-slash');
    });
</script>
@endsection