@extends('web.layouts.main')
@section('content')

 <main>
        <!-- ---------- brand_head_sec ----------- -->
        <section class="brand_head_sec">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        @include('web.pages.components.subscribe_card',['subscribe'=>$subscribe])
                    </div>
                </div>
            </div>
        </section>

        <!-- ---------- title ----------- -->
        <div class="title my-5">
            <div class="container">
                <h2 class="text-center"> {{__('web.select_meals')}} </h2>
            </div>
        </div>
        

        <!-- ---------- single_day_choose_sec ----------- -->
        <form id="form" method="post" action="{{url(getCurrentLocale().'/subscribe/edit/'.$day->id)}}" onsubmit="saveForm(this)">
            @CSRF
            
            <section class="single_day_choose_sec">
                    <div class="container">
                        <div class="days_calender">
                            <div class="row justify-content-center">
                                <div class="col-lg-8">
                                    <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>
                        </div>
                        <div class="title mb-3">
                            <div class="row align-items-center">
                                <div class="col-lg-6">
                                    <div class="inf">
                                        <small class="mainColor"> {{__('web.day')}}  </small>
                                        <h6 id="day{{$day->id}}"> {{__('web.'.date('l',strtotime($day->date)))}} ({{ date('Y.m.d',strtotime($day->date))}}) </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="single_day_tabs" id="meals{{$day->id}}">
                            <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="pills0-meal1-tab" data-bs-toggle="pill" data-bs-target="#pills0-meal1" type="button" role="tab" aria-controls="pills0-meal1" aria-selected="false">
                                        <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="pills0-meal2-tab" data-bs-toggle="pill" data-bs-target="#pills0-meal2" type="button" role="tab" aria-controls="pills0-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="pills0-meal3-tab" data-bs-toggle="pill" data-bs-target="#pills0-meal3" type="button" role="tab" aria-controls="pills0-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="pills0-side{{$side->id}}-meal4-tab" data-bs-toggle="pill" data-bs-target="#pills0-side{{$side->id}}-meal4" type="button" role="tab" aria-controls="pills0-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">
                                <div class="tab-pane fade" id="pills0-meal1" role="tabpanel" aria-labelledby="pills0-meal1-tab">
                                    <div class="row">
                                        @if(count($subscribe->meals('breakfast',$day->date)) > 0)
                                            <div class="days_slider full_width_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>
                                            <div class="swiper-button-next"></div>
                                            <div class="swiper-button-prev"></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>
                                </div>
                                <div class="tab-pane fade" id="pills0-meal2" role="tabpanel" aria-labelledby="pills0-meal2-tab">
                                    <div class="row">
                                        @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>
                                            <div class="swiper-button-next"></div>
                                            <div class="swiper-button-prev"></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>
                                </div>
                                @if($subscribe->count_snacks > 0)
                                    <div class="tab-pane fade" id="pills0-meal3" role="tabpanel" aria-labelledby="pills0-meal3-tab">
                                        <div class="row">
                                            @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>
                                                <div class="swiper-button-next"></div>
                                                <div class="swiper-button-prev"></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>
                                    </div>
                                @endif
                                @if(count($subscribe->sides) > 0)
                                    @foreach($subscribe->sides as $side)
                                        <div class="tab-pane fade" id="pills0-side{{$side->id}}-meal4" role="tabpanel" aria-labelledby="pills0-side{{$side->id}}-meal4-tab">
                                            <div class="row">
                                                @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>
                                                    <div class="swiper-button-next"></div>
                                                    <div class="swiper-button-prev"></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>
                                        </div>
                                    @endforeach
                                @endif
                              </div>
                        </div>
                        
                        
                    </div>
                </section>
                
                <div class="text-center mt-4">
                    <button type="submit" class="butn">
                        <span class="small px-5"> {{__('web.save_meals')}} </span>
                    </button>
                </div>
        </form>
           
        <!-- ---------- single_day_choose_sec ----------- -->


        
    
    @push('js')
    
    
    <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: 3,
                },
                1200: {
                    slidesPerView: 4,
                }
            }
        });
    </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',
            
          });
        } );
    </script>

        <script>
            let action_calculate = {!! json_encode(url(getCurrentLocale().'/subscribe/edit/meal')) !!} + '/' + {!! json_encode($day->id) !!}
            let url_change_day = {!! json_encode(url(getCurrentLocale().'/subscribe/change/day/edit')) !!}
        </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>
        
    @endpush  
@stop