@extends('website.layouts.master', ['no_header' => true, 'no_footer' => true, 'no_transparent_header' => false])
@section('css')


<!-- datepicker time and date -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css"
    integrity="sha512-MQXduO8IQnJVq1qmySpN87QQkiR1bZHtorbJBD0tzy7/0U9+YIC93QWHeGTEoojMVHWWNkoCp8V6OzVSYrX0oQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">

<!-- tdatepicker -->
<link rel="stylesheet" href="{{ asset('js/datepicker/t-datepicker.min.css') }}" />
<link rel="stylesheet" href="{{ asset('js/datepicker/themes/t-datepicker-main.css') }}" />

<link rel="stylesheet" href="{{ asset('js/datepicker/themes/t-datepicker-main.css') }}" />

<style>

</style>
@endsection


@section('content')

<div class="login_page_cont"
    style="background-image: url('{{ URL::asset('img/website/other/modern-businessman-trying-his-new-car-automobile-salon1.png') }}');">


    <div class="login_page_side p-5">


        @if(in_array($type, ['login', 'register']))
        <div class="container pt-5">


            <div id="info">

                <a href="{{ route('website_homepage') }}">
                    <div class=" border_black_btn border_radius_20 fw-normal text-s mb-3"> <i
                            class="fa-solid fa-arrow-left me-1"></i>
                        Go Back
                    </div>
                </a>
                <ul class="nav nav-tabs mb-1 border-0 pe-0 align-items-center mb-3" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link @if($type === 'login') active @endif" id="hotel-tab"
                            data-bs-toggle="tab" data-bs-target="#login_tap" type="button" role="tab"
                            aria-controls="login_tap" aria-selected="true" class="text-gray-500">
                            Login</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link px-0 @if($type === 'register') active @endif" id="airline_tap-tab"
                            data-bs-toggle="tab" data-bs-target="#signup_tap" type="button" role="tab"
                            aria-controls="signup_tap" aria-selected="false" class="main-color">
                            Regsiter</button>
                    </li>
                </ul>

                <div class="tab-content" id="myTabContent">

                    {{-- logim --}}
                    <div class="tab-pane fade show  @if($type === 'login') active @endif" id="login_tap" role="tabpanel"
                        aria-labelledby="login_tap">

                        <form action="{{ route('patient_auth.login_sub') }}" method="post">
                            @csrf

                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label class="form-label fs-6 fw-bold">Phone Number Or Email
                                        <small class="fw-light">(Required)</small></label>
                                    <input name="phone_number" type="text" class="form-control"
                                        placeholder="Write here your phone number or Email">
                                    @error('phone_number')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12 mb-3">
                                    <div class="position-relative">
                                        <label class="form-label fs-6 fw-bold">Password
                                            <small class="fw-light">(Required)</small></label>
                                        <input name="password" type="password" class="form-control password_input_show"
                                            placeholder="*********">
                                        <span class="fa fa-fw field-icon toggle-password fa-eye"></span>
                                    </div>
                                    @error('password')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12  mb-2 mx-0 px-0">
                                    <div class="form-check d-flex align-items-start mx-0 px-2">
                                        <input name="remeber_me" multiple="multiple" value="women"
                                            class="form-check-input m-0 me-2 clickable-item-pointer" type="checkbox"
                                            id="women2">
                                        <label
                                            class="form-check-label clickable-item-pointer text-s mb-0 text-gray-500 link-cust-text"
                                            for="women2">
                                            Remember me
                                        </label>
                                    </div>
                                </div>
                                <div class="text-center mb-3">
                                    <button class="black_btn border_radius_20 px-5 fw-bold w-100">Login</button>
                                </div>

                                <div>
                                    <a class=" text-gray-500 link-cust-text"
                                        href="{{ route('patient_auth.forget_password') }}">Do You Forget Your
                                        Password?</a>
                                </div>

                                {{--
                                <hr class="text-gray-400 my-4">

                                <h6 class="fw-bold mb-2">تسجيل باكثر من طريقة</h6>

                                <ul class="no_dots_ul">
                                    <li class="mb-3">
                                        <a href="#" class=" link-cust-text text-gray-500">
                                            <img class="img-fluid ms-1" width="25px"
                                                src="{{ URL::asset('img/website/svg/facebook.svg') }}" alt="">
                                            التسجيل عبر الفيس بوك
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" class=" link-cust-text text-gray-500">
                                            <img class="img-fluid ms-1" width="25px"
                                                src="{{ URL::asset('img/website/svg/google.svg') }}" alt="">
                                            التسجيل عبر جوجل
                                        </a>
                                    </li>
                                </ul> --}}
                            </div>

                        </form>
                    </div>

                    {{-- register --}}
                    <div class="tab-pane fade show  @if($type === 'register') active @endif" id="signup_tap"
                        role="tabpanel" aria-labelledby="signup_tap">

                        <form id="myform" method="post" action="{{ route('patient_auth.register_store') }}"
                            style="z-index: 5">
                            @csrf

                            <div class="row">
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="form-label fs-6">First Name
                                        <small class="fw-light">(Required)</small></label>
                                    <input name="first_name" type="text"
                                        class="form-control @error('first_name') is-invalid @enderror"
                                        placeholder="Write here your first name .." autofocus minlength="3"
                                        value="{{ old('first_name') }}" required>

                                    @error('first_name')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="form-label fs-6">Family Name
                                        <small
                                            class="fw-light @error('second_name') is-invalid @enderror">(Required)</small></label>
                                    <input name="second_name" type="text" class="form-control"
                                        placeholder="Write here your family name .." minlength="3"
                                        value="{{ old('second_name') }}" required>

                                    @error('second_name')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label fs-6">Phone Number
                                        <small
                                            class="fw-light @error('phone_number') is-invalid @enderror">(Required)</small></label>
                                    <input name="phone_number" type="number" class="form-control"
                                        placeholder="Write here your phone number .." value="{{ old('phone_number') }}"
                                        minlength="11" maxlength="11" required>

                                    @error('phone_number')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label fs-6">Email
                                        <small
                                            class="fw-light @error('email') is-invalid @enderror">(Required)</small></label>
                                    <input name="email" type="email" class="form-control"
                                        placeholder="Write here your email .." value="{{ old('email') }}" required>
                                    @error('email')
                                    <span class="error-msg-form">
                                        {{ $message }}
                                    </span>
                                    @enderror
                                </div>

                                <div class="col-12 mb-4">
                                    <div class="position-relative">
                                        <label class="form-label fs-6 fw-bold">Password
                                            <small
                                                class="fw-light @error('passworc') is-invalid @enderror">(Required)</small></label>
                                        <input type="password" name="password" class="form-control password_input_show"
                                            placeholder="*********" minlength="7" required>
                                        <span class="fa fa-fw field-icon toggle-password fa-eye"></span>

                                        @error('password')
                                        <span class="error-msg-form">
                                            {{ $message }}
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="text-center">
                                    <button type="submit" class="black_btn border_radius_20 px-5 fw-bold w-100">Let's
                                        Go</button>
                                </div>

                        </form>
                        {{--
                        <hr class="text-gray-400 my-4">

                        <h6 class="fw-bold mb-2">تسجيل باكثر من طريقة</h6>

                        <ul class="no_dots_ul">
                            <li class="mb-3">
                                <a href="#" class=" link-cust-text text-gray-500">
                                    <img class="img-fluid ms-1" width="25px"
                                        src="{{ URL::asset('img/website/svg/facebook.svg') }}" alt="">
                                    التسجيل عبر الفيس بوك
                                </a>
                            </li>
                            <li>
                                <a href="#" class=" link-cust-text text-gray-500">
                                    <img class="img-fluid ms-1" width="25px"
                                        src="{{ URL::asset('img/website/svg/google.svg') }}" alt="">
                                    التسجيل عبر جوجل
                                </a>
                            </li>
                        </ul> --}}
                    </div>
                </div>
            </div>

        </div>

        @elseif ($type === 'sms')

        {{-- 4 digits sms --}}
        <div class="text-center my-5">
            <h5 class="fw-bold">
                Write here the 4 digits
            </h5>

            <div class="d-flex four_digit_sms justify-content-center mb-3">
                <input class="form-control" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
                <input class="form-control" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
                <input class="form-control" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
                <input class="form-control" type="text" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" />
            </div>

            <div class="text-center">
                <button class="black_btn border_radius_20 px-5 fw-bold w-100">ارسال</button>
            </div>
        </div>

        @endif

        {{-- confirmation --}}
        <div class="text-center my-5" style="display: none">
            <img class="img-fluid ms-1" width="155px" src="{{ URL::asset('img/website/svg/success.svg') }}" alt="">
            <p class="text-gray-300 mb-0"> اهلا بك في ميداء</p>
            <h5 class="fw-bold">
                لقد تم تفعيل حسابك بنجاح
            </h5>
        </div>

    </div>

