@extends('layouts.front')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}">
<style>
    .select2-container {
        width: 100% !important;
    }
    .d-none {
        display: none;
    }
    .show-password-aboslute
    {
        position: absolute;
        right: 44px;
        top: 25px;
    }
    .show-password-aboslute label::before,.show-password-aboslute label::after
    {
        display:none;
    }
</style>
@endpush

@section('content')
    <section class="section">
        <section class="cart-area sp-80">
            <div class="container">
                {{-- <div class="row">
                    <div class="col-12">
                        <div class="all-title">
                            <h3 class="sec-title">
                                @lang('front.headings.checkout')
                            </h3>
                        </div>
                    </div>
                </div> --}}
                <div class="billing-info">
                    @if(is_null($user))
                        <p class="mb-30">
                            @lang('front.accountAlready') ?
                            <a href="{{ route('login') }}"> @lang('front.loginNow') </a>
                        </p>
                    @endif
                    <div class="row d-flex justify-content-center">
                        @if(is_null($user))
                        <div class="col-lg-7 col-12 mb-30">
                            <h5>@lang('app.add') @lang('front.personalDetails')</h5>
                            <form id="personal-details" class="ajax-form" method="POST">
                                @csrf
                                <input type="hidden" name="request_type" value="{{$request_type}}">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <span>@lang('front.registration.firstName') <sup class="text-danger">*</sup></span>
                                            <input type="text" name="first_name" class="form-control" placeholder="@lang('front.registration.firstName')">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <span>@lang('front.registration.lastName') <sup class="text-danger">*</sup></span>
                                            <input type="text" name="last_name" class="form-control" placeholder="@lang('front.registration.lastName')">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <span>@lang('front.registration.email') <sup class="text-danger">*</sup></span>
                                            <input type="text" name="email" class="form-control" placeholder="@lang('front.registration.email')">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <span>@lang('front.registration.phoneNumber') <sup class="text-danger">*</sup></span>
                                            <div class="form-row">
                                                <div class="col-sm-4 d-none">
                                                    <select name="calling_code" id="calling_code" class="form-control select2">
                                                        @foreach ($calling_codes as $code => $value)
                                                        @if($value['name'] == 'United Kingdom')
                                                            <option value="{{ $value['dial_code'] }}"
                                                            @if (!is_null($user) && $user->calling_code)
                                                                {{ $user->calling_code == $value['dial_code'] ? 'selected' : '' }}
                                                            @endif>{{ $value['dial_code'] . ' - ' . $value['name'] }}</option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-sm-12">
                                                    <input  name="phone" class="form-control" placeholder="@lang('front.registration.phoneNumber')">
                                                </div>
                                                @if ($smsSettings->nexmo_status == 'active')
                                                    <span class="text-info ml-2">
                                                        @lang('messages.info.verifyMessage')
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <h5 class="w-100 mt-3 mb-2">Create an account</h5>
                                        <div class="clearfix"></div>
                                        <p class="c-theme" style="font-size:16px">
                                           <b>You must create a password now so that you can reschedule or cancel an appointment in future.</b>
                                        </p>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <span>@lang('front.registration.password') <sup class="text-danger">*</sup></span>
                                            <input type="text" name="password" id="password" class="form-control" placeholder="@lang('front.registration.password')">
                                            <span class="mt-2 show-password-aboslute">
                                                <input type="checkbox" id="showPasswordCheck" >
                                                <label for="showPasswordCheck" id="passwordLabel" onclick="showPassword()">Hide Password</label>
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <span>Confirm Password <sup class="text-danger">*</sup></span>
                                            <input type="text" id="confirmpassword" name="password_confirmation" class="form-control" placeholder="Confirm Password">
                                            <span class="mt-2 show-password-aboslute">
                                                <input type="checkbox" id="showConfirmPasswordCheck" >
                                                <label id="confirmPasswordLabel" for="showConfirmPasswordCheck" onclick="showConfirmPassword()">Hide Password</label>
                                            </span>
                                        </div>
                                    </div>
                                    
                                </div>
                            </form>
                            {{-- <div class="row">
                                <div class="col-12">
                                    <p class="c-theme">** @lang('front.accountCreateNotice')</p>
                                </div>
                            </div> --}}
                        </div>
                        @elseif($smsSettings->nexmo_status == 'active' && !$user->mobile_verified)
                        <div class="col-lg-7 col-12 mb-30">
                            <h5>@lang('app.verifyMobile')</h5>
                            <div id="verify-mobile">
                                @include('partials.front_verify_phone')
                            </div>
                        </div>
                        @endif
                        <div class="{{ !$user || !$user->mobile_verified ? 'col-lg-5' : 'col-lg-7' }} col-12 mb-30">
                            <div class="booking-summary mb-30">
                                <h5>@lang('front.summary.checkout.heading.bookingSummary')</h5>
                                @if ($request_type=='booking')
                                    <ul>
                                        <li>
                                            <span>
                                                @lang('app.service'):
                                            </span>
                                            <span>
                                                @php
                                                   $products = json_decode(Cookie::get('products'), true);
                                                @endphp
                                                @foreach ($products as $product)
                                                    {{  $product['serviceName'] }}
                                                @endforeach                                                
                                            </span>
                                        </li>
                                        <li>
                                        <span>
                                            @lang('front.bookingDate'):
                                        </span>
                                        <span>
                                            {{ \Carbon\Carbon::createFromFormat('Y-m-d', $bookingDetails['bookingDate'])->isoFormat('dddd, MMMM Do') }}
                                        </span>
                                        </li>
                                        <li>
                                        <span>
                                            @lang('front.bookingTime'):
                                        </span>
                                            <span style="text-transform: none">
                                            {{ \Carbon\Carbon::createFromFormat('H:i:s', $bookingDetails['bookingTime'])->format($settings->time_format) }}
                                        </span>
                                        </li>
                                        @if($location_name != '')
                                       <li>
                                            <span>
                                                @lang('app.center'):
                                            </span>
                                            <span>
                                                {!! $location_name !!}
                                            </span>
                                        </li>
                                        @endif
                                        
                                        
                                    </ul>
                                @else
                                    <ul>
                                        <li>
                                        <span>
                                            @lang('app.deal') @lang('app.name'):
                                        </span>
                                        <span>
                                            {{$deal->dealName}}
                                        </span>
                                        </li>
                                        <li>
                                        <span>
                                            @lang('app.quantity'):
                                        </span>
                                            <span style="text-transform: none">
                                               {{ $deal->dealQuantity }}
                                        </span>
                                        </li>
                                        <li>
                                        <span>
                                            @lang('front.amountToPay'):
                                        </span>
                                        <span>
                                            {{ $settings->currency->currency_symbol.$deal->dealPrice*$deal->dealQuantity }}
                                        </span>
                                        </li>
                                    </ul>
                                @endif

                            </div>
                            @if ($user)
                                <div class="instruction">
                                    {{-- <h5>@lang('front.additionalNotes')</h5> --}}
                                    <form id="booking" class="ajax-form" method="POST">
                                        @csrf
                                        <div class="form-group d-none">
                                            <textarea class="form-control" rows="4" name="additional_notes" placeholder="@lang('front.writeYourMessageHere')"></textarea>
                                        </div>
                                    </form>
                                </div>
                            @elseif ($smsSettings->nexmo_status == 'deactive')
                                <div class="instruction">
                                    {{-- <h5>@lang('front.additionalNotes')</h5> --}}
                                    <div class="form-group d-none">
                                        <textarea class="form-control" rows="4" name="additional_notes" placeholder="@lang('front.writeYourMessageHere')" form="personal-details"></textarea>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 text-right">
                        <div class="navigation">
                            <a href="{{ route('front.bookingPage') }}" class="btn btn-custom btn-dark"><i class="fa fa-angle-left mr-2"></i>@lang('front.navigation.goBack')</a>
                            @if (!$user)
                                {{-- @if ($smsSettings->nexmo_status == 'active')
                                    <a href="javascript:;" onclick="saveUser();" class="btn btn-custom btn-dark">
                                        @lang('front.navigation.toVerifyMobile')
                                        <i class="fa fa-angle-right ml-1"></i>
                                    </a>
                                @else --}}
                                    <a href="javascript:;" onclick="saveUser();" class="btn btn-custom btn-next-green">
                                        @lang('front.navigation.toPayment')
                                        <i class="fa fa-angle-right ml-1"></i>
                                    </a>
                                {{-- @endif --}}
                            @else
                                {{-- @if ($smsSettings->nexmo_status == 'active')
                                <a href="javascript:;" onclick="saveBooking();" class="btn btn-custom btn-dark @if (!$user->mobile_verified) disabled @endif">
                                    @lang('front.navigation.toPayment')
                                    <i class="fa fa-angle-right ml-1"></i>
                                </a>
                                @else --}}
                                    <a href="javascript:;" onclick="saveBooking();" class="btn btn-custom btn-next-green">
                                        @lang('front.navigation.toPayment')
                                        <i class="fa fa-angle-right ml-1"></i>
                                    </a>
                                {{-- @endif --}}
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
@endsection

