@extends('adminlte::page')

@section('title', $clinic->name . ' スケジュール')

@section('content_header')
    <h5><label class="title-underbar">{{ $clinic->name }} スケジュール</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>
    <div class="modal fade" id="event" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="text-center" style="margin-top:1rem;">
                    <h5 class="modal-title" id="alertModalLabel"><b id="event_title"></b></h5>
                    <hr style="margin-bottom:0px;">
                </div>
                <div class="modal-body">
                    <div class="row" style="margin-bottom: 5px">
                        <div class="col-md-12">
                            <p><span id="event_start_at_detail"></span>&nbsp;～&nbsp;<span id="event_end_at_detail"></span></p>
                        </div>
                    </div>
                    <div id="explanation_detail_row" class="row" style="margin-bottom: 5px">
                        <div class="col-md-12"><p id="explanation_detail"></p></div>
                    </div>
                    <div id="video_chat_url_row" class="row" style="margin-bottom: 5px">
                        <div class="col-md-12"><p><a id="video_chat_url" href="">ビデオチャットに参加する</a></p></div>
                    </div>
                    <div id="event_file_detail_row" class="row" style="margin-bottom: 5px">
                        <div class="col-md-12" id="event_file_detail">
                            <form id="file_dl_form_sample_detail" name="form" style="display:none;" method="post" action="{{ route('admin.download', '') }}" enctype="multipart/form-data">
                                @csrf
                                <p><i class="fa fa-paperclip" aria-hidden="true" style="margin-right:5px;"></i><a id="file_dl_link_sample_detail" href="javascript:form"></a></p>
                            </form>
                        </div>
                    </div>
                    <div id="employee_name_row" class="row" style="margin-bottom: 5px">
                        <div class="col-md-12">
                            <p>
                                <span id="employee_name"></span>
                            </p>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom: 20px;">
                    <div class="col-md-12 d-flex justify-content-center">
                        <div class="col-md-5">
                            <button type="button" class="btn btn-block button-go btn-lg rounded-pill" data-dismiss="modal">{{__('clinic-dashboard-modal.calendar.btn_close')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-12 d-flex align-items-center justify-content-center">
        <a href="{{ route('admin.clinics.show', ['id' => $clinic->id]) }}" class="btn btn-sm btn-block button-go rounded-pill w-50">詳細画面へ戻る</a>
    </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, {
                    locale: 'ja',
                    initialView: 'dayGridMonth',
                    slotMinTime: '09:00:00',
                    scrollTime: '09:00:00',
                    headerToolbar: {
                        // カレンダー上部ボタン定義
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                    },
                    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();
                        }
                    },
                    events: function (info, successCallback, failureCallback) {
                        // 予定取得処理
                        $.ajax({
                            url: "{{ route('admin.clinics.event.list', $clinic->id) }}",
                            type: "get",
                            headers: {
                                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                            },
                            data: {
                                start_date: info.start.valueOf(),
                                end_date: info.end.valueOf(),
                            },
                            dataType: "json"
                        })
                        .done((results) => {
                            // カレンダー上の予定を再描画
                            calendar.removeAllEvents();
                            successCallback(results);
                        })
                        .fail((e) => {
                            console.log(e);
                        });
                    },
                    eventDidMount: function(info){
                        // 予定マウント後のDOMカスタマイズ処理
                        if(info.view.type == 'dayGridMonth' && $(window).width() < 600){
                            // 月単位画面かつ画面幅が600px未満の場合は時間帯は非表示
                            $(info.el).find('div.fc-event-time').remove();
                            if($(info.el).hasClass('fc-daygrid-dot-event')){
                                // 終日でないものはアイコンのみ表示
                                $(info.el).find('div.fc-daygrid-event-dot').css('margin', 'auto');
                                $(info.el).find('div.fc-event-title').remove();
                            }
                        }else if(info.view.type == 'timeGridWeek' && $(window).width() < 650){
                            // 週単位画面かつ画面幅が650px未満の場合は時間帯、タイトルは表示しない
                            $(info.el).find('div.fc-event-time').remove();
                            $(info.el).find('div.fc-event-title').remove();
                        }else if(info.view.type == 'timeGridDay' && $(window).width() < 650){
                            // 日単位画面かつ画面幅が650px未満の場合は時間帯は非表示
                            $(info.el).find('div.fc-event-time').remove();
                        }else{
                            // 時間帯とタイトルについて行を分けて表示
                            $(info.el).css('display', 'block');
                            $('a.fc-daygrid-dot-event .fc-daygrid-event-dot, fc-event-time').css('float', 'left');
                            $('a.fc-daygrid-dot-event .fc-daygrid-event-dot').css('position', 'relative').css('top', '0.3rem');
                            $('a.fc-daygrid-dot-event .fc-event-title').css('clear', 'both');
                        }
                    },
                    eventClick: function(info) {
                        // 詳細ダイアログ初期化、表示
                        $('#explanation_detail').html('');
                        $('#explanation_detail_row').hide();
                        $('#video_chat_url').attr('href', '');
                        $('#video_chat_url_row').hide();
                        $('.file_dl_form_detail').remove();
                        $('#event_file_detail_row').hide();
                        $('#employee_name_row').hide();
                        $('#employee_name').text('');
                        $('b#event_title').text(info.event.title);
                        $('span#event_start_at_detail').text(new Date(info.event.start).toLocaleString().slice( 0, -3));
                        $('span#event_end_at_detail').text('');
                        if(info.event.end){
                            $('span#event_end_at_detail').text(new Date(info.event.end).toLocaleString().slice( 0, -3));
                        }
                        if(!info.event.extendedProps.is_registered_by_clinic){
                            if(info.event.extendedProps.explanation){
                                $('#explanation_detail').html(info.event.extendedProps.explanation);
                                $('#explanation_detail_row').show();
                            }
                            if(info.event.extendedProps.is_video_chat){
                                $('#video_chat_url').attr('href', info.event.extendedProps.video_chat_url);
                                $('#video_chat_url_row').show();
                            }
                            if(info.event.extendedProps.files.length > 0){
                                info.event.extendedProps.files.forEach(function(file){
                                    let fileForm = $('#file_dl_form_sample_detail').clone();
                                    $(fileForm).attr('id', 'file_dl_form_' + file.id);
                                    $(fileForm).attr('name', 'form' + file.id);
                                    $(fileForm).attr('class', 'file_dl_form_detail');
                                    let formActionAttr = $(fileForm).attr('action');
                                    formActionAttr = formActionAttr + '/' + file.id;
                                    $(fileForm).attr('action', formActionAttr);
                                    let link = $(fileForm).find('a#file_dl_link_sample_detail');
                                    $(link).attr('id', 'file_dl_link_detail_' + file.id);
                                    let linkHrefAttr = $(link).attr('href');
                                    $(link).attr('href', linkHrefAttr + file.id + '.submit()');
                                    $(link).text(file.original_file_name);
                                    $(fileForm).show().appendTo('#event_file_detail');
                                });
                                $('#event_file_detail_row').show();
                            }
                            if(info.event.extendedProps.employee_name){
                                $('#employee_name').text(info.event.extendedProps.employee_name);
                                $('#employee_name_row').show();
                            }
                        }
                        $('#event').modal('show');
                    }
                });
                calendar.render();
            });

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