@extends('cabMeWebsite.master')
<title>Search for CAB</title>
<style>
    #map {
        width: 100%;
        height: 735px;
        background: grey;
        frameborder:0;
        border:0;
        margin-bottom: -6px;
        allowfullscreen:"";
    }

    .ui-autocomplete {
        position:relative !important;
        max-height: 300px;
        width: 1.5em;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .current {
        background: #EBEBEB;
    }
</style>
@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <section class="search-cab">

        <div class="container-fluid">
            <div class="col-12" style="padding: 10px;">
                <div class="row">
                    <div class="col-12 col-md-4 bg-white list-height">
                        <form class="form_at_list" id="formdata" method="post">
                            {!! csrf_field() !!}
                            <div id="response">
                            </div>
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">
                            <input type="hidden" id="refreshed" value="no">
                            <input class="form-control" type="hidden" name="rider_id" id="rider_id" value="{{$_SESSION['userid']}}"  />
{{--                            <input type="hidden" class="form-control" name="date" id="date" value="{{date('Y-m-d H:i:s')}}">--}}
                            <input type="hidden" class="form-control" name="date" id="date" value="">
                            <input class="form-control" type="hidden" name="status" id="status" value="book"  />
                            <input class="form-control" type="hidden" name="near_by_driver_status" id="near_by_driver_status" value="0"  />
                            <input class="form-control" type="hidden" name="booked_by" id="booked_by" value="{{$_SESSION['userid']}}"  />
                            <input class="form-control" type="hidden" name="booking_code" id="booking_code" value="{{rand(10000000, 99999999)}}"  />
                            <input class="form-control" type="hidden" name="vehicle_id" id="vehicle_id" value=""  />
                            <input class="form-control" type="hidden" name="driver_id" id="driver_id" value=""  />
                            <input type="hidden" id="vehicle_type_id"  name="vehicle_type_id" value="">
                            <input type="hidden" id="vehicle_type"  name="vehicle_type" value="">
                            <input type="hidden" value="" name="time_zone" id="time_zone" >
                            <input class="form-control" type="hidden" name="booked_for" id="booked_for" value="0"  />


                            <div class="pickup-location">
                                <input class="form-control plan" type="text" name="origin_place" id="pickup_plan" value="{{ request()->pickup }}" placeholder="Pickup Location" />
                                <input class="form-control" type="hidden" name="origin_place_lat" id="pickup_plan_latitude" value="{{ request()->pickup_latitude }}"  />
                                <input class="form-control" type="hidden" name="origin_place_lng" id="pickup_plan_longitude" value="{{ request()->pickup_longitude }}"  />
                                <input class="form-control" type="hidden" name="pickup_plan_location" id="pickup_plan_location" value="{{ request()->pickup_location }}"  />
                                <input class="form-control" type="hidden" name="middle_place_1" id="middle_place_1"  />
                                <input class="form-control" type="hidden" name="middle_place_2" id="middle_place_2"  />
                                <input class="form-control" type="hidden" name="middle_place_1_lat" id="middle_place_1_lat" />
                                <input class="form-control" type="hidden" name="middle_place_2_lat" id="middle_place_2_lat"  />
                                <input class="form-control" type="hidden" name="middle_place_2_lng" id="middle_place_2_lng"  />
                            </div>
                            <div class="drop-location">
                                <input class="form-control plan" type="text" name="destination_place" id="dropoff_plan" value="{{ request()->dropoff }}" placeholder="Dropoff Location" />
                                <input class="form-control" type="hidden" name="destination_place_lat" id="dropoff_plan_latitude" value="{{ request()->dropoff_latitude }}"  />
                                <input class="form-control" type="hidden" name="destination_place_lng" id="dropoff_plan_longitude" value="{{ request()->dropoff_longitude }}"  />
                                <input class="form-control" type="hidden" name="dropoff_plan_location" id="dropoff_plan_location" value="{{ request()->dropoff_location }}"  />
                            </div>


                        <div class="plans-list" id="vehicleData">
                        </div>

                        <div class="payment-selector">
                            <div class="mb-3" id="showPersonal">
                                <a href="#" data-toggle="modal" data-target="#account-options" class="text-info"><i class="fas fa-user-circle mr-2"></i> Personal</a>
                            </div>
                            <div class="mb-3" id="showBusiness">
                                <a href="#" data-toggle="modal" data-target="#account-options" class="text-warning"><i class="fas fa-briefcase mr-2"></i> Business</a>
                            </div>
                            <div id="codeApplied"></div>
                            <span class="open-payment-options" data-toggle="modal" data-target="#payment-options">
                                 @if($checkCard->customer_stripe_id != '')
                                    <img src="{{asset('laravel-website')}}/img/card.jpg" style="height: 20px;width: 20px;" alt=""> Credit <i
                                    class="fas fa-chevron-down ml-1"></i>
                                @else
                                    <img src="{{asset('laravel-website')}}/img/card.jpg" style="height: 20px;width: 20px;" alt=""> Add Card <i
                                    class="fas fa-chevron-down ml-1"></i>
                                @endif
                            </span>
                            <span class="float-right" data-toggle="modal" data-target="#PromoCodes"
                                  style="cursor: pointer" id="promoCodes"><img src="{{asset('laravel-website')}}/img/promo.jpg" width="" height="" alt="Promo Code" />
                                Promo  Code</span>

                        </div>
                        <div class="confirm text-center py-2">
                            <a href="#" class="confirm-btn d-inline-block" id="confirm_cabme">CONFIRM CABme</a>
                        </div>

                            <!-- Payment-Popup -->
                            <div class="modal fade" id="payment-options" tabindex="-1" role="dialog" aria-labelledby="payment-optionsLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header text-center" style="background: #000;border-radius: 0;">
                                            <h5 class="modal-title ml-auto mr-auto text-white" id="payment-optionsLabel">Payment</h5>
                                        </div>
                                        <div class="modal-body">
                                            <div class="pay-items">
                                                <div class="cash"><img src="{{asset('laravel-website')}}/img/money.jpg" alt="" /> Cash
                                                    <input type="radio" name="payment" id="payment_method" value="cash" class="float-right paymentMethod" />
                                                </div>
                                                <div class="cash"><img src="{{asset('laravel-website')}}/img/card.jpg" alt="" /> Credit or Debit Card
                                                    @if($checkCard->customer_stripe_id != '')
                                                    <a class="float-right" href="{{url('/managecard')}}">
                                                        <img  src="{{asset('laravel-website')}}/img/ic_nextscreen@3x.png" alt="" style="width: 20px;height: 25px;" />
                                                    </a>
                                                       <input type="hidden"  name="payment_method" value="credit" id="card" class="float-right" />
                                                    @else
                                                        <span class="text-danger float-right" ><a class="text-danger float-right" href="{{url('/paymentcard')}}">Add</a>
                                                        </span>
                                                        <input type="hidden"  name="payment_method" value="credit" id="card"  class="float-right" />
                                                    @endif
                                                </div>

                                                <div class="cash"><img src="{{asset('laravel-website')}}/img/ic_wallet@2x.png" alt="" /> Wallet
                                                    <input type="radio" name="payment" id="payment_method" value="wallet" class="float-right paymentMethod" /></div>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="button" class="btn btn-link text-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Account-Popup -->
                            <div class="modal fade" id="account-options" tabindex="-1" role="dialog" aria-labelledby="account-optionsLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header text-center" style="background: #000;border-radius: 0;">
                                            <h5 class="modal-title ml-auto mr-auto text-white" id="account-optionsLabel">Payment</h5>
                                        </div>
                                        <div class="modal-body">
                                            <div class="pay-items">
                                                <div class="cash text-info">
                                                    <i class="fas fa-user-circle"></i> Personal
                                                    <input type="radio" checked name="account" id="personalCheck" class="float-right" />
                                                </div>
                                                <div class="cash text-warning">
                                                    @if (isset($businessProfile))
                                                        @if($businessProfile->approval == 'pending')
                                                        <a class=" text-warning" href="{{url('/businessprofilcreate')}}">
                                                            <i class="fas fa-briefcase"></i> Business</a>
                                                        @else
                                                            <a class=" text-warning" href="{{url('/businessprofildetail')}}">
                                                                <i class="fas fa-briefcase"></i> Business</a>
                                                            <input type="hidden" value="" id="company_id" class="company_id"/>
                                                        @endif
                                                    @else
                                                        <a class=" text-warning" href="{{url('/businessprofile')}}">
                                                            <i class="fas fa-briefcase"></i> Business</a>
                                                    @endif
                                                        <input type="radio" name="account" id="businessCheck" class="float-right" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center">
                                            <button type="button" class="btn btn-link text-secondary" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- PromoCodes-Popup -->
                            <div class="modal fade" id="PromoCodes" tabindex="-1" role="dialog" aria-labelledby="PromoCodesLabel"
                                 aria-hidden="true">
                                <div class="modal-dialog" role="document" >
                                    <div class="modal-content" >
                                        <div class="modal-header text-center" style="background: #000;border-radius: 0;">
                                            <h5 class="modal-title ml-auto mr-auto text-white" id="PromoCodesLabel">Apply Promo Code</h5>
                                            <button style="position: absolute;right: 15px;" type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                <span aria-hidden="true" style="color:#fff">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body py-3 py-md-4" id="promocodeData">

                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="rideFare">

                                <input class="form-control" type="hidden" name="rideFare[base_fare]" id="rideFare_basefare" value="" />
                                <input class="form-control" type="hidden" name="rideFare[tax]" id="rideFare_tax"  />
                                <input class="form-control" type="hidden" name="rideFare[distance]" id="rideFare_distance"  />
                                <input class="form-control" type="hidden" name="rideFare[time]" id="rideFare_time"  />
                                <input class="form-control" type="hidden" name="rideFare[surcharges]" id="rideFare_surcharges"  />
                                <input class="form-control" type="hidden" name="rideFare[surcharge_type]" id="rideFare_surcharge_typee"  />
                                <input class="form-control" type="hidden" name="rideFare[night_charges]" id="rideFare_night_charges"  />
                                <input class="form-control" type="hidden" name="rideFare[minimum_fare]" id="rideFare_minimum_fare"  />
                                <input class="form-control" type="hidden" name="rideFare[toll_charge]" id="rideFare_toll_charge"  />
                                <input class="form-control" type="hidden" name="rideFare[cancellation_charges]" id="rideFare_cancellation_charges"  />
                                <input class="form-control" type="hidden" name="rideFare[total_fare]" id="rideFare_total_fare"  />
                                <input class="form-control" type="hidden" name="rideFare[received]" id="rideFare_received"  />
                                <input class="form-control" type="hidden" name="rideFare[platform_fees]" id="rideFareplatform_fees"  />
                                <input class="form-control" type="hidden" name="rideFare[promo_code_id]" id="rideFare_promo_code_id" value="" />
                                <input class="form-control" type="hidden" name="rideFare[promo_code_discount]" id="rideFare_promo_code_discount"  />
                                <input class="form-control" type="hidden" name="rideFare[wallet_debit]" id="rideFare_wallet_debit"  />
                                <input class="form-control" type="hidden" name="rideFare[tip]" id="rideFare_tip" value="" />
                                <input class="form-control" type="hidden" name="rideFare[ride_status]" id="rideFare_ride_status" value="book" />
                                <input class="form-control" type="hidden" name="rideFare[payment_method]" id="rideFare_payment_method"  value="" />
                            </div>
                        </form>
                    </div>
                    <div class="col-12 col-md-8">
                        <div id="map"></div>
                    </div>
                </div>
                <!--//Row-->
            </div>
        </div>

    </section>

    <!--suppress VueDuplicateTag -->
    <script type="text/javascript">



        $('#showPersonal').show();
        $('#showBusiness').hide();

        var here_app_id = '';
        var here_app_code = '';
        var here_api_key = '';

        var pickuplocation;
        var pickuplatitud;
        var pickuplongitude;
        var dropofflocation;
        var pickuplocationval;
        var dropofflocationval;
        var dropofflatitud;
        var dropofflongitude;
        var pickupposition;
        var dropoffposition;

        var base_url = '