@extends('component-base.layout')

@section('title')
    Calendar
@endsection

@push('css')
<link rel="stylesheet" href="/css/component-base/calendar/calendar.css?v={{config("sns-line.version")}}">
<style>
    .wrapper-sample {
        width: 100%;
        padding: 10px 20px 0 20px;
    }
    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #1F1F1F;
        margin: 24px 0 12px 0;
    }
    .section-title:first-child {
        margin-top: 0;
    }
    .sub-component-grid {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .sub-component-box {
        border: 1px solid #E7E7E7;
        border-radius: 8px;
        padding: 16px;
        background: #FFFFFF;
    }
    .sub-component-box h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        color: #9A9EAD;
    }
</style>
@endpush

@section('contents')
<div id="vue-element" v-cloak>

    <h2 class="section-title">Calendar - @{{ textMode() }} View</h2>
    <div class="wrapper-sample">
        <lme-calendar
            v-model="selectedDate"
            :view-mode="viewMode"
            :events="events"
            :holidays="holidays"
            @change="onDateChange"
            @mode-change="onModeChange"
            @day-click="onDayClick"
            @event-click="onEventClick"
        ></lme-calendar>
    </div>

    <h2 class="section-title">Sub Components</h2>

    <div class="wrapper-sample">
        <h3 style="margin: 0 0 16px; font-size: 14px; font-weight: 500;">CalendarMonthCell States</h3>
        <div class="sub-component-grid">
            <div class="sub-component-box">
                <h4>Default</h4>
                <lme-calendar-month-cell
                    :day="25"
                    day-type="default"
                    :statuses="[{type:'confirmed',count:'12人'},{type:'request',count:'2人'},{type:'cancel',count:'1人'}]"
                ></lme-calendar-month-cell>
            </div>
            <div class="sub-component-box">
                <h4>Saturday</h4>
                <lme-calendar-month-cell
                    :day="25"
                    day-type="saturday"
                    :statuses="[{type:'confirmed',count:'12人'},{type:'request',count:'2人'},{type:'cancel',count:'1人'}]"
                ></lme-calendar-month-cell>
            </div>
            <div class="sub-component-box">
                <h4>Sunday</h4>
                <lme-calendar-month-cell
                    :day="25"
                    day-type="sunday"
                    :statuses="[{type:'confirmed',count:'12人'},{type:'request',count:'2人'},{type:'cancel',count:'1人'}]"
                ></lme-calendar-month-cell>
            </div>
            <div class="sub-component-box">
                <h4>Selected</h4>
                <lme-calendar-month-cell
                    :day="25"
                    day-type="selected"
                    :statuses="[{type:'confirmed',count:'12人'},{type:'request',count:'2人'},{type:'cancel',count:'1人'}]"
                ></lme-calendar-month-cell>
            </div>
            <div class="sub-component-box">
                <h4>Disabled - Holiday</h4>
                <lme-calendar-month-cell
                    :day="25"
                    day-type="disabled-holiday"
                ></lme-calendar-month-cell>
            </div>
            <div class="sub-component-box">
                <h4>Disabled - Other Month</h4>
                <lme-calendar-month-cell
                    :day="25"
                    day-type="disabled-other-month"
                ></lme-calendar-month-cell>
            </div>
        </div>
    </div>

    <div class="wrapper-sample">
        <h3 style="margin: 16px 0; font-size: 14px; font-weight: 500;">CalendarWeekCell States</h3>
        <div class="sub-component-grid">
            <div class="sub-component-box">
                <h4>Default</h4>
                <lme-calendar-week-cell
                    :statuses="[{type:'confirmed',count:'12人'},{type:'request',count:'2人'},{type:'cancel',count:'1人'}]"
                ></lme-calendar-week-cell>
            </div>
            <div class="sub-component-box">
                <h4>Selected</h4>
                <lme-calendar-week-cell
                    cell-state="selected"
                    :statuses="[{type:'confirmed',count:'12人'},{type:'request',count:'2人'},{type:'cancel',count:'1人'}]"
                ></lme-calendar-week-cell>
            </div>
            <div class="sub-component-box">
                <h4>Disabled</h4>
                <lme-calendar-week-cell
                    cell-state="disabled"
                ></lme-calendar-week-cell>
            </div>
        </div>
    </div>

    <div class="wrapper-sample">
        <h3 style="margin: 16px 0; font-size: 14px; font-weight: 500;">CalendarDayEvent States</h3>
        <div class="sub-component-grid">
            <div class="sub-component-box">
                <h4>Confirmed - Default</h4>
                <lme-calendar-day-event status="confirmed" label="8:00~10:00　User Name"></lme-calendar-day-event>
            </div>
            <div class="sub-component-box">
                <h4>Confirmed - Active</h4>
                <lme-calendar-day-event status="confirmed" label="12:00~13:00　User Name" :active="true"></lme-calendar-day-event>
            </div>
            <div class="sub-component-box">
                <h4>Request - Default</h4>
                <lme-calendar-day-event status="request" label="11:00~12:00　User Name"></lme-calendar-day-event>
            </div>
            <div class="sub-component-box">
                <h4>Request - Active</h4>
                <lme-calendar-day-event status="request" label="12:00~13:00　User Name" :active="true"></lme-calendar-day-event>
            </div>
            <div class="sub-component-box">
                <h4>Cancel - Default</h4>
                <lme-calendar-day-event status="cancel" label="12:00~13:00　User Name"></lme-calendar-day-event>
            </div>
            <div class="sub-component-box">
                <h4>Cancel - Active</h4>
                <lme-calendar-day-event status="cancel" label="12:00~13:00　User Name" :active="true"></lme-calendar-day-event>
            </div>
        </div>
    </div>

</div>
@endsection

@push('js')
<script src="/js/component-base/calendar/lme-calendar-day-event.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/calendar/lme-calendar-month-cell.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/calendar/lme-calendar-week-cell.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/calendar/lme-calendar.js?v={{config("sns-line.version")}}"></script>
<script src="/js/component-base/calendar/calendar.js?v={{config("sns-line.version")}}"></script>
@endpush