@extends('layout.basic.main')
@section('title', 'カレンダー予約（情報登録）')
@push('css')
<link rel="stylesheet" href="/css/booking_manager/index.css?v={{config("sns-line.version")}}">
<style>
    .c28__form-group {
        padding: 15px;
        border: 2px solid #e8e8e8;
        width: 700px;
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        border-radius: 5px;
    }

    .c28__group_input {
        display: flex;
        align-items: end;
        flex-direction: column-reverse;
    }

    .c__item {
        align-items: end;
    }

    .c__item .title {
        width: 120px;
        background: #F6F6F6;
        text-align: center;
        padding: 8px;
        border-radius: 5px;
        font-weight: bold;
        color: #51595C;
    }

    textarea {
        resize: none;
    }

    .c_h_file-remove {
        display: none;
    }

    .modal-dialog-centered {
        display: flex;
        align-items: center;
        min-height: calc(100% - (1.75rem * 2));
    }

    .modal-content {
        width: 100% !important;
    }

    .modal-header {
        border-bottom: none !important;
    }

    .create__calendar *:not(span) {
        font-weight: bold;
    }
</style>
@endpush

@section('content')
{{--new calendar--}}
<h2 style="font-size: 23px; color: #51595C; font-weight: bold; padding: 10px 10px 10px 0;width: 760px">カレンダー情報登録
    @if(!empty($calendar))
    <span style="float: right; font-size: 20px">カレンダー作成日 {{ \Carbon\Carbon::parse($calendar->created_at)->format('Y.m.d') }}</span>
    @endif
