@extends("layouts.app")
@section("content")

    <div class="main-slider">
        <img class="img-fluid w-100" src="{{asset('images/innerBnnr.jpg')}}" alt="First slide">
        <div class="carousel-caption">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="text-uppercase">Calendar Consultation</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Main Slider -->

    <section class="calendarSec">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div id='calendar'></div>
                </div>
                <div class="col-12">
                    <h4 class="thank-you-msg"></h4>
                    <div id="calendarForm" class="calendar-form">
                        <h4>Personal Information <span>Fields with * are required</span></h4>
                        <form id="__form">
                            @csrf
                            <div class="form-group">
                                <label>Email *</label>
                                <input name="email" type="text" class="validate-check">
                            </div>
                            <div class="form-group">
                                <label>Name *</label>
                                <input name="name" type="text" class="validate-check">
                            </div>
                            <div class="form-group">
                                <label>Phone *</label>
                                <input name="phone" type="text" class="validate-check">
                            </div>
                            <div class="form-group">
                                <label>Time *</label>
                                <input type="hidden" class="validate-check" name="date">
                                <input name="time" type="time" min="08:00" max="17:00" class="validate-check">
                            </div>
                            <div class="form-group">
                                <label>Services *</label>
                                <select id="cars" name="cars" class="validate-check">
                                    <option value="T-shirts">T-shirts</option>
                                    <option value="Long sleeve crew neck">Long sleeve crew neck</option>
                                    <option value="Hoodies">Hoodies</option>
                                    <option value="Yard Signs">Yard Signs</option>
                                    <option value="Banners">Banners</option>
                                    <option value="Car Magnets">Car Magnets</option>
                                    <option value="Window Signage (Cling, Decal, and Perforated vinyl)">Window Signage
                                        (Cling, Decal, and Perforated vinyl)
                                    </option>
                                    <option value="Door and Wall Decals">Door and Wall Decals</option>
                                    <option value="Stickers">Stickers</option>
                                    <option value="Labels">Labels</option>
                                    <option value="Biz cards">Biz cards</option>
                                    <option value="Flyers">Flyers</option>
                                    <option value="Canvas">Canvas</option>
                                    <option value="Poster">Poster</option>
                                    <option value="Portrait prints">Portrait prints</option>
                                    <option value="Car Wraps">Car Wraps</option>
                                    <option value="Store fronts">Store fronts</option>
                                    <option value="Kiosk Wraps">Kiosk Wraps</option>
                                    <option value="Vending Machine and ATM">Vending Machine and ATM</option>
                                    <option value="Misc">Misc</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Description *</label>
                                <input name="description" type="text" class="validate-check">
                            </div>
                        </form>
                        <h4>Booking Overview</h4>
                        <div class="form-Btn">
                            <button type="button" class="themeBtn submit_btn">Submit</button>
                            <button class="themeBtn">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
{{--   @dd($calendar->calendar_days);--}}

{{--        {{$calendar->calendar_days}}--}}
{{--        {{ $calendar->calendar_time}}--}}


@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script>
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            {{--var booking = @json($events);--}}

{{--            @dd($events);--}}
            $(document).ready(function() {
                // page is now ready, initialize the calendar...
                $('#calendar').fullCalendar({
                    // put your options and callbacks here
                    events : [
                            @foreach($events as $task)
                        {
                            title : '{{ $task->start_time }}',
                            start : "{{ $task->date }}{{ $task->start_time }}",
                        },
                        @endforeach
                    ]
                })
            });

                // const calendar = new FullCalendar.Calendar($('#calendar')[0], {
                //     initialView: 'dayGridMonth',
                //     selectable: true,
                //     unselectAuto: false,
                //     selectAllow: function (e) {
                //         let day1 = moment(e.start).startOf('day')
                //         let day2 = moment(new Date()).startOf('day')
                //
                //         if (daysSelected.indexOf(e.start.getDay().toString()) < 0 || day1.diff(day2) < 0)
                //             return false;
                //         if (e.end.getTime() / 1000 - e.start.getTime() / 1000 <= 86400) {
                //             return true;
                //         }
                //     },
                //     select: function (arg) {
                //         $('input[name=date]').val(arg.startStr)
                //     }
                // });


            $('.submit_btn').click(function () {
                var current_fs = $(this).parents();
                let is_error = null;

                current_fs.find('.validate-check').each(function () {
                    if ($(this).val().trim() === '') {
                        is_error = "Please fill out this " + $(this).attr('name') + " field!";
                        return false;
                    } else if ($(this).attr('name') === 'time') {
                        let openingT = 0
                        let closingT = 0
                        if (timeSelected.length === 2) {
                            openingT = parseInt(timeSelected[0].replace(':', ''))
                            closingT = parseInt(timeSelected[1].replace(':', ''))
                        }

                        let time = parseInt($(this).val().replace(':', ''))
                        if (time < openingT || time > closingT) {
                            if (timeSelected.length === 2) {
                                is_error = `Timing ${timeSelected[0]} to ${timeSelected[1]}.`;
                            } else {
                                is_error = "Timing not set.";
                            }
                            return false;
                        }
                    }
                })
                if (is_error) {
                    toastr.error(is_error);
                    return false;
                } else {
                    $.ajax({
                        url: "{{route('calCons.index')}}",
                        data: $('#__form').serialize(),
                        type: 'post',
                        success: function (data) {
                            if (data.success) {
                                $('.thank-you-msg').text(data.success)
                                $('#calendar').addClass('d-none');
                                $('#calendarForm').addClass('d-none');
                                $('html, body').animate({
                                    scrollTop: $(".calendarSec").offset().top
                                }, 1000);
                                return true;
                            } else {
                                toastr.success(data.error);
                                return false;
                            }
                        }
                    });
                }
            });
        });
    </script>
@endsection