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

@section('main-container')

    <div id="container-main-search-buses">
        <div id="container-main-simple-search">
            <form action="{{route('find-routes-form')}}" method="GET" id="searchbusesform">
                <section class="view-col-search-min">
                    <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-min">
                    <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-min">
                    <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-min-btn">
                    <button type="submit">Search Buses</button>
                </section>
                <div class="block-cont-0p"></div>
            </form>
        </div>

        <div class="container-main-search-buses-left-side">
            <h2>CONTACT US</h2>
            <article class="bus-type">
                <h3>Head Office In Dar es salaam</h3>
                <a>
                    <i class="fas fa-envelope" style="color:#84563C;margin:0px 10px 0px 0px"></i> info@aifola.co.tz
                </a>
                <br>
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0677016175 / 0733331476
                </a>
                <hr>
            
                <h3>
                   Ilala
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 067701678 / 0733331484
                </a>
                <hr>
            
                <h3>
                    Urafiki 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0677016172 / 0733331477
                </a>
                <hr>
            
            
                <h3>
                    Mbezi 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0677016176 / 0733331478
                </a>
                <hr>
                <h3>
                    Kigamboni 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0677016183 / 0733331485
                </a>
                <hr>
                <h3>
                    Kigoma supervisor 
            
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0677016181/ 0733331482
                </a>
                <hr>
                <h3>
                    Kigoma town office 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0677016180 / 0733331483
                </a>
                <hr>
                <h3>
                    Dodoma 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0733331480
                </a>
                <hr>
                <h3>
                    Tabora 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0733331481
                </a>
                <hr>
                <h3>
                    Morogoro 
                </h3>
            
                <a>
                    <i class="fas fa-phone" style="color:#84563C;margin:0px 10px 0px 0px"></i> 0733331479
                </a>
            </article>
        </div>

        <div class="container-main-search-buses-right-side">
            
            @if(isset($route))
                @foreach($route as $route_details)
                  @foreach($route_details->depature as $depature_details)
                   @if($depature_details->depature_date == $departure_date_in && $depature_details->is_deleted == 0 && $depature_details->status == 0)
                    <div class="list-search-buses-res">
                      <form action="{{route('web.customer-details')}}" method="GET" id="formbooking">
                        @csrf
                        <article class="min-view-bus-info">
                            <section class="bus-info-route">
                                <h2>{{$route_details->start_from}}({{$route_details->end_to}}) - {{$sub_routes->name}}</h2>
                                <h3><br>BUS TYPE</h3>
                                <p>{{$depature_details->bus_type}}</p>
                                <h3>{{Str::upper($depature_details->registration_number)}}</h3>
                            </section>
                            <section class="bus-info-dep">
                                <h3>Departure</h3>
                                <h2>{{date_format(date_create($departure_date_in), 'd M Y')}}</h2>
                                <h4>{{date_format(date_create($depature_details->depature_time), 'H:i A')}}</h4>
                            </section>
                            
                            <input type="hidden" name="datetodepatureinp" value="{{$departure_date_in}}">
                            <input type="hidden" name="routeidnoinp" value="{{$route_details->id}}">
                            <input type="hidden" name="depatureidnoinp" value="{{$depature_details->id}}">

                            <section class="bus-info-dep-via">
                                VIA<br>{{$depature_details->via}}
                            </section>
                            <section class="bus-info-price">
                                <h3>Fare</h3>
                                <h2 class="displayfarebig{{$depature_details->id}}">{{number_format($sub_routes->fare, 2)}} TZS</h2>
                            </section>
                            <section class="bus-info-btn">
                                @if($depature_details->number_of_sit-count($depature_details->booking) > 0)
                                <h6>Total @php echo $depature_details->number_of_sit-count($depature_details->booking); @endphp Seat left</h6>
                                <button type="button" data-undata="view-co{{$depature_details->id}}">SELECT SEAT</button>
                                @else
                                   <h6 style="font-weight: bold;font-size:15px;color:#f04b5f">This bus is full, kindly check our other buses</h6>
                                @endif
                            </section>
                            <div class="block-cont-0p"></div>
                        </article>
                        <div id="seat-and-confirm" class="view-co{{$depature_details->id}}">
                            <article class="seat-plan-side">
                                <div class="seat-instraction">
                                    <section class="seat-details-before">
                                        <img src="{{asset('media/others/seat_a.png')}}"><br>Available
                                    </section>
                                    <section class="seat-details-before">
                                        <img src="{{asset('media/others/seat_vip.png')}}"><br>VIP
                                    </section>
                                    <section class="seat-details-before">
                                        <img src="{{asset('media/others/seat_h.png')}}"><br>Selected
                                    </section>
                                    <section class="seat-details-before">
                                        <img src="{{asset('media/others/seat_f.png')}}"><br>Booked
                                    </section>
                                    <div class="block-cont-0p"></div>
                                    <div class="full-seat-plan">
                                        <section class="seat-number"></section>
                                        <section class="seat-number"></section>
                                        <section class="seat-number"></section>
                                        <section class="seat-number"></section>
                                        <section class="seat-number"><img src="{{asset('media/others/steering.png')}}"></section>

                                        @php 
                                        $xs = $fvip = $founded = 0; 
                                        $vipseats = explode(',', $depature_details->vip_seat);
                                        $totalvipseat = count($vipseats);
                                        @endphp

                                        @if($totalvipseat > 0)
                                            
                                                @for($ic = 1; $ic <= $depature_details->number_of_sit; $ic++) 

                                                    @foreach($depature_details->booking as $booking)
                                                        @if($booking->sit_number == $ic)
                                                            <section class="seat-number" id="seatno{{$ic}}" title="Seat #{{$ic}}" data-currentselec="seatno{{$ic}}" data-vip="0" data-fare="{{$sub_routes->fare}}" data-vipaddfare="{{$depature_details->vip_addition_price}}" data-dpid="{{$depature_details->id}}" data-classidbooking="classbookingseat{{$depature_details->id}}" data-sitno="{{$ic}}" data-status="1"><span><img src="{{asset('media/others/seat_f.png')}}"></span>{{$ic}}</section>
                                                            @php $xs = $ic; break; @endphp
                                                        @endif
                                                    @endforeach
                                                    @if($xs != $ic) 
                                                        @php $foundeds = 0; @endphp
                                                        @for($vi = 0; $vi < $totalvipseat; $vi++)
                                                            @if($ic == $vipseats[$vi])
                                                            <section class="seat-number clickremoveactivevip btnSelectSeat" id="seatno{{$ic}}" title="Seat #{{$ic}}" data-vip="1" data-dpid="{{$depature_details->id}}" data-fare="{{$sub_routes->fare}}" data-vipaddfare="{{$depature_details->vip_addition_price}}" data-classidbooking="classbookingseat{{$depature_details->id}}" data-sitno="{{$ic}}" data-status="0"><span><img src="{{asset('media/others/seat_vip.png')}}"></span>{{$ic}}</section>
                                                            @php $foundeds = 1; @endphp

                                                            @endif
                                                        @endfor
                                                        @if($foundeds != 1)
                                                        <section class="seat-number clickremoveactive btnSelectSeat" id="seatno{{$ic}}" title="Seat #{{$ic}}" data-classidbooking="classbookingseat{{$depature_details->id}}" data-fare="{{$sub_routes->fare}}" data-vip="0" data-dpid="{{$depature_details->id}}" data-vipaddfare="{{$depature_details->vip_addition_price}}" data-sitno="{{$ic}}" data-status="0"><span><img src="{{asset('media/others/seat_a.png')}}"></span>{{$ic}}</section>
                                                        @endif
                                                    @endif

                                                    @if($depature_details->number_of_sit == 47)

                                                        @if($ic == 1 || $ic == 4)
                                                          <section class="seat-number"></section> 
                                                          <section class="seat-number"></section> 
                                                        @elseif($ic == 8 || $ic == 12 || $ic == 16 || $ic == 20 || $ic == 24 || $ic == 28 || $ic == 32 || $ic == 36 || $ic == 40)
                                                           <section class="seat-number"></section> 
                                                        @endif
                                                    
                                                    @elseif($depature_details->number_of_sit == 53)
                                                    
                                                        @if($ic == 2 || $ic == 6 || $ic == 10 || $ic == 14 || $ic == 18 || $ic == 22 || $ic == 26 || $ic == 30 || $ic == 34 || $ic == 38 || $ic == 42 || $ic == 46)
                                                          <section class="seat-number"></section> 
                                                        @endif

                                                    @else

                                                        @if($ic == 2 || $ic == 6 || $ic == 10 || $ic == 14 || $ic == 18 || $ic == 22 || $ic == 26 || $ic == 30 || $ic == 34 || $ic == 38 || $ic == 42 || $ic == 46 || $ic == 50) <section class="seat-number"></section> @endif

                                                    @endif

                                                   

                                                @endfor
                                           
                                        @else
                                                @for($ic = 1; $ic <= $depature_details->number_of_sit; $ic++) 

                                                @foreach($depature_details->booking as $booking)
                                                    @if($booking->sit_number == $ic)
                                                        <section class="seat-number" id="seatno{{$ic}}" title="Seat #{{$ic}}" data-currentselec="seatno{{$ic}}" data-classidbooking="classbookingseat{{$depature_details->id}}" data-sitno="{{$ic}}" data-status="1"><img src="{{asset('media/others/seat_f.png')}}">{{$ic}}</section>
                                                        @php $xs = $ic; break; @endphp
                                                    @endif
                                                @endforeach
                                                    @if($xs == $ic) @else 
                                                    <section class="seat-number clickremoveactive btnSelectSeat" id="seatno{{$ic}}" title="Seat #{{$ic}}" data-classidbooking="classbookingseat{{$depature_details->id}}" data-sitno="{{$ic}}" data-status="0"><img src="{{asset('media/others/seat_a.png')}}">{{$ic}}</section>
                                                @endif

                                                @if($depature_details->number_of_sit == 53)

                                                    @if($ic == 2 || $ic == 6 || $ic == 10 || $ic == 14 || $ic == 18 || $ic == 22 || $ic == 26 || $ic == 30 || $ic == 34 || $ic == 38 || $ic == 42 || $ic == 46) <section class="seat-number"></section> @endif

                                                @else

                                                    @if($ic == 2 || $ic == 6 || $ic == 10 || $ic == 14 || $ic == 18 || $ic == 22 || $ic == 26 || $ic == 30 || $ic == 34 || $ic == 38 || $ic == 42 || $ic == 46 || $ic == 50) <section class="seat-number"></section> @endif

                                                @endif

                                                @endfor
                                        @endif
                                        <div class="block-cont-0p"></div>
                                    </div>
                                </div>
                            </article>

                            <div class="boarding-plan">
                                <h3>Boarding Points</h3>       
                                @foreach($boarding as $boarding_points)
                                  @if($route_details->id == $boarding_points->route_id)
                                   <section><input type="radio" name="boarding" class="boardinginput" value="{{$boarding_points->name}}"> {{$boarding_points->name}}</section> 
                                  @endif
                                @endforeach 
                            </div>
                            <input type="hidden" name="vip" id="vip{{$depature_details->id}}">
                            <input type="hidden" name="subroute" value="{{$sub_routes->id}}">
                            <input type="hidden" name="fareprice" id="vipfare{{$depature_details->id}}">
                            <div class="trip-summary">

                                <div class="seat-selected-info">
                                    <h3>Selected Seats Details</h3>
                                    <div id="classbookingseat{{$depature_details->id}}">

                                    </div>
                                </div>

                                <h3>Schedule Summary</h3>
                                <table>
                                    <tr>
                                        <td class="title-bold">Start From:</td>
                                        <td>{{$route_details->start_from}}({{$route_details->end_to}})</td>
                                    </tr>
                                    <tr>
                                        <td class="title-bold">Destination:</td>
                                        <td>{{$sub_routes->name}}</td>
                                    </tr>
                                    <tr>
                                        <td class="title-bold">Vehicle Number:</td>
                                        <td>{{Str::upper($depature_details->registration_number)}}</td>
                                    </tr>
                                    <tr>
                                        <td class="title-bold">Reporting Time:</td>
                                        <td>{{date_format(date_create($departure_date_in), 'd M Y')}} {{date_format(date_create($depature_details->report_time), 'H:i A')}}</td>
                                    </tr>
                                    <tr>
                                        <td class="title-bold">Departure Time:</td>
                                        <td>{{date_format(date_create($departure_date_in), 'd M Y')}} {{date_format(date_create($depature_details->depature_time), 'H:i A')}}</td>
                                    </tr>
                                    <tr>
                                        <td class="title-bold">Expected Arrival:</td>
                                        <td>{{date_format(date_create($depature_details->expected_arrival_time), 'd M Y H:i A')}}</td>
                                    </tr>
                                    <tr>
                                        <td class="title-bold">Fare:</td>
                                        <td class="faredisplay{{$depature_details->id}}">
                                            {{number_format($sub_routes->fare, 2)}} TZS
                                        </td>
                                    </tr>
                                </table>
                                <div class="block-cont-margin"><div></div></div>
                                <a><button type="submit" class="btn btn-success">Continue With Booking</button></a>
                            </div>
                            
                        </div>
                        <div class="block-cont-margin"><div></div></div>
                    </form>
                  </div>
                  @endif
                  @endforeach
                @endforeach
            @else

            <div class="list-search-buses-res">
                <div class="search-bus-description">
                    Please search buses schedule using above form, Aifola Express we have more than 10 routes per day please search and booking to enjoy your travell with our best staff with best services.
                    <br>
                    <div class="block-cont"></div>
                    <strong>Below are the services available to our buses.</strong>
                    <div class="block-cont"></div>
                    <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>
                </section>
            </div>

            @endif
            
        </div>

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

