<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - PinkDesk SwiftCart</title>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Quicksand:wght@500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
        body {
            background: linear-gradient(135deg, #ffe9f3 0%, #fff5f8 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 20px;
        }
        .register-container {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            padding: 40px;
            border-radius: 30px;
            max-width: 550px;
            width: 100%;
            box-shadow: 0 20px 40px rgba(255, 117, 143, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }
        h2 {
            font-family: 'Quicksand', sans-serif;
            color: #ff758f;
            text-align: center;
            margin-bottom: 5px;
        }
        .subtitle {
            font-size: 0.85rem;
            color: #a38a95;
            text-align: center;
            margin-bottom: 25px;
        }
        .input-group { margin-bottom: 15px; }
        .input-group label {
            font-size: 0.7rem;
            color: #ff758f;
            font-weight: 700;
            margin-left: 15px;
            display: block;
            text-transform: uppercase;
            margin-bottom: 5px;
        }
        .input-group input,
        .input-group textarea,
        .input-group select {
            width: 100%;
            padding: 12px 20px;
            border-radius: 50px;
            border: 1px solid #ffe1eb;
            outline: none;
            background: white;
            font-size: 0.9rem;
            transition: 0.3s;
        }
        .input-group input:focus,
        .input-group select:focus,
        .input-group textarea:focus {
            border-color: #ff758f;
            box-shadow: 0 0 10px rgba(255, 117, 143, 0.1);
        }
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        .btn-main {
            width: 100%;
            padding: 14px;
            border-radius: 50px;
            border: none;
            background: linear-gradient(45deg, #ff758f, #ffafcc);
            color: white;
            font-weight: 600;
            cursor: pointer;
            margin-top: 10px;
            transition: 0.3s;
        }
        .btn-main:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        .verify-box {
            background: rgba(255, 175, 204, 0.08);
            border: 2px dashed #ffafcc;
            padding: 18px;
            border-radius: 25px;
            margin: 15px 0;
        }
        .btn-get-code {
            background: #ff85a1;
            border: none;
            color: white;
            padding: 0 20px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            cursor: pointer;
            min-width: 120px;
        }
        textarea { border-radius: 20px !important; resize: none; }
        
        .error-list {
            background: #fff0f3;
            color: #ff4d6d;
            padding: 15px;
            border-radius: 20px;
            margin-bottom: 20px;
            font-size: 0.8rem;
            border: 1px solid #ffccd5;
        }
    </style>
</head>
<body>

<div class="register-container">
    <h2>Create Account 🌸</h2>
    <p class="subtitle">Silakan isi data diri Anda untuk mendaftar</p>

    {{-- Alert Error dari Laravel --}}
    @if ($errors->any())
        <div class="error-list">
            <ul style="list-style: none;">
                @foreach ($errors->all() as $error)
                    <li>• {{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

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

        {{-- Kolom Nama --}}
        <div class="input-group">
            <label>Nama Lengkap</label>
            <input type="text" name="name" id="name" placeholder="Masukkan nama lengkap" required value="{{ old('name') }}">
        </div>

        {{-- Email --}}
        <div class="input-group">
            <label>Alamat Email</label>
            <input type="email" name="email" id="email" placeholder="contoh@email.com" required value="{{ old('email') }}">
        </div>

        {{-- OTP Verifikasi --}}
        <div class="verify-box">
            <div class="input-group" style="margin-bottom:0;">
                <label>Kode Verifikasi</label>
                <div style="display:flex; gap:10px;">
                    <input type="text" name="otp_code" id="otp_code" placeholder="6 Digit" maxlength="6" required>
                    <button type="button" id="btn-send-otp" class="btn-get-code">Dapatkan Kode</button>
                </div>
            </div>
        </div>

        {{-- Password --}}
        <div class="form-grid">
            <div class="input-group">
                <label>Password</label>
                <input type="password" name="password" required>
            </div>
            <div class="input-group">
                <label>Konfirmasi</label>
                <input type="password" name="password_confirmation" required>
            </div>
        </div>

        <button type="submit" class="btn-main">DAFTAR SEKARANG ✨</button>
    </form>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
    // Fungsi Reset Dropdown
    function resetSelect(selector, placeholder) {
        $(selector).empty().append(`<option value="">${placeholder}</option>`);
    }

    // ================= LOGIK OTP =================
    $('#btn-send-otp').on('click', function () {
        let email = $('#email').val();
        let name = $('#name').val(); // Mengambil nama untuk template email
        let btn = $(this);

        if (!name) {
            Swal.fire('Oops!', 'Isi Nama Lengkap dahulu ya 🌸', 'warning');
            return;
        }

        if (!email || !email.includes('@')) {
            Swal.fire('Oops!', 'Masukkan email yang valid dahulu', 'warning');
            return;
        }

        btn.prop('disabled', true).text('Mengirim...');

        $.ajax({
            url: "{{ route('send.code') }}", 
            method: 'POST',
            data: {
                email: email,
                name: name, // Kirim nama agar email tidak error
                _token: '{{ csrf_token() }}'
            },
            success: function (response) {
                if(response.success) {
                    Swal.fire('Berhasil', 'Kode OTP telah dikirim ke email Anda ✨', 'success');
                    let t = 60;
                    let timer = setInterval(() => {
                        t--;
                        btn.text(`Tunggu (${t}s)`);
                        if (t <= 0) {
                            clearInterval(timer);
                            btn.prop('disabled', false).text('Dapatkan Kode');
                        }
                    }, 1000);
                } else {
                    btn.prop('disabled', false).text('Dapatkan Kode');
                    Swal.fire('Gagal', 'Gagal mengirim email.', 'error');
                }
            },
            error: function (xhr) {
                btn.prop('disabled', false).text('Dapatkan Kode');
                let errorMsg = xhr.responseJSON ? xhr.responseJSON.message : 'Gagal mengirim OTP.';
                Swal.fire('Error', errorMsg, 'error');
            }
        });
    });

    // ================= LOGIK WILAYAH =================

    // Provinsi -> Kota
    $('#province').on('change', function () {
        let code = $(this).val();
        resetSelect('#regency', 'Pilih Kota/Kabupaten');
        resetSelect('#district', 'Pilih Kecamatan');
        resetSelect('#village', 'Pilih Desa');
        if (!code) return;

        $.get(`/indoregion/regencies/${code}`, function (data) {
            data.forEach(item => {
                $('#regency').append(`<option value="${item.code}">${item.name}</option>`);
            });
        });
    });

    // Kota -> Kecamatan
    $('#regency').on('change', function () {
        let code = $(this).val();
        resetSelect('#district', 'Pilih Kecamatan');
        resetSelect('#village', 'Pilih Desa');
        if (!code) return;

        $.get(`/indoregion/districts/${code}`, function (data) {
            data.forEach(item => {
                $('#district').append(`<option value="${item.code}">${item.name}</option>`);
            });
        });
    });

    // Kecamatan -> Desa
    $('#district').on('change', function () {
        let code = $(this).val();
        resetSelect('#village', 'Pilih Desa');
        if (!code) return;

        $.get(`/indoregion/villages/${code}`, function (data) {
            data.forEach(item => {
                $('#village').append(`<option value="${item.code}">${item.name}</option>`);
            });
        });
    });
});
</script>

</body>
</html>