</div>


</div>
@endsection


@section('js')


<script>
    $(function() {
    
  'use strict';

  var four_digit_sms = $('.four_digit_sms');

  function goToNextInput(e) {
    var key = e.which,
      t = $(e.target),
      sib = t.next('input');

    if (key != 9 && (key < 48 || key > 57)) {
      e.preventDefault();
      return false;
    }

    if (key === 9) {
      return true;
    }

    if (!sib || !sib.length) {
      sib = four_digit_sms.find('input').eq(0);
    }
    sib.select().focus();
  }

  function onKeyDown(e) {
    var key = e.which;

    if (key === 9 || (key >= 48 && key <= 57)) {
      return true;
    }

    e.preventDefault();
    return false;
  }
  
  function onFocus(e) {
    $(e.target).select();
  }

  four_digit_sms.on('keyup', 'input', goToNextInput);
  four_digit_sms.on('keydown', 'input', onKeyDown);
  four_digit_sms.on('click', 'input', onFocus);

})
</script>

<script>
    //Rules for the Validator plugin
    var $validator = $('#myform_2').validate({
        rules: {
            favorite_address: {
                maxlength: 50,
            },
            name_street: {
                maxlength: 50,
            },
            address_details: {
                maxlength: 50,
            },
            building_number: {
                maxlength: 50,
            },
            apartment_number: {
                maxlength: 50,
            },
            phone: {
                maxlength: 50,
            },

        },

        //for inserting erros for some inputs that makes posation problem such as selector 2 and bt datapicker
        errorPlacement: function(error, element) {
            switch (element.attr("name")) {
                case 'permissions':
                    error.insertAfter($("#permissions-js-error-valid"));
                    break;

                default:
                    error.insertAfter(element);
            }

        },
    });
