@extends('layouts.front')

@push('styles')
   <link rel="stylesheet" href="{{ asset('assets/css/bootstrap-datepicker3.css') }}">
   <style>
        .location-select + .select2-container--default .select2-selection--single
        {
            box-shadow: 2px 0 5px var(--dark-primary-color);
            background: var(--primary-color);
            border:none;
            height:42px;
            
        }
        .location-select + .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #fff;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
        }
        .location-select + .select2-container--default .select2-selection--single .select2-selection__arrow {
                height: 42px;
        }
        .location-select + .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #fff transparent transparent transparent;
        }

        .bg-mdx-lite {
            background: #fbfbfd;
        }
        .mdx-container .mdx-title {
            font-family: 'Poppins', sans-serif;
            color: #0091ae;
            font-weight: 500;
            font-size: 25px;
        }
        .mdx-container .mdx-card {
            background: #fff;
            /* background: #c1c1c1; */
            padding: 16px;
            border-radius: 8px;
            display: flex;
            height: 100%;
            min-height: 70px;
            align-items: center;
            -webkit-box-shadow: 0px 3px 10px 4px #a8a8a81c;
            -moz-box-shadow: 0px 3px 10px 4px #a8a8a81c;
            box-shadow: 0px 3px 10px 4px #a8a8a81c;
            cursor: pointer;
            transition: all ease 0.3s,
        }
        .mdx-container .mdx-card-row, .mdx-datepicker, .mdx-datepicker table thead tr:nth-child(2) {
            background: #fff;
            border-radius: 8px;
            -webkit-box-shadow: 0px 3px 10px 4px #a8a8a81c;
            -moz-box-shadow: 0px 3px 10px 4px #a8a8a81c;
            box-shadow: 0px 3px 10px 4px #a8a8a81c;
            transition: all ease 0.3s;
            overflow: hidden;
        }
        .mdx-card .mdx-card-title {
            flex: 1;
            font-family: 'Poppins', sans-serif;
            font-weight: 600;
            color: #33475b;
            font-size: 16px;
        }
        .mdx-card .mdx-card-icon {
            margin-right: 18px;
            margin-left: 4px;
            font-size: 18px;
            color: #7c98b6;
        }
        .mdx-card .mdx-card-icon .mdx-ci-checked {
            display: none;
        }
        .mdx-card .mdx-card-icon .mdx-ci-unchecked {
            display: block;
        }
        .mdx-card-select  {
            height: 100%;
            padding-bottom: 16px;
        }
        .mdx-card-select input.mdx-cs-radio, .mdx-grid-item input.mdx-cs-radio {
            visibility: hidden;
            height: 0;
            position: absolute;
        }
        .mdx-card-select input:checked + label.mdx-card {
            background: #ff7a59;
        }
        .mdx-card-select input:checked + label.mdx-card .mdx-card-title {
            color: #fff;
        }
        .mdx-card-select input:checked + label.mdx-card .mdx-card-icon {
            color: #fff;
        }
        .mdx-card-select input:checked + label.mdx-card .mdx-card-icon .mdx-ci-checked {
            display: block;
        }
        .mdx-card-select input:checked + label.mdx-card .mdx-card-icon .mdx-ci-unchecked {
            display: none;
        }
        .mdx-card .mdx-ct-main {
            display: block;
        }
        .mdx-card .mdx-ct-sub {
            font-weight: 400;
            font-size: 15px;
            opacity: 0.9;
        }
        .mdx-datepicker .datepicker .prev, .mdx-datepicker .datepicker .datepicker-switch, .mdx-datepicker .datepicker .next, .mdx-datepicker .datepicker table tr th.dow, .mdx-datepicker .datepicker table tr td.day, .mdx-datepicker .datepicker table tr td span.new, .mdx-datepicker .datepicker table tr td span {
            color: #33475b;
            font-family: 'Poppins', sans-serif;
            font-size: 16px;
        }
        .mdx-datepicker .datepicker .datepicker-switch:hover, .mdx-datepicker .datepicker .prev:hover, .mdx-datepicker .datepicker .next:hover, .mdx-datepicker .datepicker tfoot tr th:hover {
            background-color: #fff;
            color: #12181d;
        }
        .mdx-datepicker .datepicker .datepicker-switch {
            text-transform: none;
            font-weight: 600;
        }
        .mdx-datepicker .datepicker table tr td.day {
            font-size: 15px;
            font-weight: 600;
        }
        .mdx-datepicker .datepicker table tr th.dow {
            color: #85919d;
        }
        .mdx-datepicker .datepicker-inline {
            padding: 0px 0px 16px 0px;
        }
        .mdx-datepicker .datepicker table tr td.disabled, .mdx-datepicker .datepicker table tr td.disabled:hover, .mdx-datepicker .datepicker table tr td span.disabled, .mdx-datepicker .datepicker table tr td span.disabled:hover {
            color: inherit;
        }
        .mdx-datepicker .datepicker table tr td.active.active, .mdx-datepicker .datepicker table tr td.active.active:focus, .mdx-datepicker .datepicker table tr td.active.highlighted.active:focus, .mdx-datepicker .datepicker table tr td.active.active:hover, .mdx-datepicker .datepicker table tr td span.active.active, .mdx-datepicker .datepicker table tr td span.active.active:hover {
            background: #ff7a59;
            color: #fff;
            box-shadow: none;
        }
        .mdx-grid-card {
            display: grid;
            padding: 40px 16px;
            gap: 16px;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            transition: all ease 0.3s;
        }
        .mdx-grid-item {
            transition: all ease 0.3s;
        }
        .mdx-grid-item label.mdx-gi-label {
            background-color: #f1f4f7;
            color: #0091ae;
            padding: 18px 5px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            display: block;
            margin: 0;
            cursor: pointer;
            font-family: 'Poppins', sans-serif;
        }
        .mdx-grid-item input:checked + label.mdx-gi-label {
            background: #ff7a59;
            color: #fff;
        }
        .mdx-slots {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: start;
        }
        .mdx-slot-msg {
            text-align: center;
            padding: 40px 0px;
            color: #ff7a59;
            font-weight: 500;
            font-family: 'Poppins', sans-serif;
        }
        .mdx-slot-msg.info {
            color: #0091ae;
        }
        #mdxSlots .alert-custom
        {
            color: #ff7a59;
        }
        .bg-mdx-lite .alert
        {
            font-size: 17px;
        }
   </style>
