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

    <main>
        <!-- Start page-heading -->
        <div class="page-heading">
            <div class="container">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{url(getCurrentLocale().'/')}}"><img src="{{url('')}}/assets/web/images/icons/nav/1.svg" alt="" class="home-icon"/></a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{__('web.profile')}}</li>
                    </ol>
                </nav>
                <h3 class="title text-center text-white mb-0"><b>{{__('web.profile')}}</b></h3>
            </div>
            <img src="{{url('')}}/assets/web/images/pattern-3.png" alt="" class="pattern"/>
        </div>
        <!-- Start profile-pg -->
        <section class="profile-pg">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4 pr-0 pl-0">
                        <div class="side-nav">
                            <div class="prof-info mb-5">
                                <img src="{{asset(\Auth::user()->photo)}}" alt="" class="avatar"/>
                                <div class="text-content">
                                    <h5 class="name text-white mb-0"><b>{{\Auth::user()->name}}</b></h5>
                                    <p class="mail mb-0 text-white-50">{{\Auth::user()->email}}</p>
                                </div>
                            </div>
                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-selected="true">{{__('web.showprofile')}}</a>
                                <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-selected="false">{{__('web.program')}}</a>
                                <a class="nav-link" href="chat.html">{{__('web.chat')}}</a>
                                <a class="nav-link" href="{{url(getCurrentLocale().'/questions')}}">{{__('web.questions')}}</a>
                                <a class="nav-link" href="{{url(getCurrentLocale().'/logout')}}" data-toggle="modal" data-target="#logoutModal">{{__('web.logout')}}</a>
                            </div>
                            <img src="{{url('')}}/assets/web/images/pattern-1.png" alt="" class="pattern"/>
                        </div>
                    </div>
                    <div class="col-md-7 pr-0 pl-0">
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane  show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-tab1-tab">
                                <div class="tab-content" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-info" role="tabpanel" aria-labelledby="pills-info-tab">
                                        <div class="tab-wrapper data-tab">
                                            <div class="col-md-6 m-auto">
                                                <div class="sec-heading text-center mb-5">
                                                    <h4 class="title tab-title">{{__('web.showprofile')}}</h4>
                                                </div>
                                                 @if ($errors->any())
                                                      <div class="alert alert-danger">
                                                          <ul>
                                                              @foreach ($errors->all() as $error)
                                                                  <li>{{ $error }}</li>
                                                              @endforeach
                                                          </ul>
                                                      </div>
                                                  @endif
                                                  <div class="data-group">
                                                    <div class="image-container mb-4" id="imagePreview" style="background-image: url('{{asset(\Auth::user()->photo)}}');">
                                                        
                                                    </div>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.name')}}</span>
                                                    <p class="data">{{\Auth::user()->name}}</p>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.email')}}</span>
                                                    <p class="data">{{\Auth::user()->email}}</p>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.phone')}}</span>
                                                    <p class="data">{{\Auth::user()->phone}}</p>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.gender')}}</span>
                                                    <p class="data">@if(\Auth::user()->gender == '1') {{__('web.male')}} @else {{__('web.female')}} @endif</p>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.tall')}}</span>
                                                    <p class="data">{{\Auth::user()->tall}} cm</p>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.weight')}}</span>
                                                    <p class="data">{{\Auth::user()->weight}} KG</p>
                                                </div>
                                                <div class="data-group">
                                                    <span class="label">{{__('web.date_of_birth')}}</span>
                                                    <p class="data">{{\Auth::user()->date_of_birth}}</p>
                                                </div>
                                                <ul class="nav nav-pills w-100" id="pills-tab" role="tablist">
                                                    <li class="nav-item w-100" role="presentation">
                                                        <a class="info-butn edit-butn main-butn mt-4" id="pills-editInfo-tab" data-toggle="pill" href="#pills-editInfo" role="tab" aria-controls="pills-editInfo" aria-selected="false"><span><i class="far fa-edit"></i> {{__('web.editprofile')}}</span></a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-editInfo" role="tabpanel" aria-labelledby="pills-editInfo-tab">
                                        <div class="tab-wrapper data-tab">
                                            <div class="col-md-6 m-auto">
                                                <div class="sec-heading text-center mb-5">
                                                    <h4 class="title tab-title">{{__('web.editshowprofile')}}</h4>
                                                </div>
                                                <div class="form-wrapper">
                                                    <form method="post" onsubmit="savechange(this)" action="{{url(getCurrentLocale().'/editprofile')}}">
                                                        @CSRF
                                                         <div class="data-group">
                                                    <div class="image-container mb-4" id="imagePreview" style="background-image: url('{{asset(\Auth::user()->photo)}}');">
                                                        <input type="file" class="custom-file-input" name="photo" id="imageUpload"  capture="">
                                                        <button><i class="far fa-edit"></i></button>
                                                    </div>
                                                </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.name')}}</span>
                                                            <input class="form-control" name="name" value="{{\Auth::user()->name}}"/>
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.email')}}</span>
                                                            <input class="form-control" type="email" name="email" value="{{\Auth::user()->email}}"/>
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.phone')}}</span>
                                                            <input class="form-control" name="phone" value="{{\Auth::user()->phone}}"/>
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.gender')}}</span>
                                                            <select class="form-control" name="gender">
                                                                <option  @if(\Auth::user()->gender == '1') selected @endif value="1">{{__('web.male')}}</option>
                                                                <option @if(\Auth::user()->gender == '0') selected @endif value="0">{{__('web.female')}}</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.tall')}}</span>
                                                            <input class="form-control" type="number" name="tall"value="{{\Auth::user()->tall}}" placeholder="Ex: 150CM" />
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.weight')}}</span>
                                                            <input class="form-control"  type="number" name="weight" value="{{\Auth::user()->weight}}" placeholder="Ex: 50KG" />
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.date_of_birth')}}</span>
                                                            <input class="form-control" type="date" name="date_of_birth" value="{{\Auth::user()->date_of_birth}}"/>
                                                        </div>
                                                        <div class="form-group data-group">
                                                            <span class="label">{{__('web.password')}}</span>
                                                            <input class="form-control" name="password" placeholder="{{__('web.password')}}"/>
                                                        </div>
                                                        <button class="info-butn edit-butn main-butn mt-4"><span><i class="far fa-save"></i> {{__('web.save')}}</span></button>
                                                    </form>
                                                </div>
                                            </div>
                                         
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane " id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">
                                <div class="tab-wrapper pkg-tab">
                                    <div class="sec-heading text-center mb-5">
                                        <h4 class="title tab-title">{{__('web.packages')}}</h4>
                                    </div>
                                     @if(count($subs) > 0)
                                            @foreach($subs as $key=>$row)
                                    <div class="row mb-4">
                                        <div class="col-lg-6 m-auto">
                                            <div class="package-det-card dark-bg">
                                                <div class="content">
                                                    <div class="row">
                                                        <div class="col-6">
                                                            <p class="label text-white"><i class="far fa-clock"></i> {{__('web.timing')}}</p>
                                                        </div>
                                                        <div class="col-6">
                                                            <p class="det text-white-50">@if($row->type == 'four') 4 @else 8 @endif {{__('web.weeks')}}</p>
                                                        </div>
                                                        <div class="col-6">
                                                            <p class="label text-white"><i class="far fa-calendar"></i> {{__('web.start_date')}}</p>
                                                        </div>
                                                        <div class="col-6">
                                                            <p class="det text-white-50 mb-0">{{date("d Y M",strtotime($row->date))}}</p>
                                                        </div>
                                                        <div class="col-6">
                                                            <p class="label text-white mb-0"><i class="far fa-calendar-alt"></i> {{__('web.end_date')}}</p>
                                                        </div>
                                                        <div class="col-6">
                                                            <p class="det text-white-50 mb-0">{{date("d Y M",strtotime($row->end_date))}}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 m-auto">
                                        <div class="pkg_card ">
                                            <div class="card_t">
                                                <img src="{{url('')}}/assets/web/images/pkg-1.png" alt="" class="bg"/>
                                                <div class="content center-vr">
                                                    <!-- <span class="badge"><small>شهر/</small> <b>35</b> <small><b>SR</b></small></span> -->
                                                    <h4 class="pkg-name text-center">{{sectionname($row->package->section_id)}}</h4>
                                                    <h4 class="pkg-name text-center">{{packagename($row->package_id)}}</h4>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <ul class="list">
                                                    @foreach(items($row->package_id) as $item)
                                                    <li class="li"><i class="fas fa-check"></i>{{$item->value}}</li>
                                                    @endforeach
                                                </ul>
                                                <div class="butns-wrapper">
                                                    <a href="{{url(getCurrentLocale().'/package')}}" class="main-butn border-butn active-butn m-auto"><span>{{__('web.change')}}</span></a>
                                                    <a href="{{url(getCurrentLocale().'/subscribe/'.$row->id)}}" class="main-butn dark-butn m-auto"><span>{{__('web.enter')}}</span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else
                                         <h5 class="tab-title"> {{__('web.notexistsubs')}} </h5>
                                    
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Modal -->
        <div class="modal logoutModal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/logout-1.png" alt="" class="main-img"/>
                        <h4 class="title text-center mt-3"><b>{{__('web.surelogout')}}</b></h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="main-butn border-butn" data-dismiss="modal"><span>{{__('web.cancel')}}</span></button>
                        <a href="{{url(getCurrentLocale().'/logout')}}" class="main-butn active-butn"><span>{{__('web.sure')}}</span></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Start newsletter-sec -->
        <!-- Start newsletter-sec -->
        <section class="newsletter-sec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        <img src="{{url('')}}/assets/web/images/icon.svg" alt="" class="logo wow zoomIn"/>
                    </div>
                    <div class="col-lg-5 col-md-6">
                        <div class="text  center-vr wow text-focus-in">
                           <h2 class="title text-white mb-3">{{__('web.subscribe_mail')}}</h2>
                            <p class="p text-white-50 mb-0">{{__('web.enter_email')}} </p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="form-wrapper center-vr wow text-focus-in">
                            <form onsubmit="formemail(this)" id="formemail" method="post" action="{{url(getCurrentLocale().'/subscribe')}}" class="row">
                                @CSRF
                                <input type="email" name="email" class="form-control col-10"  placeholder="{{__('web.email')}}">
                                <button class="submit-butn col-2"><i class="fab fa-telegram-plane"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
         <div class="modal logoutModal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/confirmed.svg" alt="" class="main-img"/>
                        <h4 class="title text-center mt-3" id="success">{{__('web.success')}}</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="main-butn active-butn" data-dismiss="modal"><span>{{__('web.ok')}}</span></button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Canceled Newsletter Modal --> 
        <div class="modal logoutModal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="{{url('')}}/assets/web/images/cancel.svg" alt="" class="main-img"/>
                        <div  id="error">
                        
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="main-butn active-butn" data-dismiss="modal"><span>{{__('web.ok')}}</span></button>
                    </div>
                </div>
            </div>
        </div>
    
    </main>