</script>

<!-- datapicker date and time -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"
    integrity="sha512-K/oyQtMXpxI4+K0W7H25UopjM8pzq0yrVdFdG21Fh5dBe91I40pDd9A4lzNlHPHBIP2cwZuoxaUSX0GJSObvGA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
    //-------- datepicker time --------
$('.datepicker_time').flatpickr({
    enableTime: false,
    dateFormat: "Y-m-d",
    theme: "dark", // defaults to "light"
});
</script>

<script>
    var full_height_width_slider_swiper = new Swiper(".full_height_width_slider_swiper", {
    pagination: {
        el: ".swiper-pagination",
    },
});

var swiper = new Swiper(".to_do_desti_swiper", {
    slidesPerView: "auto",
    loop: true,
    touchEventsTarget: 'container',
    slidesPerView: "auto",
    touchEventsTarget: 'container',
    spaceBetween: 10,
    loop: true,

});
</script>


<script src="{{ asset('js/datepicker/t-datepicker.min.js') }}"></script>


<script>
    $('.t-datepicker').tDatePicker({
    autoClose: true,
    durationArrowTop: 200,
    numCalendar: 2,
});


$(".toggle-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $(this).parent().find( ".password_input_show");
    
    if (input.attr("type") == "password") {
    input.attr("type", "text");
    } else {
    input.attr("type", "password");
    }
});


