@extends('admin.layouts.container')

@section('content')
<div class="side-title">
    <h3>{{ $head }}</h3>
   
</div>

<div class="border-item">
    @if($can_edit)  
    <form id="form" method="post" action="{{url(getCurrentLocale().'/admin/subscribes/edit/'.$day->id)}}" onsubmit="saveForm(this)">
        @CSRF
    @endif
        <div class="days_choose_sec">
            <div class="container">           
                <div class="days_calender">
                    <div class="datepicker_side">
                        <div id="datepicker"></div>
                        <input type="hidden" name="date" class="form-control" id="date" placeholder=""value="{{$day->date}}">
                    </div>
                </div>                                         
                <div class="single_day_tabs" >
                    <div class="single_day_item mb-4"id="meals{{$day->id}}">
                        <div class="day_title mb-4">
                            <h6 class="mainColor"> {{__('web.'.date('l',strtotime($day->date)))}} ({{ date('Y.m.d',strtotime($day->date))}}) </h6>
                        </div>
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            @if($subscribe->cost->breakfast > 0)
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pills-meal1-tab" data-toggle="pill" data-target="#pills-meal1" type="button" role="tab" aria-controls="pills-meal1" aria-selected="true">
                                        <img src="{{url('')}}/assets/web/images/new_imgs/icons/004-restaurant.svg" alt="" class="icon"> <strong> {{__('web.breakfast')}} </strong>
                                  </button>
                                </li>
                            @endif
                            @if($subscribe->cost->main > 0)
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pills-meal2-tab" data-toggle="pill" data-target="#pills-meal2" type="button" role="tab" aria-controls="pills-meal2" aria-selected="false">
                                    <img src="{{url('')}}/assets/web/images/new_imgs/icons/002-restaurant.svg" alt="" class="icon"> <strong> {{__('web.main')}}  </strong>
                                  </button>
                                </li>
                            @endif
                            @if($subscribe->count_snacks > 0)
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pills-meal3-tab" data-toggle="pill" data-target="#pills-meal3" type="button" role="tab" aria-controls="pills-meal3" aria-selected="false">
                                    <img src="{{url('')}}/assets/web/images/new_imgs/icons/009-pizza.svg" alt="" class="icon"> <strong> {{__('web.snacks')}} </strong>
                                  </button>
                                </li>
                            @endif
                            @if(count($subscribe->sides) > 0)
                                @foreach($subscribe->sides as $side)
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="pills-side{{$side->id}}-meal4-tab" data-toggle="pill" data-target="#pills-side{{$side->id}}-meal4" type="button" role="tab" aria-controls="pills-side{{$side->id}}-meal4" aria-selected="false">
                                            <img src="{{url('')}}/assets/web/images/new_imgs/icons/024-cupcake.svg" alt="" class="icon"> <strong> {{$side->side->descriptions()->name}} </strong>
                                        </button>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                        <div class="tab-content" id="pills-tabContent">
                            @if($subscribe->cost->breakfast > 0)
                                <div class="tab-pane fade" id="pills-meal1" role="tabpanel" aria-labelledby="pills-meal1-tab">
                                    @if(count($subscribe->meals('breakfast',$day->date)) > 0)
                                        <div class="days_slider">
                                            <div class="swiper-container">
                                                <div class="swiper-wrapper">
                                                    @foreach($subscribe->meals('breakfast',$day->date) as $keyMeal=>$meal)
                                                        @include('web.pages.components.meal',['meal'=>$meal,'package_id'=>$subscribe->package_id,'key'=>0,'status'=>'breakfast','keyMeal'=>$keyMeal,'day'=>$day])
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="swiper-button-prev"></div>
                                            <div class="swiper-button-next"></div>
                                        </div>
                                    @else
                                        <div class="col-lg-12">
                                            <div class="text-center py-5 mt-5">
                                                <div class="alert alert-warning py-5" role="alert">
                                                    <h5 class="mb-0"> {{__('web.not_exists_meals')}} </h5>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif
                            @if($subscribe->cost->main > 0)
                                <div class="tab-pane fade" id="pills-meal2" role="tabpanel" aria-labelledby="pills-meal2-tab">
                                    @if(count($subscribe->meals('main',$day->date)) > 0)
                                        <div class="days_slider">
                                            <div class="swiper-container">
                                                <div class="swiper-wrapper">
                                                    @foreach($subscribe->meals('main',$day->date) as $keyMeal=>$meal)
                                                        @include('web.pages.components.meal',['meal'=>$meal,'package_id'=>$subscribe->package_id,'key'=>0,'status'=>'main','keyMeal'=>$keyMeal,'day'=>$day])
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="swiper-button-next"></div>
                                            <div class="swiper-button-prev"></div>
                                        </div>
                                    @else
                                        <div class="col-lg-12">
                                            <div class="text-center py-5 mt-5">
                                                <div class="alert alert-warning py-5" role="alert">
                                                    <h5 class="mb-0"> {{__('web.not_exists_meals')}} </h5>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif
                            @if($subscribe->count_snacks > 0)
                                <div class="tab-pane fade" id="pills-meal3" role="tabpanel" aria-labelledby="pills-meal3-tab">
                                    @if(count($subscribe->meals('snack',$day->date)) > 0)
                                        <div class="days_slider">
                                            <div class="swiper-container">
                                                <div class="swiper-wrapper">
                                                    @foreach($subscribe->meals('snack',$day->date) as $keyMeal=>$meal)
                                                        @include('web.pages.components.meal',['meal'=>$meal,'key'=>0,'status'=>'snacks','keyMeal'=>$keyMeal,'day'=>$day])
                                                    @endforeach
                                                </div>
                                            </div>
                                            <div class="swiper-button-next"></div>
                                            <div class="swiper-button-prev"></div>
                                        </div>
                                    @else
                                        <div class="col-lg-12">
                                            <div class="text-center py-5 mt-5">
                                                <div class="alert alert-warning py-5" role="alert">
                                                    <h5 class="mb-0"> {{__('web.not_exists_meals')}} </h5>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif
                            
                            @if(count($subscribe->sides) > 0)
                                @foreach($subscribe->sides as $side)
                                    <div class="tab-pane fade" id="pills-side{{$side->id}}-meal4" role="tabpanel" aria-labelledby="pills-side{{$side->id}}-meal4-tab">
                                        @if(count($subscribe->meals('side',$day->date,$side->side_id)) > 0)
                                            <div class="days_slider">
                                                <div class="swiper-container">
                                                    <div class="swiper-wrapper">
                                                        @foreach($subscribe->meals('side',$day->date,$side->side_id) as $keyMeal=>$meal)
                                                            @include('web.pages.components.meal',['meal'=>$meal,'key'=>0,'status'=>'sides','keyMeal'=>$keyMeal,'day'=>$day])
                                                        @endforeach
                                                    </div>
                                                </div>
                                                <div class="swiper-button-next"></div>
                                                <div class="swiper-button-prev"></div>
                                            </div>
                                        @else
                                            <div class="col-lg-12">
                                                <div class="text-center py-5 mt-5">
                                                    <div class="alert alert-warning py-5" role="alert">
                                                        <h5 class="mb-0"> {{__('web.not_exists_meals')}} </h5>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if($can_edit)
        <div class="text-center mt-4">
            <button type="submit" class="butn">
                <span class="small px-5"> {{__('web.save_meals')}} </span>
            </button>
        </div>
    </form>
    @endif
