@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="index.html"><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.training')}} </li>
                    </ol>
                </nav>
                <h3 class="title text-center text-white mb-0"><b> {{__('web.training')}} </b></h3>
            </div>
            <img src="{{url('')}}/assets/web/images/pattern-3.png" alt="" class="pattern"/>
        </div>
        <!-- Start package-checkout -->
        <section class="schedule-sec checkout-pg">
            <div class="pkg-header">
                <img src="{{url('')}}/assets/web/images/register-2.png" alt="" class="bg"/>
                <div class="container content">
                    <h2 class="pkg-name text-center text-white mt-4">{{sectionname($subscribe->package->section_id)}}</h2>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-10 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">{{$length}} {{__('web.week')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="label text-white"><i class="fas fa-phone"></i> {{__('web.contactway')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="det text-white-50">{{__('web.each')}} @if($subscribe->contact == 'month') {{__('web.month')}} @else {{__('web.week')}} @endif</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="label text-white mb-0"><i class="far fa-calendar-alt"></i> {{__('web.start_date')}}</p>
                                    </div>
                                    <div class="col-6">
                                        <p class="det text-white-50 mb-0">{{date("d Y M",strtotime($subscribe->date))}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="schedule-wrapper mt-5">
                    <div class="table-responsive">
                        <table class="table">
                            @php $x=0; @endphp
                            @for($i=1;$i<=$length;$i++)
                            <tr>
                                <td><span class="day-label disable-td"><b>{{__('web.week')}} {{$i}}</b></span></td>
                                @foreach(days($subscribe->id,$i) as $key=>$row)
                                <td><a href="{{url(getCurrentLocale().'/video/'.$row->id)}}" class="day-label">{{__('web.day')}} {{$key+1}}</a></td>
                                @endforeach
                                
                            </tr>
                            @endfor
                            
                        </table>
                    </div>
                </div>
                <!-- <div class="schedule-wrapper mt-5">
                    <div class="table-responsive">
                        <table class="table">
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع الاول</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع الثاني</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع الثالث</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع الرابع</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع الخامس</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع السادس</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع السابع</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                            <tr>
                                <td><span class="day-label disable-td"><b>الاسبوع الثامن</b></span></td>
                                <td><a href="#" class="day-label">اليوم 1</a></td>
                                <td><a href="#" class="day-label">اليوم 2</a></td>
                                <td><a href="#" class="day-label">اليوم 3</a></td>
                                <td><a href="#" class="day-label">اليوم 4</a></td>
                                <td><a href="#" class="day-label">اليوم 5</a></td>
                            </tr>
                        </table>
                    </div>
                </div> -->
            </div>
        </section>
        <!-- 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 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>
   @endpush
@stop