@extends('layout.basic.main')
@section('title', 'サロン予約（カレンダー詳細）')
@push('js')
    <script>
        const displayLineName = '';
        const settingTimeUnit = '';
        const timeMakeCourse = '';
        const hourMakeCourse = timeMakeCourse.split(':')[0]
        const minuteMakeCourse = timeMakeCourse.split(':')[1]
        const domainMediaCalendar = '{{ env("URL_SERVER_MEDIA") }}';
    </script>
    <script src="/tinymce/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
    <script src="/tinymce/langs/ja.js"></script>
    <script src="/js/tailwindcss.js"></script>
    <script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="/plugins/datepicker/locales/bootstrap-datepicker.ja.js"></script>
    <script src="/js/plugins/daterangepicker/daterangepicker.js"></script>
    <script src="/js/plugins/timepicker/bootstrap-timepicker.js"></script>
    <script src="/js/calendar_salon/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/calendar-management.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/calendar_salon/setting_reservation/setting-notify-ful-slot.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-payment.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-policy.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-remind.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-friend-info.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-message.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-free-time-before-after.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-season.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/add-new-booking.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/setting_reservation/setting-limit-booking.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/calendar_salon/calendar_detail.js?v={{config('sns-line.version')}}"></script>

    <script src="/js/form_answer/vuedraggable.min.js"></script>
    <script>
        var dateToday = new Date();
        $(".date-booking-picker").datepicker({
            language: 'ja',
            multidate: true,
            inline: true,
            container: 'body',
            startDate: dateToday
        }).on('changeDate', (e) => {
            $('#selectedDate').val(e.dates);
        })
        $(".start-time").timepicker({
            disableFocus: true,
            showMeridian: false,
            defaultTime: '00:00'
        })
        $(".end-time").timepicker({
            disableFocus: true,
            showMeridian: false,
            defaultTime: '00:00'
        })

        $(".time-picker-remind").timepicker({
            disableFocus: true,
            showMeridian: false
        }).change(function (event) {
            appCalendarSalon.startTime = event.target.value;
        })
        $(".start-time-filter").timepicker({
            disableFocus: true,
            showMeridian: false,
            defaultTime: moment().format('HH:mm')
        })
        $(".end-time-filter").timepicker({
            disableFocus: true,
            showMeridian: false,
            defaultTime: moment().add(6, 'hours').format('HH:mm')
        })

        $(".date-work-schedule-picker").datepicker({
            language: 'ja',
            multidate: true,
            inline: true,
            container: 'body',
            startDate: dateToday,
            format: 'mm/dd/yyyy',
        }).on('changeDate', (e) => {

            // $('#selectedDateAddWork').val(e.dates);
            var dates = $('.date-work-schedule-picker').datepicker('getDates');
            console.log('dates', dates)

            var formattedDates = dates.map(function (date) {
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
            });

            console.log('formattedDates', formattedDates)

            $('#selectedDateAddWork').val(formattedDates.join(','));
        }).on('show', function (e) {
            $('.prev').html('<i class="fas fa-caret-left text-[#cccccc] text-[20px]"></i>');
            $('.next').html('<i class="fas fa-caret-right text-[#cccccc] text-[20px]"></i>');
        });



        const province_default =