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

 <main>
        <!-- ----------  inner header ----------- -->   
        
        @include('web.pages.components.headerNav')

        <!-- ---------- profile page ----------- -->   
        <section class="subscription_renewal section_padding bg-light">
            <div class="container">
                <div class="food_menu p-5 bg-white rounded_15">
                      <form id="form" method="post" onsubmit="saveSubscribe(this)" action="{{url(getCurrentLocale().'/renewal')}}">
    @CSRF
                                    <div class="days_calender">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-7">
                                                <div class="days">
                                                    <h3 class="mb-4"> {{__('web.days')}} </h3>
                                                    <div class="days_content">
                                                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                                            @foreach($days as $key=>$day)
                                                            <li class="nav-item" role="presentation">
                                                                <button class="day_card" id="pills-home-tab{{$day->id}}"
                                                                    data-bs-toggle="pill" data-bs-target="#pills-home{{$day->id}}"
                                                                    type="button" role="tab" aria-controls="pills-home{{$day->id}}"
                                                                    aria-selected="@if($key == 0) true @else false @endif">
                                                                    {{__('web.'.$day->day)}}
                                                                </button>
                                                            </li>
                                                            @endforeach
                                                        </ul>
                                                    </div>
                                                  
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meals">
                                        <div class="tab-content" id="pills-tabContent">
                                        @foreach($days as $key=>$day)
                                            <div class="tab-pane fade" id="pills-home{{$day->id}}" role="tabpanel"
                                                aria-labelledby="pills-home-tab{{$day->id}}">
                                                <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <button class="tab_link " id="pills-profile{{$day->day}}-m1-tab"
                                                            data-bs-toggle="pill" data-bs-target="#pills-profile{{$day->day}}-m1"
                                                            type="button" role="tab" aria-controls="pills-profile{{$day->day}}-m1"
                                                            aria-selected="false">
                                                            {{__('web.breakfast')}}
                                                        </button>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <button class="tab_link" id="pills-profile{{$day->day}}-m2-tab" data-bs-toggle="pill"
                                                            data-bs-target="#pills-profile{{$day->day}}-m2" type="button" role="tab"
                                                            aria-controls="pills-profile{{$day->day}}-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                        </button>
                                                    </li>
                                                    @foreach($snackCategories as $key=>$snack)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profile{{$day->day}}-{$snack->id}}-m3-tab"  type-id="snack"  data-bs-toggle="pill" data-bs-target="#pills-profile{{$day->day}}-{{$snack->id}}-m3" type="button" role="tab" aria-controls="pills-profile{{$day->day}}-{{$snack->id}}-m3" aria-selected="false">
                                                            {{$snack->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                                <div class="tab-content" id="pills-tabContent">
                                                    <div class="tab-pane fade" id="pills-profile{{$day->day}}-m1" role="tabpanel"
                                                        aria-labelledby="pills-profile{{$day->day}}-m1-tab">
                                                        <div class="meals_cards">
                                                            <div class="row">
                                                                @foreach(mealsType($day->day,'breakfast') as $keyMeal=>$meal)
                                                                
                                                                <div class="col-lg-6" id="mealFav{{$meal->id}}">
                                                                    <div class="product_card_new">
                                                                        <div class="row">
                                                                            <div class="col-lg-5">
                                                                                <div class="img">
                                                                                    <a href="{{asset($meal->image)}}" class="img_card" data-fancybox="meal1">
                                                                                        <img src="{{asset($meal->image)}}" alt="">
                                                                                    </a>
                                                                                    <a href="#0"  onclick="favoriteMeal(this)"  data-id="{{$meal->id}}" class="fav_btn mealFav{{$meal->id}} @if(favoritedMeal($meal->id)) fav_active @endif">
                                                                                        <i class="far fa-heart"></i>
                                                                                    </a>
                                                                                </div>
                                                                                <a href="{{url('')}}/assets/web/images/products/3.png" class="d-none" data-fancybox="meal1"></a>
                                                                                <a href="{{url('')}}/assets/web/images/products/4.png" class="d-none" data-fancybox="meal1"></a>
                                                                            </div>
                                                                            <div class="col-lg-7">
                                                                                <div class="info">
                                                                                    <h3>{{$meal->descriptions()->name}}</h3>
                                                                                    <h5>{{__('web.section')}} - <span class="mainColor">{{$meal->section->descriptions()->name}}</span></h5>
                                                                                    <div class="info_foot">
                                                                                        <div class="row gx-0 justify-content-center">
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/cr.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.carbo')}} : <strong> {{$meal->carbo}} kg </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.protien')}} : <strong> {{$meal->protien}} ca </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.calories')}} : <strong> {{$meal->calories}}  </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.fats')}} : <strong> {{$meal->fats}}  </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    
                                                                                    <div class="det_foot d-flex justify-content-between">
                                                                                        <div class="r_side d-flex align-items-center">
                                                                                            <p> {{__('web.quantity')}} :  </p>
                                                                                            <div class="qty-container quantity ms-2">
                                                                                                <button class="btn-light qt-minus" onclick="minusMealCount(this)" type-id="breakfast" day-id="{{$day->day}}" key-id="{{$keyMeal}}" type="button"><i class="fa fa-minus"></i></button>
                                                                                                <input type="text" name="meals[{{$day->day}}][breakfast][{{$keyMeal}}][count]"  id="mealCount{{$day->day}}breakfast{{$keyMeal}}" value="{{SubMeal($meal->id,$day->day)['count']}}" class="input-qty qt" readonly />
                                                                                                <button class="btn-light qt-plus" onclick="plusMealCount(this)" type-id="breakfast" day-id="{{$day->day}}" key-id="{{$keyMeal}}"  type="button"><i class="fa fa-plus"></i></button>
                                                                                            </div>
                                                                                        </div>
                                                                                        
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-check choose_item">
                                                                            
                                                                            <input class="form-check-input  mealsCount mealCount{{$day->day}}breakfast{{$keyMeal}}" @if(SubMeal($meal->id,$day->day)['checked'] == 'on') checked @endif onclick="checkMeal(this)" type="checkbox" value="{{$meal->id}}" name="meals[{{$day->day}}][breakfast][{{$keyMeal}}][id]" id="m1{{$day->day}}{{$meal->id}}">
                                                                            <label class="form-check-label" for="m1{{$day->day}}{{$meal->id}}">
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                
                                                                
                                                                @endforeach
                                                                
                                                               
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="pills-profile{{$day->day}}-m2" role="tabpanel"
                                                        aria-labelledby="pills-profile{{$day->day}}-m2-tab">
                                                        <div class="meals_cards">
                                                            <div class="row">
                                                               @foreach(mealsType($day->day,'main') as $keyMeal=>$meal)
                                                               
                                                               
                                                                <div class="col-lg-6" id="mealFav{{$meal->id}}">
                                                                    <div class="product_card_new">
                                                                        <div class="row">
                                                                            <div class="col-lg-5">
                                                                                <div class="img">
                                                                                    <a href="{{asset($meal->image)}}" class="img_card" data-fancybox="meal1">
                                                                                        <img src="{{asset($meal->image)}}" alt="">
                                                                                    </a>
                                                                                    <a href="#0"  onclick="favoriteMeal(this)" data-id="{{$meal->id}}" class="fav_btn mealFav{{$meal->id}} @if(favoritedMeal($meal->id)) fav_active @endif">
                                                                                        <i class="far fa-heart"></i>
                                                                                    </a>
                                                                                </div>
                                                                                <a href="{{url('')}}/assets/web/images/products/3.png" class="d-none" data-fancybox="meal1"></a>
                                                                                <a href="{{url('')}}/assets/web/images/products/4.png" class="d-none" data-fancybox="meal1"></a>
                                                                            </div>
                                                                            <div class="col-lg-7">
                                                                                <div class="info">
                                                                                    <h3>{{$meal->descriptions()->name}}</h3>
                                                                                    <h5>{{__('web.section')}} - <span class="mainColor">{{$meal->section->descriptions()->name}}</span></h5>
                                                                                    <div class="info_foot">
                                                                                        <div class="row gx-0 justify-content-center">
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/cr.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.carbo')}} : <strong> {{$meal->carbo}} kg </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.protien')}} : <strong> {{$meal->protien}} ca </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.calories')}} : <strong> {{$meal->calories}}  </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.fats')}} : <strong> {{$meal->fats}}  </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    
                                                                                    <div class="det_foot d-flex justify-content-between">
                                                                                        <div class="r_side d-flex align-items-center">
                                                                                            <p> {{__('web.quantity')}} :  </p>
                                                                                            <div class="qty-container quantity ms-2">
                                                                                                <button class="btn-light qt-minus" onclick="minusMealCount(this)" type-id="main" day-id="{{$day->day}}" key-id="{{$keyMeal}}" type="button"><i class="fa fa-minus"></i></button>
                                                                                                <input type="text" name="meals[{{$day->day}}][main][{{$keyMeal}}][count]" id="mealCount{{$day->day}}main{{$keyMeal}}" value="{{SubMeal($meal->id,$day->day)['count']}}" class="input-qty qt" readonly />
                                                                                                <button class="btn-light qt-plus" onclick="plusMealCount(this)" type-id="main" day-id="{{$day->day}}" key-id="{{$keyMeal}}"  type="button"><i class="fa fa-plus"></i></button>
                                                                                            </div>
                                                                                        </div>
                                                                                        
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-check choose_item">
                                                                            
                                                                            <input class="form-check-input  mealsCount mealCount{{$day->day}}main{{$keyMeal}}" onclick="checkMeal(this)"  @if(SubMeal($meal->id,$day->day)['checked'] == 'on') checked @endif type="checkbox" value="{{$meal->id}}" name="meals[{{$day->day}}][main][{{$keyMeal}}][id]" id="m1{{$day->day}}{{$meal->id}}">
                                                                            <label class="form-check-label" for="m1{{$day->day}}{{$meal->id}}">
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                               
                                                                @endforeach
                                                                
                                                               
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @foreach($snackCategories as $keySnack=>$snack)
                                                    <div class="tab-pane fade" id="pills-profile{{$day->day}}-{{$snack->id}}-m3" role="tabpanel"
                                                        aria-labelledby="pills-profile{{$day->day}}-{$snack->id}}-m3-tab">
                                                        <div class="meals_cards">
                                                            <div class="row">
                                                                
                                                                @foreach(mealsType($day->day,'snack',$snack->id) as $keyMeal=>$meal)
                                                                
                                                                
                                                                <div class="col-lg-6" id="mealFav{{$meal->id}}">
                                                                    <div class="product_card_new">
                                                                        <div class="row">
                                                                            <div class="col-lg-5">
                                                                                <div class="img">
                                                                                    <a href="{{asset($meal->image)}}" class="img_card" data-fancybox="meal1">
                                                                                        <img src="{{asset($meal->image)}}" alt="">
                                                                                    </a>
                                                                                    <a href="#0" onclick="favoriteMeal(this)" data-id="{{$meal->id}}" class="fav_btn mealFav{{$meal->id}} @if(favoritedMeal($meal->id)) fav_active @endif">
                                                                                        <i class="far fa-heart"></i>
                                                                                    </a>
                                                                                </div>
                                                                                <a href="{{url('')}}/assets/web/images/products/3.png" class="d-none" data-fancybox="meal1"></a>
                                                                                <a href="{{url('')}}/assets/web/images/products/4.png" class="d-none" data-fancybox="meal1"></a>
                                                                            </div>
                                                                            <div class="col-lg-7">
                                                                                <div class="info">
                                                                                    <h3>{{$meal->descriptions()->name}}</h3>
                                                                                    <h5>{{__('web.section')}} - <span class="mainColor">{{$meal->section->descriptions()->name}}</span></h5>
                                                                                    <div class="info_foot">
                                                                                        <div class="row gx-0 justify-content-center">
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/cr.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.carbo')}} : <strong> {{$meal->carbo}} kg </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.protien')}} : <strong> {{$meal->protien}} ca </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.calories')}} : <strong> {{$meal->calories}}  </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div class="col-6">
                                                                                                <div class="info_card">
                                                                                                    <div class="icon">
                                                                                                        <img src="{{url('')}}/assets/web/images/icons/br.svg" alt="">
                                                                                                    </div>
                                                                                                    <div class="cont">
                                                                                                        <p>{{__('web.fats')}} : <strong> {{$meal->fats}}  </strong></p>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="det_foot d-flex justify-content-between">
                                                                                        <div class="r_side d-flex align-items-center">
                                                                                            <p> {{__('web.quantity')}} :  </p>
                                                                                            <div class="qty-container quantity ms-2">
                                                                                                <button class="btn-light qt-minus" onclick="minusMealCount(this)" type-id="{{$keySnack}}snacks" day-id="{{$day->day}}" key-id="{{$keyMeal}}" type="button"><i class="fa fa-minus"></i></button>
                                                                                                <input type="text" name="snacks[{{$day->day}}][{{$keySnack}}][{{$keyMeal}}][count]" id="mealCount{{$day->day}}{{$keySnack}}snacks{{$keyMeal}}" value="{{SubMeal($meal->id,$day->day)['count']}}" class="input-qty qt" readonly />
                                                                                                <button class="btn-light qt-plus" onclick="plusMealCount(this)" type-id="{{$keySnack}}snacks" day-id="{{$day->day}}" key-id="{{$keyMeal}}"  type="button"><i class="fa fa-plus"></i></button>
                                                                                            </div>
                                                                                        </div>
                                                                                        
                                                                                    </div>
                                                                                   
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <div class="form-check choose_item">
                                                                            
                                                                            <input class="form-check-input  snacksCount  mealCount{{$day->day}}{{$keySnack}}snacks{{$keyMeal}}" @if(SubMeal($meal->id,$day->day)['checked'] == 'on') checked @endif onclick="checkMeal(this)" type="checkbox" value="{{$meal->id}}" name="snacks[{{$day->day}}][{{$keySnack}}][{{$keyMeal}}][id]"  id="m1{{$day->day}}{{$meal->id}}">
                                                                            <label class="form-check-label" for="m1{{$day->day}}{{$meal->id}}">
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                
                                                                
                                                                @endforeach
                                                                
                                                               
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                     
                                                                
                                                                
                                                </div>
                                            </div>
                                        @endforeach
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center mt-5">
                                    <button type="submit" class="butn w-50 py-3 shadow-lg">
                                        <span> حفظ </span>
                                    </button>
                                </div>