@endpush

@section('content')
    <section class="section">
        <section class="booking-time sp-80 bg-mdx-lite">
            @if(Session::has('message'))        
                <div class="container mdx-container">
                    <div class="alert alert-success" role="alert">
                        {{ Session::get('message') }}
                    </div>
                </div>        
            @endif
            <div class="container mdx-container">
                <h3 class="mdx-title" id="select-location">@lang('front.selectCenter')</h3>
                <div class="row">
                    @foreach($locations as $location)
                    <div class="col-lg-4 col-md-6 col-xs-12">
                        <div class="mdx-card-select">
                            <input class="mdx-cs-radio" type="radio" name="location" id="location_id{{ $location->id }}" value="{{ $location->id }}" {{ (isset($bookingDetails['bookingLocation']) && $bookingDetails['bookingLocation'] == $location->id)?'checked':'' }} onclick="handleLocation('{{$location->id}}')">
                            <label class="mdx-card" for="location_id{{ $location->id }}">
                                <span class="mdx-card-icon">
                                    <i class="fa fa-circle-thin mdx-ci-unchecked"></i>
                                    <i class="fa fa-check-circle mdx-ci-checked"></i>
                                </span>
                                <span class="mdx-card-title">
                                    <span class="mdx-ct-main">{{ $location->name }}</span>
                                    <span class="mdx-ct-sub">
                                        @if ($location->address_line1)
                                        {{ $location->address_line1.' ' }}
                                        @endif
                                        @if ($location->address_line2)
                                        {{ $location->address_line2.' ' }}
                                        @endif
                                        @if ($location->city)
                                        {{ $location->city.' ' }}
                                        @endif
                                        @if ($location->post_code)
                                        {{ '- '.$location->post_code }}
                                        @endif
                                    </span>
                                </span>
                            </label>
                        </div>
                    </div>
                    @endforeach
                </div>
                <br>
                <h3 class="mdx-title">@lang('front.selectBookingTime')</h3>
                <div class="mdx-card-row">
                    <div class="row">
                        <div class="col-lg-6 col-xs-12">
                            <div class="mdx-datepicker w-100">
                                <div id="datepicker"></div>
                                <input type="hidden" id="booking_date" name="booking_date">
                            </div>
                        </div>
                        <div class="col-lg-6 col-xs-12">
                            <div class="mdx-slots" id="mdxSlots"></div>
                        </div>
                        {{-- <div class="col-12"></div> --}}
                    </div>
                </div>
                <br>
                <br>
            </div>



            <div class="container">
                {{-- <div class="row">
                    <div class="col-12">
                        <div class="all-title">
                            <h3 class="sec-title">
                                @lang('front.selectCenter')
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="w-100">
                    <div class="row">
                        <div class="col-md-4 offset-md-4 form-group">
                            <select name="location_id" id="location_id" class="location-select select2" style="width: 100%">
                                @foreach($locations as $location)
                                    <option value="{{ $location->id }}" {{ (isset($bookingDetails['bookingLocation']) && $bookingDetails['bookingLocation'] == $location->id)?'selected':'' }}>{{ $location->name }} ( {{ $location->city }} ) </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="all-title">
                            <h3 class="sec-title">
                                @lang('front.selectBookingTime')
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="booking-slots w-100">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="date-picker w-100">
                                <div id="datepicker"></div>
                                <input type="hidden" id="booking_date" name="booking_date">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="slots-wrapper">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-30">
                    <div class="col-12">
                        <center>
                            <h5 style="color: crimson;" id="msg_div"></h5>
                        </center>
                    </div>
                </div> --}}
                <div class="row mt-30">
                    <div class="col-12">
                        <div class="navigation">
                            <a href="{{ route('front.index') }}" class="btn btn-custom btn-dark"><i class="fa fa-angle-left mr-2"></i>@lang('front.navigation.goBack')</a>
                            <a id="nextBtn" href="javascript:;" onclick="addBookingDetails()" class="btn btn-custom btn-next-green">@lang('front.next') <i class="fa fa-angle-right ml-1"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
