@extends('frontend.layouts.app')

@section('content')
    <div id="showM">
        <div class="overlap g8mmenu-close"></div>
        @include('frontend.partials.mobile.header')
        @include('frontend.partials.mobile.sidebar-menu')

        <div class="content">
            <div class="register-body">
                <div class="modal-signup__dialog-body">
                    <form id="ajax-form-join-mob" action="{{ route('api.register') }}" method="POST" novalidate="novalidate">
                        @csrf
                        <div class="form-container">
                            <div class="form-input">
                                <div class="form-group">
                                    <label><span>*</span> Username / Nama Pengguna</label>
                                    <input type="text" class="form-control required" id="regbank-username-mob" name="username" maxlength="12" minlength="6" placeholder="Minimal 6 huruf / angka">
                                </div>
                                <div class="form-group">
                                    <label><span>*</span> Email</label>
                                    <input type="text" class="form-control required email" name="email" maxlength="255" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <label><span>*</span> Password</label>
                                    <input type="password" class="form-control required password" id="password-mob" name="password" maxlength="20" minlength="6" placeholder="Minimal 6 huruf & angka">
                                </div>
                                <div class="form-group">
                                    <label><span>*</span> Confirm Password</label>
                                    <input type="password" class="form-control required password" name="confirmPassword" maxlength="20" minlength="6" equalto="#password-mob" placeholder="Ulangi password">
                                </div>
                            </div>
                            <div class="form-input">
                                <div class="form-group">
                                    <label><span>*</span> Contact Number / Nomor Handphone</label>
                                    <input type="text" class="form-control required number" id="regbank-phone-mob" name="mobile" maxlength="15" minlength="7" placeholder="08xxx">
                                </div>
                                <div class="form-group regbank">
                                    <label><span>*</span> Bank</label>
                                    <select id="bank" name="bank" class="form-control required bank-getbank">
                                        <option value="">Please select your bank.</option>
                                    </select>
                                    </div>
                                <div class="form-group regbank regbank-info">
                                    <label><span>*</span> Bank Account No / Nomor Rekening</label>
                                    <input type="text" class="form-control required" id="regbank-accno-mob" name="accNo" minlength="9" maxlength="16">
                                </div>
                                <div class="form-group regbank regbank-info">
                                    <label><span>*</span> Bank Account Name / Nama Rekening</label>
                                    <input type="text" class="form-control required" id="regbank-accname-mob" name="bankAccName" maxlength="25" placeholder="nama sesuai di buku tabungan">
                                </div>
                                <div class="form-group g8-refid" style="{{ $referral ? 'display:block' : 'display:none' }}">
                                    <label>Referral ID</label>
                                    {{-- Input rcode untuk tampilan, jika ada referral maka dibuat readonly --}}
                                    <input type="text" 
                                           class="form-control g8-rcode" 
                                           name="rcode" 
                                           value="{{ $referral }}" 
                                           {{ $referral ? 'readonly' : '' }} 
                                           maxlength="12" 
                                           placeholder="Masukkan kode referral (opsional)">
                                    
                                    {{-- Input hidden rid untuk dikirim ke API --}}
                                    <input type="hidden" class="g8-rid-hidden" name="rid" value="{{ $referral }}">
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="button button--register">Daftar Akun</button>
                    </form>
                </div>
            </div>
        </div>

        @include('frontend.partials.mobile.bottom-nav')
        @include('frontend.partials.mobile.floating-icon')
    </div>
    <div id="showD">
        @include('frontend.partials.desktop.header')

        <section class="slider">
            <section class="marquee">
                <div class="wrapper">
                    <div class="s-a">
                        <div class="marquee__bullhorn">
                            <i class="fas fa-bullhorn"></i>
                        </div>
                    </div>
                </div>
            </section>
        </section>
        <section class="featured">
            <div class="wrapper">
                <div class="register-body">
                    <div class="modal-signup__dialog-body">
                        <div class="img-container">
                            <picture>
                                <source srcset="{{ asset('uploads/'. general()->logo) }}" type="image/webp">
                                <img src="{{ asset('uploads/'. general()->logo) }}" width="600" height="210" alt="Logo {{ general()->brand }}" loading="lazy" style="filter:brightness(100%)">
                            </picture>
                        </div>
                        <form id="ajax-form-join-special" action="{{ route('api.register') }}" method="POST" novalidate="novalidate">
                            @csrf
                            <div class="form-container">
                                <div class="form-input">
                                    <div class="form-group">
                                        <label><span>*</span> Username / Nama Pengguna</label>
                                        <input type="text" class="form-control required" id="regbank-username" name="username" maxlength="12" minlength="6" placeholder="Minimal 6 huruf / angka">
                                    </div>
                                    <div class="form-group">
                                        <label><span>*</span> Email</label>
                                        <input type="text" class="form-control required email" name="email" maxlength="255" placeholder="Email">
                                    </div>
                                    <div class="form-group">
                                        <label><span>*</span> Password</label>
                                        <input type="password" class="form-control required password" id="password" name="password" maxlength="20" minlength="6" placeholder="Minimal 6 huruf & angka">
                                    </div>
                                    <div class="form-group">
                                        <label><span>*</span> Confirm Password</label>
                                        <input type="password" class="form-control required password" name="confirmPassword" maxlength="20" minlength="6" equalto="#password" placeholder="Ulangi password">
                                    </div>
                                    <div class="form-group g8-refid" style="{{ $referral ? 'display:block' : 'display:none' }}">
                                        <label>Referral ID</label>
                                        {{-- Input rcode untuk tampilan, jika ada referral maka dibuat readonly --}}
                                        <input type="text" 
                                               class="form-control g8-rcode" 
                                               name="rcode" 
                                               value="{{ $referral }}" 
                                               {{ $referral ? 'readonly' : '' }} 
                                               maxlength="12" 
                                               placeholder="Masukkan kode referral (opsional)">
                                        
                                        {{-- Input hidden rid untuk dikirim ke API --}}
                                        <input type="hidden" class="g8-rid-hidden" name="rid" value="{{ $referral }}">
                                    </div>
                                </div>
                                <div class="form-input">
                                    <div class="form-group">
                                        <label><span>*</span> Contact Number / Nomor Handphone</label>
                                        <input type="text" class="form-control required number" id="regbank-phone" name="mobile" maxlength="15" minlength="7" placeholder="08xxx">
                                    </div>
                                    <div class="form-group regbank">
                                        <label><span>*</span> Bank</label>
                                        <select id="bank" name="bank" class="form-control required bank-getbank">
                                            <option value="">Please select your bank.</option>
                                        </select>
                                        </div>
                                    <div class="form-group regbank regbank-info">
                                        <label><span>*</span> Bank Account No / Nomor Rekening</label>
                                        <input type="text" class="form-control required number" id="regbank-accno" name="accNo" minlength="8" maxlength="20">
                                    </div>
                                    <div class="form-group regbank regbank-info">
                                        <label><span>*</span> Bank Account Name / Nama Rekening</label>
                                        <input type="text" class="form-control required" id="regbank-accname" name="bankAccName" maxlength="25" placeholder="nama sesuai di buku tabungan">
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="button button--register">Daftar Akun</button>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        @include('frontend.partials.desktop.sidebar')
        @include('frontend.partials.desktop.footer')
        @include('frontend.partials.desktop.floating-icon')
    </div>
    @include('frontend.partials.modals.forgot-password')
    @include('frontend.partials.modals.login')