</form>
    
                    
                </div>
            </div>
        </section>
    </main>
      
        
@push('js')
    
<script>
    
    function saveSubscribe(elem)
    {
        event.preventDefault(); 
        var action = $(elem).attr('action');
        var urls = action;
        let dataform = new FormData( $(elem)[0]);
     
        $.ajax
        ({
            url : urls,
            type: 'POST',              
            data: dataform,
            contentType: false, 
            processData: false, 
            success:function(data)
            {
                $('#modal_success').modal('show');
                setTimeout(
                    function()
                    {
                        
                          window.location.assign({!! json_encode(url(getCurrentLocale().'/subscribe')) !!}+'/'+data);
                    }, 1000);
            }
            ,error:function(data) 
            {
                $('#modal_error').modal('show');
                $('#errors').html('');
                $('#errors').css("display", "block");
                $.each(data.responseJSON.errors, function(key,value) 
                {
                    $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                }); 
            }
        })
    }
     function checkMeal(elem){
         let sar = {!! json_encode(__('web.sar')) !!}
         let dataForm = $('#form').serialize();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/checkMealUpdate')) !!},
              type: 'GET',              
              data: dataForm,
              success:function(data)
              {
                
              }
              ,error:function(data) 
                {
                    $('#modal_error').modal('show');
                    $('#errors').html('');
                    $('#errors').css("display", "block");
                    $.each(data.responseJSON.errors, function(key,value) 
                    {
                        $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                        $(elem).removeAttr('checked');
                    }); 
                }
            })
     }
     
      function plusMealCount(elem) {
        let day = $(elem).attr('day-id');
        let key = $(elem).attr('key-id');
        let type = $(elem).attr('type-id');
        var amount = Number($('#mealCount'+day+type+key).val());
        if (amount < 4) {
            $('#mealCount'+day+type+key).val(Number(amount)+1 );
        }
        
         let sar = {!! json_encode(__('web.sar')) !!}
         let dataForm = $('#form').serialize();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/checkMealUpdate')) !!},
              type: 'GET',              
              data: dataForm,
              success:function(data)
              {
                
              }
              ,error:function(data) 
                {
                    $('#modal_error').modal('show');
                    $('#errors').html('');
                    $('#errors').css("display", "block");
                    $.each(data.responseJSON.errors, function(keys,value) 
                    {
                        $('#errors').append('<h4 class="title text-center mt-3">'+value+'</h4>');
                     $('#mealCount'+day+type+key).val(Number(amount) );
                    }); 
                }
            })
        }

      function minusMealCount(elem) {
        let day = $(elem).attr('day-id');
        let key = $(elem).attr('key-id');
        let type = $(elem).attr('type-id');
        var amount = Number($('#mealCount'+day+type+key).val());
        if (amount > 1) {
            $('#mealCount'+day+type+key).val(Number(amount)-1);
        }
        }
</script>

@endpush
@stop