@extends('layouts.web')
@section('page-title', 'Home page')
@section('link-active-1', 'active')

@section('main-container')

   <div id="container-home-main">
        <div class="container-home-main">
            <div id="container-min-welcome-container">
                <h1>We have a good reputations among customers who used to travel with them.</h1>
                <h2> They have a good Management to take care for their company and their customers as well.  In all Zones, Aifola expres services are available with the morning and afternoon departure for passengers and parcel transport services</h2>
                <a href="{{route('web.contact-us')}}"><i class="fas fa-phone-alt" style="padding: 0px 5px 0px 0px"></i> Contact Us</a>
            </div>
            <div id="container-min-booking-container">
                <h2>Bus Search & Book Now</h2>
                <form action="{{route('find-routes-form')}}" method="GET" id="searchbusesform">
                    <section class="view-col-search">
                        <select name="from" class="form-control" id="fromroutes" required>
                            <option selected value="0" hidden>Start From</option>
                            @foreach($from_route as $data)
                               <option value="{{$data->id}}">{{$data->start_from}}({{$data->end_to}})</option>
                            @endforeach
                        </select>
                    </section>
                    <section class="view-col-search">
                        <select name="to" class="form-control" id="toroutes" required>
                            <option value="0" selected hidden>Going To</option>
                            <option value="0">Please select first start from</option>
                        </select>
                    </section>
                    <section class="view-col-search">
                        <input type="text" placeholder="Departure Date" onfocus="(this.type='date')" onblur="(this.type='text')" min="@php echo date('Y-m-d'); @endphp" name="dates" placeholder="date" class="form-control" required>
                    </section>
                    <section class="view-col-search">
                        <button type="submit">Search Buses</button>
                    </section>
                </form>
            </div>
        </div>
   </div>

   <div id="container-services-home-pg">
       <h2>OUR FEATURES</h2>
       <h1>The Best Bus Service Company</h1>
       <p class="p">
          We Are Trusted by thousands of Customer, <br>the following are the features that make us best and loverly Bus company in East Africa.
       </p>

       <article>
           <h3><i class="fas fa-chair" style="color:#f04b5f;font-size:36px;"></i></h3>
           <h4>Comfort Seats</h4>
           <p>
               Majority of our coaches comes with comfy adjusted seats and have a handy footrest, so you can find just the right spot to relax.  
           </p>
       </article>

       <article>
            <h3><i class="fas fa-fan" style="color:#f04b5f;font-size:36px;"></i></h3>
            <h4>Air Condition</h4>
            <p>
                All our coaches are fitted with thermostatically controlled air conditioning as well as efficient heating to keep our passengers warm during the winter. 
            </p>
        </article>

        <article>
            <h3><i class="fas fa-wifi" style="color:#f04b5f;font-size:36px;"></i></h3>
            <h4>Free Wifi</h4>
            <p>
                Get free WI-FI whenever you travel with us. Share your travel moments with family and friends. Check your emails or Instagram from the road. 
            </p>
        </article>

         <article>
            <h3><i class="fas fa-headset" style="color:#f04b5f;font-size:36px;"></i></h3>
            <h4>Customer Care</h4>
            <p>
                Here at Aifola Express we are always put our customer first by respond to any query. 
            </p>
        </article>
 
        <article>
             <h3><i class="fas fa-certificate" style="color:#f04b5f;font-size:36px;"></i></h3>
             <h4>Trusted</h4>
             <p>
                 We are happy to insure your security and safe travel 
             </p>
         </article>


       <div class="block-cont"></div>
   </div>


   {{-- <div id="container-about-us">
       <article class="about-us-office-main">
           <img src="{{asset('media/images/back002.jpeg')}}">
       </article>
       <article class="about-us-text-main">
           <h2>About Us</h2>
           <h3>
               Lorem ipsum dolor sit amet Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit amet Lorem Lorem ipsum dolor sit amet
           </h3>
           <p>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit amet Lorem Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit ametLorem Lorem Lorem Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit amet Lorem Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit ametLorem Lorem 
            </p>

            <article class="content-about-list">
                <section class="content-icons-side-list">
                    <i class="fa fa-road"></i>
                </section>
                <section class="content-phg-side-list">
                    10+ routes 
                </section>
            </article>
            <article class="content-about-list">
                <section class="content-icons-side-list">
                    <i class="fa fa-bus"></i>
                </section>
                <section class="content-phg-side-list">
                    8+ buses
                </section>
            </article>
            <article class="content-about-list">
                <section class="content-icons-side-list">
                    <i class="fa fa-users"></i>
                </section>
                <section class="content-phg-side-list">
                    30+ staff 
                </section>
            </article>
            <article class="content-about-list">
                <section class="content-icons-side-list">
                    <i class="fa fa-headset"></i>
                </section>
                <section class="content-phg-side-list">
                    Good customer care
                </section>
            </article>

       </article>

    <div class="block-cont"></div>
   </div> --}}


   {{-- <div id="blog-news-article">
       <h2>NEWS & BLOGS</h2>
       <h1>Check Out Our Latest Blog</h1>
       <p class="news-p">
           Lorem ipsum dolor sit amet Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem Lorem ipsum dolor sit amet, con Lorem ipsum dolor sit amet Lorem Lorem ipsum dolor sit amet
       </p>
       <div class="block-cont"></div>
       <article>
           <section class="article-img-cont">
              <img src="{{asset('media/images/office-a.jpg')}}">
           </section>
           <section class="article-text-cont">
               <h3>COUPON</h3>
               <p>
                   Lorem ipsum dolor sit Lorem ipsum dolor sit
               </p>
               <h4>
                <span class="article-date"><i class="far fa-calendar" style="margin: 0px 5px 0px 0px"></i>Agust 21, 2021</span>
                <span class="article-comment"><i class="far fa-comment-alt" style="margin: 0px 5px 0px 0px"></i>12 Comment</span>
               </h4>
           </section>
       </article>

       <article>
            <section class="article-img-cont">
                <img src="{{asset('media/images/office.jpg')}}">
            </section>
            <section class="article-text-cont">
                <h3>COUPON</h3>
                <p>
                    Lorem ipsum dolor sit Lorem ipsum dolor sit
                </p>
                <h4>
                    <span class="article-date"><i class="far fa-calendar" style="margin: 0px 5px 0px 0px"></i>Agust 21, 2021</span>
                    <span class="article-comment"><i class="far fa-comment-alt" style="margin: 0px 5px 0px 0px"></i>12 Comment</span>
                </h4>
            </section>
        </article>

        <article>
            <section class="article-img-cont">
                <img src="{{asset('media/images/office-a.jpg')}}">
            </section>
            <section class="article-text-cont">
                <h3>COUPON</h3>
                <p>
                    Lorem ipsum dolor sit Lorem ipsum dolor sit
                </p>
                <h4>
                    <span class="article-date"><i class="far fa-calendar" style="margin: 0px 5px 0px 0px"></i>Agust 21, 2021</span>
                    <span class="article-comment"><i class="far fa-comment-alt" style="margin: 0px 5px 0px 0px"></i>12 Comment</span>
                </h4>
            </section>
        </article>

        <article>
            <section class="article-img-cont">
                <img src="{{asset('media/images/office.jpg')}}">
            </section>
            <section class="article-text-cont">
                <h3>COUPON</h3>
                <p>
                    Lorem ipsum dolor sit Lorem ipsum dolor sit
                </p>
                <h4>
                    <span class="article-date"><i class="far fa-calendar" style="margin: 0px 5px 0px 0px"></i>Agust 21, 2021</span>
                    <span class="article-comment"><i class="far fa-comment-alt" style="margin: 0px 5px 0px 0px"></i>12 Comment</span>
                </h4>
            </section>
        </article>

        <div class="block-cont"></div>
   </div> --}}


   <div id="article-testimonial">
       <article class="article-testimonial-contents">
           
           @foreach($testmonials as $data)
           <section class="small-left-cont-testimonial">
            <p><i class="fa fa-quote-left" style="margin: 0px 5px 0px 0px"></i>
                {{$data->texts}}
                <i class="fa fa-quote-right" style="margin: 0px 0px 0px 5px"></i>
            </p>
            <h3>{{$data->customer_name}}</h3>
            <h4>From {{$data->travell_from}}</h4>
           </section>
           @php break; @endphp
           @endforeach

           @php $cou_testimonial = 0; @endphp
           @foreach($testmonials as $data)
           @if($cou_testimonial == 1)
           <section class="small-right-cont-testimonial">
            <p>
                <i class="fa fa-quote-left" style="margin: 0px 5px 0px 0px"></i>
                {{$data->texts}}
                <i class="fa fa-quote-right" style="margin: 0px 0px 0px 5px"></i>
            </p>
            <h3>{{$data->customer_name}}</h3>
            <h4>From {{$data->travell_from}}</h4>
           </section>
           @php break; @endphp
           @endif
           @php $cou_testimonial ++; @endphp
           @endforeach

           @php $cou_testimonial = 0; @endphp
           @foreach($testmonials as $data)
           @if($cou_testimonial == 2)
           <section class="small-left-b-cont-testimonial">
             <p><i class="fa fa-quote-left" style="margin: 0px 5px 0px 0px"></i>
                  {{$data->texts}}
                 <i class="fa fa-quote-right" style="margin: 0px 0px 0px 5px"></i>
             </p>
             <h3>{{$data->customer_name}}</h3> 
             <h4>From {{$data->travell_from}}</h4>
           </section>
           @php break; @endphp
           @endif
           @php $cou_testimonial ++; @endphp
           @endforeach

           @php $cou_testimonial = 0; @endphp
           @foreach($testmonials as $data)
           @if($cou_testimonial == 3)
           <section class="small-right-b-cont-testimonial">
            <p><i class="fa fa-quote-left" style="margin: 0px 5px 0px 0px"></i>
                 {{$data->texts}}
                <i class="fa fa-quote-right" style="margin: 0px 0px 0px 5px"></i>
            </p>
            <h3>{{$data->customer_name}}</h3>
            <h4>From {{$data->travell_from}}</h4>
           </section>
           @php break; @endphp
           @endif
           @php $cou_testimonial ++; @endphp
           @endforeach
       </article>

       <article class="article-testimonial-title" >
           <h2>TESTIMONIALS</h2>
           <h3>
                Don't take our word for it. See what customers are saying about us.
           </h3>
           <p>
               All of the testmonial are collected from our customer and not a single character have changed, also we love to ear your feedback  <a href="{{route('web.contact-us')}}">Write here your feedback</a>.
           </p>
       </article>
       <div class="block-cont"></div>
   </div>


    <div id="newslatter">
        <h3>TICKETS</h3>
        <h4>Find Tickets</h4>

        <p>
            In order to get all of your ticket you have booked in our buses you should have or remember any of the following information:<br> Ticket number found on your ticket or during the booking, your phone number or email address used during booking.
        </p>

        <form action="{{route("find-ticket")}}" method="POST">
        @csrf
            <div class="input-group" id="container-width-40">

                <input type="text" name="data" class="form-control" placeholder="Enter ticket number or email address or phone number" required>
                <div class="input-group-append">
                <button class="btn btn-custom-ai" type="submit"><i class="fas fa-search" style="margin: 0px 5px 0px 0px"></i>Find Tickets</button>
                </div>
            </div>
        </form>
    </div>


@endsection


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

<script>
    $(function(){
        $(document).on('change', '#fromroutes', function(){
            let fromid = $(this).val();
            $.ajax({
                url:"../get-to-route/"+fromid,
                dataType: "text",
                success: function(data){
                    
                    var json = $.parseJSON(data);
                    console.log(json);
                    $('#toroutes').empty();
                    $('#toroutes').append("<option value='0'>Going To</option>");
                    for (var i = 0; i < json.length; ++i) {
                        $('#toroutes').append("<option value=" + json[i].id+ ">" + json[i].name + "</option>");
                    }
                }
            });
        });

        $(document).on("submit", "#searchbusesform", function(e){
            let from_data = $("#fromroutes").val();
            let to_data = $("#toroutes").val();

            if(from_data == 0 || to_data == 0){
                e.preventDefault();
                alert("Please select Start From and Going To");
            }
        });

    });
</script>

@endpush