@endsection


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

<script>

    function formatNumber(num) {
        return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
    }

    $(function(){

        var current_selected_sit = "hj";
        let current_selected_add = "<img src='./media/others/seat_h.png'>";
        let current_selected_rem = "<img src='./media/others/seat_a.png'>";
        let current_selected_rem_vip = "<img src='./media/others/seat_vip.png'>";

        $(document).on('click', '.bus-info-btn button', function(){
            //alert("hello");
            let classviewcon = $(this).data("undata");
            $('.'+classviewcon+"").toggle("fast", "linear");
        });


        $(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");
            }
        });


        $(document).on("click", ".btnSelectSeat", function(){

            $(".clickremoveactive span").html(current_selected_rem);
            $(".clickremoveactivevip span").html(current_selected_rem_vip);

            $(this).children('span').html(current_selected_add);

            let seat_number_selected = $(this).data("sitno");
            let status_on_number_selected = $(this).data("status");
            let get_id_classidbooking = $(this).data("classidbooking");

            let fare = $(this).data('fare');
            let vipadd = $(this).data('vipaddfare');
            let vipmsg = "";
            let dpid = $(this).data('dpid');

            if($(this).data('vip') == 1){
                
                vipmsg="VIP ";
                let totalvip = vipadd+fare;
                $('.faredisplay'+dpid+"").html(formatNumber(totalvip) + " TZS");
                $('.displayfarebig'+dpid+"").html(formatNumber(totalvip) + " TZS");
                $('#vipfare'+dpid+"").val(totalvip);
                $('#vip'+dpid+"").val("VIP");

            }else{

                $('.faredisplay'+dpid+"").html(formatNumber(fare) + " TZS"); 
                $('.displayfarebig'+dpid+"").html(formatNumber(fare) + " TZS");
                $('#vipfare'+dpid+"").val(fare);
                $('#vip'+dpid+"").val(""); 
                
            }


            let selected_sit_inf_display = "<section><input type='hidden' name='sitnochoosed' class='inputseatno' value='"+seat_number_selected+"'><img src='./media/others/seat_h.png'>"+vipmsg+"Seat number "+ seat_number_selected +"</section>";

            $('.seat-selected-info #'+get_id_classidbooking+"").html(selected_sit_inf_display);
        });

        
        $(document).on('submit', "#formbooking", function(e){

             if($(this).find(".inputseatno").val() < 1 || $(this).find(".inputseatno").val() == "" || $(this).find(".inputseatno").val() == null){
                 e.preventDefault();
                 alert("Please select seat number again");
             }else if($(this).find("input[name='boarding']:checked").val() == "" || $(this).find("input[name='boarding']:checked").val() == null){
                e.preventDefault();
                 alert("Please select boarding point");
             }

        });

    });
</script>

@endpush