@extends('layouts.header')
@section('content')
<div class="ob-mian-content">
            @include('layouts.navbar')
           <div class="ob-mian-container">
                <div class="section-head">
                    <a href="{{ route('login',$businessslug) }}" class="back-btn"><img src="{{ asset('images/back-btn.svg') }}" alt="back" width="6" height="12"> Back to Log In</a>
                    <h2 class="h2-head">Create an Account</h2>
                    <p>An account must be created in order to make an appointment.</p>
                </div>
                <div class="ob-mian-container-inner">
                    <div class="ob-register-card">
                        @if($errors->any())
                              <div class="alert alert-danger">
                                @foreach ($errors->all() as $error)
                                    {{ $error }} <br/>
                                @endforeach
                              </div>
                          @endif
                        <form method="post" id="register_form" class="needs-validation" novalidate action="{{ route('register',$businessslug) }}">
                             <div class="row">
                                <div class="col-12 col-sm-12 col-md-4">
                                    <h3 class="heading_20">Register</h3>
                                    <div class="form-group mb-3">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                                        @if ($agent->isDesktop())
                                        <input type="hidden" value="2" name="register_source">
                                        @else
                                        <input type="hidden" value="1" name="register_source">
                                        @endif
                                        <label for="" class="form-label required-label">Email Address</label>
                                        <input type="text" class="form-control" name="email" id="email" value="" placeholder="Email Address" required>
                                        <div class="invalid-feedback" id="e_email"></div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="" class="form-label required-label">Mobile Number</label>
                                        <input type="tel" maxlength="10" class="form-control" name="phone" id="phone"  value="" placeholder="Mobile Number" required>
                                        <div class="invalid-feedback" id="e_phone"></div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="" class="form-label required-label">First Name</label>
                                        <input type="text" class="form-control" name="first_name" id="first_name"  value="" placeholder="First Name" required>
                                        <div class="invalid-feedback" id="e_firstname">
                                           
                                        </div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="" class="form-label required-label">Last Name</label>
                                        <input type="text" class="form-control" name="last_name" id="last_name" value="" placeholder="Last Name" required>
                                        <div class="invalid-feedback" id="e_last_name"></div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="" class="form-label required-label">Birthday</label>
                                        <input type="text" class="form-control" name="birthday" id="birthday" value="" placeholder="MM/DD/YYYY" required>
                                        <div class="invalid-feedback" id='e_birthday'></div>
                                        <div class="birthday-txt text-end">
                                            <a href="#minorPolicy" data-bs-toggle="modal">Why my birthday?</a>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback text-center">
                                        Login failed. Please try again or create a new account.
                                    </div> 
                                </div>
                                <div class="col-12 col-sm-12 col-md-4">
                                    <h3 class="heading_20">Create a Password <a href="#" data-bs-html="true" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover" data-bs-custom-class="custom-popover" data-bs-content="<div class='password-popover'><h3>Your password must:</h3> <ul> <li>Contain at least 8 characters</li> <li>Contain both uppercase and lowercase letters</li> <li>Contain 1 number</li> <li>Contain 1 special character</li></ul> </div>"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><g id="Component_1_2" data-name="Component 1 – 2" transform="translate(1 1)"><path id="Path_444" data-name="Path 444" d="M129,216v-4m0-4h.01m9.99,4a10,10,0,1,1-10-10A10,10,0,0,1,139,212Z" transform="translate(-119 -202)" fill="none" stroke="#b8c2cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
                                    </a></h3>
                                    <div class="form-group mb-3">
                                        <label for="" class="form-label required-label">Password</label>
                                        <input type="password" class="form-control"  name="password" id="password" value="" placeholder="Password" required>
                                        <div class="invalid-feedback" id="e_password"></div>
                                    </div>
                                    <div class="form-group mb-3">
                                        <label for="" class="form-label required-label">Confirm Password</label>
                                        <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" value="" placeholder="Confirm Password" required>
                                        <div class="invalid-feedback" id="e_cpassword">
                                            
                                        </div>
                                    </div>
                                    <div class="invalid-feedback text-center">
                                        Login failed. Please try again or create a new account.
                                    </div>
                                    
                                </div>
                                <div class="col-12 col-sm-12 col-md-4">
                                    <div class="pb-2">
                                        <h3 class="heading_20">Communications <a href="#" data-bs-html="true" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" data-bs-custom-class="communication-popover" data-bs-content="By subscribing, you agree to be contacted at the entered numbers and addresses for transactional and/or marketing purposes. Message and data rates may apply. Message frequency may vary. To opt-out of text messaging, text STOP at any time. You understand and agree that text messages sent to your mobile device may be generated using automated technology. To unsubscribe from email, click the link in an email we sent you. Consent not required for purchase."><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><g id="Component_1_2" data-name="Component 1 – 2" transform="translate(1 1)"><path id="Path_444" data-name="Path 444" d="M129,216v-4m0-4h.01m9.99,4a10,10,0,1,1-10-10A10,10,0,0,1,139,212Z" transform="translate(-119 -202)" fill="none" stroke="#b8c2cc" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></g></svg>
                                        </a></h3>
                                        <div class="form-label pb-2 fw-semibold">Text</div>
                                        <div class="form-group no-validation form-check blue-color mb-1">
                                            <input type="checkbox" class="form-check-input" name="sms_reminder_optin" id="optin_sms" checked="checked">
                                            <label class="form-check-label" for="sms_reminder_optin">I would like to receive appointment updates and reminders</label>
                                        </div>
                                        <div class="form-group no-validation form-check blue-color mb-1">
                                            <input type="checkbox" class="form-check-input" name="sms_promotional_optin" id="sms_promotional_optin" checked="checked">
                                            <label class="form-check-label" for="sms_promotional_optin">I would like to receive news and promotions</label>
                                        </div>
                                    </div>
                                    <div class="pb-4">
                                        <div class="form-label pb-2 fw-semibold">Email</div>
                                        <div class="form-group no-validation form-check blue-color mb-1">
                                            <input type="checkbox" class="form-check-input" name="email_reminder_optin" id="email_reminder_optin" checked="checked">
                                            <label class="form-check-label" for="email_reminder_optin">I would like to receive appointment updates and reminders</label>
                                        </div>
                                        <div class="form-group no-validation form-check blue-color mb-1">
                                            <input type="checkbox" class="form-check-input" name="send_promotional_emails" id="send_promotional_emails" checked="checked">
                                            <label class="form-check-label" for="send_promotional_emails">I would like to receive news and promotions</label>
                                        </div>
                                    </div>

                                    <div class="pb-2">
                                        <h3 class="heading_20">Acknowledgement</h3>
                                        <div class="form-group form-check blue-color mb-1">
                                            <input type="checkbox" class="form-check-input" name="privacy_check" id="privacy_check" required>
                                            <label class="form-check-label required-label labelColor" for="privacy_check">I agree to the <a href="https://www.amazinglashstudio.com/about-us/privacy-policy" target="_blank" class="text-black"> Privacy Policy</a></label>
                                            
                                        </div>
                                        <div class="invalid-feedback" id="e_privacy"></div>
                                    </div>

                                    <div class="existing-guest-txt text-end">
                                        Existing guest?&nbsp;<a href="{{ route('login',$businessslug) }}">Login here</a>
                                    </div>
                                    
                                </div>
                            </div>
                            <div class="form-group text-center login-mob-btn">
                                <button class="btn btn-primary d-block" id="register_btn" >Submit</button>
                            </div>
                        </form>
                    </div>


                </div>
            </div>

        </div>

  <!-- Modal -->
        <div class="modal fade hide" id="minorPolicy" tabindex="-1" aria-labelledby="minorPolicyModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" style="max-width: 306px;">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="minor-caps">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <clipPath id="clip-path"><rect id="Rectangle_189" data-name="Rectangle 189" width="24" height="24" transform="translate(534 62)" fill="#ed1556"/> </clipPath> </defs>
                            <g id="Group_79" data-name="Group 79" transform="translate(-534 -62)" clip-path="url(#clip-path)">
                            <path id="Path_314" data-name="Path 314" d="M544,63V62h-.731l-.222.7Zm4,0,.953-.3-.222-.7H548ZM535,84h-1v2h1Zm22,2h1V84h-1ZM541.1,73h9.8V71h-9.8Zm-1.6,5h13V76h-13Zm-1.547,7.3,7-22-1.906-.606-7,22ZM544,64h4V62h-4Zm3.047-.7,7,22,1.906-.606-7-22ZM535,86h22V84H535Z" fill="#ed1556"/> </g>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <clipPath id="clip-path"><rect id="Rectangle_189" data-name="Rectangle 189" width="24" height="24" transform="translate(534 62)" fill="#ed1556"/> </clipPath> </defs>
                            <g id="Group_79" data-name="Group 79" transform="translate(-534 -62)" clip-path="url(#clip-path)">
                            <path id="Path_314" data-name="Path 314" d="M544,63V62h-.731l-.222.7Zm4,0,.953-.3-.222-.7H548ZM535,84h-1v2h1Zm22,2h1V84h-1ZM541.1,73h9.8V71h-9.8Zm-1.6,5h13V76h-13Zm-1.547,7.3,7-22-1.906-.606-7,22ZM544,64h4V62h-4Zm3.047-.7,7,22,1.906-.606-7-22ZM535,86h22V84H535Z" fill="#ed1556"/> </g>
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <defs> <clipPath id="clip-path"><rect id="Rectangle_189" data-name="Rectangle 189" width="24" height="24" transform="translate(534 62)" fill="#ed1556"/> </clipPath> </defs>
                            <g id="Group_79" data-name="Group 79" transform="translate(-534 -62)" clip-path="url(#clip-path)">
                            <path id="Path_314" data-name="Path 314" d="M544,63V62h-.731l-.222.7Zm4,0,.953-.3-.222-.7H548ZM535,84h-1v2h1Zm22,2h1V84h-1ZM541.1,73h9.8V71h-9.8Zm-1.6,5h13V76h-13Zm-1.547,7.3,7-22-1.906-.606-7,22ZM544,64h4V62h-4Zm3.047-.7,7,22,1.906-.606-7-22ZM535,86h22V84H535Z" fill="#ed1556"/> </g>
                            </svg> 
                        </div>
                        <div class="minor-cont">
                            <h2>Minor Policy</h2>
                            <!-- <p>Minor Policy Content here. Loren  ipsum dolor sit amen, consectetur adipsiscing elit. Quam non nisl morbi nisl nulla duis ut. Bibendum ames pretium sit sed pharetra. Et Faucibus mattis vel viverra ut odio viverra phasellus. Scelerisque fermentum, nulla massa.</p> -->
                            {!! $policies['minor_policy'] !!}
                        </div>
                        <div class="text-center py-4">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal"><span class="d-none d-md-block">Got it</span><span class="d-block d-md-none">I Agree</span></button>
                        </div>
                        
                    </div>
                    
                </div>
            </div>
        </div>
