@extends('layout.basic.main')
@push('js')
    <script src="https://cdn.tailwindcss.com"></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;
            font-size: 18px;
            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;
        }
    </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="text-[#222222] text-[14px] font-light mt-[20px]">
                ※3つ以上の場合、基本情報の登録完了後に追加で登録が可能です。（有料プランのみ）
            </div>
            <div class="text-[#222222] text-[14px] font-light mt-[10px] mb-[20px]">
                ※登録内容は全て、後から変更が可能です。
            </div>
            <div class="flex gap-3 mb-[19px] items-end" v-for="(item, index) in formCreateStaff" :key="index">
                <div class="w-[400px]">
                    <span class="text-[14px] text-[#222222] font-semibold leading-[21px]">@{{ index + 1 }}.スタッフ名を入力</span><span
                            class="ml-[5px] text-[14px] text-[#F44336] font-semibold">＊</span>
                    <input v-model="item.staff_name"
                           class="text-[#222222] !border-[#DDDDDD] rounded-[3px] font-light form-control mt-[8px] w-[400px] !h-[40px] !px-[10px] text-[16px] !pl-[10px] placeholder:text-[#D3D3D3]"
                           type="text" placeholder="スタッフ名"
                    >
                </div>
                <div class="w-[150px]">
                    <span class="text-[14px] text-[#222222] font-semibold leading-[21px]">スタッフ指名料</span>
                    <input v-model="item.staff_bill"
                           @keyup="customNumber(item.staff_bill,index)"
                           class="text-[#222222] !border-[#DDDDDD] rounded-[3px] text-right font-light form-control mt-[8px] w-[150px] !h-[40px] !px-[10px] text-[16px] !pl-[10px] placeholder:text-[#D3D3D3]"
                           type="text">
                </div>
                円
            </div>
            <div class="text-[#222222] text-[14px] font-light mt-[37px] mb-[10px]">入力内容は後から変更可能です</div>
            <button type="button" @click="createStaff"
                    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