@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>
        .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;
            background-color: #FFFFFF;
            line-height: 25px;
        }

        .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;
        }
        .bootstrap-timepicker-widget table td input{
            width: 31px !important;
        }
        .fc-col-header {
            margin: 0 !important;
        }

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

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

        .fc-col-header thead tr > 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-day {
            border-left: 1px solid #dddddd !important;
            border-right: 1px solid #dddddd !important;
        }

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

        .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: 15px !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;
            /*border: 1px solid #DDDDDD !important;*/
        }

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

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

        /*.fc-event-main:hover::after {*/
        /*    content: "編集する　\f044";*/
        /*    font-size: 16px;*/
        /*    font-weight: 600;*/
        /*    color: #5799DB;*/
        /*    position: absolute;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    background-color: #EDF4FBE6;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    z-index: 9999;*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    justify-content: center;*/
        /*}*/

        .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-day-sat a {
            color: #5799DB !important;
        }

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

        .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;
            /*background-color: #EDF4FBE6;*/
            width: 100%;
            height: 100%;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

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

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

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


        #calendar {
            height: 450px;
            width: 450px;
        }

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


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

        /*.fc-v-event {*/
        /*    border: 1px solid #DDDDDD !important;*/
        /*}*/

        .aselect .selector {
            background: #F8F8F8;
            position: relative;
            z-index: 1;
            border-radius: 3px;
            height: 42px;
            padding-right: 20px;
        }

        .aselect .arrow {
            position: absolute;
            right: 10px;
            top: 40%;
            width: 0;
            height: 0;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-top: 10px solid #888;
            transform: rotateZ(0deg) translateY(0px);
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(.59, 1.39, .37, 1.01);
            cursor: pointer;
        }

        /*.expanded {*/
        /*    transform: rotateZ(180deg) translateY(2px);*/
        /*}*/

        .aselect .label {
            display: block;
            padding: 12px;
            font-size: 16px;
            color: #222222;
            font-weight: 300;
            text-align: left !important;
            max-width: 432px;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .aselect ul {
            width: max-content;
            min-width: 180px;
            height: 71px;
            list-style-type: none;
            padding: 10px;
            margin: 0;
            font-size: 16px;
            position: absolute;
            z-index: 99;
            top: 40px;
            box-shadow: 0 3px 3px #00000029;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border-radius: 3px;
        }

        .aselect li {
            padding: 0 12px;
            color: #222222;
            font-size: 16px;
            font-weight: normal;
            margin-bottom: 8px;
            cursor: pointer;
            max-width: 432px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .aselect .current {
            background: #eaeaea;
        }

        .aselect .hidden {
            visibility: hidden;
        }

        .aselect .visible {
            visibility: visible;
        }

        .aselect {
            width: fit-content;
            min-width: 180px;
            height: 42px;
            border-radius: 3px;
            margin-right: 15px;
        }

        input:checked + label {
            color: #08BF5A;
            font-weight: 600;
        }
        .custom-checkbox {
            position: relative;
            display: block;
            width: auto;
            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-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-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-slot-label-frame {*/
        /*    position: relative;*/
        /*    top: -8px;*/
        /*}*/

        .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;
        }

        /*.fc-v-event {*/
        /*    background-color: white !important;*/
        /*}*/

        .event_scope_time .fc-event-main {
            justify-content: center;
            padding-left: 0px !important;
        }
    </style>
@endpush
@section('title', '基本情報の入力')
@section('content')
    <div class="calendar" 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]">
                本日から3日分のシフトを入力してみましょう
            </div>
            <div class="text-[#222222] text-[14px] font-light mt-[10px] mb-[20px]">
                ※登録内容は全て後から変更可能なため、仮のシフトでも構いません。
            </div>
{{--            <div>--}}
{{--                <select class="form-control" >--}}
{{--                    <option v-for="item in listStaffs" :value="item.staff_id">  @{{ item.staff_name }}</option>--}}
{{--                </select>--}}
{{--            </div>--}}
            <div class="aselect" :data-list="listStaffs">
                <div class="selector" @click="toggle()">
                    <div class="label">
                        <span>@{{ valueChooseStaff.staff_name }}</span>
                    </div>
                    <div class="arrow" :class="{ expanded : visible }"></div>
                    <div :class="{ hidden : !visible, visible }">
                        <ul>
                            <li v-for="item in listStaffs" @click="selectItemStaff(item)"
                                :class="{ current : item.staff_id === valueChooseStaff.staff_id }">
                                @{{ item.staff_name }}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="mt-[11px]" id='calendar'></div>
            <div class="text-[#222222] text-[14px] font-light mt-[50px] mb-[10px]">入力内容は後から変更可能です</div>
            <button type="button" @click="createCourseManyStaff"
                    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="backRedirect('back_add_staff')"
{{--                   @click="window.history.go(-1); return false;"--}}
                >
                    < 戻る
                </a>
            </div>
        </div>
        @include('basic.calendar_salon.modal.modal_edit_setting_event_calendar_salon')
    </div>
@endsection