@extends('backend.auth.layout')
@section('title', 'Register')
@section('content')
    <div class="min-h-screen flex items-center justify-center p-4" x-data="registerForm">
        <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-200">

            <div class="p-6 sm:p-8 lg:p-10 bg-white">
                <div class="text-center space-y-3 mb-8">
                    <div class="space-y-2">
                        <h2 class="text-lg font-semibold text-gray-800">Register New Account</h2>
                        <p class="text-sm text-gray-600">
                            Complete the form below to create a new account and join us.
                        </p>
                    </div>
                </div>

                <template x-if="registrationSuccess">
                    <div class="rounded-lg bg-green-50 border border-green-200 px-4 py-4 mb-6">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <i class="fa-solid fa-check-circle text-green-400 text-lg"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-green-800">Registration successful!</h3>
                                <div class="mt-2 text-sm text-green-700">
                                    <p>Your account has been successfully created. Welcome to our platform!</p>
                                    <p class="mt-2 font-medium">You will be redirected to the dashboard in <span
                                            x-text="countdown"></span> seconds...</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <template x-if="errorMessage && !registrationSuccess">
                    <div class="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-600 mb-6"
                        x-text="errorMessage"></div>
                </template>

                <template x-if="!registrationSuccess">
                    <form @submit.prevent="submitForm" action="">
                        @csrf
                        <div class="space-y-5">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Full Name
                                </label>
                                <input
                                    class="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm placeholder-gray-400
                                focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800/20
                                transition-colors"
                                    name="name" type="text" placeholder="Enter your full name" x-model="formData.name"
                                    required>

                                <template x-if="validationErrors.name">
                                    <p class="text-xs text-red-500 mt-1" x-text="validationErrors.name[0]"></p>
                                </template>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Email Address
                                </label>
                                <input
                                    class="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm placeholder-gray-400
                                focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800/20
                                transition-colors"
                                    name="email" type="email" placeholder="Enter your email address"
                                    x-model="formData.email" required>

                                <template x-if="validationErrors.email">
                                    <p class="text-xs text-red-500 mt-1" x-text="validationErrors.email[0]"></p>
                                </template>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Password
                                </label>
                                <input
                                    class="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm placeholder-gray-400
                                focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800/20
                                transition-colors"
                                    name="password" type="password" placeholder="Enter your password"
                                    x-model="formData.password" required>

                                <template x-if="validationErrors.password">
                                    <p class="text-xs text-red-500 mt-1" x-text="validationErrors.password[0]"></p>
                                </template>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    Confirm Password
                                </label>
                                <input
                                    class="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm placeholder-gray-400
                                focus:border-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-800/20
                                transition-colors"
                                    name="password_confirmation" type="password" placeholder="Confirm your password"
                                    x-model="formData.password_confirmation" required>
                            </div>

                            <div class="flex items-start">
                                <input id="terms" name="terms" type="checkbox" x-model="formData.terms" required
                                    class="mt-1 h-4 w-4 text-gray-800 focus:ring-gray-700 border-gray-300 rounded">
                                <label for="terms" class="ml-3 text-sm text-gray-700">
                                    I agree to the
                                    <a href="#"
                                        class="font-medium text-gray-900 hover:text-gray-700 underline hover:no-underline">Terms
                                        of Service</a>
                                    and
                                    <a href="#"
                                        class="font-medium text-gray-900 hover:text-gray-700 underline hover:no-underline">Privacy
                                        Policy</a>
                                </label>
                            </div>

                            <button
                                class="w-full bg-gradient-to-r from-gray-900 to-gray-800 text-white font-medium py-3 px-4 rounded-lg hover:from-gray-800 hover:to-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-60 shadow-lg transition-all duration-200"
                                type="submit" :disabled="isLoading">
                                <template x-if="!isLoading">
                                    <span class="flex items-center justify-center gap-2">
                                        Register Now
                                    </span>
                                </template>
                                <template x-if="isLoading">
                                    <span class="flex items-center justify-center gap-2">
                                        <i class="fa-solid fa-spinner fa-spin"></i>
                                        Registering...
                                    </span>
                                </template>
                            </button>
                        </div>
                    </form>
                </template>

                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-600 font-medium">
                        Already
                        have an account?
                        <a href="{{ route('backend.auth.login') }}"
                            class="text-gray-800 hover:text-gray-900 font-medium underline hover:no-underline">
                            Log in here
                        </a>
                    </p>
                </div>

            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('registerForm', () => ({
                formData: {
                    name: '',
                    email: '',
                    password: '',
                    password_confirmation: '',
                    terms: false
                },
                isLoading: false,
                registrationSuccess: false,
                errorMessage: '',
                validationErrors: {},
                countdown: 3,

                async submitForm(event) {
                    this.isLoading = true;
                    this.errorMessage = '';
                    this.validationErrors = {};

                    // Simulasi request berhasil - ganti dengan actual API call
                    setTimeout(() => {
                        this.registrationSuccess = true;
                        this.isLoading = false;
                        this.startCountdown();
                    }, 2000);

                    // Uncomment untuk actual form submission:
                    /*
                    const formData = new FormData(event.target);

                    try {
                        const response = await fetch(event.target.action, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json',
                            },
                            body: formData
                        });

                        const data = await response.json();

                        if (response.ok) {
                            this.registrationSuccess = true;
                            this.startCountdown();
                        } else {
                            if (data.errors) {
                                this.validationErrors = data.errors;
                            } else {
                                this.errorMessage = data.message || 'Terjadi kesalahan. Silakan coba lagi.';
                            }
                        }
                    } catch (error) {
                        this.errorMessage = 'Network error. Periksa koneksi internet Anda.';
                    } finally {
                        this.isLoading = false;
                    }
                    */
                },

                startCountdown() {
                    const timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            clearInterval(timer);
                            // Redirect ke dashboard atau login
                            window.location.href = "{{ route('backend.auth.login') }}";
                        }
                    }, 1000);
                }
            }));
        });
    </script>
@endsection