</h2>
<div class="create__calendar">
    <div class="c28__form-group">
        <div class="c__title-group">
            <div class="title col-sm-4">
                <span class="ui_mark-title">基本情報</span>
            </div>
        </div>
        <form name="form_create_booking_calendar" id="form_create_booking_calendar" method="post" autocomplete="off">
            <div class="c__item">
                <lable class="title">管理名</lable>
                <div class="col-sm-10">
                    <div class="w-100 c28__group_input">
                        <input type="text" class="form-control" name="manager_name" maxlength="10" onkeyup="maxLengthName(event,'.max_length_namev2')" value="{{ $calendar->manager_name ?? '' }}">
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_namev2">0</span>/10</span>
                    </div>
                    <span class="text-danger" data-error="manager_name"></span>
                </div>
            </div>

            <div class="c__item">
                <lable class="title" style="margin-bottom: 18px">表示店舗名</lable>
                <div class="col-sm-10">
                    <div class="w-100 c28__group_input">
                        <textarea class="form-control" name="calendar_name" maxlength="30" onkeyup="maxLengthName(event,'.max_length_name')">{{ $calendar->calendar_name ?? '' }}</textarea>
                        <span style="margin-left: 5px; font-size: 12px"><span class="max_length_name">0</span>/30</span>
                    </div>
                    <span class="text-danger" data-error="calendar_name"></span>
                </div>
            </div>
    </div>
    <div class="c28__form-group">
        <div class="c__title-group">
            <div class="title col-sm-2">
                <span class="ui_mark-title" style="max-width: 200px">LINEトーク画面 表示設定</span>
            </div>
        </div>
        <div class="c__item">
            <img src="{{ url('/images/create_formanswer.png') }}" style="max-width: 300px">
        </div>
        <div class="c__item">
            <lable class="title" style="margin-bottom: 18px">タイトル</lable>
            <div class="col-sm-10">
                <div class="w-100 c28__group_input">
                    <textarea class="form-control" name="line_title" maxlength="30" onkeyup="maxLengthName(event,'.max_length_line_title')">{{ $calendar->line_title ?? '' }}</textarea>
                    <span style="margin-left: 5px; font-size: 12px"><span class="max_length_line_title">0</span>/30</span>
                </div>
                <span class="text-danger" data-error="line_title"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="title" style="margin-bottom: 18px">説明</lable>
            <div class="col-sm-10">
                <div class="w-100 c28__group_input">
                    <textarea class="form-control" name="line_explain" maxlength="30" onkeyup="maxLengthName(event,'.max_length_line_explain')">{{ $calendar->line_explain ?? '' }}</textarea>
                    <span style="margin-left: 5px; font-size: 12px"><span class="max_length_line_explain">0</span>/30</span>
                </div>
                <span class="text-danger" data-error="line_explain"></span>
            </div>
        </div>
    </div>
    <div class="c28__form-group">
        <div class="c__title-group">
            <div class="title col-sm-2">
                <span class="ui_mark-title">詳細情報</span>
            </div>
        </div>
        <div class="c__item c__item-long">
            <lable class="title col-sm-2">イメージ</lable>
            <div class="col-sm-10">
                <div class="c_h_file">
                    <div class="c_h_divimage">
                        @if($calendar)
                        @if($calendar->calendar_image)
                        <div class="c_h_file-preview">
                            <img src="{{checkFullUrl( $calendar->calendar_image) ?  $calendar->calendar_image : (env('URL_SERVER_MEDIA'). $calendar->calendar_image) }}">
                        </div>
                        @endif
                        @endif
                    </div>
                    <div class="c_h_file-upload">
                        <label for="calendar-image" style="box-shadow: 0 2px 0 #00000080" class="c_h_custom-file-upload">
                            <span>選択</span>
                        </label>
                        <input id="calendar-image" class="c_h_file-input" type="file" name="calendar-image" />
                    </div>
                    <div class="c_h_file-remove" style="box-shadow: 0 2px 0 #00000080">
                        <span class="h_refresh">リセット</span>
                    </div>
                </div>
                <span class="text-danger error-type-image"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">ウェブサイト</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="website" value="{{ $calendar->website ?? '' }}">
                <span class="text-danger" data-error="website"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">電話番号</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="phone" value="{{ $calendar->phone ?? '' }}">
                <span class="text-danger" data-error="phone"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">住所</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="address" value="{{ $calendar->address ?? '' }}">
                <span class="text-danger" data-error="address"></span>
            </div>
        </div>
        <div class="c__item c__item-long">
            <lable class="title" style="margin-bottom: 18px">アクセス</lable>
            <div class="col-sm-10">
                <textarea name="access" class="form-control">{{ $calendar->access ?? '' }}</textarea>
                <span class="text-danger" data-error="access"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">営業時間</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="work_time" value="{{ $calendar->work_time ?? '' }}">
                <span class="text-danger" data-error="work_time"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">定休日</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="off_day" value="{{ $calendar->off_day ?? '' }}">
                <span class="text-danger" data-error="off_day"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">支払い方法</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="payment_methods" value="{{ $calendar->payment_methods ?? '' }}">
                <span class="text-danger" data-error="payment_methods"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">設備</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="equipment" value="{{ $calendar->equipment ?? '' }}">
                <span class="text-danger" data-error="equipment"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">スタッフ数</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" onkeypress="numbersOnly(event)" name="taft" value="{{ $calendar->taft ?? '' }}">
                <span class="text-danger" data-error="taft"></span>
            </div>
        </div>
        <div class="c__item">
            <lable class="col-sm-2 title">駐車場</lable>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="parking_lot" autocomplete="off" value="{{ $calendar->parking_lot ?? '' }}">
                <span class="text-danger" data-error="parking_lot"></span>
            </div>
        </div>
        <div class="c__item c__item-long">
            <lable class="title" style="margin-bottom: 18px">その他</lable>
            <div class="col-sm-10">
                <textarea name="desc" class="form-control">{{ $calendar->desc ?? '' }}</textarea>
                <span class="text-danger" data-error="desc"></span>
            </div>
        </div>
    </div>
    <div class="c28__form-group">
        <div class="c__title-group">
            <div class="title col-sm-5">
                <span class="ui_mark-title">注意事項・利用規約</span>
                <span class="c_h_mk_require text-primary" style="margin-left: 5px;right: unset;">任意</span>
            </div>
        </div>
        <div class="c__item c__item-long">
            {{-- <lable class="col-sm-2 title">注意事項・利用規約 </lable>--}}
            <div class="w-100" style="padding-right: 15px;">
                <textarea name="rules" class="form-control">{{ $calendar->rules ?? '' }}</textarea>
                <span class="text-danger" data-error="rules"></span>
            </div>
        </div>
    </div>
    </form>
    <div style="display:flex;justify-content: space-between; width: 700px">
        @if($check_bot == 1)
        <button style="width: 170px; box-shadow: 0 2px 0 #00000080" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg checktrue" type="button" id="btn-create-calendar" data-submit="{{ $calendar ? 1 : 0 }}">保存
        </button>
        @else
        <button style="width: 170px; box-shadow: 0 2px 0 #00000080" class="btn btn-sns-line btn-sns-line-success btn-sns-line-lg checkfalse" type="button" onclick="showMessageCheckBot('{{$msg_plan}}')">保存
        </button>
        @endif
        @if($calendar)
        <button data-toggle="modal" data-target="#exampleModalCenter" onclick="document.getElementById('password').value = ''; document.getElementById('error-password').html = ''" style="width: 170px; box-shadow: 0 2px 0 #00000080" class="btn btn-sns-line btn-sns-line-danger btn-sns-line-lg" type="button">カレンダー削除
        </button>
        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="opacity: 1;font-size: 27px">
                            <span class="line-icon line-icon-close">
                                <i class="fas fa-times"></i>
                            </span>
                        </button>
                    </div>
                    <div class="modal-body" style="padding-top: 0;">
                        <div class="text-center text-danger">
                            <h4>すでに登録されている予約情報等復元できなくなりますが</h4>
                            <h4>本当にカレンダーを削除しますか？</h4>
                        </div>
                        <div style="margin: 15px;">
                            <p class="text-center" style="margin-bottom: 5px">確認のためログインパスワードを入力してください</p>
                            <input id="password" type="password" class="form-control" style="height: 38px;width: 80% !important;margin: 0 auto;">
                            <div class="text-danger" id="error-password" style="margin: 0 auto;width: 80%;"></div>
                        </div>
                    </div>
                    <div class="text-center" style="margin-bottom: 35px">
                        <button type="button" class="btn btn-sns-line btn-sns-line-danger btn-sns-line-lg" onclick="confirmRemoveCalendar()" style="width: 100px;height: 40px">削除する
                        </button>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
    <div>
        <a href="{{ route('booking.manager') }}" class="btn btn-sns-line btn-sns-line-secondary btn-sns-line-lg" style="width: 120px; box-shadow: 0 2px 0 #00000080">戻る</a>
    </div>
    @if($calendar)
    <input type="hidden" value="{{ $calendar->id }}" name="calender-id">
    @endif