@push('js')
<script>
     function savechange(elem){
            event.preventDefault();
              let action = $(elem).attr('action');
       
       let urls = action;
       
       let dataform = new FormData( $(elem)[0]);
        
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          contentType: false, 
          processData: false, 
          success:function(data)
          {
            $('#confirmModal').modal('show');
            setTimeout(
  function()
  {
      location.reload();
  }, 1000);
               }
          ,error: function (data) {
              
            $('#cancelModal').modal('show');
              
          $('#error').html('');
    $('#error').css("display", "block");
   
   $.each(data.responseJSON.errors, function(key,value) {
       
     $('#error').append('<h4 class="title text-center mt-3">'+value+'</h4>');
     
     
 }); 
 
  //$("#savefailed").modal('show');
  
}
        })

           
        }
        function formemail(elem){
        event.preventDefault(); 
       var action = $('#formemail').attr('action');
       var urls = action;
       var dataform = $('#formemail').serialize();
     
      $.ajax({
          url : urls,
          type: 'POST',              
          data: dataform,
          success:function(data)
          {
           $('#confirmModal').modal('show');
              $('#error').css("display", "none");
              $('#success').css("display", "block");
           
            
             
          }
          ,error:function(data) {
             $('#cancelModal').modal('show');
              $('#success').css("display", "none");
              $('#error').html('');
    $('#error').css("display", "block");
   
   $.each(data.responseJSON.errors, function(key,value) {
       
     $('#error').append('<h4 class="title text-center mt-3">'+value+'</h4>');
     
     
 }); 
 
}
        })
        }
</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>
        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>
@endpush
@stop