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

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

        <!-- ---------- profile page ----------- -->   
        <section class="profile_pg">
            <div class="container">
                <div class="row gx-lg-5">
                    <div class="col-lg-3">
                        <div class="side_links">
                            <div class="user_info">
                                <div class="img">
                                    <img src="{{asset($user->photo)}}" alt="">
                                </div>
                                <h5> {{$user->name}} </h5>
                                <div class="points">
                                    <div class="icon">
                                        <img src="{{url('')}}/assets/web/images/icons/wallet.svg" alt="">
                                    </div>
                                    <div class="inf">
                                        <p>{{__('web.gain_points')}}</p>
                                        <strong> {{$user->points()}} </strong>
                                    </div>
                                </div>
                            </div>
                            <ul class="nav links" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link active" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                        <img src="{{url('')}}/assets/web/images/icons/sl1.svg" alt="" class="icon"> {{__('web.my_info')}} 
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pills-tab2-tab" onclick="addressesFetch()" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                                     <img src="{{url('')}}/assets/web/images/icons/sl2.svg" alt="" class="icon"> {{__('web.my_addresses')}} 
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                  <button class="nav-link" id="pills-tab3-tab" onclick="subscriptions()" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                                     <img src="{{url('')}}/assets/web/images/icons/sl3.svg" alt="" class="icon"> {{__('web.my_sub')}} 
                                  </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab4-tab" onclick="favorites()" data-bs-toggle="pill" data-bs-target="#pills-tab4" type="button" role="tab" aria-controls="pills-tab4" aria-selected="false">
                                        <img src="{{url('')}}/assets/web/images/icons/sl4.svg" alt="" class="icon"> {{__('web.favorite')}} 
                                    </button>
                                  </li>
                                  <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab5-tab" onclick="notifications(this)" data-bs-toggle="pill" data-bs-target="#pills-tab5" type="button" role="tab" aria-controls="pills-tab5" aria-selected="false">
                                       <img src="{{url('')}}/assets/web/images/icons/sl5.svg" alt="" class="icon"> {{__('web.notifications')}} 
                                    </button>
                                  </li>
                                  <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab6-tab" onclick="userMenuMeal(this)" data-id="off" data-bs-toggle="pill" data-bs-target="#pills-tab6" type="button" role="tab" aria-controls="pills-tab6" aria-selected="false">
                                       <img src="{{url('')}}/assets/web/images/icons/sl6.svg" alt="" class="icon"> {{__('web.my_menu')}}
                                    </button>
                                  </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" onclick="showDays(this)" id="pills-tab66-tab" data-bs-toggle="pill"
                                        data-bs-target="#pills-tab66" type="button" role="tab" aria-controls="pills-tab66"
                                        aria-selected="false">
                                        <img src="{{url('')}}/assets/web/images/list.svg" alt="" class="icon">{{__('web.show_menu')}}
                                    </button>
                                </li>
                                  <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab9-tab" onclick="myOrders()" data-bs-toggle="pill" data-bs-target="#pills-tab9" type="button" role="tab" aria-controls="pills-tab9" aria-selected="false">
                                       <img src="{{url('')}}/assets/web/images/order.svg" alt="" class="icon">  {{__('web.my_orders')}} 
                                    </button>
                                  </li>
                                  <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab7-tab" data-bs-toggle="pill" data-bs-target="#pills-tab7" type="button" role="tab" aria-controls="pills-tab7" aria-selected="false">
                                       <img src="{{url('')}}/assets/web/images/user.svg" alt="" class="icon"> {{__('web.contact_specialist')}}
                                    </button>
                                  </li>
                                  <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="pills-tab8-tab" data-bs-toggle="pill" data-bs-target="#pills-tab8" type="button" role="tab" aria-controls="pills-tab8" aria-selected="false">
                                       <img src="{{url('')}}/assets/web/images/icons/sl7.svg" alt="" class="icon"> {{__('web.contact_us')}}
                                    </button>
                                  </li>
                                  <li class="nav-item" role="presentation">
                                    <a href="#0" class="nav-link" data-bs-toggle="modal" data-bs-target="#modal_logOut">
                                       <img src="{{url('')}}/assets/web/images/icons/sl8.svg" alt="" class="icon"> {{__('web.logout')}} 
                                    </a>
                                  </li>
                              </ul>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <div class="profile_content tab-content" id="pills-tabContent">
                             <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel"
                                aria-labelledby="pills-tab1-tab">
                                <div class="personal_details_tab">
                                    <div class="user_img text-center">
                                        <div class="img">
                                            <img src="{{asset($user->photo)}}" alt="">
                                        </div>
                                        <h5 class="mt-4"> {{$user->name}} </h5>
                                    </div>
                                    <div class="personal_details_content">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/call.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.phone')}}</small>
                                                        <h6 class="mt-2">{{$user->phone}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/mail.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.email')}}</small>
                                                        <h6 class="mt-2">{{$user->email}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/date.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.date_of_birth')}}</small>
                                                        <h6 class="mt-2">{{$user->date_of_birth}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/sex.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.gender')}}</small>
                                                        <h6 class="mt-2">{{__('web.'.$user->gender)}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/heart.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.sensitive')}}</small>
                                                        <h6 class="mt-2">{{$user->sensitivy()}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/weight.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.weight_id')}}</small>
                                                        <h6 class="mt-2">{{$user->weight}} {{__('web.kg')}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/height.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.height_id')}}</small>
                                                        <h6 class="mt-2">{{$user->height->descriptions()->name}} {{__('web.cm')}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/sport.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.sport_id')}}</small>
                                                        <h6 class="mt-2">{{$user->sporting()}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/alarm.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.sport_time_id')}}</small>
                                                        <h6 class="mt-2"> {{$user->sport_time}} </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/food.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small>{{__('web.carbo_specialist')}}</small>
                                                        <h6 class="mt-2">{{$user->carboCheck()}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="personal_details_card">
                                                    <div class="icon">
                                                        <img src="{{url('')}}/assets/web/images/icons/sport.svg" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <small> {{__('web.protien_specialist')}}</small>
                                                        <h6 class="mt-2">{{$user->protienCheck()}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-5 justify-content-center">
                                        <div class="col-lg-5">
                                            <div class="nav justify-content-center" id="pills-tab" role="tablist">
                                                <a href="#" class="butn px-lg-5 shadow-lg py-3" id="add_details_tab_tab"
                                                    data-bs-toggle="pill" data-bs-target="#add_details_tab" type="button"
                                                    role="tab" aria-controls="add_details_tab" aria-selected="false">
                                                    <span class="px-lg-5"> <i class="bi bi-pen me-2"></i>  {{__('web.edit_info')}}
                                                    </span>
                                                </a>
                                            </div>
                                            <p class="text-danger text-center mt-3"> {{__('web.edit_info_after')}} {{(settings('start_days') - 1) * 24}} {{__('web.hours')}}</p>
                                        </div>
                                        <div class="col-lg-5 mt-4 mt-lg-0">
                                            <a href="#" class="butn px-lg-5 shadow-lg py-3"  data-bs-toggle="modal" data-bs-target="#modal_change_pass">
                                                <span class="px-lg-5"> <i class="bi bi-lock me-2"></i> {{__('web.edit_password')}} </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- -------- personal_details_tab_edit --------- -->
                            <div class="tab-pane fade" id="add_details_tab" role="tabpanel" aria-labelledby="add_details_tab">
                                <div class="user_details_edit">
                                    <form action="{{url(getCurrentLocale().'/profile')}}" method="post" enctype="multipart/form-data" onsubmit="saveFormProfile(this)" class="form_edit">
                                        @CSRF
                                    <div class="user_img_edit">
                                        <div class="container">
                                            <div class="avatar-upload">
                                                <div class="avatar-edit">
                                                    <input type='file' name="photo" id="imageUpload" accept=".png, .jpg, .jpeg" />
                                                    <label for="imageUpload"></label>
                                                </div>
                                                <div class="avatar-preview">
                                                    <div id="imagePreview" style="background-image: url({{asset($user->photo)}});">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> ال{{__('web.name')}} </label>
                                                    <input type="text" name="name" value="{{$user->name}}" placeholder="{{__('web.write_here')}}..." class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.email')}} </label>
                                                    <input type="email" name="email" value="{{$user->email}}" placeholder="{{__('web.write_here')}}..." class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.phone')}} </label>
                                                    <input type="number" name="phone" value="{{$user->phone}}" placeholder=" +966-xxxxxxxx " class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.sport_id')}} </label>
                                                    <select name="sport_id" id="sport_type" class="form-select form-control">
                                                        <option disabled selected> {{__('web.select')}} </option>
                                                        @foreach($sports as $row)
                                                        <option @if($user->sport_id == $row->id) selected @endif  value="{{$row->id}}"> {{$row->descriptions()->name}} </option>
                                                        @endforeach
                                                        <option @if(is_null($user->sport_id)) selected @endif   value="other"> {{__('web.other')}} </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.sport_time_id')}} </label>
                                                    <input type="text" name="sport_time" value="{{$user->sport_time}}" placeholder="{{__('web.write_here')}}..." class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-6" id="another_sport" @if(!is_null($user->sport_id)) style="display:none" @endif  >
                                                <div class="form-group">
                                                    <label for=""> {{__('web.sport_other')}} </label>
                                                    <input type="text" name="sport_other" value="{{$user->sport_other}}" placeholder="{{__('web.write_here')}}..." class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.height_id')}} </label>
                                                    <select name="height_id" id="" class="form-select form-control">
                                                        <option disabled selected> {{__('web.select')}} </option>
                                                        @foreach($heights as $row)
                                                        <option @if($user->height_id == $row->id) selected @endif  value="{{$row->id}}"> {{$row->descriptions()->name}} </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.gender')}} </label>
                                                    <select name="gender" id="" class="form-select form-control">
                                                        <option @if($user->gender == 'male') selected @endif value="male"> {{__('web.male')}} </option>
                                                        <option @if($user->gender == 'female') selected @endif value="female"> {{__('web.female')}} </option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.date_of_birth')}} </label>
                                                    <input type="text" name="date_of_birth" value="{{$user->date_of_birth}}" placeholder=" {{__('web.date_of_birth')}} " class="form-control" id="datepicker1">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.weight_id')}} </label>
                                                    <input type="number" name="weight" value="{{$user->weight}}" placeholder="{{__('web.write_here')}}..." class="form-control">
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="form-group">
                                                    <label for=""> {{__('web.sensitive_check_q')}} </label>
                                                    <div class="check_group p-1">
                                                        <div class="text-center form-control bg-light mt-0">
                                                            <div class="form-check form-check-inline mt-1">
                                                                <input class="form-check-input" type="radio" name="sensitive_check" @if($user->sensitive_check == 'yes') checked @endif id="inlineRadio1" value="yes">
                                                                <label class="form-check-label" for="inlineRadio1">{{__('web.yes')}}</label>
                                                            </div>
                                                            <div class="form-check form-check-inline mt-1">
                                                                <input class="form-check-input" type="radio" name="sensitive_check" @if($user->sensitive_check == 'no') checked @endif id="inlineRadio2" value="no">
                                                                <label class="form-check-label" for="inlineRadio2">{{__('web.no')}}</label>
                                                            </div>
                                                        </div>
                                                        <input type="text" placeholder="{{__('web.write_here')}}..." class="form-control" @if($user->sensitive_check == 'no') style="display:none" @endif name="sensitive" value="{{$user->sensitive}}" id="reason_input">
                                                    </div>
                                                </div>
                                            </div>
                                           
                                        </div>
                                        <div class="text-center mt-5 position-relative">
                                            <button type="submit" class="butn px-lg-5 shadow-lg py-3">
                                                <span class="px-lg-5"> {{__('web.save')}} </span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                                <div class="adress_tab">
                                    <div id="addresses">
                                        
                                    </div>
                                    <div class="nav justify-content-center mt5" id="pills-tab" role="tablist">
                                        <a href="#" class="butn px-lg-5 shadow-lg py-3" id="add_adress_tab_tab" onclick="createAddress()" data-bs-toggle="pill" data-bs-target="#add_adress_tab" type="button" role="tab" aria-controls="add_adress_tab" aria-selected="false">
                                            <span> <i class="bi bi-plus-circle me-2"></i> {{__('web.add_address')}} </span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- ------------ add adress tab ------------ -->
                            <div class="tab-pane fade" id="add_adress_tab" role="tabpanel" aria-labelledby="add_adress_tab">
                                <div class="add_adress_tab" id="createAddress">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                                <div class="subscription_tab" id="subscriptions">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab4" role="tabpanel" aria-labelledby="pills-tab4-tab">
                                <div class="fav_tab_content" id="favorites">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab5" role="tabpanel" aria-labelledby="pills-tab5-tab">
                                <div class="notifications_tab" id="notifications">
                                </div>
                            </div>
                             <div class="tab-pane fade" id="pills-tab6" role="tabpanel" aria-labelledby="pills-tab6-tab">
                                <div id="userMenuMeal">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab66" role="tabpanel" aria-labelledby="pills-tab66-tab">
                                
                                <div class="food_menu">
                                    <div class="days_calender">
                                        <div class="row justify-content-center">
                                            <div class="col-lg-12">
                                                <div class="datepicker_side">
                                                    <h3 class="mb-4"> {{__('web.days_select')}} </h3>
                                                    <!--<div id="datepicker"></div>-->
                                                    <div class="choosen_days_list" id="show_dates">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="meals" id="showMenuMeal">
                                        
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab7" role="tabpanel" aria-labelledby="pills-tab7-tab">
                                <div class="specialists_tab">
                                    <div class="specialist_card">
                                        @if($specialist)
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="img_cont">
                                                    <div class="img">
                                                        <img src="{{asset($specialist->photo)}}" alt="">
                                                    </div>
                                                    <div class="inf">
                                                        <h6>{{$specialist->name}}</h6>
                                                        <p>{{__('web.whatsapp_number')}}: {{$specialist->phone}}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6 text-lg-end">
                                                <a href="https://api.whatsapp.com/send?phone={{$specialist->phone}}&text=" target="_blank" class="contact_btn">
                                                    <img src="{{url('')}}/assets/web/images/icons/whats.svg" alt="" class="icon">
                                                    <span> {{__('web.whatsapp_connect')}} </span>
                                                </a>
                                            </div>
                                        </div>
                                        @else
                                        <div class="row">
                                            <h2>{{__('web.not_exist')}}</h2>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab8" role="tabpanel" aria-labelledby="pills-tab8-tab">
                                <div class="specialists_tab">
                                    <div class="row justify-content-around">
                                        <div class="col-lg-6">
                                            <div class="specialist_card">
                                                <h4 class="mb-4"> {{__('web.number_support')}} </h4>
                                                <h6> {{settings('support_1')}} </h6>
                                                <h6> {{settings('support_2')}} </h6>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="specialist_card">
                                                <h4 class="mb-4"> {{__('web.unit_number')}} </h4>
                                                <h2 class="mainColor"> {{settings('unit_number')}} </h2>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade" id="pills-tab9" role="tabpanel" aria-labelledby="pills-tab9-tab">
                                <div class="order_tab cart_page" id="myorders">
                                </div>
                            </div>
                            <img src="{{url('')}}/assets/web/images/profile_shape.svg" alt="" class="prof_shape">
                          </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
     <div class="modal fade modal_logOut" id="modal_logOut" tabindex="-1" aria-labelledby="modal_logOutLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <!-- <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div> -->
                <div class="modal-body">
                    <div class="info text-center">
                        <div class="img mb-4">
                            <img src="{{url('')}}/assets/web/images/icons/popup_out.svg" alt="" class="icon">
                        </div>
                        <h2 class="mb-3">{!! $logoutPage->descriptions()->title !!}</h2>
                        <p> {!! $logoutPage->descriptions()->description !!}</p>
                        <div class="btns mt-4">
                            <a href="{{url(getCurrentLocale().'/logout')}}" class="butn">
                                <span> {{__('web.yes')}} </span>
                            </a>
                            <a href="#" class="butn butn_dark" data-bs-dismiss="modal" aria-label="Close">
                                <span> {{__('web.no')}} </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
     <div class="modal fade modal_change_pass" id="modal_change_pass" tabindex="-1" aria-labelledby="modal_logOutLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content py-5">
                <!-- <div class="modal-header">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div> -->
                <div class="modal-body">
                    <div class="info text-center">
                        <div class="img mb-4">
                            <img src="{{url('')}}/assets/web/images/icons/password.png" alt="" class="icon">
                        </div>
                        <h2 class="mb-3">{{__('web.edit_password')}}</h2>
                        <form action="{{url(getCurrentLocale().'/editPassword')}}" onsubmit="saveForm(this)" method="POST" >
                            @CSRF
                        <div class="row text-start justify-content-center">
                            <div class="col-9">
                                <div class="form-group show_hide_password">
                                    <label for=""> {{__('web.old_password')}}</label>
                                    <input type="password" name="oldpassword" placeholder="  " class="form-control bg-light mt-3">
                                    <i class="show_pass bi bi-eye-slash" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="col-9">
                                <div class="form-group show_hide_password">
                                    <label for=""> {{__('web.new_password')}}</label>
                                    <input type="password" name="password" placeholder="  " class="form-control bg-light mt-3">
                                    <i class="show_pass bi bi-eye-slash" aria-hidden="true"></i>
                                </div>
                            </div>
                            <div class="col-9">
                                <div class="form-group show_hide_password">
                                    <label for=""> {{__('web.new_password_confirmation')}}</label>
                                    <input type="password" name="password_confirmation" placeholder="  " class="form-control bg-light mt-3">
                                    <i class="show_pass bi bi-eye-slash" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center mt-5 position-relative">
                            <button type="submit" class="butn px-lg-5 shadow-lg py-3">
                                <span class="px-lg-5"> {{__('web.save')}} </span>
                            </button>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="modal fade modal_logOut" id="modal_report" tabindex="-1" aria-labelledby="modal_logOutLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <!-- <div class="modal-header">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div> -->
            <div class="modal-body py-5">
                <form method="post" onsubmit="saveForm(this)" action="{{url(getCurrentLocale().'/report')}}">
                    @CSRF
                <div class="info text-center">
                    <div class="img mb-4">
                        <img src="{{url('')}}/assets/web/images/icons/error.svg" alt="" class="icon">
                    </div>
                    <input type="hidden" id="subscribe_id" name="subscribe_id" >
                    <h2 class="mb-3"> {!! $reportPage->descriptions()->title !!}</h2>
                    <p> {!! $reportPage->descriptions()->description !!}</p>
                    <select name="reason_id" id="" class="form-control form-select bg-light mt-4 p-4">
                        @foreach($reasons as $row)
                            <option value="{{$row->id}}"> {{$row->descriptions()->name}} </option>
                        @endforeach
                    </select>
                    <textarea name="message" rows="6" placeholder="{{__('web.write_reason')}}" class="form-control bg-light mt-4 p-4"></textarea>
                    <div class="btns mt-4">
                        <button type="submit" class="butn">
                            <span> {{__('web.send')}} </span>
                        </button>
                        <a href="#" class="butn butn_dark" data-bs-dismiss="modal" aria-label="Close">
                            <span> {{__('web.close')}} </span>
                        </a>
                    </div>
                </div>
                </form>
            </div>
        </div>
        </div>
    </div>
   
@push('js')
    <script>
    
    function saveFormProfile(elem)
    {
        event.preventDefault(); 
        var urls = $(elem).attr('action');
        let dataform = new FormData( $(elem)[0]);
     
        $.ajax
        ({
            url : urls,
            type: 'POST',              
            data: dataform,
            contentType: false, 
            processData: false, 
            success:function(data)
            {
                $('#modal_management').modal('show');
                setTimeout(
                    function()
                    {
                        location.reload();
                    }, 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);
        }
        }
        
    function deleteAddress(elem)
    {
        let target = $(elem).attr('data-id');
        $.ajax
        ({
          url : {!! json_encode(url(getCurrentLocale().'/deleteAddress')) !!},
          type: 'GET',              
          data: 'id='+target,   
          success:function(data)
          {
                $('#address'+target).fadeOut(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 editAddress(elem)
    {
        let target = $(elem).attr('data-id');
        let cord0 =$(elem).attr('cord0-id');
        let cord1 =$(elem).attr('cord1-id');
        $.ajax
        ({
          url : {!! json_encode(url(getCurrentLocale().'/editAddress')) !!},
          type: 'GET',              
          data: 'id='+target,   
          success:function(data)
          {
                $('#createAddress').html(data);
                    
                    $('#pills-tab2').removeClass('active');
                    $('#pills-tab2').removeClass('show');
                    $('#add_adress_tab').addClass('active');
                    $('#add_adress_tab').addClass('show');
                        var latlng = new google.maps.LatLng(Number(cord0), Number(cord1));
                        var map = new google.maps.Map(document.getElementById('map'), {
                            center: latlng,
                            zoom: 11,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        });
                        
                        let infoWindow;
                        
                        
                          infoWindow = new google.maps.InfoWindow();
                        
                          const locationButton = document.createElement("button");
                            locationButton.setAttribute("type", "button");  
                          locationButton.textContent = "Pan to Current Location";
                          locationButton.classList.add("custom-map-control-button");
                          map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
                          locationButton.addEventListener("click", () => {
                            // Try HTML5 geolocation.
                            if (navigator.geolocation) {
                              navigator.geolocation.getCurrentPosition(
                                (position) => {
                                  const pos = {
                                    lat: position.coords.latitude,
                                    lng: position.coords.longitude,
                                  };
                                  new google.maps.Marker({
                                        position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                                        map: map,
                                        title: 'Set lat/lon values for this property',
                                        draggable: true
                                    });
                                  infoWindow.setPosition(pos);
                                  infoWindow.setContent("Location found.");
                                  infoWindow.open(map);
                                  map.setCenter(pos);
                                },
                                () => {
                                  handleLocationError(true, infoWindow, map.getCenter());
                                }
                              );
                            } else {
                              // Browser doesn't support Geolocation
                              handleLocationError(false, infoWindow, map.getCenter());
                            }
                          });
    
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            title: 'Set lat/lon values for this property',
                            draggable: true
                        });
                        google.maps.event.addListener(marker, 'dragend', function(a) {
                            console.log(a);
                            var div = document.createElement('div');
                            div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
                            document.getElementsByTagName('body')[0].appendChild(div);
                             $("#latlng").val(function() {
                        return  div.innerHTML;
                    });
                        });
          }
        })
    }
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    
   
    var latlng = new google.maps.LatLng(position.coords.latitude , position.coords.longitude);
      $("#mylatlng").val(function() {
    return  latlng;

    
});
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
let infoWindow;


  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");
    locationButton.setAttribute("type", "button");  
  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          new google.maps.Marker({
                position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
    
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        console.log(a);
        var div = document.createElement('div');alert(div);
        div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
       
        

    });
}

        function createAddress()
        {
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/createAddress')) !!},
              type: 'GET',              
              data: '',   
              success:function(data)
              {
                    
                    $('#createAddress').html(data);
                    
                        var latlng = new google.maps.LatLng({!! '21.4989, 39.2509' !!});
                        var map = new google.maps.Map(document.getElementById('map'), {
                            center: latlng,
                            zoom: 11,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        });
                        
let infoWindow;


  infoWindow = new google.maps.InfoWindow();

  const locationButton = document.createElement("button");
    locationButton.setAttribute("type", "button");  
  locationButton.textContent = "Pan to Current Location";
  locationButton.classList.add("custom-map-control-button");
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
  locationButton.addEventListener("click", () => {
    // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          };
          new google.maps.Marker({
                position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                map: map,
                title: 'Set lat/lon values for this property',
                draggable: true
            });
          infoWindow.setPosition(pos);
          infoWindow.setContent("Location found.");
          infoWindow.open(map);
          map.setCenter(pos);
        },
        () => {
          handleLocationError(true, infoWindow, map.getCenter());
        }
      );
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  });
    
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            title: 'Set lat/lon values for this property',
                            draggable: true
                        });
                        google.maps.event.addListener(marker, 'dragend', function(a) {
                            console.log(a);
                            var div = document.createElement('div');
                            div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
                            document.getElementsByTagName('body')[0].appendChild(div);
                             $("#latlng").val(function() {
                        return  div.innerHTML;
                    });
                        });
                    
              }
            })
        }
        function addressesFetch()
        {
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/addresses')) !!},
              type: 'GET',              
              data: '',   
              success:function(data)
              {
                    $('#addresses').html(data);
              }
            })
        }
        
        function userMenuMeal(elem)
        {
            let data = $(elem).attr('data-id');
            if(data == 'off')
            {
                $.ajax
                ({
                  url : {!! json_encode(url(getCurrentLocale().'/userMenuMeal')) !!},
                  type: 'GET',              
                  data: '',   
                  success:function(data)
                  {
                        $(elem).attr('data-id','on');
                        $('#userMenuMeal').html(data);
                  }
                })
            }
        }
        function myOrders()
        {
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/myOrders')) !!},
              type: 'GET',              
              data: '',   
              success:function(data)
              {
                    $('#myorders').html(data);
              }
            })
        }
        function reportId(elem)
        {
            let data = $(elem).attr('data-id');
            
            $('#subscribe_id').val(data);
        }
        function subscriptions()
        {
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/subscriptions')) !!},
              type: 'GET',              
              data: '',   
              success:function(data)
              {
                    $('#subscriptions').html(data);
              }
            })
        }
        
        function favorites()
        {
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/favorites')) !!},
              type: 'GET',              
              data: '',   
              success:function(data)
              {
                    $('#favorites').html(data);
              }
            })
        }
        function notifications(elem)
        {
            let data_id = $(elem).attr('data-id');
            
            if(data_id)
            {
                $.ajax
                ({
                  url : {!! json_encode(url(getCurrentLocale().'/notifications')) !!},
                  type: 'GET',              
                  data: 'paginate='+data_id,   
                  success:function(data)
                  {
                        $('#notifications').html(data);
                        // $('html, body').animate({
                        //     scrollTop: $("#notifications").offset().top
                        // }, 500);
                  }
                })
            }
            else
            {
                $.ajax
                ({
                  url : {!! json_encode(url(getCurrentLocale().'/notifications')) !!},
                  type: 'GET',              
                  data: '',   
                  success:function(data)
                  {
                        $('#notifications').html(data);
                        // $('html, body').animate({
                        //     scrollTop: $("#notifications").offset().top
                        // }, 500);
                  }
                })
            }
        }
        
        function toggleFavProduct(elem)
        {
            let target = $(elem).attr('data-id');
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/favorite')) !!},
              type : 'GET',
              dataType : 'json',
              data : 'product_id='+target,
              success:function(data)
              {
                    $('#productFav'+target).fadeOut(1000);
              }
            })
        }
        function toggleFavMeal(elem)
        {
            let target = $(elem).attr('data-id');
            $.ajax
            ({
              url : {!! json_encode(url(getCurrentLocale().'/favoriteMeal')) !!},
              type : 'GET',
              dataType : 'json',
              data : 'meal_id='+target,
              success:function(data)
              {
                    $('#mealFav'+target).fadeOut(1000);
              }
            })
        }
        
    </script>
    <script>
    function showDays(elem)
    {
        $.ajax
        ({
          url : {!! json_encode(url(getCurrentLocale().'/showDays')) !!},
          type : 'GET',
          data : '',
          success:function(data)
          {
                $('#show_dates').html(data);
          }
        })
    }
    
    function showDateMenu(elem)
    {
        let dateText = $(elem).val();
        $.ajax
        ({
          url : {!! json_encode(url(getCurrentLocale().'/showDateMenu')) !!},
          type : 'GET',
          data : 'date='+dateText,
          success:function(data)
          {
                $('#showMenuMeal').html(data);
          }
        })
    }
        // $(function() {
        //     $("#datepicker1").datepicker({
        //         dateFormat: 'yy-mm-dd',
        //         changeMonth: true,
        //         changeYear: true,
        //         yearRange: '1940:2022',
        //     });
        //     $("#datepicker").datepicker({
        //     dateFormat: 'yy-mm-dd',
        //     onSelect: function (dateText, inst) 
        //     {
                
        //     }
            
        //   });
        // });
    </script>

    <script>
        $(document).ready(function() {
            // ------------  File upload BEGIN ------------
            $('.file__input--file').on('change', function(event) {
                var files = event.target.files;
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    $("<div class='file__value'> <img src='images/icons/img_upload.svg' alt=''> <div class='file__value--text'>" +
                        file.name + "</div><div class='file__value--remove' data-id='" + file.name +
                        "' ></div></div>").appendTo('.file__value_content');
                }
            });
            //Click to remove item
            $('body').on('click', '.file__value', function() {
                $(this).remove();
            });
            // ------------ File upload END ------------ 
        });
    </script>

    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
                    $('#imagePreview').hide();
                    $('#imagePreview').fadeIn(650);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        $("#imageUpload").change(function() {
            readURL(this);
        });
    </script>

    <script>
        $(document).ready(function() {
            
            $('#sport_type').on('change', function() {
                if (this.value == 'other')
                //.....................^.......
                {
                    $("#another_sport").show();
                } else {
                    $("#another_sport").hide();
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $("#inlineRadio1").on("click", function() {
                $("#reason_input").show();
            })
            $("#inlineRadio2").on("click", function() {
                $("#reason_input").hide();
            })
        });
    </script>

    <script>
        $("#add_details_tab_tab").on("click", function() {
            $("#add_details_tab").addClass("active show").siblings().removeClass("active show");
        })
        $("#add_adress_tab_tab , .edit_adress_btn").on("click", function() {
            $("#add_adress_tab").addClass("active show").siblings().removeClass("active show");
        })
    </script>

    <!-- --------- new scripts --------- -->

   <script>
        $('.print_btn').on("click", function() {
            $('.subscription_now').printThis({
                importCSS: true,
                importStyle: true, //thrown in for extra measure
            });
        });
    </script>

    <script>
        $('#print_btn1').on("click", function() {
            $('.print_cont1').printThis({
                importCSS: true,
                importStyle: true, //thrown in for extra measure
            });
        });
    </script>
    <script>
        $('#print_btn2').on("click", function() {
            $('.print_cont2').printThis({
                importCSS: true,
                importStyle: true, //thrown in for extra measure
            });
        });
    </script>

    <script>
        $(function() {
            $("#sortableImgThumbnailPreview").sortable({
                connectWith: ".RearangeBox",


                start: function(event, ui) {
                    $(ui.item).addClass("dragElemThumbnail");
                    ui.placeholder.height(ui.item.height());

                },
                stop: function(event, ui) {
                    $(ui.item).removeClass("dragElemThumbnail");
                }
            });
            $("#sortableImgThumbnailPreview").disableSelection();
        });

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

        function handleFileSelect(evt) {

            var files = evt.target.files;
            var output = document.getElementById("sortableImgThumbnailPreview");

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var imgThumbnailElem = "<div class='RearangeBox imgThumbContainer'><i class='fas fa-times imgRemoveBtn' onclick='removeThumbnailIMG(this)'> </i><div class='IMGthumbnail' ><img  src='" + e.target.result + "'" + "title='" + theFile.name + "'/></div><div class='imgName'>" + theFile.name + "</div></div>";

                        output.innerHTML = output.innerHTML + imgThumbnailElem;

                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        function removeThumbnailIMG(elm) {
            elm.parentNode.outerHTML = '';
        }
    </script>
@endpush
@stop