<?php $__env->startSection('content'); ?>
    <?php
        $policyElements =  getContent('policy_pages.element');
	    $authBackground = getContent('auth_page.content',true)->data_values;
    ?>
    
    <div class="account-section glass-bg" style="background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://img.magnific.com/premium-photo/exciting-cricket-match_810293-111131.jpg?semt=ais_hybrid&w=740&q=80'); background-size: cover; background-position: center; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;">
        <div class="glass-card">
            <div class="inner">
                <div class="account-logo text-center mb-4">
                    <a href="<?php echo e(route('home')); ?>">
                        <img src="<?php echo e(getImage(imagePath()['logoIcon']['path'] .'/logo.png')); ?>" alt="logo" style="max-width: 180px;">
                    </a>
                </div>
                
                <h4 class="text-center text-white mb-4">Create Your Account</h4>
                
                <form class="account-form" action="<?php echo e(route('user.register')); ?>" method="POST" id="registrationForm">
                    <?php echo csrf_field(); ?>

                    <?php if(session()->get('reference') != null): ?>
                        <div class="form-group mb-3">
                            <label class="text-white mb-2"><?php echo app('translator')->get('Reference By'); ?></label>
                            <input type="text" class="form-control glass-input" name="referBy" value="<?php echo e(session()->get('reference')); ?>" readonly>
                        </div>
                    <?php endif; ?>

                    <div class="form-group mb-3">
                        <label class="text-white mb-2"><?php echo app('translator')->get('Full Name'); ?> <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text glass-icon"><i class="las la-user"></i></span>
                            <input type="text" class="form-control glass-input" name="firstname" value="<?php echo e(old('firstname')); ?>" placeholder="Enter your name" required>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="text-white mb-2"><?php echo app('translator')->get('Mobile Number'); ?> <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text glass-icon">+91</span>
                            <input type="text" class="form-control glass-input checkUser" name="mobile" id="mobile" value="<?php echo e(old('mobile')); ?>" placeholder="Enter mobile number" required>
                        </div>
                        <small class="text-danger mobileExist"></small>
                    </div>

                    <div class="form-group mb-4" id="sendOtpContainer">
                        <button type="button" class="btn send-otp-btn w-100" id="sendOtpBtn"><?php echo app('translator')->get('Send OTP'); ?></button>
                    </div>

                    <div class="form-group mb-3" id="otpFieldContainer" style="display: none;">
                        <label class="text-white mb-2"><?php echo app('translator')->get('Enter OTP'); ?> <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text glass-icon"><i class="las la-key"></i></span>
                            <input type="text" class="form-control glass-input" name="otp" id="otpInput" placeholder="Enter 6 digit OTP (999999)" required>
                        </div>
                        <small class="text-success mt-2 d-block">OTP has been sent to your mobile number.</small>
                    </div>

                    <?php if($general->agree): ?>
                        <div class="form-group mb-4">
                            <div class="form-check custom-check">
                                <input class="form-check-input" type="checkbox" id="agree" name="agree" checked required>
                                <label class="form-check-label text-white" for="agree">
                                    <?php echo app('translator')->get('I agree with'); ?> 
                                    <?php $__currentLoopData = $policyElements; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <a href="<?php echo e(route('policy.details',[slug(@$item->data_values->title),$item->id])); ?>" class="text--base"> <?php echo e(__($item->data_values->title)); ?></a><?php if(!$loop->last): ?>, <?php endif; ?>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </label>
                            </div>
                        </div>
                    <?php endif; ?>

                    <div class="form-group mb-3" id="registerBtnContainer" style="display: none;">
                        <button type="submit" class="btn submit-btn w-100"><?php echo app('translator')->get('Register Now'); ?></button>
                    </div>

                    <div class="text-center mt-4">
                        <p class="text-white"><?php echo app('translator')->get('Already have an account?'); ?> <a href="<?php echo e(route('user.login')); ?>" class="text--base font-weight-bold"><?php echo app('translator')->get('Login Now'); ?></a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="existModalCenter" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content glass-modal">
                <div class="modal-header border-0">
                    <h5 class="modal-title text-white"><?php echo app('translator')->get('Account Exists'); ?></h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-white text-center">
                    <p><?php echo app('translator')->get('You already have an account with this mobile number.'); ?></p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?php echo app('translator')->get('Close'); ?></button>
                    <a href="<?php echo e(route('user.login')); ?>" class="btn submit-btn"><?php echo app('translator')->get('Login'); ?></a>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('style'); ?>
<style>
    .glass-bg {
        background-attachment: fixed !important;
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 40px;
        width: 100%;
        max-width: 450px;
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
    }
    .glass-input {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border-radius: 10px !important;
        padding: 12px 15px !important;
    }
    .glass-input::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    .glass-input:focus {
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: #00d2ff !important;
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
    }
    .glass-icon {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #00d2ff !important;
        border-radius: 10px 0 0 10px !important;
    }
    .send-otp-btn {
        background: linear-gradient(45deg, #00d2ff, #3a7bd5);
        border: none;
        color: white;
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .send-otp-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4);
        color: white;
    }
    .submit-btn {
        background: linear-gradient(45deg, #f093fb, #f5576c);
        border: none;
        color: white;
        padding: 12px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
        color: white;
    }
    .text--base {
        color: #00d2ff !important;
        text-decoration: none;
    }
    .custom-check .form-check-input {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
    }
    .custom-check .form-check-input:checked {
        background-color: #00d2ff;
        border-color: #00d2ff;
    }
    .glass-modal {
        background: rgba(20, 20, 20, 0.85);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('script'); ?>
    <script>
        (function ($) {
            "use strict";
            
            $('#sendOtpBtn').on('click', function() {
                var mobile = $('#mobile').val();
                if(!mobile) {
                    notify('error', 'Please enter your mobile number first.');
                    return;
                }
                
                $(this).html('<i class="las la-spinner la-spin"></i> Sending...');
                
                // Simulate OTP sending
                setTimeout(function() {
                    $('#sendOtpContainer').fadeOut(300, function() {
                        $('#otpFieldContainer').fadeIn(300);
                        $('#registerBtnContainer').fadeIn(300);
                    });
                }, 1000);
            });

            $('.checkUser').on('focusout',function(e){
                var url = '<?php echo e(route('user.checkUser')); ?>';
                var value = $(this).val();
                var token = '<?php echo e(csrf_token()); ?>';
                if ($(this).attr('name') == 'mobile') {
                    var mobile = `91${value}`;
                    var data = {mobile:mobile,_token:token}
                }
                $.post(url,data,function(response) {
                  if(response['data'] != null){
                    $('#existModalCenter').modal('show');
                    $(`.${response['type']}Exist`).text(`${response['type']} already exists`);
                  }else{
                    $(`.${response['type']}Exist`).text('');
                  }
                });
            });
        })(jQuery);
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make($activeTemplate.'layouts.auth', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home2/flightbo/public_html/skycrestaviationacademy.com/core/resources/views/templates/basic/user/auth/register.blade.php ENDPATH**/ ?>