@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 mb-0" >{{__("Edit Schedule")}}</h3>
                <a href="{{route("admin.specialist.admin.single.schedule.create", ['specialistId' => $specialist->id])}}" style="float: right;" class="btn btn-rounded btn-success mb-1"> Create New Schedule</a>

                <div class="tile-body">
                    <div class="table-responsive">
                        <table class="table table-hover table-bordered text-center" id="sampleTable">
                            <thead>
                            <tr>
                                <th>{{__("serial number")}}</th>
                                <th>{{__("time work from")}}</th>
                                <th>{{__("time work to")}}</th>
                                <th>{{__("slot duration")}}</th>
                                <th>{{__("waiting duration")}}</th>
                                <th>{{__("Control")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($specialist->schedule as $key=>$singleSchedule)
                                <tr>
                                    <td>{{++$key}}</td>
                                    <td>{{$singleSchedule->date_from}}</td>
                                    <td>{{$singleSchedule->date_to}}</td>
                                    <td>{{$singleSchedule->slot_duration}}</td>
                                    <td>{{$singleSchedule->wating_time}}</td>


                                    <td>
                                        <a href="{{ route("admin.specialist.admin.single.schedule.edit", ['id' => $singleSchedule->id, 'specialistId' => $specialist->id]) }}"

                                        class="control-link edit"><i class="fas fa-edit"></i></a>

                                        <span href="#" class="control-link remove form-confirm"
                                              data-form-id="#delete{{$specialist->id}}"><i
                                                    class="far fa-trash-alt"></i></span>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection
@section("scripts")
    <script type="text/javascript">
        $("#specialization").select2({
            placeholder: "{{__('select-specialization')}}",
            width: "100%",
        });
        $("#object").select2({
            placeholder: "{{__('select-clinic')}}",
            width: "100%",
        });
        $("#time_slot_type").select2({
            placeholder: "{{__('select-time-slot-type')}}",
            width: "100%",
        });
        $("#user_id").select2({
            placeholder: "{{__('select-user')}}",
            width: "100%",
        });

        $("#has_account").change(function() {
            if ($(this).is(':checked')) {
                $("#show").show();
            } else {
                $("#show").hide();
            }
        });

        // $("#has_account").click(function () {
        //     $("#show").show();
        //
        // });
        let countener = 0;

        $(document).ready(function () {
            $('.add').click(function () {
                let number_schedul = $(this).attr('add-data');
                console.log(number_schedul);
                $("#text-" + number_schedul).append(`

<div id="object${++countener}">
 <hr>
  <div class="row">
                                        <div class="col-6">
                                            <label class="control-label required ">{{__("Day")}}</label>


                                            <select class="form-control @if($errors->has('day')) is-invalid @endif"
                                                    id="week_day_en_name${++countener}" name="week[0][weekdays][${++countener}][]" 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">
                <label class="control-label">{{__("Time From")}}</label>
                                            <input class="form-control @if($errors->has('time_from')) is-invalid @endif "
                                                   type="time" name="week[0][weekdays][${countener}][]"
                                                   required> {{inputValue("time_from")}}
                </div>
                <div class="col">
                    <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="week[0][weekdays][${countener}][]">{{inputValue("time_to")}}
                </div>

            <a style="margin-bottom: auto; margin-top: 2rem" onclick="removeRow(this, ${countener})">
                        <i class="fa fa-fw fa-lg fa-minus-circle" style="font-size: 18px; color: red; cursor: pointer"></i>
                    </a>
                </div>
                </div>
            `);
            });
        });

        function removeRow(row, countener) {
            $(row).parent().parent().remove();
            countener--; // Decrement countener to reflect the correct value for the next element
        }
        //     function removeRow(row) {
        //         $(row).parent().parent().remove()
        //     }
        //




        $("#add_times_work").change(function() {
            if ($(this).is(':checked')) {
                $("#showAllTime").show();
            } else {
                $("#showAllTime").hide();
            }
        });

        // $("#addFealdTime").click(function () {
        //     $("#showAllTime").show();
        //
        // });

        let count = 0;
        let addNumber=parseInt($('#schedule_number').val())+1;
        $("#addNewSchedule").click(function () {
            console.log(count)
            $("#NewSchedule").append(`
           <hr style="height:2px;border-width:0;color:gray;background-color:gray">


             <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="week[${++count}][period][]">{{inputValue("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="week[${count}][period][]">{{inputValue("date_into")}}
            </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="week[${count}][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[${count}][period][]" min="1"
                                                       placeholder="{{__("enter time in min")}}">{{inputValue("wating_time")}}
            </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"
                                                    id="week_day_en_name${countener}" name="week[${count}][weekdays][${++countener}][]" 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="week[${count}][weekdays][${countener}][]"
                                                   required> {{inputValue("time_from")}}
            </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="week[${count}][weekdays][${countener}][]">{{inputValue("time_to")}}
            </div>

        </div>


</div>
</div>
    </div>

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

`)

            $(document).ready(function () {
                $('#add2').click(function () {
                    console.log(count)
                    $("#text2").append(`

    <div id="object${++countener}">
   <hr>  <div class="row">
                                        <div class="col-6">
                                            <label class="control-label required ">{{__("Day")}}</label>


                                            <select class="form-control @if($errors->has('day')) is-invalid @endif"
                                                    id="week_day_en_name${++countener}" name="week[${count}][weekdays][${++countener}][]" 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">
                <label class="control-label">{{__("Time From")}}</label>
                                            <input class="form-control @if($errors->has('time_from')) is-invalid @endif "
                                                   type="time" name="week[${count}][weekdays][${countener}][]"
                                                   required> {{inputValue("time_from")}}
                    </div>
                    <div class="col">
                        <label class="control-label">{{__("Time Into")}}</label>
                                            <input style="height: 40px"
                                                   class="form-control @if($errors->has('time_to')) is-invalid @endif "
                                                   type="time" name="week[${count}][weekdays][${countener}][]">{{inputValue("time_to")}}
                    </div>           <a style="margin-bottom: auto; margin-top: 2rem" onclick="removeRow(this, ${countener})">
                        <i class="fa fa-fw fa-lg fa-minus-circle" style="font-size: 18px; color: red; cursor: pointer"></i>
                    </a>
                </div>
            `);
                });
            });

            function removeRow(row, countener) {
                console.log($(`#object${countener} div .row`).length);
                $(row).parent().parent().remove();
                countener--; // Decrement countener to reflect the correct value for the next element
            }
        });





    </script>

@endsection