{% extends 'base.html.twig' %}
{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css">
    <style>
        .form-design {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #4e82be;
            color: #ffffff;
        }
        .pad-15{
            padding-top:15px;
            padding-bottom: 15px;
        }
        p{font-size:24px;}
        .footer{
            padding-top:15px;
            padding-bottom:15px;
            /*background-color: #0d47a1 !important;*/
        }
        .modal-body{
            background-color: #4e82be;
            color:#ffffff;
        }
    </style>


    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pickerjs@1.2.1/dist/picker.css">
{% endblock %}
{% block modal %}
    <div class="modal modal-info fade scale" id="modal-default-submit" tabindex="-1" role="dialog"
         aria-labelledby="modal-default-info" aria-hidden="true">
        <div class="modal-dialog modal-primary" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 class="text-center">Test drive is<br /> scheduled for:<br /> <span id="scheduledTime"></span> </h3>
                            <a href="{{ path('pre_check_dashboard', {'hash' : hash}) }}" class="btn btn-block btn-success">Continue</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block body %}
    <div class="container-fluid">
        <div class="row" style="background-color:#0d47a1;height: 90px;">
            <div class="col-xs-12 text-center" style="padding:10px;">
                <span class="text-white text-uppercase logo-text"><img src="{{ asset('images/PreviewLogo.png') }}" height="50px;"/></span>
                <p class="text-white powered-by">Powered by <img src="http://member.iserviceauto.com/iServiceLogo.png" height="20px;"></p>
            </div>
        </div>
        <div class="row form-design">
            <div class="col-xs-12 text-center">
                <h1>Schedule Test Drive</h1>
                <p>Select the desired time</p>
                <p class="text-danger">Date must be in next 14 days</p>
                <p class="text-danger">Hour must be between 8am-7pm</p>
            </div>
            <div class="col-xs-8 pad-15">
                <input type="text" id="date_input" class="form-control">
                <p class="date_input_error hidden text-danger">Invalid date, select a date in next 14 days</p>
                <p class="date_input_error_min_hour hidden text-danger">Invalid hour, select an hour after 08:00 AM</p>
                <p class="date_input_error_max_hour hidden text-danger">Invalid hour, select an hour before 08:30 PM</p>
            </div>
            <div class="col-xs-4 pad-15">
                <button class="btn btn-info btn-block date_selector">Select</button>
            </div>

            <div class="col-xs-12 pad-15">
                <button type="button" id="submit" class="btn hidden btn-success btn-block" data-toggle="modal"
                        data-target="#modal-default-submit">Submit</button>
            </div>
        </div>
        <div class="row footer">
            <div class="col-xs-4">
                <a class="btn btn-info btn-block"
                   href="tel:1}">CALL</a>
            </div>
            <div class="col-xs-4">
                <a class="btn btn-info btn-block"
                   href="sms:{{ twilio_number }}">MESSAGE</a>
            </div>
            <div class="col-xs-4">
                <a class="btn btn-danger btn-block"
                   href="{{ path('pre_check_dashboard', {'hash' : hash}) }}">HOME</a>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}

    <script src="https://cdn.jsdelivr.net/npm/pickerjs@1.2.1/dist/picker.min.js"></script>

    <script>
        $(document).ready(function(){

            let getRoundedDate = (minutes, d=new Date()) => {
                let ms = 1000 * 60 * minutes; // convert minutes to ms
                let roundedDate = new Date(Math.round(d.getTime() / ms) * ms);
                return roundedDate
            }

            let valideDate = false;

            let initialDate = getRoundedDate(15);

            let $error = $('.date_input_error');
            let $errorMinHour = $('.date_input_error_min_hour');
            let $errorMaxHour = $('.date_input_error_max_hour');

            var input = document.getElementById('date_input');
            var picker = new Picker(input, {
                date : initialDate,
                headers: true,
                format: 'YYYY/MM/DD HH:mm',
                title: 'Pick a date and time',
                cancel: 'Cancel',
                confirm: 'OK',
                year: 'Year',
                month: 'Month',
                day: 'Day',
                hour: 'Hour',
                increment: {
                    year: 1,
                    month: 1,
                    day: 1,
                    hour: 1,
                    minute: 15
                },
                hour12: true

            });

            pickerList = document.querySelectorAll('.picker-dialog .picker-list');
            if(!$('.picker-confirm').hasClass('btn-disabled')) {
                $('.picker-confirm').addClass('btn-disabled');
            }
            pickerList.forEach(
                list => list.addEventListener('pointermove', () => {
                    let target = picker.getDate();
                    let canContinue = verifyDates(target);
                    if(canContinue) {
                        $('.picker-confirm').removeClass('btn-disabled');
                    } else {
                        if(!$('.picker-confirm').hasClass('btn-disabled')) {
                            $('.picker-confirm').addClass('btn-disabled');
                        }
                    }

                })
            );

            $('.date_selector').on('click', function(){
                picker.show();
            });



            input.addEventListener('change', function(e){
                let target = picker.getDate();
                let now = new Date();
                let limit = new Date();
                limit.setDate(limit.getDate() + 15);

                let minDate = new Date(target);
                let maxDate = new Date(target);
                minDate.setHours('08');
                minDate.setMinutes('00');

                maxDate.setHours('19');
                maxDate.setMinutes('00');

                if(target > limit) {
                    $error.removeClass('hidden');
                    return;
                }else {
                    if(!$error.hasClass('hidden')){
                        $error.addClass('hidden');
                    }
                }

                if(target < minDate) {
                    $errorMinHour.removeClass('hidden');
                    return;
                } else {
                    if(!$errorMinHour.hasClass('hidden')){
                        $errorMinHour.addClass('hidden');
                    }
                }

                if(target > maxDate) {
                    $errorMaxHour.removeClass('hidden');
                    return;
                } else {
                    if(!$errorMaxHour.hasClass('hidden')){
                        $errorMaxHour.addClass('hidden');
                    }
                }

                if(target < now) {
                    $error.removeClass('hidden');
                    return;
                }else {
                    if(!$error.hasClass('hidden')){
                        $error.addClass('hidden');
                    }
                }

                $('#submit').removeClass('hidden');
            });
        })

        function verifyDates(target) {
            let now = new Date();
            let limit = new Date();
            limit.setDate(limit.getDate() + 15);

            let minDate = new Date(target);
            let maxDate = new Date(target);

            minDate.setHours('08');
            minDate.setMinutes('00');

            maxDate.setHours('19');
            maxDate.setMinutes('00');

            if(target >= limit) {
                return false;
            }
            if(target <= now) {
                return false;
            }
            if(target >= maxDate) {
                return false;
            }
            if(target <= minDate) {
                return false;
            }
            return true;


        }
    </script>

    <script type="text/javascript">

        $('#submit').click(function () {

            var formData = new Object();
            formData.date = JSON.stringify($('#date_input').val());

            $.post('{{ member_url }}api/preview/customer-app/lead-request/new', {
                hash   : '{{ hash }}',
                type : 'testDrive',
                data : JSON.stringify(formData)
            }, function (resp) {
                $('#scheduledTime').text($('#date_input').val());
                $('#modal-default-submit').modal('show');
            }).error(function (e) {
                alert('Submission Failed, please verify and try again');
            });
        });

        /*jQuery.datetimepicker.setLocale('en');
        jQuery('#datetimepicker').datetimepicker({
            //hours12: true,
            format:'m-d-Y g:ia',
            formatTime: 'g:ia',
            defaultDate:new Date(),
            validateOnBlur: false,
            allowTimes: [
                '08:00',
                '08:30',
                '09:00',
                '09:30',
                '10:00',
                '10:30',
                '11:00',
                '11:30',
                '12:00',
                '12:30',
                '13:00',
                '13:30',
                '14:00',
                '14:30',
                '15:00',
                '15:30',
                '16:00',
                '16:30',
                '17:00',
                '17:30',
                '18:00',
                '18:30',
                '19:00',
                '19:30',
                '20:00',
                '20:30',
            ]
        });*/
    </script>
{% endblock %}