@extends('adminlte::page')

@section('title', '休日の設定')

@section('content_header')
    <h5><label class="title-underbar">休日の設定</label></h5>
@stop
@section('content')
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        .fc-toolbar-chunk{
            display:flex;
        }
        .fc .fc-today-button{
            display:block;
        }
        .fc  h2.fc-toolbar-title{
            font-size: 1.25em;
        }
        .fc-col-header-cell-cushion,
        .fc-daygrid-day-number,
        .fc-daygrid-day-top{
            color: #333;
        }
        .fc-day-sun, .fc-day-hol{
            background-color: #f4d0df;
        }
        .fc-day-sat{
            background-color: #cce3f6;
        }
        .fc-event-title{
            white-space: normal;
        }
        .holiday-name {
            width: 100%;
            font-size: .8em;
            color: red;
        }
    </style>
@stop

@section('js')
    <script type="text/javascript" src='/vendor/fullcalendar/js/index.global.min.js'></script>
    <script type="text/javascript" src='/vendor/fullcalendar/js/locales-all.global.min.js'></script>
    <script type="text/javascript">
        // カレンダー初期化
        let calendar = null;
        document.addEventListener('DOMContentLoaded', function() {
            $.get('{{ route('admin.holiday-data.index') }}', function(holidaysData){
                var calendarEl = document.getElementById('calendar');
                let holidays = Object.keys(holidaysData);
                calendar = new FullCalendar.Calendar(calendarEl, {
                    customButtons: {
                        myCustomButton: {
                            text: '作成',
                            click: function() {
                                window.location.href = "{{ route('admin.holiday.create') }}";
                            }
                        }
                    },
                    locale: 'ja',
                    initialView: 'dayGridMonth',
                    slotMinTime: '09:00:00',
                    scrollTime: '09:00:00',
                    headerToolbar: {
                        // カレンダー上部ボタン定義
                        left: 'prev,next today',
                        center: 'title',
                        right: 'myCustomButton'
                    },
                    dayHeaderContent: function(info){
                        // ヘッダ日付表示カスタマイズ処理(週単位画面で画面幅が600px未満の場合は日付数値のみセル内に表示する)
                        if(info.view.type == 'timeGridWeek' && $(window).width() < 600){
                            return info.date.getDate();
                        }else{
                            return info.text;
                        }
                    },
                    dayHeaderDidMount:function(info){
                        // 各日付セルのマウント後DOMカスタマイズ処理(祝日判定、表示)
                        let strDate = info.date.getFullYear().toString() + '-' + (info.date.getMonth()+1).toString().padStart(2, "0") + '-' + info.date.getDate().toString().padStart(2, "0");
                        let index = holidays.indexOf(strDate);
                        if (index > -1) {
                            if(!info.el.classList.contains('fc-day-sat')){
                                info.el.firstElementChild.classList.add("fc-day-hol");
                            }
                        }
                    },
                    dayCellDidMount: function(info){
                        // 各日付セルのマウント後DOMカスタマイズ処理(祝日判定、表示)
                        let strDate = info.date.getFullYear().toString() + '-' + (info.date.getMonth()+1).toString().padStart(2, "0") + '-' + info.date.getDate().toString().padStart(2, "0");
                        let index = holidays.indexOf(strDate);
                        if (index > -1) {
                            if(!info.el.classList.contains('fc-day-sat')){
                                info.el.firstElementChild.classList.add("fc-day-hol");
                            }
                            if($(window).width() >= 720 || info.view.type == 'timeGridDay'){
                                info.el.firstElementChild.firstElementChild.insertAdjacentHTML("beforeend", "<span class=\"holiday-name\">" + holidaysData[holidays[index]] + "</span>");
                            }
                        }
                    },
                    dayCellContent: function(info){
                        if(info.view.type == 'dayGridMonth'){
                            // 日付表示カスタマイズ処理(月単位画面の場合は日付数値のみをセル内に表示する)
                            return info.date.getDate();
                        }
                    },
                    selectable: true,
                    select: function (info) {
                        let endDateStr = info.end.getFullYear() + '-' + (info.end.getMonth()+1).toString().padStart(2, "0") + '-' + (info.end.getDate()-1).toString().padStart(2, "0");
                        if(info.startStr != endDateStr && info.end.getDate()-1 != 0){
                            return false;
                        }
                        // 編集画面へ遷移
                        window.location.href = '/admin/holiday/edit/' + info.startStr;
                    },
                });
                calendar.render();
            });

            // 画面幅変更時処理
            $(window).resize(function(){
                calendar.destroy();
                calendar.render();
            });
        });
    </script>
@stop