@extends("layouts.admin.app")
@section("page-title")
    {{__("Dashboard")}}
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1> {{__("Consultant")}}</h1>
            <p>{{__("Create Schedule")}}</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")}}">{{__("Consultant")}}</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.consultant.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> {{__("Create")}}
                        </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



{{--@extends("layouts.admin.app")--}}
{{--@section("page-title")--}}
{{--    Dashboard--}}
{{--@endSection--}}
{{--@section("page-nav-title")--}}

{{--    <div class="app-title">--}}
{{--        <div>--}}
{{--            <h1><i class="fa fa-dashboard"></i> Dashboard</h1>--}}
{{--            <p>profile Dashboard</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="#">index</a></li>--}}
{{--        </ul>--}}

{{--    </div>--}}
{{--@endsection--}}

{{--@section("content")--}}
{{--    <div class="row user">--}}

{{--        <div class="col-md-12">--}}
{{--            <div class="tab-content">--}}
{{--                <div class="tab-pane active" id="user-timeline">--}}

{{--                    <div class="timeline-post">--}}
{{--                        <h4>{{"New Schedule"}}</h4>--}}
{{--                        <hr style="border: 1px solid ;--}}
{{--    margin-top: 2rem;">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col">--}}
{{--                                <label class="control-label">{{__("Date From")}}</label>--}}

{{--                                <input type="date" style="height: 40px ;"--}}
{{--                                       class="form-control @if($errors->has('date_from')) is-invalid @endif"--}}
{{--                                       name="week[0][period][]">{{inputValue("date_from")}}--}}
{{--                            </div>--}}
{{--                            <div class="col">--}}
{{--                                <label class="control-label">{{__("Date To")}}</label>--}}
{{--                                <input type="date" style="height: 40px"--}}
{{--                                       class="form-control @if($errors->has('date_to')) is-invalid @endif"--}}
{{--                                       name="week[0][period][]">{{inputValue("date_into")}}--}}
{{--                            </div>--}}
{{--                        </div>--}}


{{--                        <div class=" 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="week[0][period][]"--}}
{{--                                           placeholder="{{__("enter time in min")}}">{{inputValue("slot_duration")}}--}}
{{--                                </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="week[0][period][]" min="1"--}}
{{--                                           placeholder="{{__("enter time in min")}}">{{inputValue("wating_time")}}--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}



{{--                        //////////////////////////////////////////////Sunday////////////////////////////////////////////--}}
{{--                        <div class="row mt-5">--}}
{{--                            <label style="font-size: 18px;">--}}
{{--                                <input type="checkbox" id="sundayCheckbox" class="ml-3 gap-3" value="sunday" onclick="toggleTimeFields()">Sunday--}}
{{--                            </label>--}}
{{--                            <label style="margin-left: 10rem;">Time From</label>--}}
{{--                            <input type="time" id="timeFromInput" style="width: 16rem; height: 2rem;" class="ml-2" value="" disabled>--}}

{{--                            <label style="margin-left: 10rem;">Time To</label>--}}
{{--                            <input type="time" id="timeToInput" style="width: 16rem; height: 2rem;" class="ml-2" value="" disabled>--}}
{{--                        </div>--}}


{{--                        --}}{{--                        //////////////////////////////////////////////Monday////////////////////////////////////////////--}}
{{--                        <div class="row mt-4">--}}
{{--                            <label style="font-size: 18px;">--}}
{{--                                <input type="checkbox" id="mondayCheckbox" class="ml-3 gap-3" value="monday" onclick="toggleTimeFields()">Monday--}}
{{--                            </label>--}}
{{--                            <label style="margin-left: 10rem;">Time From</label>--}}
{{--                            <input type="time" id="timeFromInput1" style="width: 16rem; height: 2rem;" class="ml-2" placeholder="Time From" disabled>--}}

{{--                            <label style="margin-left: 10rem;">Time To</label>--}}
{{--                            <input type="time" id="timeToInput1" style="width: 16rem; height: 2rem;" class="ml-2" placeholder="Time To" disabled>--}}
{{--                        </div>--}}
{{--                        //////////////////////////////////////////////Tuesday////////////////////////////////////////////--}}
{{--                            <div class="row mt-4">--}}
{{--                                <lapel style="font-size: 18px;">--}}
{{--                                    <input type="checkbox"  id="tuesdayCheckbox"class="ml-3 gap-3" value="tuesday">Tuesday--}}
{{--                                </lapel>--}}
{{--                                <label style="margin-left: 10rem">Time From</label>--}}
{{--                                <input type="time" style="width: 16rem;--}}
{{--                                height: 2rem;" class="ml-2" id="timeFromInput2" placeholder="Time From">--}}

{{--                                <label style="margin-left: 10rem"> Time To</label>--}}
{{--                                <input id="timeToInput2" type="time" style="width: 16rem;--}}
{{--                         height: 2rem;" class="ml-2" placeholder="Time From">--}}
{{--                            </div>--}}

{{--                        //////////////////////////////////////////////Wednesday////////////////////////////////////////////--}}
{{--                        <div class="row mt-4">--}}
{{--                            <lapel style="font-size: 18px;">--}}
{{--                                <input type="checkbox" class="ml-3 gap-3" value="wednesday">Wednesday--}}
{{--                            </lapel>--}}
{{--                            <label style="margin-left: 8rem">Time From</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                                height: 2rem;" class="ml-2" placeholder="Time From">--}}

{{--                            <label style="margin-left: 10rem"> Time To</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                         height: 2rem;" class="ml-2" placeholder="Time From">--}}
{{--                        </div>--}}

{{--                        //////////////////////////////////////////////Thursday////////////////////////////////////////////--}}
{{--                        <div class="row mt-4">--}}
{{--                            <lapel style="font-size: 18px;">--}}
{{--                                <input type="checkbox" class="ml-3 gap-3" value="thursday">Thursday--}}
{{--                            </lapel>--}}
{{--                            <label style="margin-left: 9rem">Time From</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                                height: 2rem;" class="ml-2" placeholder="Time From">--}}

{{--                            <label style="margin-left: 10rem"> Time To</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                         height: 2rem;" class="ml-2" placeholder="Time From">--}}
{{--                        </div>--}}
{{--                        //////////////////////////////////////////////Friday////////////////////////////////////////////--}}
{{--                        <div class="row mt-4">--}}
{{--                            <lapel style="font-size: 18px;">--}}
{{--                                <input type="checkbox" class="ml-3 gap-3"value="friday">Friday--}}
{{--                            </lapel>--}}
{{--                            <label style="margin-left: 11rem">Time From</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                                height: 2rem;" class="ml-2" placeholder="Time From">--}}

{{--                            <label style="margin-left: 10rem"> Time To</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                         height: 2rem;" class="ml-2" placeholder="Time From">--}}
{{--                        </div>--}}
{{--                        //////////////////////////////////////////////Saturday////////////////////////////////////////////--}}

{{--                        <div class="row mt-4">--}}
{{--                            <lapel style="font-size: 18px;">--}}
{{--                                <input type="checkbox" class="ml-3 gap-3" value="saturday">Saturday--}}
{{--                            </lapel>--}}
{{--                            <label style="margin-left: 9rem">Time From</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                                height: 2rem;" class="ml-2" placeholder="Time From">--}}

{{--                            <label style="margin-left: 11rem"> Time To</label>--}}
{{--                            <input type="time" style="width: 16rem;--}}
{{--                         height: 2rem;" class="ml-2" placeholder="Time From">--}}
{{--                        </div>--}}
{{--                        /////////////////////////////////////////////////////////////////////////////////////////////////////////--}}
{{--            </div>--}}
{{--        </div>--}}
{{--@endsection--}}
{{--                @section("scripts")--}}

{{--                    <script>--}}
{{--                        function toggleTimeFields() {--}}
{{--                            const sundayCheckbox = document.getElementById('sundayCheckbox');--}}
{{--                            const timeFromInput = document.getElementById('timeFromInput');--}}
{{--                            const timeToInput = document.getElementById('timeToInput');--}}

{{--                            if (sundayCheckbox.checked) {--}}
{{--                                timeFromInput.disabled = false;--}}
{{--                                timeToInput.disabled = false;--}}
{{--                            } else {--}}
{{--                                timeFromInput.disabled = true;--}}
{{--                                timeToInput.disabled = true;--}}
{{--                            }--}}
{{--                        }--}}


{{--                        function toggleTimeFields() {--}}
{{--                            const mondayCheckbox = document.getElementById('mondayCheckbox');--}}
{{--                            const timeFromInput = document.getElementById('timeFromInput1');--}}
{{--                            const timeToInput = document.getElementById('timeToInput1');--}}

{{--                            if (mondayCheckbox.checked) {--}}
{{--                                timeFromInput.disabled = false;--}}
{{--                                timeToInput.disabled = false;--}}
{{--                            } else {--}}
{{--                                timeFromInput.disabled = true;--}}
{{--                                timeToInput.disabled = true;--}}
{{--                            }--}}
{{--                        }--}}
{{--                        function toggleTimeFields() {--}}
{{--                            const mondayCheckbox = document.getElementById('tuesdayCheckbox');--}}
{{--                            const timeFromInput = document.getElementById('timeFromInput2');--}}
{{--                            const timeToInput = document.getElementById('timeToInput2');--}}

{{--                            if (mondayCheckbox.checked) {--}}
{{--                                timeFromInput.disabled = false;--}}
{{--                                timeToInput.disabled = false;--}}
{{--                            } else {--}}
{{--                                timeFromInput.disabled = true;--}}
{{--                                timeToInput.disabled = true;--}}
{{--                            }--}}
{{--                        }--}}
{{--                    </script>--}}



{{--@endsection--}}