@push('footer-script')
    <script src="{{ asset('assets/js/select2.min.js') }}"></script>
    <script>
        $('.select2').select2();

        function saveUser() {
            var url =  '{{ route('front.saveBooking') }}';
            var form = $('#personal-details');

            $.easyAjax({
                url: url,
                type: 'POST',
                container: 'body',
                data: form.serialize()
            })
        }

        function saveBooking() {
            $.easyAjax({
                url: '{{ route('front.saveBooking') }}',
                type: 'POST',
                container: 'body',
                data: $('#booking').serialize()
            })
        }
    </script>
    <script>
        @if ($smsSettings->nexmo_status == 'active' && $user && !$user->mobile_verified && !session()->has('verify:request_id'))
            sendOTPRequest();
        @endif

        var x = '';

        function clearLocalStorage() {
            localStorage.removeItem('otp_expiry');
            localStorage.removeItem('otp_attempts');
        }

        function checkSessionAndRemove() {
            $.easyAjax({
                url: '{{ route('removeSession') }}',
                type: 'GET',
                data: {'sessions': ['verify:request_id']}
            })
        }

        function startCounter(deadline) {
            x = setInterval(function() {
                var now = new Date().getTime();
                var t = deadline - now;

                var days = Math.floor(t / (1000 * 60 * 60 * 24));
                var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
                var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((t % (1000 * 60)) / 1000);

                $('#demo').html('Time Left: '+minutes + ":" + seconds);
                $('.attempts_left').html(`${localStorage.getItem('otp_attempts')} attempts left`);

                if (t <= 0) {
                    clearInterval(x);
                    clearLocalStorage();
                    checkSessionAndRemove();
                    location.href = '{{ route('front.cartPage') }}'
                }
            }, 1000);
        }

        if (localStorage.getItem('otp_expiry') !== null) {
            let localExpiryTime = localStorage.getItem('otp_expiry');
            let now = new Date().getTime();

            if (localExpiryTime - now < 0) {
                clearLocalStorage();
                checkSessionAndRemove();
            }
            else {
                $('#otp').focus().select();
                startCounter(localStorage.getItem('otp_expiry'));
            }
        }

        function sendOTPRequest() {
            $.easyAjax({
                url: '{{ route('sendOtpCode') }}',
                type: 'POST',
                container: '#request-otp-form',
                messagePosition: 'inline',
                data: $('#request-otp-form').serialize(),
                success: function (response) {
                    if (response.status == 'success') {
                        localStorage.setItem('otp_attempts', 3);

                        $('#verify-mobile').html(response.view);
                        $('.attempts_left').html(`3 attempts left`);

                        $('#otp').focus();

                        var now = new Date().getTime();
                        var deadline = new Date(now + parseInt('{{ config('nexmo.settings.pin_expiry') }}')*1000).getTime();

                        localStorage.setItem('otp_expiry', deadline);
                        startCounter(deadline);
                        // intialize countdown
                    }
                    if (response.status == 'fail') {
                        $('#mobile').focus();
                    }
                }
            });
        }

        function sendVerifyRequest() {
            $.easyAjax({
                url: '{{ route('verifyOtpCode') }}',
                type: 'POST',
                container: '#verify-otp-form',
                messagePosition: 'inline',
                data: $('#verify-otp-form').serialize(),
                success: function (response) {
                    if (response.status == 'success') {
                        clearLocalStorage();

                        location.reload();
                        $('#verify-mobile-info').html('');

                        // select2 reinitialize
                        $('.select2').select2();
                    }
                    if (response.status == 'fail') {
                        // show number of attempts left
                        let currentAttempts = localStorage.getItem('otp_attempts');

                        if (currentAttempts == 1) {
                            clearLocalStorage();
                        }
                        else {
                            currentAttempts -= 1;

                            $('.attempts_left').html(`${currentAttempts} attempts left`);
                            $('#otp').focus().select();
                            localStorage.setItem('otp_attempts', currentAttempts);
                        }

                        if (Object.keys(response.data).length > 0) {
                            $('#verify-mobile').html(response.data.view);

                            // select2 reinitialize
                            $('.select2').select2();

                            clearInterval(x);
                        }
                    }
                }
            });
        }

        $('body').on('submit', '#request-otp-form', function (e) {
            e.preventDefault();
            sendOTPRequest();
        })

        $('body').on('click', '#request-otp', function () {
            sendOTPRequest();
        })

        $('body').on('submit', '#verify-otp-form', function (e) {
            e.preventDefault();
            sendVerifyRequest();
        })

        $('body').on('click', '#verify-otp', function() {
            sendVerifyRequest();
        })

        function showPassword() {
            var x = document.getElementById("password");
            var z = document.getElementById("passwordLabel");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
            if (z.innerHTML === "Hide Password") {
                z.innerHTML = "Show Password";
            } else {
                z.innerHTML = "Hide Password";
            }
        } 
        $('#showPasswordCheck').prop('checked',false);

        function showConfirmPassword() {
            var x = document.getElementById("confirmpassword");
            var z = document.getElementById("confirmPasswordLabel");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
            if (z.innerHTML === "Hide Password") {
                z.innerHTML = "Show Password";
            } else {
                z.innerHTML = "Hide Password";
            }
        } 
        $('#showConfirmPasswordCheck').prop('checked',false);
    </script>
@endpush