@endsection

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            const paymentMethods = {
                "Bank Lokal": ["BCA", "BNI", "BRI", "MANDIRI", "CIMB NIAGA", "DANAMON", "PERMATA", "BSI", "BTN"],
                "Bank Digital": ["BANK JAGO", "SEABANK", "BLU BY BCA", "JENIUS"],
                "E-Wallet & QRIS": ["DANA", "GOPAY", "OVO", "SHOPEEPAY", "LINKAJA"]
            };

            const $bankSelects = $('.bank-getbank');
            $.each(paymentMethods, function(groupName, items) {
                let $optgroup = $('<optgroup>').attr('label', groupName);
                $.each(items, function(index, item) {
                    $optgroup.append($('<option>').val(item).text(item));
                });
                $bankSelects.append($optgroup);
            });

            $(document).on('keyup', 'input[name="rcode"]', function() {
                $('input[name="rid"]').val($(this).val());
            });
            
            if($('input[name="rcode"]').val() !== "") {
                $('input[name="rid"]').val($('input[name="rcode"]').val());
            }

            $('#ajax-form-join-mob, #ajax-form-join-special').on('submit', function(e) {
                e.preventDefault(); // Cegah reload halaman

                let $form = $(this);
                let $btnSubmit = $form.find('button[type="submit"]');
                let originalBtnText = $btnSubmit.text();

                let requestData = {
                    username: $form.find('input[name="username"]').val(),
                    email: $form.find('input[name="email"]').val(),
                    password: $form.find('input[name="password"]').val(),
                    cpassword: $form.find('input[name="confirmPassword"]').val(), // Controller butuh cpassword
                    phone: $form.find('input[name="mobile"]').val(),             // Controller butuh phone
                    bankName: $form.find('select[name="bank"]').val(),           // Controller butuh bankName
                    accNumber: $form.find('input[name="accNo"]').val(),          // Controller butuh accNumber
                    accName: $form.find('input[name="bankAccName"]').val(),      // Controller butuh accName
                    referral: $form.find('input[name="rid"]').val() || '',       // Controller butuh referral
                    captcha: $form.find('input[name="captcha"]').val() || ''     // Controller butuh captcha
                };

                // Validasi dasar Frontend sebelum tembak Backend
                if(!requestData.username || !requestData.password || !requestData.bankName || !requestData.accNumber) {
                    alert('Mohon lengkapi semua data bertanda bintang (*)');
                    return;
                }

                if(requestData.password !== requestData.cpassword) {
                    alert('Konfirmasi password tidak sesuai!');
                    return;
                }

                // AJAX Request
                $.ajax({
                    // Menggunakan nama route yang Anda definisikan: 'api.register'
                    url: "{{ route('api.register') }}", 
                    type: "POST",
                    data: requestData,
                    
                    // headers: {
                    //    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    // },

                    beforeSend: function() {
                        // Kunci tombol agar user tidak spam klik (Double Submit Prevention)
                        $btnSubmit.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Memproses...');
                    },
                    success: function(response) {
                        // Jika Controller mengembalikan 201 Created / Success
                        if (response.success) {
                            alert(response.message); 
                            
                            // Redirect ke URL dari controller
                            if(response.redirect_url) {
                                window.location.href = response.redirect_url;
                            } else {
                                window.location.href = '/'; 
                            }
                        }
                    },
                    error: function(xhr) {
                        // Kembalikan tombol seperti semula
                        $btnSubmit.prop('disabled', false).text(originalBtnText);

                        // Ambil pesan error dari Controller
                        let res = xhr.responseJSON;
                        let errorMessage = 'Terjadi kesalahan sistem. Silakan coba beberapa saat lagi.';

                        if (res && res.message) {
                            errorMessage = res.message;
                        } else if (xhr.status === 422) {
                            errorMessage = 'Data tidak valid atau Captcha salah.';
                            $('.captcha-img').click(); // Refresh captcha
                        } else if (xhr.status === 409) {
                            errorMessage = 'Username atau Nomor HP sudah digunakan.';
                        } else if (xhr.status === 502) {
                            errorMessage = 'Sedang gangguan pada server permainan. Coba lagi nanti.';
                        }

                        // Tampilkan pesan error
                        alert(errorMessage); 
                    }
                });
            });
        });
    </script>
@endpush