@push('styles')
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
@endpush
<div class="card col-md-6">
    <div class="card-body">
        <h5 class="card-title">{{ __('Work Times') }}</h5>
        @foreach (week_days() as $key => $day)
            @php
                $dd = array_key_exists($day, $days) ?? false;
            @endphp
            {{--        @dd($days[$day][0] == get_day_hours()[8])--}}
            <div class="row mb-2">
                <div class="col-md-3 ">
                    <x-form.toggle type="checkbox" data-name="{{ $day }}" name="{{ $day }}"
                                   class="days" :label="t_($day)" :value="array_key_exists($day, $days)"/>
                </div>
                <div class="col-md-9 row {{ $day }}-close" {{ $dd ? 'hidden' : '' }}>
                    {{ t_('closed') }}
                </div>
                <div class="col-md-9 row {{ $day }}" {{ $dd ? '' : 'hidden' }}>
                    <div class="col-md-4">
                        <select class="form-control select2" name="days[{{$day}}][from]" id="">
                            @foreach(get_day_hours() as $hour)
                                <option
                                    value="{{$hour}}" {{$dd ? $hour == $days[$day][0]? 'selected' : '' : ''}}>{{$hour}}</option>
                            @endforeach
                        </select>

                    </div>
                    <div class="col-md-4">
                        <select class="form-control select2" name="days[{{$day}}][to]" id="">
                            @foreach(get_day_hours() as $hour)
                                <option
                                    value="{{$hour}}" {{$dd ? $hour == $days[$day][1]? 'selected' : '' : ''}}>{{$hour}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        @endforeach

    </div>
</div>
@push('scripts')
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <script>
        $('.timepicker').timepicker({
            timeFormat: 'hh:mm p',
            interval: 60,
            defaultTime: '12',
            dynamic: false,
            dropdown: true,
            scrollbar: true,
            showMeridian: false,
        });
        $(document).ready(function () {
            $(".days").on('change', function () {
                let day = $(this).data("name")
                if (this.checked) {

                    $("." + day + '-close').hide();
                    $("." + day).removeAttr("hidden");
                    $("." + day).find('input').removeAttr("disabled");

                } else {
                    console.log($("." + day.select))
                    $("." + day + '-close').show();
                    $("." + day).attr("hidden", true);
                    $("." + day).find('input').attr('disabled', 'disabled');

                }
            });
        })
    </script>
@endpush