@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1> {{__("Specialist")}}</h1>
            <p>{{__("Create Specialist")}}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
            <li class="breadcrumb-item"><a href="{{route("admin.specialist.index")}}">{{__("specialist")}}</a></li>
            <li class="breadcrumb-item"><a href="#">{{__("Create")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")

    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{__("create Schedule")}}</h3>

                <h4>Working Time Agenda</h4>

                <hr style="height:2px;border-width:0;color:gray;background-color:gray">

                <div class="container">
                    <form method="post" action="{{route("admin.specialist.single.schedule.store")}}" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col">
                                <div name="week">
                                    <div class="row">
                                        <div class="col">
                                            <label class="control-label">{{__("Date Work From")}}</label>

                                            <input type="date" style="height: 40px"
                                                   class="form-control @if($errors->has('date_from')) is-invalid @endif"
                                                   name="date_from" >
                                        </div>
                                        <div class="col">
                                            <label class="control-label">{{__("Date Work To")}}</label>
                                            <input type="date" style="height: 40px"
                                                   class="form-control @if($errors->has('date_to')) is-invalid @endif"
                                                   name="date_to">
                                        </div>
                                    </div>
                                    <div class="container mt-3">
                                        <div class="row">
                                            <div class="col">
                                                <label class="control-label">{{__("slot Duration")}}</label>
                                                <input style="height: 40px"
                                                       class="form-control @if($errors->has('slot_duration')) is-invalid @endif"
                                                       type="number"  min="1"  name="slot_duration"
                                                       placeholder="{{__("enter time in min")}}" >
                                            </div>
                                            <div class="col">
                                                <label class="control-label">{{__("Wating Duration")}}</label>
                                                <input style="height: 40px"
                                                       class="form-control @if($errors->has('wating_time')) is-invalid @endif"
                                                       type="number"   name="waiting_time" min="1"
                                                       placeholder="{{__("enter time in min")}}" >
                                            </div>
                                        </div>
                                    </div>



                                    <div class="row">
                                            <div class="col-6 mt-4">
                                                <label class="control-label required ">{{__("Day")}}</label>


                                                <select  class="form-control @if($errors->has('day')) is-invalid @endif dates"
                                                           id="week_day_en_name" name="days[]" value="week_day_en_name">
                                                    <label class="control-label required">{{__("Day")}}</label>
                                                    <option value="sunday" name="week_day_en_name">{{"Sunday"}}</option>
                                                    <option value="monday" name="week_day_en_name">{{"Monday"}}</option>
                                                    <option value="tuesday" name="week_day_en_name">{{"Tuesday"}}</option>
                                                    <option value="wednesday" name="week_day_en_name">{{"Wednesday"}}</option>
                                                    <option value="thursday" name="week_day_en_name">{{"Thursday"}}</option>
                                                    <option value="friday" name="week_day_en_name">{{"Friday"}}</option>
                                                    <option value="saturday" name="week_day_en_name">{{"Saturday"}}</option>



                                                </select>


                                            </div>
                                            <div class="col mt-4">
                                                <label class="control-label">{{__("Time From")}}</label>
                                                <input
                                                        class="form-control @if($errors->has('time_from')) is-invalid @endif "
                                                        type="time" name="period[]"  required>
                                            </div>
                                            <div class="col mt-4">
                                                <label class="control-label">{{__("Time To")}}</label>
                                                <input style="height: 40px"
                                                       class="form-control @if($errors->has('time_to')) is-invalid @endif "
                                                       type="time" name="period[]" >
                                            </div>

                                    </div>
                                    <div id="text"></div>


                                </div>

                            </div>
                        </div>


                            <a class="add"><i class="fa fa-fw fa-lg fa-plus-circle mt-3"
                                              style="font-size: 18px; color: green; cursor: pointer"
                                ></i></a>
                            <div class="tile-footer">

                            </div>
                        <button  type="submit" class="btn btn-primary">
                            <i class="fa fa-fw fa-lg fa-check-circle"></i> {{__("Edit")}}
                        </button>
                    </form>

                </div>

            </div>


        </div>
    </div>



@endsection
@section("scripts")
    <script type="text/javascript">
        $(document).ready(function() {
            let countener = 0;
            let allDays = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
            let availableDays = [...allDays];
            let selectedDay = [];
            $('.add').click(function() {
                if (availableDays.length === 1) {
                    alert('No more days left to select!');
                    return;
                }
                selectedDay.push($('#week_day_en_name').val());
                availableDays = availableDays.filter(day => !selectedDay.includes(
                    day));
                const dayOptions = availableDays.map(day => `<option value="${day}">${day}</option>`).join('');
                const newRow = `
            <div id="object${++countener}">
                <div class="row">
                    <div class="col-6">
                        <label class="control-label required">{{__("Day")}}</label>
                        <select class="form-control date" id="week_day_en_name${countener}" name="days[]">
                        ${availableDays.map(day => `<option value="${day}">${day}</option>`).join('')}
                        </select>
                    </div>
                    <div class="col">
                        <label class="control-label">{{__("Time From")}}</label>
                        <input class="form-control" type="time" name="period[]" required>
                    </div>
                    <div class="col">
                        <label class="control-label">{{__("Time Into")}}</label>
                        <input style="height: 40px" class="form-control" type="time" name="period[]">
                    </div>
                    <a style="margin-bottom: auto; margin-top: 2rem" class="removeRow">
                        <i class="fa fa-fw fa-lg fa-minus-circle" style="font-size: 18px; color: red; cursor: pointer"></i>
                    </a>
                </div>
            </div>
        `;
                $("#text").append(newRow);
                selectedDay.push($(`#week_day_en_name${countener}`).val());

                $('.removeRow').click(function() {
                    $(this).parent().parent().remove();
                });
            });

            $('.dates').change(function(){
                console.log('hi');
            });

        });
    </script>


@endsection