@extends('layouts.agent')
@section('page-title', 'Buses Schedules')

@section('main-container')
<div id="container-main-search-buses">

    <div id="margincont">
    <div id="container-main-simple-search">
        <h3>Search Buses</h3>
        <form action="{{route('find-routes-form-agent')}}" 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 $route_details)
                      <option value="{{$route_details->id}}">{{$route_details->start_from}}({{$route_details->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"></div>
        </form>
        <div class=""></div>
    </div>
   </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>");
                        //$('#toroutes').append("<option value=" + json[i].end_to + ">" + json[i].end_to + "</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