@extends('layout.basic.main')
@push('js')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js'></script>
    <script>
        var startDate = '{{ $startDate }}';
        var endDate = '{{ $endDate }}';
    </script>
    <script src="/js/calendar_salon/ajax-error.js?v={{config('sns-line.version')}}"></script>
    <script src="/js/calendar_salon/step_create.js?v={{config('sns-line.version')}}"></script>
@endpush
@push('css')
    <style>
        .bootstrap-timepicker-widget table td input {
            width: 35px !important;
        }

        .step-bar .progressbar {
            width: 380px;
            height: 80px;
            counter-reset: step;
            margin-left: -15px;
        }

        .step-bar .progressbar li {
            position: relative;
            list-style: none;
            float: left;
            width: 33.33%;
            text-align: center;
        }

        .step-bar .progressbar li:after {
            content: counter(step);
            counter-increment: step;
            width: 30px;
            height: 30px;
            border: 2px solid #E0E0E0;
            display: block;
            text-align: center;
            margin: 15px auto 15px auto;
            border-radius: 30px;
            line-height: 25px;
            background-color: #FFFFFF;
        }

        .step-bar .progressbar li:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 5px;
            background: #E0E0E0;
            top: 48px;
            left: -50%;
            z-index: -1;
        }

        .step-bar .progressbar li:first-child:before {
            content: none;
        }

        .step-bar .progressbar li.done:after {
            content: "\f00c";
            border: 2px solid #08BF5A;
            color: #08BF5A;
            line-height: 25px;
        }

        .step-bar .progressbar li.active:after {
            border: 2px solid #08BF5A;
            color: #08BF5A;
            line-height: 25px;
        }

        .step-bar .progressbar li.active {
            color: #08BF5A;
            font-weight: 600;
        }


        .step-bar .progressbar li.active:before {
            background: #08BF5A;
        }

        .step-bar .progressbar li.active {
            background: none !important;
        }

        .calendar-salon-time .relative {
            background-color: #FFFFFF !important;
        }

        .calendar-salon-table tbody tr > td {
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }

        .event_scope_time {
            background: #F4FBF280;
            border: 1px solid #08BF5A;
            border-radius: 3px;
            width: 95%;
            margin: auto;
        }

        .fc .fc-scrollgrid-section:first-child > * {
            border-left-width: 0px !important;
        }

        .fc-col-header {
            margin: 0 !important;
        }

        .fc-scrollgrid {
            border: none !important;
        }

        .fc-col-header thead tr {
            padding: 10px 0 !important;
        }

        .fc-col-header th {
            background: #FFFFFF !important;
            border-top: none !important;
            border-left: none !important;
            border-right: none !important;
            border-bottom: none !important;
            padding-bottom: 10px !important;
        }

        .fc-col-header thead tr > th:last-child {
            border-right: none !important;
        }

        .fc-day {
            border-left: 1px solid #dddddd !important;
            border-right: 1px solid #dddddd !important;
        }

        .fc-theme-standard td {
            border-bottom: 1px dashed transparent !important;
        }

        .fc-theme-standard th {
            border-bottom: 1px solid #DDDDDD !important;
        }

        .fc-timegrid-slots table {
            margin: 0 !important;
        }

        .event_scope_time .fc-event-main {
            display: flex !important;
            padding-left: 10px !important;
            font-size: 14px !important;
            font-weight: 600 !important;
            align-items: center !important;
            color: #08BF5A !important;
        }

        .fc-scrollgrid-sync-inner {
            color: #222222 !important;
            font-weight: 600 !important;
            font-size: 14px !important;
        }

        .event_scope_time_day_off {
            border: none !important;
            margin: 2px 0px;
        }

        .event_scope_time_day_off .fc-event-main {
            background: #F8F8F8 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #222222 !important;
            font-size: 14px !important;
            font-weight: 300 !important;
        }

        .fc-event-main {
            position: relative;
            z-index: 1;
        }

        .fc-event-main:hover {
            border: 2px solid #5799DB !important;
            background: #EDF4FBE6 !important;
        }

        .fc-timegrid-axis .fc-timegrid-col-frame::after {
            content: "";
            font-size: 16px;
            font-weight: 600;
            color: red;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            border-right: none !important;
        }

        .fc-day-sat a {
            color: #5799DB !important;
        }

        .fc-day-sun a {
            color: #F44336 !important;
        }

        .fc-timegrid-col-frame::after {
            content: "";
            font-size: 16px;
            font-weight: 600;
            color: #5799DB;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fc-timegrid-axis .fc-timegrid-col-frame:hover::after {
            display: none;
        }

        .fc-timegrid-col-frame:hover::after {
            content: "編集する　\f044";
            border: 2px solid #5799DB !important;
            background: #EDF4FBE6 !important;
            font-size: 16px;
            font-weight: 600;
            color: #5799DB;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }


        #calendar {
            width: 80%;
        }

        .fc-scroller {
            overflow-y: hidden !important;
        }

        .fc-timegrid-col-frame::after {
            border-right: 1px solid #DDDDDD;
            /*border-bottom: 1px dashed #DDDDDD;*/
        }

        .fc .fc-scrollgrid-section-body table {
            border-bottom-style: solid;
        }

        .fc-media-screen .fc-timegrid-cols > table {
            margin: 0 !important;
        }

        .custom-checkbox {
            position: relative;
            display: block;
            width: 100%;
            padding-left: 35px;
            cursor: pointer;
        }

        .custom-checkbox::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 25px;
            border-radius: 3px;
            border: 1px solid #DDDDDD;
            background-color: #FFFFFF;
        }

        input:checked + .custom-checkbox::before {
            background-color: #08BF5A;
            content: '';
            width: 25px;
            height: 25px;
            font-size: 25px;
            color: #FFFFFF;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 35px;
            border: none;
        }

        input:checked + label {
            color: #08BF5A;
            font-weight: 600;
        }
        .fc-theme-standard th {
            background: #FFFFFF !important;
        }

        .fc-timegrid-slot-label {
            border-top: none !important;
            border-bottom: none !important;
        }

        .fc-timegrid-col.fc-timegrid-axis {
            border-bottom: none !important;
            border: none !important;
        }

        .fc-theme-standard td {
            border: none !important;
        }

        .fc-timegrid-col-frame::after {
            /*border: none !important;*/
        }

        .fc-day .fc-timegrid-col-frame::after {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
        }

        .fc-timegrid-cols table tbody tr:first-child td:nth-child(2) .fc-timegrid-col-frame::after{
            border-left: 1px solid #dddddd;
        }

        .fc-theme-standard th {
            border: none !important;
        }

        .fc-theme-standard td.fc-day.fc-timegrid-col {
            /*border-left: 1px solid #0cbb00 !important;*/
        }

        .fc-theme-standard td.fc-timegrid-slot-lane {
            border-bottom: 1px dashed #dddddd !important;
        }

        .fc-timegrid-slots table tbody tr:last-child td.fc-timegrid-slot-lane {
            border-bottom: 0px !important;
        }

        .fc .fc-timegrid-slot-label {
            vertical-align: top !important;
        }

        .fc-timegrid-slots table tbody tr:nth-child(1) td:first-child .fc-timegrid-slot-label-frame
        {
            position: relative;
            transform: translateY(-50%);
        }

        .fc-timegrid-slots table tbody tr:nth-child(2) td:first-child .fc-timegrid-slot-label-frame,
        .fc-timegrid-slots table tbody tr:nth-child(3) td:first-child .fc-timegrid-slot-label-frame,
        .fc-timegrid-slots table tbody tr:nth-child(4) td:first-child .fc-timegrid-slot-label-frame
        {
            position: relative;
            transform: translateY(-50%);
        }

        .fc-timegrid-slot-label-cushion.fc-scrollgrid-shrink-cushion {
            padding: 0px;
            padding-right: 10px;
        }

        .time-24hour {
            position: absolute;
            transform: translateY(50%);
            bottom: 0;
        }

        .event_scope_time .fc-event-main {
            justify-content: center;
            padding-left: 0px !important;
        }
    </style>
