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

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

        <!-- ---------- register_page page ----------- -->   
        <section class="packages_page_new section_padding bg-light">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-4">
                        <div class="img text-center mb-4">
                            <img src="{{asset($special->section->image)}}" alt="">
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div class="section_head text-center mb-5">
                        <h2>{!! $page->descriptions()->title !!}</h2>
                        <p> {!! $page->descriptions()->description !!}</p>
                    </div>
                    <div class="packages_tabs" id="packagesTarget">
                        <div class="packages_tabs_head">
                            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link active" id="pills-home-pack" data-bs-toggle="pill" data-bs-target="#pills-pack" type="button" role="tab" aria-controls="pills-pack" aria-selected="true">
                                    {{__('web.packages')}} 
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pills-menu-tab"  type="button"  >
                                    {{__('web.menu')}} 
                                  </button>
                                </li>
                            </ul>
                        </div>
                        <form id="form" action="{{url(getCurrentLocale().'/package')}}" onsubmit="saveSubscribe(this)" method="post">
                            @CSRF
                            <input type="hidden" name="section_id" value="{{$special->section->id}}">
                            <input type="hidden" name="special_id" value="{{$special->id}}">
                          <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="pills-pack" role="tabpanel" aria-labelledby="pills-pack-tab">
                                <div class="packages_tabs_content">
                                    <div class="packages_tabs_content_head">
                                        <ul class="nav nav-pills justify-content-center my-5" id="pills-tab" role="tablist">
                                            <li class="nav-item" role="presentation">
                                              <input class="nav-link active" type="radio" checked name="type" value="{{$special->type}}" id="pills-basic-tab" data-bs-toggle="pill" data-bs-target="#pills-basic" type="button" role="tab" aria-controls="pills-basic" aria-selected="true">
                                                
                                            </li>
                                          </ul>
                                    </div>
                                      <div class="tab-content" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="pills-basic" role="tabpanel" aria-labelledby="pills-basic-tab">
                                            <div class="row">
                                                <div class="col-lg-3">
                                                    <div class="packages_tabs_slider">
                                                        <h4 class="sub_title"> {{__('web.select_package')}}  </h4>
                                                        <ul class="nav nav-pills mb-3 d-block" id="pills-tab" role="tablist">
                                                            
                                                            <li class="nav-item" role="presentation">
                                                              <input class="nav-link "   type="radio" name="package_id" checked value="{{$package->id}}" id="pills-bk1-tab" data-bs-toggle="pill" data-bs-target="#pills-bk1" type="button" role="tab" aria-controls="pills-bk1"  aria-selected="true" >
                                                                <div class="package_card_slide">
                                                                    <div class="card_head">
                                                                        <h5 class="m-0"> {{$package->descriptions()->name}} </h5>
                                                                        <div class="icon">
                                                                            <i class="fal fa-arrow-left"></i>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            
                                                          </ul>
                                                    </div>
                                                </div>
                                                
                                                
                                                
                                                                           
                                               <div class="col-lg-9">
                                                    <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade show active" id="pills-bk1" role="tabpanel" aria-labelledby="pills-bk1-tab">
                                                            <div class="package_times">
                                                                <h3 class="text-center mb-4"> {{__('web.package_times')}}  </h3>
                                                                <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
                                                                   <li class="nav-item" role="presentation">
                                                                      <input type="radio" name="count_days" value="{{$day}}" checked class="nav-link" id="pills-times1-tab" data-bs-toggle="pill" data-bs-target="#pills-times1" type="button" role="tab" aria-controls="pills-times1" aria-selected="true">
                                                                            <span>{{__('web.package')}} {{$day}} {{__('web.days')}}</span>
                                                                    </li>
                                                                    
                                                                  </ul>
                                                                  <div class="tab-content" id="pills-tabContent">
                                                                    <div class="tab-pane fade show active" id="pills-times1" role="tabpanel" aria-labelledby="pills-times1-tab">
                                                                        <div class="row justify-content-center">
                                                                            <div class="col-lg-12">
                                                                                <div class="package_times_content">
                                                                                    
                                                                                   <div class="row">
                                                                                <div class="col-lg-4">
                                                                                    <div class="package_times_card">
                                                                                        <ul>
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                    <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="meals_count" value="1" id="meal1">
                                                                                                    <label class="form-check-label" for="meal1">
                                                                                                      <div class="card_check">
                                                                                                        <span> 1 {{__('web.meal')}}  </span> <span class="prise"> {{$package->costMeal(1,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                      </div>
                                                                                                    </label>
                                                                                                  </div>
                                                                                            </li>
                                                                            
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                    <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="meals_count" value="2" id="meal2">
                                                                                                    <label class="form-check-label" for="meal2">
                                                                                                      <div class="card_check">
                                                                                                        <span> 2 {{__('web.meal')}}  </span> <span class="prise"> {{$package->costMeal(2,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                      </div>
                                                                                                    </label>
                                                                                                  </div>
                                                                                            </li>
                                                                            
                                                                                            <li>
                                                                                            <div class="form-check">
                                                                                                <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="meals_count" value="3" id="meal3">
                                                                                                <label class="form-check-label" for="meal3">
                                                                                                    <div class="card_check">
                                                                                                        <span> 3 {{__('web.meal')}}  </span> <span class="prise"> {{$package->costMeal(3,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                        </div>
                                                                                                </label>
                                                                                                </div>
                                                                                            </li>
                                                                            
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="meals_count" value="4" id="meal4">
                                                                                                <label class="form-check-label" for="meal4">
                                                                                                    <div class="card_check">
                                                                                                        <span> 4 {{__('web.meal')}}  </span> <span class="prise"> {{$package->costMeal(4,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                    </div>
                                                                                                </label>
                                                                                                </div>
                                                                                            </li>
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-4">
                                                                                    <div class="package_times_card">
                                                                                        <ul>
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                    <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="snacks_count" value="1" id="snak1">
                                                                                                    <label class="form-check-label" for="snak1">
                                                                                                      <div class="card_check">
                                                                                                        <span> 1 {{__('web.snack')}}  </span> <span class="prise"> {{$package->costSnack(1,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                      </div>
                                                                                                    </label>
                                                                                                  </div>
                                                                                            </li>
                                                                            
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                    <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="snacks_count" value="2" id="snak2" >
                                                                                                    <label class="form-check-label" for="snak2">
                                                                                                      <div class="card_check">
                                                                                                        <span> 2 {{__('web.snack')}}  </span> <span class="prise"> {{$package->costSnack(2,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                      </div>
                                                                                                    </label>
                                                                                                  </div>
                                                                                            </li>
                                                                            
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                    <input class="form-check-input" type="radio" onclick="calculateVal();mealsCount()" name="snacks_count" value="3" id="snak3">
                                                                                                    <label class="form-check-label" for="snak3">
                                                                                                        <div class="card_check">
                                                                                                            <span> 3 {{__('web.snack')}}  </span> <span class="prise"> {{$package->costSnack(3,$day)}} <small> {{__('web.sar')}} </small> </span>
                                                                                                          </div>
                                                                                                    </label>
                                                                                                  </div>
                                                                                            </li>
                                                                            
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="col-lg-4">
                                                                                    <div class="package_times_card">
                                                                                        <ul>
                                                                                            @foreach($protiens as $key=>$row)
                                                                                            <li>
                                                                                                <div class="form-check">
                                                                                                    <input class="form-check-input" type="radio" onclick="calculateVal()" name="protiens_count" value="{{$row->id}}" id="added{{$row->id}}">
                                                                                                    <label class="form-check-label" for="added{{$row->id}}">
                                                                                                      <div class="card_check">
                                                                                                        <span> {{$row->meals_count}} {{__('web.add_protien')}}  </span> <span class="prise"> {{$row->cost}} <small> {{__('web.sar')}} </small> </span>
                                                                                                      </div>
                                                                                                    </label>
                                                                                                  </div>
                                                                                            </li>
                                                                                            @endforeach
                                                                                        </ul>
                                                                                    </div>
                                                                                </div>
                                                                            </div>  
                                                                                    
                                                                                    
                                                                                    
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tab-pane fade" id="pills-times2" role="tabpanel" aria-labelledby="pills-times2-tab">
                                                                        times2
                                                                    </div>
                                                                  </div>
                                                            </div>
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
                                                        <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="package_payment pb-5 mt-5">
                                                <div class="row justify-content-center">
                                                    <div class="col-lg-10">
                                                        <h3 class="text-center mb-4"> {{__('web.subscribe_tax')}}  </h3>
                                                        <div class="subscribe_price_table_new">
                                                            <div class="price_table_body">
                                                                <ul>
                                                                    <li>
                                                                        <p> {{__('web.total_amount')}}  </p>
                                                                        <span class="line"></span>
                                                                        <strong id="package_total"> 0 {{__('web.sar')}} </strong>
                                                                    </li>
                                                                    <li id="offer_show" @if($package->type != 'offer') style="display:none" @endif>
                                                                        <p> {{__('web.offer_package')}} </p>
                                                                        <span class="line"></span>
                                                                        <strong id="offer"> {{$package->offer}} % </strong>
                                                                    </li>
                                                                    <li>
                                                                        <p> {{__('web.tax')}}  </p>
                                                                        <span class="line"></span>
                                                                        <strong id="tax"> {{settings('tax')}} {{__('web.sar')}} </strong>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                            <div class="price_table_foot">
                                                                <ul>
                                                                    <li>
                                                                        <p> {{__('web.total')}}  </p>
                                                                        <span class="line"></span>
                                                                        <strong id="total"> {{settings('tax')}} {{__('web.sar')}} </strong>
                                                                    </li>
                                                                </ul>
                                                                <img src="{{url('')}}/assets/web/images/zegzag1.png" alt="" class="zegzag">
                                                                <img src="{{url('')}}/assets/web/images/zegzag_line.png" alt="" class="zegzag_line">
                                                            </div>
                                                        </div>
                                                        <div class="text-center mt-5">
                                                            <a href="#packagesTarget" onclick="nextStep(this)" class="butn w-50 py-3 shadow-lg">
                                                                <span> {{__('web.next')}} </span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                      </div>
                                </div>
                            </div>
                             <div class="tab-pane fade" id="pills-menu" role="tabpanel" aria-labelledby="pills-menu-tab">
                                <div class="menu_tabs_content p-5">
                                    <div class="food_menu">
                                        <div class="days_calender">
                                            <div class="days text-center">
                                                <h3 class="mb-4"> {{__('web.select_days')}}  </h3>
                                                <div class="days_content">
                                                    <ul class="nav nav-pills mb-3 justify-content-center w-100" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="day_card" id="pills-profileSat-tab" data-bs-toggle="pill" data-bs-target="#pills-profileSat" type="button" role="tab" aria-controls="pills-profileSat" aria-selected="false">
                                                            {{__('web.saturday')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="day_card" id="pills-profileSun-tab" data-bs-toggle="pill" data-bs-target="#pills-profileSun" type="button" role="tab" aria-controls="pills-profileSun" aria-selected="false">
                                                           {{__('web.sunday')}} 
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="day_card" id="pills-profileMon-tab" data-bs-toggle="pill" data-bs-target="#pills-profileMon" type="button" role="tab" aria-controls="pills-profileMon" aria-selected="false">
                                                           {{__('web.monday')}} 
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="day_card" id="pills-profileTue-tab" data-bs-toggle="pill" data-bs-target="#pills-profileTue" type="button" role="tab" aria-controls="pills-profileTue" aria-selected="false">
                                                           {{__('web.tuesday')}} 
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                            <button class="day_card" id="pills-profileWed-tab" data-bs-toggle="pill" data-bs-target="#pills-profileWed" type="button" role="tab" aria-controls="pills-profileWed" aria-selected="false">
                                                            {{__('web.wednesday')}}  
                                                            </button>
                                                          </li>
                                                          <li class="nav-item" role="presentation">
                                                            <button class="day_card" id="pills-profileThu-tab" data-bs-toggle="pill" data-bs-target="#pills-profileThu" type="button" role="tab" aria-controls="pills-profileThu" aria-selected="false">
                                                            {{__('web.thursday')}}  
                                                            </button>
                                                          </li>
                                                          <li class="nav-item" role="presentation">
                                                            <button class="day_card" id="pills-profileFri-tab" data-bs-toggle="pill" data-bs-target="#pills-profileFri" type="button" role="tab" aria-controls="pills-profileFri" aria-selected="false">
                                                             {{__('web.friday')}} 
                                                            </button>
                                                          </li>
                                                      </ul>
                                                </div>
                                                <!-- <p class="text-danger alerrt">يمكن فقط التعديل على ال{{__('web.days')}} بعد المدة المحددة للتعديل مثل 48 ساعة</p> -->
                                            </div>
                                        </div>
                                        <div class="meals">
                                            <div class="tab-content" id="pills-tabContent">
                                                <div class="tab-pane fade" id="pills-profileSat" role="tabpanel" aria-labelledby="pills-profileSat-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileSat-m1-tab" day-id="saturday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileSat-m1" type="button" role="tab" aria-controls="pills-profileSat-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileSat-m2-tab" day-id="saturday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileSat-m2" type="button" role="tab" aria-controls="pills-profileSat-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileSat{{$row->id}}-m3-tab" day-id="saturday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileSat{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileSat{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileSat-m1" role="tabpanel" aria-labelledby="pills-profileSat-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileSat-m2" role="tabpanel" aria-labelledby="pills-profileSat-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileSat{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileSat{{$row->id}}-m3-tab">
                                                            
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-profileSun" role="tabpanel" aria-labelledby="pills-profileSun-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileSun-m1-tab" day-id="sunday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileSun-m1" type="button" role="tab" aria-controls="pills-profileSun-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileSun-m2-tab" day-id="sunday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileSun-m2" type="button" role="tab" aria-controls="pills-profileSun-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileSun{{$row->id}}-m3-tab" day-id="sunday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileSun{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileSun{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileSun-m1" role="tabpanel" aria-labelledby="pills-profileSun-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileSun-m2" role="tabpanel" aria-labelledby="pills-profileSun-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileSun{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileSun{{$row->id}}-m3-tab">
                                                             
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-profileMon" role="tabpanel" aria-labelledby="pills-profileMon-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileMon-m1-tab" day-id="monday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileMon-m1" type="button" role="tab" aria-controls="pills-profileMon-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileMon-m2-tab" day-id="monday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileMon-m2" type="button" role="tab" aria-controls="pills-profileMon-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileMon{{$row->id}}-m3-tab" day-id="monday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileMon{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileMon{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileMon-m1" role="tabpanel" aria-labelledby="pills-profileMon-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileMon-m2" role="tabpanel" aria-labelledby="pills-profileMon-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileMon{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileMon{{$row->id}}-m3-tab">
                                                            
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-profileTue" role="tabpanel" aria-labelledby="pills-profileTue-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileTue-m1-tab" day-id="tuesday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileTue-m1" type="button" role="tab" aria-controls="pills-profileTue-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileTue-m2-tab" day-id="tuesday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileTue-m2" type="button" role="tab" aria-controls="pills-profileTue-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileTue{{$row->id}}-m3-tab" day-id="tuesday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileTue{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileTue{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileTue-m1" role="tabpanel" aria-labelledby="pills-profileTue-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileTue-m2" role="tabpanel" aria-labelledby="pills-profileTue-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileTue{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileTue{{$row->id}}-m3-tab">
                                                            
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                                
                                                <div class="tab-pane fade" id="pills-profileWed" role="tabpanel" aria-labelledby="pills-profileWed-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileWed-m1-tab" day-id="wednesday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileWed-m1" type="button" role="tab" aria-controls="pills-profileWed-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileWed-m2-tab" day-id="wednesday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileWed-m2" type="button" role="tab" aria-controls="pills-profileWed-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileWed{{$row->id}}-m3-tab" day-id="wednesday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileWed{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileWed{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileWed-m1" role="tabpanel" aria-labelledby="pills-profileWed-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileWed-m2" role="tabpanel" aria-labelledby="pills-profileWed-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileWed{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileWed{{$row->id}}-m3-tab">
                                                            
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-profileThu" role="tabpanel" aria-labelledby="pills-profileThu-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileThu-m1-tab" day-id="thursday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileThu-m1" type="button" role="tab" aria-controls="pills-profileThu-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileThu-m2-tab" day-id="thursday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileThu-m2" type="button" role="tab" aria-controls="pills-profileThu-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileThu{{$row->id}}-m3-tab" day-id="thursday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileThu{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileThu{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileThu-m1" role="tabpanel" aria-labelledby="pills-profileThu-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileThu-m2" role="tabpanel" aria-labelledby="pills-profileThu-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileThu{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileThu{{$row->id}}-m3-tab">
                                                            
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-profileFri" role="tabpanel" aria-labelledby="pills-profileFri-tab">
                                                    <ul class="nav nav-pills meals_tabs" id="pills-tab" role="tablist">
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileFri-m1-tab" day-id="friday" type-id="breakfast" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileFri-m1" type="button" role="tab" aria-controls="pills-profileFri-m1" aria-selected="true">
                                                            {{__('web.breakfast')}}
                                                          </button>
                                                        </li>
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileFri-m2-tab" day-id="friday" type-id="main" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileFri-m2" type="button" role="tab" aria-controls="pills-profileFri-m2" aria-selected="false">
                                                            {{__('web.main')}}
                                                          </button>
                                                        </li>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <li class="nav-item" role="presentation">
                                                          <button class="tab_link" id="pills-profileFri{{$row->id}}-m3-tab" day-id="friday" type-id="snack" row-id="{{$row->id}}" data-id="off" onclick="getMeals(this)"  data-bs-toggle="pill" data-bs-target="#pills-profileFri{{$row->id}}-m3" type="button" role="tab" aria-controls="pills-profileFri{{$row->id}}-m3" aria-selected="false">
                                                            {{$row->descriptions()->name}} 
                                                          </button>
                                                        </li>
                                                        @endforeach
                                                      </ul>
                                                      <div class="tab-content" id="pills-tabContent">
                                                        <div class="tab-pane fade" id="pills-profileFri-m1" role="tabpanel" aria-labelledby="pills-profileFri-m1-tab">
                                                            
                                                        </div>
                                                        <div class="tab-pane fade" id="pills-profileFri-m2" role="tabpanel" aria-labelledby="pills-profileFri-m2-tab">
                                                            
                                                        </div>
                                                        @foreach($snackCategories as $key=>$row)
                                                        <div class="tab-pane fade" id="pills-profileFri{{$row->id}}-m3" role="tabpanel" aria-labelledby="pills-profileFri{{$row->id}}-m3-tab">
                                                            
                                                        </div>
                                                        @endforeach
                                                      </div>
                                                </div>
                                              </div>
                                        </div>
                                    </div>
                                    <div class="text-center mt-5">
                                        <button type="button" onclick="backStep(this)" class="butn w-50 py-3 shadow-lg">
                                            <span> {{__('web.back')}} </span>
                                        </button>
                                    </div>
                                    <div class="text-center mt-5">
                                        <button type="submit" class="butn w-50 py-3 shadow-lg">
                                            <span> {{__('web.next')}} </span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                          </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>


@push('js')
@if($checkSub)
<script>
 setTimeout(
        function()
        {
            $('#errors').html('<h4 class="title text-center mt-3">'+{!! json_encode(__('web.already_subscribe')) !!}+'</h4>');
            $('#modal_error').modal('show');
        }, 1000);
               
</script>
@endif
 <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 nextStep(elem)
     {
        var dataForm = { };error_modal

        $.each($('#form').serializeArray(), function() {
            dataForm[this.name] = this.value;
        });
         
        let meals_count = dataForm['meals_count'];
        let snacks_count = dataForm['snacks_count'];
        
        if(meals_count == null)
        {
            $('#model_error').html('<h4 class="title text-center mt-3">'+{!! json_encode(__('web.pick_meals_count')) !!}+'</h4>');
            $('#error_modal').modal('show');
        }
        else
        {
        $('#pills-menu').addClass('active show');
        $('#pills-pack').removeClass('active show');
        $('#pills-menu-tab').addClass('active show');
        $('#pills-home-pack').removeClass('active show');
        }
        
     }
     function backStep(elem)
     {
         $('#pills-menu').removeClass('active show');
         $('#pills-pack').addClass('active show');
         $('#pills-menu-tab').removeClass('active show');
         $('#pills-home-pack').addClass('active show');
     }
     
     function packageDays(elem)
     {
         let data = $(elem).val();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/packageDays')) !!}+'/'+data,
              type: 'GET',              
              data: 'dataform',
              success:function(data)
              {
               $('#pills-bk1').html(data);
              }
              ,error:function(data) 
              {
                   $('#pills-bk1').html('');
                    $('#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>');
                    }); 
              }
            })
            calculateVal();
     }
     
     function packageMealCosts(elem)
     {
        let package_id = $("input[name=package_id]:checked:enabled").val();
        let day = $(elem).val();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/packageMealCosts')) !!},
              type: 'GET',              
              data: 'package_id='+package_id+'&day='+day,
              success:function(data)
              {
                  $('#packageMealCosts').html(data);
              }
            })
            calculateVal();
     }
     function getMeals(elem)
     {
         let type_id = $(elem).attr('type-id');
         let day_id = $(elem).attr('day-id');
         let target = $(elem).attr('data-bs-target');
         let data_id = $(elem).attr('data-id');
         let target_id = target.substring(1);
         let row_id = $(elem).attr('row-id');
         let section_id = {!! json_encode($special->section->id) !!};
         
        if(data_id == 'off')
        {
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/getMeals')) !!},
              type: 'GET',              
              data: 'type='+type_id+'&snack_id='+row_id+'&section_id='+section_id+'&day='+day_id,
              success:function(data)
              {
                if(type_id == 'snack')
                {
                    $('#'+target_id).html(data);
                }
                else
                {
                    $('#'+target_id).html(data);
                }
                $(elem).attr('data-id','on')
              }
            })
        }
     }
     function calculateVal(){
         let sar = {!! json_encode(__('web.sar')) !!}
         let dataForm = $('#form').serialize();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/calculatePackage')) !!},
              type: 'GET',              
              data: dataForm,
              success:function(data)
              {
                $('#package_total').html(data.package_total+' '+sar);
                $('#tax').html(data.tax+' '+sar);
                $('#total').html(data.total+' '+sar);
              }
            })
     }
     function checkMeal(elem){
         let sar = {!! json_encode(__('web.sar')) !!}
         let dataForm = $('#form').serialize();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/checkMeal')) !!},
              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');
                    }); 
                }
            })
     }
     
 </script>
    <script>
      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().'/checkMeal')) !!},
              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);
        }
        }
        
        function mealsCount(){
            
         let sar = {!! json_encode(__('web.sar')) !!}
         let dataForm = $('#form').serialize();
         $.ajax({
              url : {!! json_encode(url(getCurrentLocale().'/checkMeal')) !!},
              type: 'GET',              
              data: dataForm,
              success:function(data)
              {
                if(data == 'meals')
                {
                    $('#model_error').html('<h4 class="title text-center mt-3">'+{!! json_encode(__('web.over_meals_count')) !!}+'</h4>');
                    $('#error_modal').modal('show');
                    $('.mealsCount').removeAttr('checked');
                }
                if(data == 'snacks')
                {
                    $('#model_error').html('<h4 class="title text-center mt-3">'+{!! json_encode(__('web.over_snacks_count')) !!}+'</h4>');
                    $('#error_modal').modal('show');
                    $('.snacksCount').removeAttr('checked');
                }
              }
            })
            
            
        }
    </script>

@endpush
@stop