@extends('layouts.master')

@section('content')
@section('title')
@lang('translation.Form_Layouts')
@endsection
@section('css')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<style>
    /* for lg */
    .custom-switch.custom-switch-lg .custom-control-label {
        padding-left: 3rem;
        padding-bottom: 2rem;
    }
    .custom-switch.custom-switch-lg .custom-control-label::before {
        height: 2rem;
        width: calc(3rem + 0.75rem);
        border-radius: 4rem;
    }
    .custom-switch.custom-switch-lg .custom-control-label::after {
        width: calc(2rem - 4px);
        height: calc(2rem - 4px);
        border-radius: calc(3rem - (2rem / 2));
    }
    .custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
        transform: translateX(calc(2rem - 0.25rem));
    }
    .parent_disabled {
        background: grey;
    }
    .parent_disabled .relative_position {
        position: relative;
    }
    .parent_disabled .row .col-10 span {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .custom-control.custom-switch.custom-switch-lg {
        width: auto;
        padding: 10px 10px;
    }
    label{margin-bottom: 0 !important;}
</style>
@endsection
@php
    $working_count = $working_hours->count();
    $working_loop = $working_count ? $working_hours : get_days();
@endphp
@section('content')
@include('components.breadcum')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css">
    <div class="row">
        <div class="col-12">
            {!! get_error_html($errors) !!}
        </div>
        <div class="card">
            <div class="card-body">
                <form class="" name="main_form" id="main_form" method="post" action="{{route('admin.working_days.store')}}" enctype="multipart/form-data">
                    {!! get_error_html($errors) !!}
                    @csrf
                    <div class="kt-portlet__body">
                        <div class="form-group row">
                            <label for="profile_image" class="col-form-label col-lg-2 col-sm-12"></label>
                            <div class="col-lg-8 col-md-9 col-sm-12">
                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>Day</th>
                                        <th>Time</th>
                                    </tr>
                                    </thead>
                                    <tbody id="working_hour_box">
                                    @foreach($working_loop as $key=>$day)
                                        @php
                                            $day_name= $day->day_name ?? $day;
                                        @endphp
                                        <tr data-name="{{$day_name}}" class="parent_div {{$day->is_working ?? '' == 1 ? '' : 'parent_disabled'}}">
                                            <td style="width: 20%;">
                                                <div class="custom-control custom-switch custom-switch-lg">
                                                    @if($day)
                                                        <input type="checkbox" class="custom-control-input is_working" name="time[{{$day_name}}][is_working]" id="{{$day_name}}_is_working" value="1" onclick="isBlock(this);" {{$day ? (($day->is_working == '1') ? 'checked' : '') : ''}}>
                                                    @else
                                                        <input type="checkbox" class="custom-control-input is_working" name="time[{{$day_name}}][is_working]" id="{{$day_name}}_is_working" value="1" onclick="isBlock(this);" {{is_selected_blade(1,$day->is_working??"",'checked')}}>
                                                    @endif
                                                    <label for="{{$day_name}}" id="{{$day_name}}_name" class="text-capitalize day">{{$day_name}}</label>
                                                    <label class="custom-control-label" for="{{$day_name}}_is_working"></label>
                                                </div>
                                            </td>
                                            <td id="time_div_{{$key}}">
                                                @if(count($day['working_hours']) > 0)
                                                    @foreach($day['working_hours'] as $key_new=>$working_time)
                                                        @if($key_new == '0')
                                                            <div class="custom-control custom-switch custom-switch-lg">
                                                                <div class="row">
                                                                    <div class="col-10">
                                                                        <input type="text" id="{{$day_name}}" name="time[{{$day_name}}][is_working_time][]" class="form-control opening_hours_el" value="{{($working_time->start_time ?? '00:00:00').' - '.($working_time->end_time ?? '23:59:59')}}">
                                                                        <span></span>
                                                                    </div>
                                                                    <div class="col-2">
                                                                        <button class="btn btn-sm btn-dark" id="new_button_{{$key}}" onclick="addNewHours('{{$key}}','{{$day_name}}');" type="button"><i class="fas fa-plus"></i></button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @else
                                                            @include('admin.working_days.new_time')
                                                        @endif
                                                    @endforeach
                                                @else
                                                    <div class="custom-control custom-switch custom-switch-lg">
                                                        <div class="row">
                                                            <div class="col-10">
                                                                <input type="text" id="{{$day_name}}" name="time[{{$day_name}}][is_working_time][]" class="form-control opening_hours_el" value="{{($working_time->start_time ?? '00:00:00').' - '.($working_time->end_time ?? '23:59:59')}}">
                                                                <span></span>
                                                            </div>
                                                            <div class="col-2">
                                                                <button class="btn btn-sm btn-dark" id="new_button_{{$key}}" onclick="addNewHours('{{$key}}','{{$day_name}}');" type="button"><i class="fas fa-plus"></i></button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                                                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="kt-portlet__foot">
                        <div class=" ">
                            <div class="row">
                                <div class="wd-sl-modalbtn">
                                    <button type="button" class="btn btn-primary waves-effect waves-light"
                                    id="save_changes1">Submit
                                    </button>
                                    <a href="{{route('admin.working_days.index')}}" id="close">
                                        <button type="button" class="btn btn-outline-secondary waves-effect">
                                            Close
                                        </button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script>
        $(function () {
            $('.is_working').change(function () {
                let el = this;
                if (this.checked) {
                    $(el).closest('.parent_div').removeClass('parent_disabled');
                } else {
                    $(el).closest('.parent_div').addClass('parent_disabled');
                }
            });
            
            $('.opening_hours_el').on('apply.daterangepicker', function(ev, picker) {
                $(this).parent().parent().parent().find('.another-input').find('.opening_hours_el').val(picker.startDate.format('HH:mm:ss')+'-'+picker.endDate.format('HH:mm:ss'));
            });


            let start_Date=[];
            let end_Date=[];
            $("#save_changes1").on('click',function(){
                let success_array=[];
                var values1 = $("input[name='time[sunday][is_working_time][]']").map(function(){return $(this).val();}).get();
                var values2 = $("input[name='time[monday][is_working_time][]']").map(function(){return $(this).val();}).get();
                var values3 = $("input[name='time[tuesday][is_working_time][]']").map(function(){return $(this).val();}).get();
                var values4 = $("input[name='time[wednesday][is_working_time][]']").map(function(){return $(this).val();}).get();
                var values5 = $("input[name='time[thursday][is_working_time][]']").map(function(){return $(this).val();}).get();
                var values6 = $("input[name='time[friday][is_working_time][]']").map(function(){return $(this).val();}).get();
                var values7 = $("input[name='time[saturday][is_working_time][]']").map(function(){return $(this).val();}).get();
                
                values1.forEach(myFunction);
                if(values1.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                values2.forEach(myFunction);
                if(values2.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                values3.forEach(myFunction);
                if(values3.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                values4.forEach(myFunction);
                if(values4.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                values5.forEach(myFunction);
                if(values5.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                values6.forEach(myFunction);
                if(values6.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                values7.forEach(myFunction);
                if(values7.length == start_Date.length){
                    success_array.push('true');
                    start_Date = [];
                    end_Date = [];
                } else {
                    start_Date = [];
                    end_Date = [];
                }
                if(success_array.length == '7'){
                    addOverlay();
                    document.getElementById("main_form").submit();
                } else {
                    show_toastr_notification('Please select valid time slots',412);
                }
            });
            function myFunction(value,new_val){;
                var new_val = value.split(' - ');
                if(start_Date.length != '0'){
                    var no = start_Date.length - 1;
                    if(end_Date[no] < new_val[0]){
                        start_Date.push(`${new_val[0]}`);
                        end_Date.push(`${new_val[1]}`);
                    } else {
                        return;
                    }
                } else {
                    start_Date.push(`${new_val[0]}`);
                    end_Date.push(`${new_val[1]}`);
                }
            }

            $('.opening_hours_el').daterangepicker({
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 30,
                timePickerSeconds: false,
                locale: {format: 'HH:mm:ss'}
            }).on('show.daterangepicker', function (ev, picker) {
                picker.container.find(".calendar-table").hide();
            }).on('apply.daterangepicker', function (ev, picker) {
                picker.container.find(".calendar-table").hide();
            });
        });
        function isBlock(thisobj){
            if ($(this).is(':checked')) {

            } else {
                $(thisobj).parent().parent().parent().find('input:checkbox').removeAttr('checked');
            }
        }

        var item = '{{$new_key}}';
        function addNewHours(id,day_name){
            $('#time_div_'+id).append(`<div class="custom-control custom-switch custom-switch-lg new_div_add" id="new_time_${id}">
                <div class="row">
                    <div class="col-10">
                        <input type="text" id="${day_name}" name="time[${day_name}][is_working_time][]" class="form-control opening_hours_el_${item}" value="00:00:00-23:59:59">
                        <span></span>
                    </div>
                    <div class="col-2">
                        <button class="btn btn-sm btn-dark" id="new_button_${id}" onclick="removeNewHours(this);" type="button"><i class="fas fa-minus"></i></button>
                    </div>
                </div>
            </div>`);
            
            $('.opening_hours_el_'+item).on('apply.daterangepicker', function(ev, picker) {
                $(this).parent().parent().parent().find('.another-input').find('.opening_hours_el_'+item).val(picker.startDate.format('HH:mm:ss')+'-'+picker.endDate.format('HH:mm:ss'));
            });
            $('.opening_hours_el_'+item).daterangepicker({
                timePicker: true,
                timePicker24Hour: true,
                timePickerIncrement: 30,
                timePickerSeconds: false,
                locale: {format: 'HH:mm:ss'}
            }).on('show.daterangepicker', function (ev, picker) {
                picker.container.find(".calendar-table").hide();
            }).on('apply.daterangepicker', function (ev, picker) {
                picker.container.find(".calendar-table").hide();
            });

            item++;
        }

        function removeNewHours(thisobj){
            $(thisobj).parent().parent().parent().remove();
        }
    </script>
@endsection