@endpush
@section('content')
    <div class="calendar modal-event" id="calendar-salon-step-create" v-cloak>
        @include('basic.calendar_salon.layouts.header')
        <div class="step-bar">
            <ul class="progressbar">
                <li class="done">タイプ選択</li>
                <li class="active">出勤登録</li>
                <li>コース</li>
            </ul>
        </div>
        <div class="px-[15px]">
            <div class="text-[#222222] text-[16px] !font-semibold mt-[20px]">
                本日から1週間分の出勤（受付可能な時間の）スケジュールを入力してみましょう
            </div>
            <div id='calendar'></div>
            <div class="text-[#222222] text-[14px] font-light mt-[30px] mb-[10px]">入力内容は後から変更可能です</div>
            <button type="button" @click="createEvent"
                    class="font-light w-[250px] h-[40px] mb-[15px] text-[16px] rounded-[3px] border-solid border border-[#08BF5A] text-[#08BF5A]
                    hover:opacity-70">
                次にすすむ >
            </button>
            <div>
                <a class="text-[#888888] text-[16px] font-light underline cursor-pointer"
                   @click="window.history.back(); return false;"
                >
                    < 戻る
                </a>
            </div>
        </div>
        @include('basic.calendar_salon.modal.modal_edit_setting_event_calendar_salon')
    </div>
@endsection