@extends("app")

@section('head_title', 'Register | '.getcong('site_name'))
@section('head_url', Request::url())

@section("content")
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<style type="text/css">
#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}
.loader {
  border: 2px solid #fff;              /* outer ring */
  border-top: 2px solid transparent;   /* makes the gap */
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>

<div class="tp-page-head">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h1>Register</h1>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tp-breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <ol class="breadcrumb">
                    <li><a href="{{ URL::to('/') }}">Home</a></li>
                    <li class="active">Register</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="main-container">
    <div class="container">
        <div class="row">
            <div class="col-md-12 tp-title-center">
                <h1>Create an account</h1>
            </div>
        </div>

        <div class="col-md-offset-3 col-md-6 well-box">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active vendor-login" id="home">

                    {{-- Error / Success Messages --}}
                    <div class="message">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                <ul style="list-style: none;">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if (session('flash_message'))
                            <div class="alert alert-success fade in">
                                <button type="button" class="close" data-dismiss="alert">&times;</button>
                                {{ session('flash_message') }}
                            </div>
                        @endif
                    </div>

                    {!! Form::open(['url' => 'register', 'method' => 'post', 'role' => 'form']) !!}

                    {{-- Name --}}
                    <div class="form-group">
                        <label for="first_name">First Name <span class="required">*</span></label>
                        <input type="text" name="first_name" value="{{ old('first_name') }}" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="last_name">Last Name <span class="required">*</span></label>
                        <input type="text" name="last_name" value="{{ old('last_name') }}" class="form-control" required>
                    </div>

                    {{-- Mobile --}}
                    <div class="form-group">
                        <label for="mobile">Mobile Number <span class="required">*</span></label>
                        <input type="text" name="mobile" value="{{ old('mobile') }}" class="form-control" minlength="10" maxlength="10" required>
                    </div>

                    {{-- Email + OTP --}}
                    <div class="form-group">
                        <label for="email">Email <span class="required">*</span></label>
                        <input type="email" name="email" id="email" value="{{ old('email') }}" class="form-control" required>
                        
                        <!-- <button type="button" class="btn btn-info btn-sm" id="sendOtpBtn" style="margin-top:5px;">Send OTP</button> -->
                      <button  id="otpLoader" type="button" class="btn btn-info btn-sm" style="margin-top:5px; display:none; position:relative;">
                        <span  style="display:block; margin-left:8px; border:2px solid #fff; border-top:2px solid transparent; border-radius:50%; width:14px; height:14px; animation: spin 0.8s linear infinite;"></span>
</button> 
                        <button type="button" class="btn btn-info btn-sm" id="sendOtpBtn" style="margin-top:5px; position:relative;">
                            Send OTP
                           </button>
                        <small id="emailStatus" class="text-success" style="display:none;"></small>
                    </div>

                    <div class="form-group" id="otpSection" style="display:none;">
                        <label>Enter OTP</label>
                        <input type="text" id="otp" class="form-control" maxlength="6">
                        <button type="button" class="btn btn-primary btn-sm" id="verifyOtpBtn" style="margin-top:5px;">Verify OTP</button>
                        <small id="otpError" class="text-danger" style="display:none;"></small>
                    </div>

                    {{-- Passwords --}}
                    <div class="form-group">
                        <label for="password">Password <span class="required">*</span></label>
                        <div style="position: relative;">
                            <input type="password" name="password" class="form-control" required>
                            <i class="fa fa-eye" onclick="togglePassword(this)" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #888;"></i>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password_confirmation">Confirm Password <span class="required">*</span></label>
                        <div style="position: relative;">
                            <input type="password" name="password_confirmation" class="form-control" required>
                            <i class="fa fa-eye" onclick="togglePassword(this)" style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #888;"></i>
                        </div>
                    </div>

                    {{-- User Type --}}
                    <div class="form-group">
                        <label for="usertype">Type of User <span class="required">*</span></label>
                        <select name="usertype" id="usertype" class="form-control" required>
                            <!-- <option value="">-- Select --</option> -->
                            <option value="User" {{ old('usertype')=='User' ? 'selected' : '' }}>Individual</option>
                            <option value="hotelier" {{ old('usertype')=='hotelier' ? 'selected' : '' }}>Hotelier</option>
                            <option value="Corporate" {{ old('usertype')=='Corporate' ? 'selected' : '' }}>Corporate</option>
                            <option value="Agent" {{ old('usertype')=='Agent' ? 'selected' : '' }}>Agent</option>
                        </select>
                    </div>

                    {{-- Company & Address --}}
                    <div class="form-group" id="companyGroup">
                        <label for="company">Company</label>
                        <input type="text" name="company" id="company" value="{{ old('company') }}" class="form-control">
                    </div>
                    <div class="form-group" id="addressGroup">
                        <label for="address">Address</label>
                        <textarea name="address" id="address" class="form-control">{{ old('address') }}</textarea>
                    </div>

                 

                    {{-- Terms --}}
                    <div class="form-group">
                        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                            <input type="checkbox" required>
                            <span>
                                I have read the <a href="{{ URL::to('termsandconditions') }}" target="_blank">{{ getcong('terms_of_title') }}</a> and agree to them.
                            </span>
                        </label>
                    </div>

                    {{-- Submit --}}
                    <div class="form-group text-center">
                        <button type="submit" id="registerBtn" class="btn tp-btn-primary tp-btn-lg" disabled>Register</button>
                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Toggle password visibility
function togglePassword(el) {
    const input = el.previousElementSibling;
    if (input.type === 'password') {
        input.type = 'text';
        el.classList.remove('fa-eye');
        el.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        el.classList.remove('fa-eye-slash');
        el.classList.add('fa-eye');
    }
}

// Show/hide company & address based on usertype
const userTypeSelect = document.getElementById('usertype');
const companyGroup = document.getElementById('companyGroup');
const addressGroup = document.getElementById('addressGroup');
const companyInput = document.getElementById('company');
const addressInput = document.getElementById('address');

function toggleCompanyAddress() {
    if (userTypeSelect.value === 'User') {
        companyGroup.style.display = 'none';
        addressGroup.style.display = 'none';
        companyInput.value = '';
        addressInput.value = '';
    } else {
        companyGroup.style.display = 'block';
        addressGroup.style.display = 'block';
    }
}
window.addEventListener('DOMContentLoaded', toggleCompanyAddress);
userTypeSelect.addEventListener('change', toggleCompanyAddress);

// reCAPTCHA required
window.onload = function() {
    var recaptcha = document.querySelector('#g-recaptcha-response');
    if (recaptcha) recaptcha.setAttribute("required", "required");
};

// OTP functionality
const sendOtpBtn = document.getElementById('sendOtpBtn');
const otpSection = document.getElementById('otpSection');
const otpInput = document.getElementById('otp');
const otpError = document.getElementById('otpError');
const registerBtn = document.getElementById('registerBtn');
const emailField = document.getElementById('email');
const emailStatus = document.getElementById('emailStatus');

// sendOtpBtn.addEventListener('click', function(){
//     const email = emailField.value.trim();
//     if(!email) return alert('Enter email');

//     fetch("{{ url('send-otp') }}", {
//         method:'POST',
//         headers:{ 'X-CSRF-TOKEN':'{{ csrf_token() }}', 'Content-Type':'application/json' },
//         body: JSON.stringify({email})
//     }).then(res=>res.json())
//     .then(data=>{
//         if(data.status==="success"){
//             otpSection.style.display='block';
//             emailField.readOnly = true;
//             emailStatus.style.display='block';
//             emailStatus.innerText='OTP sent! Enter below to verify.';
//         } else {
//             alert(data.message || 'Error sending OTP');
        
//         }
//     });
// });
const otpLoader = document.getElementById('otpLoader');

sendOtpBtn.addEventListener('click', function(){
    const email = emailField.value.trim();
    if(!email) return alert('Enter email');

    // Show loader inside button
    sendOtpBtn.disabled = true;
    sendOtpBtn.style.display = "none";
    otpLoader.style.display = 'block';

    fetch("{{ url('send-otp') }}", {
        method:'POST',
        headers:{ 'X-CSRF-TOKEN':'{{ csrf_token() }}', 'Content-Type':'application/json' },
        body: JSON.stringify({email})
    }).then(res=>res.json())
    .then(data=>{
        if(data.status==="success"){
            otpSection.style.display='block';
            emailField.readOnly = true;
            emailStatus.style.display='block';
            sendOtpBtn.innerText = "Resend OTP";
            emailStatus.innerText='OTP sent! Enter below to verify.';
        } else {
            alert(data.message || 'Error sending OTP');
        }
    }).catch(()=>{
        alert("Something went wrong. Try again.");
    }).finally(()=>{
        // Hide loader
        sendOtpBtn.disabled = false;
        otpLoader.style.display = 'none';
         sendOtpBtn.style.display = "inline-block";
    });
});


document.getElementById('verifyOtpBtn').addEventListener('click', function(){
    const email = emailField.value;
    const otp = otpInput.value.trim();

    if(!otp){
        otpError.style.display='block';
        otpError.innerText='Enter OTP';
        return;
    }

    fetch("{{ url('verify-otp') }}", {
        method:'POST',
        headers:{ 'X-CSRF-TOKEN':'{{ csrf_token() }}', 'Content-Type':'application/json' },
        body: JSON.stringify({email, otp})
    }).then(res=>res.json())
    .then(data=>{
        if(data.status==='success'){
            otpError.style.display='none';
            registerBtn.disabled=false;
            emailStatus.innerText='Email verified! You can now register.';
        } else {
            otpError.style.display='block';
            otpError.innerText=data.message || 'Invalid OTP';
        }
    });
});
</script>
@endsection