@endsection

@push('footer-script')
    <script src="{{ asset('front-assets/js/date.format.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    @if ($locale !== 'en')
        <script src="{{ 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.'.$locale.'.min.js' }}" charset="UTF-8"></script>
    @endif
    <script>
        $(function () {
           // $('#location_id').select2();
            @if (sizeof($bookingDetails) > 0)
                getBookingSlots({ 
                    bookingDate:  '{{ $bookingDetails['bookingDate'] }}',
                    bookingLocation:  bookingDetails.bookingLocation, 
                    _token: "{{ csrf_token() }}"
                });

                var bookingDate = '{{ $bookingDetails['bookingDate'] }}';

                bookingDetails.bookingDate = bookingDate;
                $('#datepicker').datepicker('update', dateFormat(new Date(bookingDate), 'yyyy-mm-dd', true));
            @endif
        });

        @if($service->start_date != '' && $service->start_date != '0000-00-00' && $service->start_date > date('Y-m-d'))
            let startDate = '{{$service->start_date}}';
        @else
            let startDate = '-0d';
        @endif

        @if($service->end_date != '' && $service->end_date != '0000-00-00')
            let endDate = '{{$service->end_date}}';
        @else
            let endDate = '+365d';
        @endif

        var datepickerOptions = {
            // todayHighlight: true,
            templates: {
                leftArrow: '<i class="fa fa-chevron-left"></i>',
                rightArrow: '<i class="fa fa-chevron-right"></i>'
            },
            {{-- startDate: startDate,
            endDate: endDate, --}}
            language: '{{ $locale }}',
            weekStart: 0,
            format: "yyyy-mm-dd"
        }    
        $('#datepicker').datepicker(datepickerOptions);

        var bookingDetails = {_token: $("meta[name='csrf-token']").attr('content')};
        // bookingDetails.bookingLocation = $('#location_id').val();
        var selectedLocation = $('input[name=location]:checked').val();
        bookingDetails.bookingLocation = selectedLocation;
        if (selectedLocation) {
            getAvailableDates(selectedLocation);
        }

        $('body').on('change','#location_id',function(e){
            bookingDetails.bookingLocation = $('#location_id').val();
            if ('bookingDate' in bookingDetails) {
                getBookingSlots({ 
                    bookingDate:  bookingDetails.bookingDate,
                    bookingLocation:  bookingDetails.bookingLocation, 
                    _token: "{{ csrf_token() }}"
                });
            }
        })

        function handleLocation(location_id) {
            $('#mdxSlots').html('<div class="mdx-slot-msg info">Loading...</div>');
            getAvailableDates(location_id);

            bookingDetails.bookingLocation = location_id;
            /* if ('bookingDate' in bookingDetails) {
                getBookingSlots({ 
                    bookingDate:  bookingDetails.bookingDate,
                    bookingLocation:  bookingDetails.bookingLocation, 
                    _token: "{{ csrf_token() }}"
                });
            } */
        }

        function formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2) 
                month = '0' + month;
            if (day.length < 2) 
                day = '0' + day;

            return [year, month, day].join('-');
        }

        function getAvailableDates(location_id) {
            $.easyAjax({
                url: "{{ route('front.availableDates') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    location_id: location_id,
                    service_id: "{{ $service->id }}"
                },
                success: function (response) {
                    if(response.status == 'success'){
                        if(response.dates != '')
                            var availableDates = response.dates.split(',');
                        else
                            var availableDates = [];

                        function checkAvailable(date) {
                            if ($.inArray(formatDate(date), availableDates) != -1) {
                                return true;
                            }
                            return false;
                        }
                        if(availableDates.length > 0)
                        {
                            $('#datepicker').datepicker('destroy').datepicker({...datepickerOptions, beforeShowDay: checkAvailable,defaultViewDate: new Date(availableDates[0])});

                            $('#datepicker').datepicker("setStartDate", new Date(availableDates[0]) );
                            $('#datepicker').datepicker("setEndDate", new Date($(availableDates).get(-1)) );

                            if (bookingDetails.bookingDate && availableDates.includes(bookingDetails.bookingDate)) {
                                $('#datepicker').datepicker("setDate", bookingDetails.bookingDate );
                            }
                            else {                        
                                $('#mdxSlots').html('<div class="mdx-slot-msg">Select Date...</div>');
                            }
                        }
                        else
                        {
                            $('#datepicker').datepicker('destroy').datepicker({...datepickerOptions, beforeShowDay: checkAvailable});
                            $('#mdxSlots').html('<div class="mdx-slot-msg">No Dates Available</div>');
                        }
                    } else {
                    }
                }
            })
        }

        function getBookingSlots(data) {
            if (bookingDetails.bookingLocation) {
                $('#mdxSlots').html('<div class="mdx-slot-msg info">Loading...</div>');
                $.easyAjax({
                    url: "{{ route('front.bookingSlots') }}",
                    type: "POST",
                    data: data,
                    success: function (response) {
                        if(response.status == 'success'){
                            $('#mdxSlots').html(response.view);
                            // check for cookie
                            @if (sizeof($bookingDetails) > 0)                            

                                var bookingTime = '{{ $bookingDetails['bookingTime'] }}';
                                var bookingDate = '{{ $bookingDetails['bookingDate'] }}';
                                var emp_name    = '{{ $bookingDetails['emp_name'] }}';

                                if (bookingDate == bookingDetails.bookingDate) {
                                    bookingDetails.bookingTime = bookingTime;
                                    $(`input[value='${bookingTime}']`).attr('checked', true);
                                    if(emp_name == ''){ emp_name = 'No Employee';  }
                                //    $('#show_emp_name_div').show();
                                    $('#show_emp_name_div').html(emp_name+' is selected for this booking..!');
                                }
                                else {
                                    bookingDetails.bookingTime = '';
                                }
                            @else
                                bookingDetails.bookingTime = '';
                            @endif
                        } else {
                            $('#mdxSlots').html('<div class="mdx-slot-msg">' + response.msg + '</div>');
                            bookingDetails.bookingTime = '';
                            // $('.slots-wrapper').html('');
                            // $('.slots-wrapper').css('display', 'none');
                            // $('#msg_div').show();
                            // $('#msg_div').html(response.msg);
                        }
                    }
                });
            } else {
                $('html, body').animate({
                    scrollTop: $("#select-location").offset().top
                }, 1000);

                $('#mdxSlots').html('<div class="mdx-slot-msg">Select Location...</div>');                
            }
        }

        $('#datepicker').on('changeDate', function() {
            // $('.slots-wrapper').css({'display': 'flex', 'align-items': 'center'});
            // var initialHeight = $('.slots-wrapper').css('height');
            // var html = '<div class="loading text-white d-flex align-items-center" style="height: '+initialHeight+';">Loading... </div>';
            // $('.slots-wrapper').html(html);
            if (bookingDetails.bookingLocation) {
                $('html, body').animate({
                    scrollTop: $("#mdxSlots").offset().top
                }, 1000);
            }

            var formattedDate = $('#datepicker').datepicker('getFormattedDate');

            $('#booking_date').val(formattedDate);
            bookingDetails.bookingDate = dateFormat((new Date(formattedDate)), "yyyy-mm-dd", true);

            getBookingSlots({ 
                bookingDate:  bookingDetails.bookingDate,
                bookingLocation:  bookingDetails.bookingLocation, 
                _token: "{{ csrf_token() }}"
            });
        });

        $(document).on('change', $('input[name="booking_time"]'), function (e) {
            bookingDetails.bookingTime = $(this).find('input[name="booking_time"]:checked').val();
        });

        function addBookingDetails() {
            bookingDetails.selected_user = $('#selected_user').val();
            
            // console.log(bookingDetails);
            $.easyAjax({
                url: '{{ route('front.addBookingDetails') }}',
                type: 'POST',
                container: 'section.section',
                data: bookingDetails,
                success: function (response) {
                    if (response.status == 'success') {
                        window.location.href = '{{ route('front.checkoutPage') }}'
                    }
                },
                error: function (err) {
                   var errors = err.responseJSON.errors;
                    for (var error in errors) {
                       $.showToastr(errors[error][0], 'error')
                    }
                }
            });
        }

        function checkUserAvailability(date, radioID, time) {
            $('#select_user_div').hide();
            $('#no_emp_avl_msg').hide();
            $('#show_emp_name_div').hide();
            $.easyAjax({
                url: '{{ route('front.checkTimeAvailability') }}',
                type: 'POST',
                container: 'section.section',
                data: {
                    date:date,
                    bookingLocation:  bookingDetails.bookingLocation, 
                    _token: "{{ csrf_token() }}" 
                },
                success: function (response) {
                    if (response.continue_booking == 'no') {
                        $('#no_emp_avl_msg').show();
                        $('#timeSpan').html(time);
                        $('#radio'+radioID).prop("checked", false);
                        bookingDetails.bookingTime = '';

                    } else {
                        $('#no_emp_avl_msg').hide();
                        if (typeof response.select_user !== 'undefined') {
                            $('#select_user_div').show();
                            $('#select_user').html(response.select_user);
                        }
                    }
                }
            });
        }
    </script>
@endpush