@extends('layouts.web')
@section('page-title', 'How To Pay')
@section('link-active-4', 'active')

@section('main-container')
  <div id="container-full-page-word">
      <div class="left-side-word-menu">
          <section class="how-to-pay">
              How To Pay Through
          </section>
          <ul>
              <li class="title-menu-voda active-side-link">M-PESA</li>
              <li class="title-menu-tigo">TIGO-PESA</li>
              <li class="title-menu-zan">EZZY MONEY</li>
              <li class="title-menu-airtel">Airtel Money</li>
              <li class="title-menu-hallo">Hallo Pesa</li>
              <li class="title-menu-selcom">Selcom Pay</li>
              <li class="title-menu-bank">Bank</li>
              <li class="title-menu-cash">Cash</li>
          </ul>
      </div>

      <div class="right-side-word-contents">
          <div class="how-to-pay-info-cont" id="title-menu-voda">
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
          </div>

          <div class="how-to-pay-info-cont display-none" id="title-menu-tigo">
            <h3>How to pay through TIG-PESA</h3>
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
         </div>

        <div class="how-to-pay-info-cont display-none" id="title-menu-zan">
            <h3>How to pay through EZZY MONEY</h3>
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
        </div>

        <div class="how-to-pay-info-cont display-none" id="title-menu-airtel">
            <h3>How to pay through Airtel Money</h3>
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
        </div>

        <div class="how-to-pay-info-cont display-none" id="title-menu-hallo">
            <h3>How to pay through Hallo PESA</h3>
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
        </div>

        <div class="how-to-pay-info-cont display-none" id="title-menu-selcom">
            <h3>How to pay through SELCOM Pay</h3>
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
        </div>

        <div class="how-to-pay-info-cont display-none" id="title-menu-cash">
            <h3>How to pay through Cash</h3>
            <p>Through our lipa namaba you can pay by any Tanzania network</p>

            <section class="back-exp-quote">
                <ul>
                    <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
                </ul>
            </section>
        </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