@extends('layouts.web')
@section('page-title', 'Tickets')
@section('link-active-3', 'active')

@section('main-container')
  <div id="container-full-page-word">
      <div class="left-side-word-menu">
          <section class="how-to-pay">
              Ticket Records
          </section>
          <ul>
              <li class="title-menu-tigou active-side-link">My Tickets</li>
              <li class="title-menu-tigou">Cancelled Tickets</li>
              {{-- <li class="title-menu-tigou">Payments</li> --}}
          </ul>
      </div>

      <div class="right-side-word-contents">
          <div class="how-to-pay-info-cont" id="title-menu-voda">
              <h3>Aifola Express Tickets</h3>
              @if(count($booking) > 0)
              @foreach($booking as $data)
              <article class="min-view-bus-info">
               <section class="bus-info-route">
                   <h2>{{$data->start_from}} - {{$data->end_to}}</h2>
                   <h3><br>BUS TYPE</h3>
                   <p>{{$data->bus_type}}</p>
               </section>
               <section class="bus-info-dep">
                   <h3>Departure</h3>
                   <h2>{{date_format(date_create($data->date_depature), 'd M Y')}}</h2>
                   <h4>{{date_format(date_create($data->depature_time), 'H:i A')}}</h4>
               </section>
            

               <section class="bus-info-dep-via">
                   VIA<br>{{$data->via}}
               </section>
               <section class="bus-info-price">
                   <h3>Fare</h3>
                   <h2>{{number_format($data->fare, 2)}} TZS</h2>
               </section>
               <section class="bus-info-btn">
                   <h6>Boarding Point: {{$data->boarding_point}}</h6>
                   <h6>Seat Number: {{$data->sit_number}} {{$data->vip}}</h6>
                   <h6>Ticket Number: {{$data->ticket_number}}</h6>
                   <h6>Customer Name: {{$data->customer_name}}</h6>
               </section>
               <div class="block-cont-0p"></div>
             </article>
           @endforeach
           @else

           <article class="min-view-bus-info">
            <h5>
               No ticket issued found
            </h5>
           </article>
           @endif

          </div>

      </div>
      <div class="block-cont-0p"></div>
  </div>
@endsection

<!-- js script -->
@push('scripts')

<script>
    $(function(){


         $(document).on('click', '.title-menu-voda', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-voda').css({"display":"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });

         $(document).on("click", ".title-menu-tigo", function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-tigo').css({"display":"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });

         $(document).on('click', '.title-menu-zan', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-zan').css({'display':"block"});
            
            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });
         $(document).on('click', '.title-menu-airtel', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-airtel').css({'display':"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });
         $(document).on('click', '.title-menu-hallo', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-hallo').css({'display':"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });
         $(document).on('click', '.title-menu-selcom', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-selcom').css({'display':"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });
         $(document).on('click', '.title-menu-bank', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-bank').css({'display':"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });
         $(document).on('click', '.title-menu-cash', function(){
            $('.how-to-pay-info-cont').css({"display":"none"});
            $('#title-menu-cash').css({'display':"block"}); 

            $('.left-side-word-menu ul li').removeClass('active-side-link');
            $(this).addClass('active-side-link');
         });


    });
</script>

@endpush