@extends("layouts.app")

@push('css-links')
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css"/>
@endpush

@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 method="POST" id="__form">

                            @csrf
                            <input type="hidden" value="" id="calendar_id" name="calendar_id">
                            <div class="form-group">
                                <label>Email *</label>
                                <input name="email" type="text" class="validate-check">
                                <span class="text-danger">@error ('email') {{$message}} @enderror</span>
                            </div>
                            <div class="form-group">
                                <label>Name *</label>
                                <input name="name" type="text" class="validate-check">
                                <span class="text-danger">@error ('name') {{$message}} @enderror</span>

                            </div>
                            <div class="form-group">
                                <label>Phone *</label>
                                <input name="phone" type="text" class="validate-check">
                                <span class="text-danger">@error ('phone') {{$message}} @enderror</span>

                            </div>
                            <div class="form-group">
                                <label>Time *</label>
                                <input type="hidden" class="validate-check" name="date">
                                <input name="time" class="validate-check" type="time" id="time">

                                <span class="text-danger">@error ('time') {{$message}} @enderror</span>


                                {{--<input name="time" type="time" min="08:00" max="17:00" class="validate-check"id="time">--}}
                            </div>
                            <div class="form-group">
                                <label>Services *</label>
                                <select id="cars" name="service" 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>
                            <span class="text-danger">@error ('service') {{$message}} @enderror</span>

                            <div class="form-group">
                                <label>Description *</label>
                                <input name="description" type="text" class="validate-check">
                                <span class="text-danger">@error ('description') {{$message}} @enderror</span>

                            </div>
                            <h4>Booking Overview</h4>
                            <div class="form-Btn">
                                <button type="submit" class="themeBtn submit_btn">Submit</button>
                                <button class="themeBtn">Cancel</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" crossorigin="anonymous"
            referrerpolicy="no-referrer"></script>
    <script>

        $(document).ready(function () {
            const events = [];
            let selected_schedule = null
            @foreach($events as $event)
            events.push({
                id: '{{ $event['id'] }}',
                title: '{{ $event['title'] }}',
                start: "{{ $event['start'] }}",
                start_time: "{{ $event['start_time'] }}",
                end_time: "{{ $event['end_time'] }}",
            })
            @endforeach

            if ($('#calendar').length > 0) {
                const calendar = new FullCalendar.Calendar($('#calendar')[0], {
                    initialView: 'dayGridMonth',
                    selectable: true,
                    unselectAuto: false,
                    events: events,
                    selectAllow: function (e) {
                        // console.log("select", e, events)
                        let day1 = moment(e.start).startOf('day')
                        let day2 = moment(new Date()).startOf('day')

                        if (day1.diff(day2) < 0)
                            return false;
                        if (e.end.getTime() / 1000 - e.start.getTime() / 1000 <= 86400) {
                            const founded = events.filter(val => {
                                return val.start === e.startStr
                            })
                            selected_schedule = founded.length > 0 ? founded : null
                            return founded.length > 0;
                        }
                    },
                    select: function (arg) {
                        $('input[name=date]').val(arg.startStr)
                    }
                });
                calendar.render();
            }

            $('.submit_btn').click(function (e) {
                e.preventDefault()
                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') {
                        if (!selected_schedule || !Array.isArray(selected_schedule)) {
                            is_error = `Please select date first.`;
                            return false
                        }
                        let time = parseInt($(this).val().replace(':', ''))
                        const found = selected_schedule.filter(val => {
                            const openingT = parseInt(val.start_time.replace(':', ''))
                            const closingT = parseInt(val.end_time.replace(':', ''))
                            return time >= openingT || time < closingT
                        })
                        if (found.length < 1) {
                            is_error = `Invalid time select.`;
                            return false;
                        } else {
                            $('#calendar_id').val(found[0].id)
                        }
                    }
                })
                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;
                            }
                        },
                        error: function (res) {
                            if (res.hasOwnProperty('responseJSON') && res.responseJSON.hasOwnProperty('errors')) {
                                const errors = res.responseJSON.errors
                                for (const errorKey in errors) {
                                    for (const errorMsg of errors[errorKey]) {
                                        toastr.error(errorMsg)
                                    }
                                }
                            } else {
                                toastr.error(res.statusText)
                            }
                        }
                    });
                }
            });
        });

        $('#time').timepicker({
            uiLibrary: 'bootstrap4'
        });
    </script>
@endsection