@extends('auth.panel')
@section('head')
    <title>Rumah Cuci Si Mamak - Create your account</title>
@endsection
@section('body')
    <form action="{{ route('signup.post')}}" method="POST">
        @csrf
        <div class="login-container">
            <div class="login-head">
                <div class="text-start">
                    <h2>SIGNUP</h2>
                    <p class="mb-0">Create account and start shopping</p>
                </div>
            </div>
            <div class="login-body">
                {{-- Success Message --}}
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                {{-- Error Message --}}
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif

                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" 
                           id="username"
                           name="username" 
                           value="{{ old('username') }}"
                           class="form-control @error('username') is-invalid @enderror"
                           placeholder="Enter your username"
                           required>
                    @error('username')
                        <span class="invalid-feedback text-capitalize">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" 
                           id="email"
                           name="email" 
                           value="{{ old('email') }}"
                           class="form-control @error('email') is-invalid @enderror"
                           placeholder="Enter your email"
                           required>
                    @error('email')
                        <span class="invalid-feedback text-capitalize">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <div class="input-group">
                        <input type="password" 
                               id="password"
                               name="password" 
                               class="form-control @error('password') is-invalid @enderror"
                               placeholder="Enter your password"
                               required>
                        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                            <span id="eyeIcon1">Show</span>
                        </button>
                    </div>
                    <small class="text-muted">Password must be at least 8 characters</small>
                    @error('password')
                        <span class="invalid-feedback text-capitalize d-block">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="password_confirmation" class="form-label">Confirm Password</label>
                    <div class="input-group">
                        <input type="password" 
                               id="password_confirmation"
                               name="password_confirmation" 
                               class="form-control @error('password_confirmation') is-invalid @enderror"
                               placeholder="Confirm your password"
                               required>
                        <button class="btn btn-outline-secondary" type="button" id="togglePasswordConfirm">
                            <span id="eyeIcon2">Show</span>
                        </button>
                    </div>
                    @error('password_confirmation')
                        <span class="invalid-feedback text-capitalize d-block">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <button type="submit" class="btn btn-primary form-control">
                    CREATE ACCOUNT
                </button>
            </div>
            <div class="login-footer">
                <div class="d-block text-center">
                    <p class="mb-0">Already have an account?</p>
                    <a href="{{ route('login') }}" class="text-decoration-none fw-bold">
                        LOGIN HERE
                    </a>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('script')
<script>
    // Toggle password visibility
    document.getElementById('togglePassword').addEventListener('click', function() {
        const password = document.getElementById('password');
        const eyeIcon = document.getElementById('eyeIcon1');
        
        if (password.type === 'password') {
            password.type = 'text';
            eyeIcon.textContent = 'Hide';
            this.title = 'Hide password';
        } else {
            password.type = 'password';
            eyeIcon.textContent = 'Show';
            this.title = 'Show password';
        }
    });

    // Toggle password confirmation visibility
    document.getElementById('togglePasswordConfirm').addEventListener('click', function() {
        const passwordConfirm = document.getElementById('password_confirmation');
        const eyeIcon = document.getElementById('eyeIcon2');
        
        if (passwordConfirm.type === 'password') {
            passwordConfirm.type = 'text';
            eyeIcon.textContent = 'Hide';
            this.title = 'Hide password';
        } else {
            passwordConfirm.type = 'password';
            eyeIcon.textContent = 'Show';
            this.title = 'Show password';
        }
    });

    // Optional: Add form validation feedback
    document.querySelector('form').addEventListener('submit', function(e) {
        const password = document.getElementById('password').value;
        const passwordConfirm = document.getElementById('password_confirmation').value;
        
        if (password !== passwordConfirm) {
            e.preventDefault();
            alert('Password dan konfirmasi password tidak sama!');
        }
    });

    // Optional: Real-time password matching check
    document.getElementById('password_confirmation').addEventListener('input', function() {
        const password = document.getElementById('password').value;
        const passwordConfirm = this.value;
        
        if (passwordConfirm && password !== passwordConfirm) {
            this.classList.add('is-invalid');
        } else {
            this.classList.remove('is-invalid');
        }
    });
</script>
@endsection