@endsection
@section('customJs')
<script type="text/javascript">

$("#birthday" ).blur(function() {
  var s=$('#birthday').val();
 // console.log(s);
   var myage=underAgeValidate(s);
  //console.log(myage);
  if(s==''){
    $('.new_dob').prop('required',true);
  }else{
    $('.new_dob').prop('required',false);
  }
   if(myage < 18) {
         $('#minorPolicy').modal("show");
    }else{
        $('#minorPolicy').modal("hide");
    }

});
function underAgeValidate(birthday){
    var optimizedBirthday = birthday.replace(/-/g, "/");
    var myBirthday = new Date(optimizedBirthday);
    //var currentDate = new Date().toJSON().slice(0,10)+' 01:00:00';//new Date('01/01/2004');
    var currentDate =new Date("12/15/2025");
    var myAge = ~~((currentDate - myBirthday) / (31557600000));
     return myAge;
}
    document.getElementById('register_btn').addEventListener('click', function (event) {
            var form = document.getElementById('register_form');
            
            // Check validity of the form
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
                form.classList.add('was-validated');
            } else {
                // Manually submit the form if valid
                //form.submit();
            }
        });
     $("#register_btn").click(function () {
        var error=2;
        var is_credit_card=0;
        var email=$("#email").val();
        var phone=$("#phone").val();
        var first_name=$("#first_name").val();
        var last_name=$("#last_name").val();
        var birthday=$("#birthday").val();
        var password=$("#password").val();
        var password_confirmation=$("#password_confirmation").val();
        var privacy_check=$("#privacy_check").is(":checked");
        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;


        if(email==''){   
            $('#e_email').css("display","block"); 
            $('#e_email').html("Email Address is required"); 
            error=1;
         }else if(email!=''){
            if(!filter.test(email)){
                $('#e_email').css("display","block"); 
                $('#e_email').html("Please enter a valid email address."); 
                 error = 1;
            }else if(filter.test(email)){
                $('#e_email').css("display","block"); 
                $('#e_email').html(' ');
            }
             
        }
        if(phone==''){   
            $('#e_phone').css("display","block"); 
            $('#e_phone').html("Mobile Number is required"); 
            error=1;
         }else{
            $('#e_phone').html(""); 
         }
         if(first_name==''){   
            $('#e_firstname').css("display","block"); 
            $('#e_firstname').html("First Name is required"); 
            error=1;
         }else{
            $('#e_firstname').css("display","none"); 
            $('#e_firstname').html(""); 
         }
         if(last_name==''){   
            $('#e_last_name').css("display","block"); 
            $('#e_last_name').html("Last Name is required"); 
            error=1;
         }else{
            $('#e_last_name').css("display","none"); 
            $('#e_last_name').html(""); 
         }
         if(birthday==''){   
            $('#e_birthday').css("display","block"); 
            $('#e_birthday').html("Birthday is required"); 
            error=1;
         }else{
            $('#e_birthday').css("display","none"); 
            $('#e_birthday').html(""); 
         }
         if(password==''){   
            $('#e_password').css("display","block"); 
            $('#e_password').html("Password is required"); 
            error=1;
         }else{
            $('#e_password').css("display","none"); 
            $('#e_password').html(""); 
         }
         if(password_confirmation==''){   
            $('#e_cpassword').css("display","block"); 
            $('#e_cpassword').html("Confirm Password is required"); 
            $('#password_confirmation').css('background-image', ''); 
            error=1;
         }else if(password!=password_confirmation){
            $('#e_cpassword').css("display","block"); 
            $('#e_cpassword').html("Password & Confirm Password is not matched");
            $('#password_confirmation').css('background-image', ''); 
            error=1;
         }else{
            var imageUrl="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e";
            $('#password_confirmation').css('background-image', 'url("' + imageUrl + '")');
            $('#e_cpassword').html(""); 
         }
         if(privacy_check==''){   
            $('#e_privacy').css("display","block"); 
            $('#e_privacy').html("You must agree to the Privacy Policy to continue"); 
            error=1;
         }else{
            $('#e_privacy').css("display","none"); 
            $('#e_privacy').html(""); 
         }
       
        if(error==2){
            $('.loader').hide();
             return true;
        }else{
            $('.loader').hide();
            //$('#all_checkbox_error').css("display","block");
            return false;
        }
    });

    $("#phone").keyup(function (event) {
       if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode === 8 || event.keyCode === 46 ||  event.keyCode === 37 || event.keyCode === 39 || event.keyCode === 144) {
        $('#e_phone').html("");
        if($(this).val().length>=10){
             if (validatePhoneNumber($(this).val())) {
                //alert("Success");
                 $('#e_phone').css("display","none");
             }else{
                 $('#e_phone').css("display","block");
                 $('#phone').val("");
             }
        }
        
     }else{
         //$("#tel").html("Digits Only").show().fadeOut("slow");
         $('#e_phone').css("display","block");
         $('#e_phone').html("Digits Only");
         $('#phone').val("");
         return false;
     }
 });

    function validatePhoneNumber(phoneNumber) {
        var cleaned = phoneNumber.replace(/\D/g, '');
        var phoneNumberPattern = /^(?!0{10})\d{10}$/;
        return phoneNumberPattern.test(cleaned);
    }

    var date = document.getElementById('birthday');

    function checkValue(str, max) {
        if (str.charAt(0) !== '0' || str == '00') {
            var num = parseInt(str);
            if (isNaN(num) || num <= 0 || num > max)
                num = 1;
            str = num > parseInt(max.toString().charAt(0)) && num.toString().length == 1 ? '0' + num : num.toString();
        };
        return str;
    };

    date.addEventListener('keyup', function(e) {
        var key = e.charCode || e.keyCode || 0;
        this.type = 'text';
        var input = this.value;
        if (key == 8 || key == 46) {

        } else {
            if (/\D\/$/.test(input))
                input = input.substr(0, input.length - 3);
            var values = input.split('/').map(function(v) {
                return v.replace(/\D/g, '')
            });
            if (values[0])
                values[0] = checkValue(values[0], 12);
            if (values[1])
                values[1] = checkValue(values[1], 31);
            var output = values.map(function(v, i) {
                if (key == 8 || key == 46) {
                    return v;
                } else {
                    return v.length == 2 && i < 2 ? v + '/' : v;
                }
            });
            this.value = output.join('').substr(0, 14);
        }
    });

    date.addEventListener('blur', function(e) {
        this.type = 'text';
        var input = this.value;
        var values = input.split('/').map(function(v, i) {
            return v.replace(/\D/g, '')
        });
        var output = '';

        if (values.length == 3) {
            var year = values[2].length !== 4 ? parseInt(values[2]) + 2000 : parseInt(values[2]);
            var month = parseInt(values[0]) - 1;
            var day = parseInt(values[1]);
            var d = new Date(year, month, day);
            if (!isNaN(d)) {
                //   document.getElementById('result').innerText = d.toString();
                var dates = [d.getMonth() + 1, d.getDate(), d.getFullYear()];
                output = dates.map(function(v) {
                    v = v.toString();
                    return v.length == 1 ? '0' + v : v;
                }).join('/');
            };
        };
        this.value = output;
    });

        </script>
        @endsection