function password_validation(e) {

var password = $("#password").val();

if (password.length >= 1 ) {
    $('#password_rules').show();
}else{
    $('#password_rules').hide();
}

//length
if (password.length >= 8 ) {
    $('#password_rules_minimum').removeClass('text-red').addClass('text-green');
} else {
    $('#password_rules_minimum').removeClass('text-green').addClass('text-red');
    var status = false;
}
//letter
// if ( password.match(/[A-z]/) ) {
//      $('#password_rules_uppercase').addClass('text-green');
// } else {
//     $('#password_rules_uppercase').removeClass('text-green');
// }

// special_characters;
var regex = /[^\w\s]/gi;
if ( password.match(regex) ) {

    $('#password_rules_special_characters').removeClass('text-red').addClass('text-green');
} else {
    $('#password_rules_special_characters').removeClass('text-green').addClass('text-red');
    var status = false;
}

//validate capital letter
if ( password.match(/[A-Z]/) ) {
    $('#password_rules_uppercase').removeClass('text-red').addClass('text-green');
} else {
    $('#password_rules_uppercase').removeClass('text-green').addClass('text-red');
    var status = false;
}

//validate number
if ( password.match(/\d/) ) {
    $('#password_rules_numbers').removeClass('text-red').addClass('text-green');
} else {
    $('#password_rules_numbers').removeClass('text-green').addClass('text-red');
    var status = false;
}

return status;
};
</script>


{{--
<script>
    //add new client
        $(document).on('click', "#submit_register_client", function(e) {
        e.preventDefault();

        //run vlidation plugin
        var first_name = $("input[name='first_name']").val();
        var second_name = $("input[name='second_name']").val();
        var email = $("input[name='email']").val();
        var phone = $("input[name='phone']").val();
        var password = $("input[name='password']").val();
        var password_confirmation = $("input[name='password_confirmation']").val();
        var gendar = $("select[name='gendar']").val();

        var url = "{{ route('client.store') }}";

        $(this).prop("disabled", true);
        
        // add spinner to button
        $(this).html(
            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...'
        );

        $.ajax({
            url: url
            , type: 'POST'
            , dataType: "json"
            , data: {
                '_token': "{{ csrf_token() }}"
                , 'first_name': first_name
                , 'second_name': second_name
                , 'email': email
                , 'phone': phone
                , 'password': password
                , 'password_confirmation': password_confirmation
                , 'gendar': gendar
            , }
            , success: function(data) {
                if (data.status == true) {
                    toastr.success(data.msg);
                    $('.modal').modal('hide');
                    $("#otp_modal").modal("show");

                } else {
                    toastr.error(data.msg);
                }
            }
            , error: function(err) {

                // remove spinner to button
                  //show error message after the input and in toaster
                  $.each(err.responseJSON.errors, function (input_name, error) {
                    var el = $(document).find('[name="'+input_name+'"]');
                    el.after($('<span class="error_ajax_msg" style="color: red;">'+error[0]+'</span>'));
                    toastr.error(error[0]);
                });

                // remove spinner to button
                that.prop("disabled", false);
                that.html(html);

                toastr.error(data.msg);
            }
        , });

    });

    //otp confirm
    $(document).on('click', "#otp_send", function(e) {
        e.preventDefault();

        //run vlidation plugin
        var digit_1 = $("input[name='digit_1']").val();
        var digit_2 = $("input[name='digit_2']").val();
        var digit_3 = $("input[name='digit_3']").val();
        var digit_4 = $("input[name='digit_4']").val();

        var digits = digit_1 + digit_2 + digit_3 + digit_4;

        var url = "{{ route('client.register_with_otp') }}";

        $(this).prop("disabled", true);
        // add spinner to button
        $(this).html(
            '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...'
        );

        $.ajax({
            url: url
            , type: 'POST'
            , dataType: "json"
            , data: {
                '_token': "{{ csrf_token() }}"
                , 'digits': digits
            , }
            , success: function(data) {
                if (data.status == true) {
                    toastr.success(data.msg);
                    $(location).attr('href', data.url);
                } else {
                    $("#otp_send").prop("disabled", false);
                    $("#otp_send").html('ارسال');
                    toastr.error(data.msg);
                }
            }
            , error: function(err) {
                // remove spinner to button
                $("#otp_send").prop("disabled", false);
                $("#otp_send").html('ارسال');
                toastr.error(data.msg);
            }
        , });

    });

</script> --}}
@endsection