</div>


@endsection
@section('inner_js')
    <!-- Editor JS files -->
{{--    <script src="{{ asset('/assets/admin/js/lib/tinymce.min.js') }}"></script>--}}
        <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
    <script>
        let route_prefix = "{{ url(config('lfm.prefix')) }}",
            url = "{{url('/')}}/",
            currentLanguage = "{{getCurrentLocale()}}",
            imagePath = "{{asset('')}}";
    </script>
    <script src="{{ asset('assets/admin/js/editor.js') }}"></script>
    <script src="{{ asset('assets/admin/js/lfm.js') }}"></script>
    <script src="{{ asset('assets/admin/js/articles.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
    
    
    
    
    
    <script>
    var datesForDisable = {!! json_encode($dates) !!}
    
        function DisableDates(date) {
            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
            
            return [datesForDisable.indexOf(string) == -1];
        }
        $( function() {
            $( "#datepicker" ).datepicker({
                dateFormat: 'yy-mm-dd',
                minDate: {!! json_encode($start_date) !!},
                maxDate: {!! json_encode($end_date) !!},
                beforeShowDay: DisableDates,
                defaultDate: {!! json_encode($day->date) !!},
                onSelect: function (dateText, inst) {
                    $("#date").val(dateText)
                    let target = {!! json_encode($day->id) !!}
                    let key = 0
                    $.ajax
                    ({
                        url : url_change_day,
                        type: 'GET',              
                        data: 'date='+dateText+'&day_id='+target+'&key='+key,   
                        success:function(data)
                        {
                            $('#day'+target).html(data.data.date);
                            $('#meals'+target).html(data.data.res);
                        }
                    })
                  }
                });
            
        });
    </script>
    
    <script>
        var swiper = new Swiper('.single_day_tabs .days_slider .swiper-container', {
            // slidesPerView: 5,
            spaceBetween: 30,
            // centeredSlides: true,
            speed: 1000,
            pagination: false,
            navigation: {
                nextEl: '.days_slider .swiper-button-next',
                prevEl: '.days_slider .swiper-button-prev',
            },
            mousewheel: false,
            keyboard: true,
            autoplay: {
                delay: 5000,
            },
            loop: false,
            breakpoints: {
                0: {
                    slidesPerView: 1,
                },
                480: {
                    slidesPerView: 1,
                },
                787: {
                    slidesPerView: 2,
                },
                991: {
                    slidesPerView: 2,
                },
                1200: {
                    slidesPerView: 2.5,
                }
            }
        });
    </script>

    <script>
        var swiper = new Swiper('.days_slider_2 .swiper-container', {
            // slidesPerView: 5,
            spaceBetween: 30,
            // centeredSlides: true,
            speed: 1000,
            pagination: false,
            navigation: {
                nextEl: '.days_slider_2 .swiper-button-next',
                prevEl: '.days_slider_2 .swiper-button-prev',
            },
            mousewheel: false,
            keyboard: true,
            autoplay: false,
            loop: false,
            breakpoints: {
                0: {
                    slidesPerView: 1,
                },
                480: {
                    slidesPerView: 1,
                },
                787: {
                    slidesPerView: 2,
                },
                991: {
                    slidesPerView: 2,
                },
                1200: {
                    slidesPerView: 3.5,
                }
            },
        });
    </script>
    <script>
        $( function() {
            $( ".datepicker2" ).datepicker({
            dateFormat: 'yy-mm-dd',
            minDate: {!! json_encode($start_date) !!},
            maxDate: {!! json_encode($end_date) !!},
            onSelect: function (dateText, inst) {
                $(this).parent().children(".date").val(dateText)
                let target = $(this).parent().children(".date").attr('data-id')
                let key = $(this).parent().children(".date").attr('key-id')
                $.ajax
                ({
                    url : url_change_day,
                    type: 'GET',              
                    data: 'date='+dateText+'&day_id='+target+'&key='+key,   
                    success:function(data)
                    {
                        $('#day'+target).html(data.data.date);
                        $('#meals'+target).html(data.data.res);
                    }
                })
              },
              defaultDate: '08/06/2023',
            
          });
        } );
        function saveForm(elem)
{
    event.preventDefault(); 
    var action = $(elem).attr('action');
    var method = $(elem).attr('method');
    if(method == 'GET')
    {
        var dataform = $(elem).serialize();
    }
    else
    {
        var dataform = new FormData( $(elem)[0]);
    }
    $.ajax
        ({
            url : action,
            type: method,              
            data: dataform,
            dataType:'json',
            contentType: false, 
            processData: false, 
            success:function(data)
            {
                if(data.message != '')
                {
                    toasterSuccess(data.message);
                }
                setTimeout(
                    function()
                    {
                        window.location.href = data.data
                    }, 1000);
            }
            ,error:function(data) 
            {
                toasterError(Object.values(data.responseJSON.errors)[0]);
            }
        })
}

        function toasterError(error){
            toastr.options.closeButton = true;
            toastr.options.progressBar = true;
            toastr.options.positionClass = 'toast-top-right';
            toastr.options.showMethod = 'slideDown';
            toastr.options.hideMethod = 'slideUp';
            toastr.options.closeMethod = 'slideUp';
            toastr.options.closeDuration = 200;
            toastr.error(error);
        }
        function toasterSuccess(success){
            toastr.options.closeButton = true;
            toastr.options.progressBar = true;
            toastr.options.positionClass = 'toast-top-right';
            toastr.options.showMethod = 'slideDown';
            toastr.options.hideMethod = 'slideUp';
            toastr.options.closeMethod = 'slideUp';
            toastr.options.closeDuration = 200;
            toastr.success(success);
        }
    </script>

        <script>
            let action_calculate = {!! json_encode(url(getCurrentLocale().'/admin/subscribes/edit/meal')) !!} + '/' + {!! json_encode($day->id) !!}
            let url_change_day = {!! json_encode(url(getCurrentLocale().'/admin/subscribes/change/day')) !!}
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="{{url('')}}/assets/web/js/jquery-ui.multidatespicker.js"></script>
        <script src="{{url('')}}/assets/web/js/date_lang.js"></script>
        <script src="{{url('')}}/assets/web/js/custom/calculatePackage.js"></script>
        
@endsection