@extends('component-base.layout')

@section('title')
    Datetime
@endsection

@push('css')
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous">
    <link rel="stylesheet" href="/flatpicker/flatpickr.min.css">
    <link rel="stylesheet" href="/flatpicker/month_select/style.css">
    <link rel="stylesheet" href="/_assets/commons/css/components/calendar_control.css?v={{config("sns-line.version")}}" type="text/css">
    <style>
        #e_rangepicker01, #e_rangepicker01er {
            /*width: 400px;*/
        }
        .range-picker > div {
            width: 32%;
            max-width: 400px;
        }
        .range-picker .date {
            width: 100%;
        }
        .range-picker .date .date-box {
            width: 100%;
        }
        .large input {
            height: 40px !important;
        }
        .medium input {
            height: 32px !important;
        }
        .small input {
            height: 24px !important;
        }
        .large {
            margin-bottom: 30px;
        }
        .medium {
            margin-bottom: 30px;
        }
        .small {
            margin-bottom: 30px;
        }

        #component{
            background-color: unset;
            padding: 0;
            margin-top: 0;
        }
        #component {
            padding: 30px;
            background: white;
            margin-top: 24px;
        }
    </style>
@endpush

@section('contents')
    <div id="component" v-cloak>
        <div style="background: #fff; padding-bottom: 50px; border-radius: 10px; padding: 30px; margin-bottom: 30px">
            <div style="margin-bottom: 22px; font-weight: bold">Datepicker</div>

            <div>
                <div style="margin-bottom: 22px; font-weight: bold">年月指定</div>
                <div style="display: flex; width: 800px; justify-content: space-between">
                    <div class="large">
                        <datetime_picker :element_id="'e_monthpicker01'" :type_picker="TYPE_PICKER.MONTH"></datetime_picker>
                    </div>
                    <div class="medium">
                        <datetime_picker :element_id="'e_monthpicker01'" :type_picker="TYPE_PICKER.MONTH"></datetime_picker>
                    </div>
                    <div class="small">
                        <datetime_picker :element_id="'e_monthpicker01'" :type_picker="TYPE_PICKER.MONTH"></datetime_picker>
                    </div>
                </div>
                <div style="margin-bottom: 22px; font-weight: bold">日指定</div>
                <div style="display: flex; width: 800px; justify-content: space-between">
                    <div class="large">
                        <datetime_picker :element_id="'e_datepicker01'" :type_picker="TYPE_PICKER.DATE"></datetime_picker>
                    </div>
                    <div class="medium">
                        <datetime_picker :element_id="'e_datepicker01'" :type_picker="TYPE_PICKER.DATE"></datetime_picker>
                    </div>
                    <div class="small">
                        <datetime_picker :element_id="'e_datepicker01'" :type_picker="TYPE_PICKER.DATE"></datetime_picker>
                    </div>
                </div>
                <div style="display: flex; width: 800px; justify-content: space-between">
                    <div class="large">
                        <datetime_picker :element_id="'e_datepicker02'" :type_picker="TYPE_PICKER.DATE" :disabled="true"></datetime_picker>
                    </div>
                    <div class="medium">
                        <datetime_picker :element_id="'e_datepicker02'" :type_picker="TYPE_PICKER.DATE" :disabled="true"></datetime_picker>
                    </div>
                    <div class="small">
                        <datetime_picker :element_id="'e_datepicker02'" :type_picker="TYPE_PICKER.DATE" :disabled="true"></datetime_picker>
                    </div>
                </div>
            </div>

            <div>
                <div style="margin-bottom: 22px; font-weight: bold">期間指定</div>
                <div class="range-picker" style="display: flex; gap: 20px; justify-content: start">
                    <div class="large">
                        <datetime_picker :element_id="'e_rangepicker01'" :type_picker="TYPE_PICKER.RANGE"></datetime_picker>
                    </div>
                    <div class="medium">
                        <datetime_picker :element_id="'e_rangepicker01'" :type_picker="TYPE_PICKER.RANGE"></datetime_picker>
                    </div>
                    <div class="small">
                        <datetime_picker :element_id="'e_rangepicker01'" :type_picker="TYPE_PICKER.RANGE"></datetime_picker>
                    </div>
                </div>
                <div class="range-picker" style="display: flex; gap: 20px; justify-content: start">
                    <div class="large">
                        <datetime_picker :element_id="'e_rangepicker01er'" :type_picker="TYPE_PICKER.RANGE" :error="true"></datetime_picker>
                    </div>
                    <div class="medium">
                        <datetime_picker :element_id="'e_rangepicker01er'" :type_picker="TYPE_PICKER.RANGE" :error="true"></datetime_picker>
                    </div>
                    <div class="small">
                        <datetime_picker :element_id="'e_rangepicker01er'" :type_picker="TYPE_PICKER.RANGE" :error="true"></datetime_picker>
                    </div>
                </div>
            </div>
        </div>

        <div style="background: #fff; padding-bottom: 50px; border-radius: 10px; padding: 30px; margin-bottom: 30px">
            <div style="margin-bottom: 22px; font-weight: bold">Timepicker</div>
            <div style="display: flex; width: 750px; justify-content: space-between">
                <div class="large">
                    <timepicker :element_id="'e_timepicker01'"></timepicker>
                </div>
                <div class="medium">
                    <timepicker :element_id="'e_timepicker011'"></timepicker>
                </div>
                <div class="small">
                    <timepicker :element_id="'e_timepicker012'"></timepicker>
                </div>
            </div>
            <div style="display: flex; width: 750px; justify-content: space-between">
                <div class="large">
                    <timepicker :element_id="'e_timepicker02'" :disabled="true"></timepicker>
                </div>
                <div class="medium">
                    <timepicker :element_id="'e_timepicker021'" :disabled="true"></timepicker>
                </div>
                <div class="small">
                    <timepicker :element_id="'e_timepicker022'" :disabled="true"></timepicker>
                </div>
            </div>
            <div style="display: flex; width: 750px; justify-content: space-between">
                <div class="large">
                    <timepicker :element_id="'e_timepicker023'" :error="true"></timepicker>
                </div>
                <div class="medium">
                    <timepicker :element_id="'e_timepicker04'" :error="true"></timepicker>
                </div>
                <div class="small">
                    <timepicker :element_id="'e_timepicker05'" :error="true"></timepicker>
                </div>
            </div>

        </div>
    </div>
@endsection

@push('js')
    <script type="text/javascript" src="/flatpicker/flatpickr.js"></script>
    <script type="text/javascript" src="/flatpicker/ja.js"></script>
    <script type="text/javascript" src="/flatpicker/month_select/index.js"></script>
    <script src="/_assets/commons/js/components/datetime_picker.js?v={{config("sns-line.version")}}"></script>
    <script src="/_assets/commons/js/components/timepicker.js?v={{config("sns-line.version")}}"></script>

    <script>
        var vueE = new Vue({
            el: '#component',
            data: {
                TYPE_PICKER
            },
            watch: {
            },
            created() {
            },
            mounted() {

            },
            methods: {

            }
        })
    </script>
@endpush