</div>
@endsection

@push('js')
<script src="/js/booking_manager/japanese-holidays.min.js?v={{config('sns-line.version')}}"></script>
<script src="/js/booking_manager/message.js?v={{config('sns-line.version')}}"></script>
<script src="/js/booking_manager/function.js?v={{config('sns-line.version')}}"></script>
<script>
    const calendar_image = "{{ $calendar->calendar_image ?? '' }}";
    const bot_id = "{{ $calendar ? $calendar->bot_id : '' }}";
    const calendar_id = "{{ $calendar ? $calendar->id : '' }}";
    $(document).ready(function() {
        let lenghtName = $('textarea[name=calendar_name]').val().length;
        let lenghtNameV2 = $('input[name=manager_name]').val().length;
        $('.max_length_name').html(lenghtName);
        $('.max_length_namev2').html(lenghtNameV2);
        if (calendar_image) {
            $('.c_h_file-remove').show();
        } else {
            $('.c_h_file-remove').hide();
        }
    })
    $(document).on('click', '.h_refresh', function() {
        $('.c_h_divimage').html('');
        $('.c_h_file-remove').hide();
    })
    $(document).on('change', '#calendar-image', function() {
        $('.error-type-image').html('');
        if (this.files && this.files[0]) {
            var checkImage = checkFileImage(this.files[0]);
            if (checkImage) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('.c_h_divimage').html(`
                        <div class="c_h_file-preview">
                            <img src="` + e.target.result + `">
                        </div>`);
                };
                reader.readAsDataURL(this.files[0]);
                $('.c_h_file-remove').show();
            } else {
                $('.error-type-image').html(get_message.format_image);
                return false;
            }
        }
    })
    $(document).on('click', '#btn-create-calendar', function() {
        let count_error = 0;
        var type_submit = $(this).data('submit');
        var manager_name = $('input[name="manager_name"]').val();
        var calendar_name = $('textarea[name="calendar_name"]').val();
        var website = $('input[name="website"]').val();
        var phone = $('input[name="phone"]').val();
        var address = $('input[name="address"]').val();
        var access = $('textarea[name="access"]').val();
        var work_time = $('input[name="work_time"]').val();
        var off_day = $('input[name="off_day"]').val();
        var payment_methods = $('input[name="payment_methods"]').val();
        var equipment = $('input[name="equipment"]').val();
        var taft = $('input[name="taft"]').val();
        var parking_lot = $('input[name="parking_lot"]').val();
        var desc = $('textarea[name="desc"]').val();
        var rules = $('textarea[name="rules"]').val();
        var calendar_image = $('#calendar-image')[0].files[0] ?? '';
        var line_title = $('textarea[name="line_title"]').val();
        var line_explain = $('textarea[name="line_explain"]').val();

        let flag = true;

        var require_manager_name = inputRequire(manager_name, 'manager_name', '管理名');
        if (!require_manager_name) {
            alert('管理名' + get_message.require);
            $('input[name="manager_name"]').focus();
            count_error++;
        }
        var require_calendar_name = inputRequire(calendar_name, 'calendar_name', '表示店舗名');
        if (!require_calendar_name) {
            alert('表示店舗名' + get_message.require);
            $('input[name="calendar_name"]').focus();
            count_error++;
        }
        if (require_calendar_name && require_manager_name) {
            var require_manager_name = validateCountString(10, manager_name);
            var validate_calendar_name = validateCountString(30, calendar_name);
            var validate_phone = validatePhone(phone);
            if (!require_manager_name) {
                alert('管理名は最大桁数20を超えてます。');
                $(`input[name="manager_name"]`).focus();
                $(`[data-error='manager_name']`).html('管理名は最大桁数20を超えてます。');
                count_error++;
            } else {
                $(`[data-error='manager_name']`).html('');
            }
            if (!validate_calendar_name) {
                alert('表示店舗名は最大桁数30を超えてます。');
                $(`textarea[name="calendar_name"]`).focus();
                $(`[data-error='calendar_name']`).html('表示店舗名は最大桁数30を超えてます。');
                count_error++;
            } else {
                $(`[data-error='calendar_name']`).html('');
            }
            if ($.trim(phone) != '' && !validate_phone) {
                alert(get_message.format_phone);
                $(`input[name="phone"]`).focus();
                $(`[data-error='phone']`).html(get_message.format_phone);
                count_error++;
            } else {
                $(`[data-error='phone']`).html('');
            }
            if (count_error > 0) {
                flag = false;
            }
            if (flag) {
                var data = new FormData;
                data.append('manager_name', manager_name);
                data.append('calendar_name', calendar_name);
                data.append('website', website);
                data.append('phone', phone);
                data.append('address', address);
                data.append('access', access);
                data.append('work_time', work_time);
                data.append('off_day', off_day);
                data.append('payment_methods', payment_methods);
                data.append('equipment', equipment);
                data.append('taft', taft);
                data.append('parking_lot', parking_lot);
                data.append('desc', desc);
                data.append('rules', rules);
                data.append('line_title', line_title);
                data.append('line_explain', line_explain);
                data.append('type_submit', type_submit);
                if (type_submit == 1) {
                    var calendar_id = $('input[name="calender-id"]').val();
                    var find_image = $('.c_h_divimage').find('img').length;
                    data.append('is_upload_image', find_image);
                    data.append('calendar_id', calendar_id);
                }
                if (calendar_image !== '') {
                    data.append('calendar_image', calendar_image);
                }

                $.ajax({
                    type: "POST",
                    url: "{{ route('ajax.booking_calendar.save') }}",
                    data: data,
                    enctype: 'multipart/form-data',
                    processData: false,
                    contentType: false,
                    headers: {
                        'Accept': ' application/json',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function() {
                        $.LoadingOverlay('show');
                    },
                    success: function(response) {
                        $.LoadingOverlay('hide');
                        if (response.success) {
                            if (type_submit == 1) {
                                alert(get_message.success_update);
                            } else {
                                alert(get_message.success_create);
                            }
                        } else if (response.error == 'plan_free') {
                            showMessageCheckBot();
                        } else if (response.error == 'plan_pro') {
                            showMessageCheckBot('plan_pro');
                        } else if (response.error == 'plan_standard') {
                            alert(response.message);
                        }
                        location.href = "{{ route('booking.manager') }}";
                    },
                    error: function(xhr) {
                        $.LoadingOverlay('hide');
                        alert("error");
                    }
                })
            }

        }
    })

    function numbersOnly(evt) {
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
            evt.preventDefault();
        } else {
            return true;
        }
    }

    function maxLengthName(event, length_name) {
        let value = event.target.value;
        $(length_name).html(value.length);
    }

    function confirmRemoveCalendar() {
        let password = $('#password').val();
        if (password.trim() == '') {
            $('#error-password').html('パスワードを入力してください。');
            return false;
        }
        let data = new FormData;
        data.append('password', password);
        data.append('booking_calendar_id', calendar_id);
        data.append('bot_id', bot_id);
        $.ajax({
            type: "POST",
            url: "{{ route('ajax.booking_calendar.remove_by_pass') }}",
            data: data,
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            headers: {
                'Accept': ' application/json',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                $.LoadingOverlay('show');
            },
            success: function(response) {
                if (!response.success) {
                    $('#error-password').html('メールアドレス、もしくはパスワードが正しくありません。');
                } else {
                    location.href = "{{ route('booking.manager') }}";
                }
            },
            error: function(xhr) {
                if (xhr.status == 401) {
                    $('#error-password').html('メールアドレス、もしくはパスワードが正しくありません。');
                }
            },
            complete: function() {
                $.LoadingOverlay('hide');
            }
        })
    }
</script>
@endpush