@extends('layout.basic.main')
@push('js')
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        var startDate = '{{ $startDate }}';
        var endDate = '{{ $endDate }}';
    </script>
    <script src="/plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="/plugins/datepicker/locales/bootstrap-datepicker.ja.js"></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>
    <script>
        $(".start-time").timepicker({
            disableFocus: true,
            showMeridian: false,
            defaultTime: '10:00'
        })
        $(".end-time").timepicker({
            disableFocus: true,
            showMeridian: false,
            defaultTime: '21:00',
        })
    </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;
        }

        .disable-time {
            background: #F8F8F8 !important;
            pointer-events: none;
        }

        .bootstrap-timepicker-widget table td input {
            width: 35px !important;
        }

        .custom-checkbox {
            position: relative;
            display: block;
            width: 100%;
            padding-left: 35px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 300;
            color: #222222;
        }

        .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;
        }
    </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]">
                2. 基本の出勤時間と休みの曜日を教えてください
            </div>
            <div class="form-group mt-[20px]">
                <span class="text-[#222222] text-[14px] font-semibold">基本の出勤時間</span>
                <div class="calendar-salon-time flex items-center mt-[10px]">
                    <div class="relative">
                        <input type="text" id="start-time-reception" autocomplete="off"
                               class="form-control text-[#2B2F36] text-[14px] font-light border border-solid !border-[#DDDDDD] bg-[#FFFFFF] rounded-[4px] start-time !w-[100px] !h-[40px] !px-[21px]"
                               :class="{'disable-time': isDisableTime}"
                        >
                        <i class="fal fa-clock absolute right-[15px] top-[12px] text-[16px]"></i>
                    </div>
                    <span class="mx-[4px] text-[16px]"><i class="fal fa-minus"></i></span>
                    <div class="relative">
                        <input type="text" id="end-time-reception" autocomplete="off"
                               class="form-control text-[14px] font-light border border-solid !border-[#DDDDDD] bg-[#FFFFFF] rounded-[4px] end-time !w-[100px] !h-[40px] !px-[21px]"
                               :class="{'disable-time': isDisableTime}"
                        >
                        <i class="fal fa-clock absolute right-[15px] top-[12px] text-[16px]"></i>
                    </div>
                    <div class="flex items-center ml-[20px]">
                        <input @click="setFullHour" type="checkbox" v-model="hourIs24H" id="checkedHour24h"
                               name="checkedHour24h" autocomplete="off"
                               class="cursor-pointer form-control w-[25px] h-[25px] bg-[#FFFFFF] border border-solid border-[#DDDDDD] rounded-[5px] m-0 hidden mt-[7px]">
                        <label class="custom-checkbox" for="checkedHour24h">24時間営業</label>
                    </div>
                </div>
            </div>
            <p class="text-[#222222] text-[14px] font-light mt-[10px] mb-[20px]">
                ※次ページで二部制や曜日別の細かな設定ができます</p>
            <span class="text-[#222222] text-[14px] !font-semibold">休みの曜日</span>
            <div class="flex gap-3 mt-[15px]">
                <div v-for="(item, index) in dayOfWeek" @click="toggleDayOfWeek(item.day)" :key="index"
                     class="hover:opacity-70 flex items-center justify-center text-[#222222] text-[16px] font-light border border-solid border-[#DDDDDD] bg-white rounded-[5px] w-[40px] h-[40px] cursor-pointer"
                     :class="{'bg-[#08BF5A] text-[#FFFFFF]': isSelected(item.day)}">
                    @{{ item.text }}
                </div>
            </div>
            <div class="text-[#222222] text-[14px] font-light mt-[20px]  mb-[10px]">入力内容は後から変更可能です</div>
            <button type="button" @click="settingEvent"
                    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('calendar-staff-type')"
                >
                    < 戻る
                </a>
            </div>
        </div>
    </div>
@endsection