<?php 
// Session start PALING AWAL sebelum output apapun
session_start();

require_once "head.php"; 

// ambil pesan error / sukses dari session
$errors = $_SESSION['errors'] ?? [];
$success = $_SESSION['success'] ?? '';
unset($_SESSION['errors'], $_SESSION['success']);
?>

<div class="container">
    <div class="row">  
        <div class="col-xs-12">
            <div class="mb-1">
                <h3 class="d-flex" style="justify-content: space-between;">Daftar Akun</h3>

                <!-- tampilkan error jika ada -->
                <?php if(!empty($errors)): ?>
                    <div class="alert alert-danger">
                        <?php foreach($errors as $e): ?>
                            <p><?php echo htmlspecialchars($e); ?></p>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <!-- tampilkan sukses -->
                <?php if(!empty($success)): ?>
                    <div class="alert alert-success">
                        <p><?php echo htmlspecialchars($success); ?></p>
                    </div>
                <?php endif; ?>

                <!-- PASTIKAN PATH INI BENAR -->
                <form class="register-form form form-horizontal" id="registerForm" method="POST" action="register_process.php">
                    
                    <div class="register_form_one">
                        <div class="sub-title">Rincian Akun</div>
                        <div class="form-group">
                            <div class="col-md-5"><label>Nama pengguna</label></div>
                            <div class="col-md-7">
                                <input type="text" class="form-control" name="user_name" id="user_name" required autocomplete="off" value="<?php echo htmlspecialchars($_POST['user_name'] ?? ''); ?>">
                                <small>* 6-10 karakter (cth: <b>akun1234</b>)</small>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-5"><label>Kata sandi</label></div>
                            <div class="col-md-7">
                                <input type="password" class="form-control" name="password" id="password_1" required> 
                                <small>* Minimal 8 karakter</small>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-5"><label>Konfirmasi Sandi</label></div>
                            <div class="col-md-7">
                                <input type="password" class="form-control" name="password_confirm" id="password_confirm" required>
                            </div>
                        </div>

                        <div class="sub-title">Contact info</div>
                        <div class="form-group">
                            <div class="col-md-5"><label>Alamat email</label></div>
                            <div class="col-md-7">
                                <input type="email" class="form-control" name="email" id="email" required autocomplete="off" value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-5"><label>WA / Nomor telepon</label></div>
                            <div class="col-md-7">
                                <div class="input-group">
                                    <div class="input-group-btn" style="display:table-cell;vertical-align:top;">
                                        <button type="button" style="width: 80px;height:30px" class="btn btn-default">+62</button> 
                                        <input type="hidden" name="contact_country" value="62">
                                    </div>
                                    <input type="tel" class="form-control" id="mobile_no" name="mobile_no" required maxlength="20" style="border-radius: 0 5px 5px 0;" value="<?php echo htmlspecialchars($_POST['mobile_no'] ?? ''); ?>">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-5 col-md-5"><label>Kode Referensi</label></div>
                            <div class="col-xs-7 col-md-7">
                                <input type="text" class="form-control" name="ref_code" value="<?php echo htmlspecialchars($_POST['ref_code'] ?? ''); ?>">
                            </div>
                        </div>
                    </div>

                    <div class="register_form_two" style="display:block;">
                        <div class="sub-title">Informasi bank / e-wallet</div>
                        <div class="form-group">
                            <div class="col-md-5"><label>Nama Sesuai Rekening</label></div>
                            <div class="col-md-7">
                                <input type="text" class="form-control" name="acc_name" required value="<?php echo htmlspecialchars($_POST['acc_name'] ?? ''); ?>">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-5"><label>Jenis Akun Transaksi</label></div>
                            <div class="col-md-7">
                                <div class="row">
                                    <div class="col-xs-6 radio_2">
                                        <input name="method" id="radioBank5" checked type="radio" value="5">
                                        <label for="radioBank5"><span class="radio-title">Bank</span></label>
                                    </div>
                                    <div class="col-xs-6 radio_2">
                                        <input name="method" id="radioEwallet7" type="radio" value="7">
                                        <label for="radioEwallet7"><span class="radio-title">E-wallet</span></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- BANK OPTIONS -->
                        <div class="form-group" id="isShowBankOptions">
                            <div class="col-md-5"><label>Bank</label></div>
                            <div class="col-md-7">
                                <select class="form-control" name="bank_name" id="bankOpts--register">
                                    <option value="BCA">BCA</option>
                                    <option value="BNI">BNI</option>
                                    <option value="MANDIRI">MANDIRI</option>
                                    <option value="BRI">BRI</option>
                                </select>
                            </div>
                        </div>

                        <!-- EWALLET OPTIONS -->
                        <div class="form-group" id="isShowEwalletOptions" style="display:none;">
                            <div class="col-md-5"><label>E-wallet</label></div>
                            <div class="col-md-7">
                                <select class="form-control" name="ewallet_name" id="ewalletOpts--register" disabled>
                                    <option value="DANA">DANA</option>
                                    <option value="OVO">OVO</option>
                                    <option value="GOPAY">GOPAY</option>
                                </select>
                            </div>
                        </div>

                        <!-- NOMOR REKENING -->
                        <div class="form-group">
                            <div class="col-md-5"><label>No. Rekening / ID Wallet</label></div>
                            <div class="col-md-7">
                                <input type="text" class="form-control" name="acc_no" id="acc_no" required minlength="8" value="<?php echo htmlspecialchars($_POST['acc_no'] ?? ''); ?>">
                            </div>
                        </div>

                        <!-- CAPTCHA -->
                        <div class="form-group">
                            <div class="col-md-5"><label>Kode Keamanan</label></div>
                            <div class="col-md-7">
                                <div style="margin-bottom: 10px;">
                                    <img src="captcha.php" id="captcha_image" alt="CAPTCHA" style="border: 1px solid #ddd; border-radius: 4px;">
                                    <button type="button" class="btn btn-sm btn-default" onclick="refreshCaptcha()" style="margin-left: 5px;">
                                        ↻ Refresh
                                    </button>
                                </div>
                                <input type="text" class="form-control" name="captcha" id="captcha" required placeholder="Captcha" autocomplete="off" style="text-transform: uppercase;">
                                <small>* Masukkan 6 karakter kode keamanan</small>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12 text-right" style="padding-top:15px;">
                                <button type="submit" class="btn btn-secondary btn-lg">Submit</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<?php require_once "footer.php"; ?>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function refreshCaptcha() {
    document.getElementById('captcha_image').src = 'captcha.php?' + Date.now();
    document.getElementById('captcha').value = '';
}

$(document).ready(function(){
    // Toggle bank/ewallet options
    $('input[name=method]').change(function(){
        const val = $('input[name=method]:checked').val();
        if(val == '7'){
            // Ewallet
            $('#isShowBankOptions').hide();
            $('#isShowEwalletOptions').show();
            $('#bankOpts--register').prop('disabled', true).removeAttr('name');
            $('#ewalletOpts--register').prop('disabled', false).attr('name', 'bank_name');
        } else {
            // Bank
            $('#isShowBankOptions').show();
            $('#isShowEwalletOptions').hide();
            $('#bankOpts--register').prop('disabled', false).attr('name', 'bank_name');
            $('#ewalletOpts--register').prop('disabled', true).removeAttr('name');
        }
    });
    
    // Auto uppercase captcha input
    $('#captcha').on('input', function(){
        this.value = this.value.toUpperCase();
    });
});
</script>