@extends('layout.master2')
@section('content')
    <section class="py-5">
        <div class="container">
            <div class="text-center">
                <img src="{{ asset('assets/images/blue_logo.png') }}" height="70px" class="">
            </div>
            <div class="row justify-content-center mt-3">
                <meta name="csrf-token" content="{!! csrf_token() !!}">
                <div class="col-md-7">
                    <div class="row py-4 py-sm-4">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs nav-tab2" id="myTab" role="tablist">
                                <li class="nav-item nav-item2">
                                    <a class="nav-link nav-link2 active tabClass
                                "
                                        id="home-tab" data-toggle="tab" href="#home" role="tab"
                                        aria-controls="home-tab">
                                        Individual
                                    </a>
                                </li>

                                <li class="nav-item nav-item2">
                                    <a class="nav-link nav-link2 tabClass pl-sm-5 pl-4" id="profile-tab" data-toggle="tab"
                                        href="#profile" role="tab" aria-controls="profile">Enterprise</a>
                                </li>

                                <li class="nav-item nav-item2">
                                    <a class="nav-link nav-link2 tabClass" id="agent-tab" data-toggle="tab" href="#agent"
                                        role="tab" aria-controls="agent">Agent</a>
                                </li>
                            </ul>
                            <div class="tab-content tab-content2" id="myTabContent">

                                <div class="tab-pane fade show active" id="home" role="tabpanel"
                                    aria-labelledby="home-tab">
                                    <form id="add_individual_booking" method="post" autocomplete="off" novalidate>
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-12 d-flex">
                                                <a class="facebook-btn btn btn-info"
                                                    data-url="{{ url('/login/facebook') }}">
                                                    <span class="button-icon social-icon"><i class="fa fa-facebook social"
                                                            aria-hidden="true"></i></span>
                                                    <span class="button-text social-text">signup with facebook</span>
                                                </a>
                                                <a class="google-btn btn btn-info ml-3"
                                                    data-url="{{ url('/login/google') }}">
                                                    <span class="button-icon social-icon"><i class="fa fa-google"
                                                            aria-hidden="true"></i></span>
                                                    <span class="button-text social-text">signup with Google</span>
                                                </a>
                                            </div>
                                            <div class="col-md-12 my-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="border-bottom w-50"></div>
                                                    <p class="f-20 pl-2 pr-2 mb-0 mt-0 text-white">or</p>
                                                    <div class="border-bottom w-50"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="email">Emai ID</label>
                                                    <input type="text" class="form-control" name="email"
                                                        placeholder="Email" value="{{ old('email') }}" autofocus>
                                                    <br><span id="email" style="display: none; color: red;"> </span>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="mobile">Mobile Number</label>
                                                    <input type="text" name="mob_number" class="form-control"
                                                        aria-label="Text input with radio button"
                                                        value="{{ old('mob_number') }}" pattern="\d{10}" maxlength="10" placeholder="Mobile number" id="ind_mobile_no">
                                                    <br><span id="mob_number" style="display: none; color: red;"> </span>
                                                </div>
                                            </div>



                                            <div class="col-md-6">
                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="eamil">Enter OTP</label>
                                                    <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="individual_otp"
                                                    value="{{ old('individual_otp') }}" placeholder="">
                                                    <span id="individual_otp" style="display: none; color: red;"> </span>
                                                </div>
                                            </div>

                                            <div class="col-md-6">

                                                <label style=" font-size: 18px;" class="control-label generate-otp mt-1 mr-3" for="otp"><a href="#" id="individualgenerateOtp" onclick="generateOtp('individual')">Generate OTP</a></label>

                                            </div>

                                            <div class="col-md-12">
                                                <div class="form-group login-box-label">
                                                    <label class="control-label" for="passward">Password</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text">
                                                                <!-- <img src="{{ asset('assets/images/login-passward.svg') }}" height="22px" alt=""> -->
                                                                <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                    id="open_eye_id_ind"
                                                                    onclick="passwordShowHideInd(this)"></i>
                                                                <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                    id="close_eye_id_ind"
                                                                    onclick="passwordShowHideInd(this)"></i>
                                                            </div>

                                                        </div>
                                                        <input type="password" class="form-control"
                                                            aria-label="Text input with radio button" name="password"
                                                            value="{{ old('password') }}" placeholder="Password"
                                                            id="individualPassword" autocomplete="new-password">
                                                        <br><span id="password"
                                                            style="display: none; color: red; width:100%;">
                                                        </span>

                                                    </div>
                                                     <div style="font-size: 12px; color: black; font-weight: bold;">
                                                    <span> The password should be eight characters long(alpha numeric) & have a special character & capital letter </span>
                                                  </div>
                                                </div>
                                            </div>
                                        </div>
                                </div>

                                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                                    <div class="row justify-content-center align-items-center">
                                        <div class="col-md-5">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="eamil">Emai ID</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="enterprize_email"
                                                    value="{{ old('enterprize_email') }}" placeholder="Email">
                                                <span id="enterprize_email" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="mobile">Mobile Number</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="enterprize_mob_number"
                                                    value="{{ old('enterprize_mob_number') }}"
                                                    placeholder="Mobile Number"
                                                    maxlength="10" pattern="\d{10}" id="ent_mob_number">
                                                <span id="enterprize_mob_number" style="display: none; color: red;">
                                                </span>
                                            </div>
                                        </div>
                                       
                                        <div class="col-md-2">
                                            <!-- <p>verify</p> -->
                                        </div>

                                         <div class="col-md-6">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="eamil">Enter OTP</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="enterprize_otp"
                                                    value="{{ old('enterprize_otp') }}" placeholder="">
                                                <span id="enterprize_otp" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                                <label style=" font-size: 18px;" class="control-label generate-otp mt-1 mr-3" for="otp"><a href="#" id="enterprizegenerateOtp" onclick="generateOtp('enterprize')">Generate OTP</a></label>
                                           </div>

                                        <div class="col-md-12">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">
                                                            <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                id="open_eye_id" onclick="passwordShowHide(this)"></i>
                                                            <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                id="close_eye_id" onclick="passwordShowHide(this)"></i>
                                                        </div>
                                                    </div>
                                                    <input type="password" class="form-control"
                                                        aria-label="Text input with radio button"
                                                        name="enterprize_password"
                                                        value="{{ old('enterprize_password') }}" placeholder="Password"
                                                        id="emailPassword">
                                                    <span id="enterprize_password"
                                                        style="display: none; color: red; width:100%;">
                                                    </span>

                                                </div>
                                                <div style="font-size: 12px; color: black; font-weight: bold;">
                                                    <span> The password should be eight characters long(alpha numeric) & have a special character & capital letter </span>
                                                  </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="agent" role="tabpanel" aria-labelledby="agent-tab">
                                    <div class="row justify-content-center">
                                        <div class="col-md-6">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="eamil">Emai ID</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_email"
                                                    value="{{ old('agent_email') }}" placeholder="Email">
                                                <span id="agent_email" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="mobile">Mobile Number</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_mob_number"
                                                    value="{{ old('agent_mob_number') }}" placeholder="Mobile Number"
                                                    maxlength="10" pattern="\d{10}" id="agent_mobile_number">
                                                <span id="agent_mob_number" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>

                                         <div class="col-md-6">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="eamil">Enter OTP</label>
                                                <input type="text" class="form-control"
                                                    aria-label="Text input with radio button" name="agent_otp"
                                                    value="{{ old('agent_otp') }}" placeholder="">
                                                <span id="agent_otp" style="display: none; color: red;"> </span>
                                            </div>
                                        </div>
                                          <div class="col-md-6">
                                                <label style=" font-size: 18px;" class="control-label generate-otp mt-1 mr-3" for="otp"><a href="#" id="agentgenerateOtp"  onclick="generateOtp('agent')">Generate OTP</a></label>
                                           </div>

                                        <div class="col-md-12">
                                            <div class="form-group login-box-label">
                                                <label class="control-label" for="passward">Password</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <div class="input-group-text">
                                                            <i class="fa fa-eye f-20 d-none" aria-hidden="true"
                                                                id="agent_open_eye_id"
                                                                onclick="passwordAgentShowHide(this)"></i>
                                                            <i class="fa fa-eye-slash f-20" aria-hidden="true"
                                                                id="agent_close_eye_id"
                                                                onclick="passwordAgentShowHide(this)"></i>
                                                        </div>
                                                    </div>
                                                    <input type="password" class="form-control"
                                                        aria-label="Text input with radio button" name="agent_password"
                                                        value="{{ old('agent_password') }}" placeholder="Password"
                                                        id="agentEmailPassword">
                                                    <span id="agent_password"
                                                        style="display: none; color: red; width:100%;"> </span>
                                                </div>
                                                  <div style="font-size: 12px; color: black; font-weight: bold;">
                                                    <span> The password should be eight characters long(alpha numeric) & have a special character & capital letter </span>
                                                  </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 col-12 pb-0">
                                        <div class="form-group custom-form-group login-group">
                                            <input type="hidden" name="static_content_id"
                                                value="{{ $staticContent ? $staticContent->id : null }}"
                                                id="static_content_id" />
                                            <input class="filled-in fill-check2" name="terms_and_conditions"
                                                type="checkbox" value="1" id="terms_and_conditions">
                                            <label for="terms_and_conditions" class="pl-4" id="terms_and_conditions1">Accept
                                                    T&C</a></label>
                                            <br><span id="terms_and_conditions_error" style="display: none; color: red;">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-3 mt-sm-2">
                                        <div class="d-flex align-items-center">
                                            <div class="border-bottom w-50"></div>
                                            <p class="f-20 pl-2 pr-2 mb-0 mt-0 text-white">or</p>
                                            <div class="border-bottom w-50"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <div class="text-center individual-box">
                                            <p href="#" class="">Already a Member? <a
                                                    href="{{ url('/') }}" class="text-decoration-underline"> LOG
                                                    IN</a></p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <div class="row justify-content-center">
                        <div class="col-md-4">
                            <div class="login-btn text-center">
                                <input type="hidden" name="customer_type" value="" id="custType">
                                <button type="submit" class="btn btn-warning">Sign up</button>
                                <a href="{{ url('/') }}" class="btn btn-dark">&nbsp; login &nbsp;</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
        </div>
    </section>

    {{-- Modal --}}
    <div class="modal fade" id="terms-condition-modal" tabindex="-1" role="dialog" data-keyboard="false"
        data-backdrop="static" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog  modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="title-section">
                        <h5 class="modal-title" id="terms-condition-title">
                            {{ $staticContent ? $staticContent->title : '' }}
                        </h5>
                    </div>
                </div>
                <div class="modal-body">
                    {!! $staticContent ? $staticContent->content : '' !!}
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">I Agree</button>
                </div>
            </div>
        </div>
    </div>

    <style type="text/css">
        .dissbleClickButton {
            pointer-events: none;
        }
    </style>

    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script type="text/javascript">
        const Toast = swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });

        $(document).ready(function() {
            check = [];
            check = 'individual';

            $("#home-tab").on("click", function(e) {
                $('#profile').removeClass('active');
                $('#agent').removeClass('active');
                $('#home').addClass('active');
                $("#terms_and_conditions_error").hide();
                check = 'individual';

            });

            $("#profile-tab").on("click", function(e) {
                $('#home').removeClass('active');
                $('#agent').removeClass('active');
                $('#profile').addClass('active');
                $("#terms_and_conditions_error").hide();
                check = 'enterprize';
            });
            $("#agent-tab").on("click", function(e) {
                $('#home').removeClass('active');
                $('#profile').removeClass('active');
                $('#agent').addClass('active');
                $("#terms_and_conditions_error").hide();
                check = 'agent';

            });


            //IndividualCustomerSignup
            $("#add_individual_booking").on('submit', function(e) {
                e.preventDefault();
                $("#email").hide();
                $("#password").hide();
                $("#mob_number").hide();

                $("#enterprize_password").hide();
                $("#enterprize_email").hide();
                $("#enterprize_mob_number").hide();

                $("#agent_password").hide();
                $("#agent_email").hide();
                $("#agent_mob_number").hide();
                $("#terms_and_conditions_error").hide();

                var form = $(this);
                $('#custType').val(check);

                $.ajax({
                    method: 'POST',
                    url: "{{ url('/user-register') }}",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: form.serialize(),
                    success: function(data) {
                        if (data.status == 'true') {
                            Toast.fire({
                                icon: 'success',
                                title: data.message
                            }).then(() => {
                                window.location.href = '{{ url('/login') }}';
                            });
                        } else if(data.status == 'otp'){

                           Toast.fire({
                                icon: 'warning',
                                title: 'Please enter valid otp'
                            }).then(() => {
                                //window.location.href = '{{ url('/login') }}';
                            });

                        }
                        else if (data.status == 'false') {
                            $.each(data.message, function(index, value) {
                                if (index == 'email') {
                                    $("#email").show();
                                    $("#email").html(value[0].toString());
                                }
                                if (index == 'mob_number') {
                                    $("#mob_number").show();
                                    $("#mob_number").html(value[0].toString());
                                }
                                if (index == 'password') {
                                    $("#password").show();
                                    $("#password").html(value[0].toString());
                                }

                                if (index == 'enterprize_email') {
                                    $("#enterprize_email").show();
                                    $("#enterprize_email").html(value[0].toString());
                                }
                                if (index == 'enterprize_mob_number') {
                                    $("#enterprize_mob_number").show();
                                    $("#enterprize_mob_number").html(value[0]
                                        .toString());
                                }
                                if (index == 'enterprize_password') {
                                    $("#enterprize_password").show();
                                    $("#enterprize_password").html(value[0].toString());
                                }
                                if (index == 'agent_email') {
                                    $("#agent_email").show();
                                    $("#agent_email").html(value[0].toString());
                                }
                                if (index == 'agent_mob_number') {
                                    $("#agent_mob_number").show();
                                    $("#agent_mob_number").html(value[0].toString());
                                }
                                if (index == 'agent_password') {
                                    $("#agent_password").show();
                                    $("#agent_password").html(value[0].toString());
                                }
                                if (index == 'terms_and_conditions') {
                                    $("#terms_and_conditions_error").show();
                                    $("#terms_and_conditions_error").html(value[0]
                                        .toString());

                                }

                            });

                        }

                    },
                    error: function(data) {
                        var errors = $.parseJSON(data.responseText);
                        $.each(errors, function(index, value) {

                        });

                    }
                });
            });

        });

        function passwordShowHide(e) {
            if (e.getAttribute('id') == 'close_eye_id') {
                $('#close_eye_id').addClass('d-none');
                $('#open_eye_id').removeClass('d-none');
                $('#emailPassword').prop("type", "text");
            } else {
                $('#close_eye_id').removeClass('d-none');
                $('#open_eye_id').addClass('d-none');
                $('#emailPassword').prop("type", "password");
            }

        }

        function passwordAgentShowHide(e) {
            if (e.getAttribute('id') == 'agent_close_eye_id') {
                $('#agent_close_eye_id').addClass('d-none');
                $('#agent_open_eye_id').removeClass('d-none');
                $('#agentEmailPassword').prop("type", "text");
            } else {
                $('#agent_close_eye_id').removeClass('d-none');
                $('#agent_open_eye_id').addClass('d-none');
                $('#agentEmailPassword').prop("type", "password");
            }

        }

        function passwordShowHideInd(e) {
            if (e.getAttribute('id') == 'close_eye_id_ind') {
                $('#close_eye_id_ind').addClass('d-none');
                $('#open_eye_id_ind').removeClass('d-none');
                $('#individualPassword').prop("type", "text");
            } else {
                $('#close_eye_id_ind').removeClass('d-none');
                $('#open_eye_id_ind').addClass('d-none');
                $('#individualPassword').prop("type", "password");
            }

        }

        $(document).on('click', '.facebook-btn, .google-btn', function() {
            if (!$('#terms_and_conditions').is(":checked")) {
                Toast.fire({
                    icon: 'warning',
                    title: 'Please accept terms and conditions.'
                }).then(() => {

                });
                return;
            }

            window.open($(this).data('url'), '_blank');
        })

        $('#terms_and_conditions').change(function() {
            if ($(this).is(":checked")) {
                $('#terms-condition-modal').modal('show');
            }
        })

        $('#terms_and_conditions1').change(function() {
            //if ($(this).is(":checked")) {
                $('#terms-condition-modal').modal('show');
           // }
        })

        function generateOtp(userType) {

            if(userType == 'individual'){

               let indMobileNumber =  $('#ind_mobile_no').val();
               if(indMobileNumber?.length != 10 || !indMobileNumber){

                 $("#mob_number").show();
                $("#mob_number").html('Please enter a valid mobile number.');

               }else {

                $("#mob_number").hide();
                $("#mob_number").html('');

                    $.ajax({
                    method: 'POST',
                    url: "{{ url('signup-otp-generate') }}",
                    data: {
                        'mobile_number': indMobileNumber,
                        '_token': '{{ csrf_token() }}'
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data?.success == true) {

                             Toast.fire({
                                icon: 'success',
                                title: data?.message
                            }).then(() => {
                                //window.location.href = '{{ url('/login') }}';
                            });
                           
                        }
                    }
                });

               }

            }

            if(userType == 'enterprize'){

               let indMobileNumber =  $('#ent_mob_number').val();

               if(indMobileNumber?.length != 10 || !indMobileNumber){

                 $("#enterprize_mob_number").show();
                $("#enterprize_mob_number").html('Please enter a valid mobile number.');

               }else {

                $("#enterprize_mob_number").hide();
                $("#enterprize_mob_number").html('');

                    $.ajax({
                    method: 'POST',
                    url: "{{ url('signup-otp-generate') }}",
                    data: {
                        'mobile_number': indMobileNumber,
                        '_token': '{{ csrf_token() }}'
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data?.success == true) {

                             Toast.fire({
                                icon: 'success',
                                title: data?.message
                            }).then(() => {
                                //window.location.href = '{{ url('/login') }}';
                            });
                           
                        }
                    }
                });

               }

            }

            if(userType == 'agent'){

               let indMobileNumber =  $('#agent_mobile_number').val();

               if(indMobileNumber?.length != 10 || !indMobileNumber){

                 $("#agent_mob_number").show();
                $("#agent_mob_number").html('Please enter a valid mobile number.');

               }else {

                $("#agent_mob_number").hide();
                $("#agent_mob_number").html('');

                    $.ajax({
                    method: 'POST',
                    url: "{{ url('signup-otp-generate') }}",
                    data: {
                        'mobile_number': indMobileNumber,
                        '_token': '{{ csrf_token() }}'
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        if (data?.success == true) {

                             Toast.fire({
                                icon: 'success',
                                title: data?.message
                            }).then(() => {
                                //window.location.href = '{{ url('/login') }}';
                            });
                           
                        }
                    }
                });

               }

            }

        }
    </script>
@endsection