@extends('public.layouts.default')

    @section('title')
        | Payment
    @endsection
    @section('stylesheets')
    <style>
        .pass_loader {
        border: 1px solid #f3f3f3;
        border-radius: 50%;
        border-top: 1px solid #ff412d;
        width: 40px;
        height: 40px;
         margin: 0 auto;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
        }

        .tip_amount {
            position: relative;
        }
        .edit-tip-icon-pencil{
            position: absolute;
            right: -15px;
            top: 0;
            cursor: pointer;
        }
        /* Safari */
        @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
        }

        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }
    </style>
    <style>
        #cash-error , #card-error, 
        .validation-message2 {
            color: red;
        }
        #apple-pay-button {
            display: none;
            background-color: black;
            background-image: -webkit-named-image(apple-pay-logo-white);
            background-size: 100% 100%;
            background-origin: content-box;
            background-repeat: no-repeat;
            width: 100%;
            height: 44px;
            padding: 10px 0;
            border-radius: 10px;
        }
        .payment-loader{
            padding: 10px 0px;
            background: #1d9e5f;
        }
        /* spinner/processing state, errors */
        .spinner,
        .spinner:before,
        .spinner:after {
            border-radius: 50%;
        }
        .spinner {
            color: #ffffff;
            font-size: 22px;
            text-indent: -99999px;
            margin: 0px auto;
            position: relative;
            width: 20px;
            height: 20px;
            box-shadow: inset 0 0 0 2px;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
        }
        .spinner:before,
        .spinner:after {
            position: absolute;
            content: "";
        }
        .spinner:before {
            width: 10.4px;
            height: 20.4px;
            background: #1d9e5f;
            border-radius: 20.4px 0 0 20.4px;
            top: -0.2px;
            left: -0.2px;
            -webkit-transform-origin: 10.4px 10.2px;
            transform-origin: 10.4px 10.2px;
            -webkit-animation: loading 2s infinite ease 1.5s;
            animation: loading 2s infinite ease 1.5s;
        }
        .spinner:after {
            width: 10.4px;
            height: 10.2px;
            background: #1d9e5f;
            border-radius: 0 10.2px 10.2px 0;
            top: -0.1px;
            left: 10.2px;
            -webkit-transform-origin: 0px 10.2px;
            transform-origin: 0px 10.2px;
            -webkit-animation: loading 2s infinite ease;
            animation: loading 2s infinite ease;
        }
        
        @-webkit-keyframes loading {
            0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            }
            100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            }
        }
        @keyframes loading {
            0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            }
            100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            }
        }
    </style>
    @endsection
    @section('content')

    <!-- <div class="hero-block-style payment-hero-wrap">
        <h1 class="main-heading">Payment</h1>
    </div> -->
    <div class="padding-wrap" id="internal_start-section">
        <div class="container confirm-page">
            <div class="nav-arrows">
                @include('public.pages.reservation._nav_arrows')
            </div>
            <div class="ride-form home_page_form payment-header_section">
                <h2 class="main-heading">Payment</h2>
                @if(Auth::check() == FALSE)
                    <div class="pay_account">
                            <button type="button" class="primary-main_btn" data-toggle="modal" data-target="#gridSystemModal">Sign in</button>
                    </div>   
                @endif
            </div>
            <div class="payment-blocks font-style-wrap">
                <div class="row">
                    @php

                        $Cost = Helper::getTotalRideCost($rideReservation, $vehicle);
                        $total_distance = Helper::getRideTotalDistance($rideReservation);
                        $is_free = false;
                        // $basePrice = (Helper::checkDistanceStatus($total_distance) == true) ? $vehicle->base_price : 0;
                        $basePrice = 0;
                        $tip_amount = $rideReservation->driver_tip_amount;
                        $coupon_discount = $rideReservation->discount_amount;
                        if($rideReservation->round_trip_detail == null){
                        $Child_sets = ($Settings->child_safety_seat_rate * $rideReservation->child_safety_seat);
                        }else{
                        $Child_sets = ($Settings->child_safety_seat_rate * ($rideReservation->child_safety_seat + $rideReservation->round_trip_detail->child_safety_seat));   
                        }
                        $roundTripPrearrangeCharges = 0;
                        if($rideReservation->round_trip == 1){
                            if ($rideReservation->ride_type == "hourly") {
                                $price = Helper::getHourlyPrice($rideReservation->ride_duration, $vehicle->hourly_price);
                                $Round_trip_discount = (((($price)+($Child_sets)) * $Settings->round_trip_discount/100));
                            } else {
                                $roundTripPrearrangeCharges = Helper::getRoundTripPreArrangedCharges($vehicle->type, $rideReservation);
                                $Round_trip_discount = number_format(((($Cost + $basePrice)+($Child_sets)) * $Settings->round_trip_discount/100),2,'.','');
                            }

                        } else { $Round_trip_discount = 0; }
                           
                        // Coupon Discount
                        if($rideReservation->coupon_code != null && $rideReservation->coupon_value != null){
                            if($rideReservation->coupon_type == 'flat'){
                                $coupon_discount = $rideReservation->coupon_value;
                            }else{
                                $total = $Cost + $Child_sets;
                                $coupon_discount = $total* $rideReservation->coupon_value/100;
                            }
                        }else{ $coupon_discount = 0; }

                        $preArrangedCharges = Helper::getPickUpAirportPreArrangedCharges($vehicle->type, $rideReservation)+$roundTripPrearrangeCharges;
                        $stoppageCharge = $rideReservation->stoppage_charge;
                        if ($rideReservation->round_trip_detail != null) {
                            $stoppageCharge += $rideReservation->round_trip_detail->stoppage_charge;
                        }
                        $singleTripPrearrangeCharges=Helper::getPickUpAirportPreArrangedCharges($vehicle->type, $rideReservation);
                        if($isFirstRide == 'true'){
                            $ride_discount = $Settings->first_ride_discount;
                            $amount = number_format($Cost + $basePrice + $Child_sets - $Round_trip_discount - $coupon_discount - $ride_discount,2,'.','');
                            if($amount <=0)
                            {
                                $amount = 0 ;
                                $is_free = true;
                            }
                            $Tax = number_format(($amount * $Settings->tax/100),2,'.','');
                            if ($rideReservation->ride_type == "hourly") {
                                $price = Helper::getHourlyPrice($rideReservation->ride_duration, $vehicle->hourly_price);
                                $Tax = (($price + $Child_sets - $Round_trip_discount - $ride_discount) * $Settings->tax/100);
                                $Total = $price + $Child_sets - $Round_trip_discount - $ride_discount + $Tax + $preArrangedCharges + $stoppageCharge;
                            } else {
                                $Total = $amount + $Tax + $preArrangedCharges + $stoppageCharge;
                            }
                        }else{
                            $amount = number_format($Cost + $basePrice + $Child_sets - $Round_trip_discount - $coupon_discount,2,'.','');
                            if($amount <=0)
                            {
                                $amount = 0;
                                $is_free = true;
                            }
                            $Tax = number_format(($amount * $Settings->tax/100),2,'.','');
                            if ($rideReservation->ride_type == "hourly") {
                                $price = Helper::getHourlyPrice($rideReservation->ride_duration, $vehicle->hourly_price);
                                $Tax = (($price + $Child_sets - $Round_trip_discount) * $Settings->tax/100);
                                $Total = $price + $Child_sets - $Round_trip_discount + $Tax + $preArrangedCharges + $stoppageCharge;
                            } else {
                                $Total = $amount + $Tax + $preArrangedCharges + $stoppageCharge;
                            }
                        }
                        
                        $tip_percentage = $rideReservation->driver_tip_percentage;
                        $tip_amount = round($Total*$tip_percentage/100,2);
                        $Total =  $Total + $tip_amount;
                        
                        $amount1 = number_format($Cost + $basePrice + $Child_sets - $Round_trip_discount - $coupon_discount - $Settings->first_ride_discount,2,'.','');
                        if($amount1 <=0)
                        {
                            $amount1 = 0;
                        }
                        $taxAmount = number_format(($amount1 * $Settings->tax/100),2, '.', '');
                        $tipAmount = number_format((($amount1 + $taxAmount + $preArrangedCharges + $stoppageCharge ) * $rideReservation['driver_tip_percentage']/100), 2, '.', '');
                        // $getTotal = number_format($Cost + $basePrice + $Child_sets - $Round_trip_discount - $Settings->first_ride_discount + $taxAmount + $preArrangedCharges + $stoppageCharge + $tipAmount, 2, '.', '');
                        $couponDis = 0;
                        // if($rideReservation->coupon_type != null && $rideReservation->coupon_type == 'flat')
                        // {
                        //   $couponDis = $rideReservation->discount_amount;
                        // }else{
                        //  $couponDis =  $getTotal*$rideReservation->coupon_value/100;
                        // }
                        $totalAmount = number_format($amount1 + $taxAmount + $preArrangedCharges + $stoppageCharge + $tipAmount, 2, '.', '');   
                    @endphp
                    <div class="col-md-6 payment_description-section">
                        <div class="right-panel">
                            <div class="main-head">
                                <h3 class="sub-heading text-left">Ride Summary</h3>
                                <h3 class="sub-heading right-side">Total</h3>
                                <div class="clearfix"></div>
                            </div>
                            <div class="main-body">
                            <h4 class="input-title text-left">Ride ID {{$rideReservation->id}}</h4>
                            @if ($rideReservation->ride_type == "hourly")
                            <h3 class="input-title right-side">${{ number_format((Helper::getHourlyPrice($rideReservation->ride_duration, $vehicle->hourly_price)),2,'.','') }}</h3>
                            @else
                            <h3 class="input-title right-side">${{ number_format(($Cost+$basePrice),2,'.','') }}</h3>
                            @endif
                            <div class="clearfix"></div>
                            <div class="address_block">
                                <p>
                                    @if($rideReservation->pickup_airport_id == Null)
                                        {{ $rideReservation['pickup_address'] }}
                                    @else
                                        {!! html_entity_decode(Helper::getAirportName($rideReservation->pickup_airport_id)) !!}<br>
                                        <i>Terminal:</i>  {{ Helper::getTerminalName($rideReservation['pickup_terminal_id']) }}
                                        <br>
                                    @endif
                                </p>
                                <p><strong>To</strong></p>
                                <p>
                                    @if($rideReservation->droppof_airport_id == NULL)
                                        {{ $rideReservation['dropof_address'] }}
                                    @else
                                        {!! html_entity_decode(Helper::getAirportName($rideReservation->droppof_airport_id)) !!}<br>
                                        {{-- <i>Terminal:</i> {{ Helper::getTerminalName($rideReservation['dropof_terminal_id']) }}
                                        <br> --}}
                                    @endif
                                </p>
                                <p> {{ date('D, M j Y', strtotime($rideReservation->pickup_date))}} @ {{$rideReservation->pickup_time}}<p>
                            </div>
                            @if ($rideReservation->round_trip == 1 && $rideReservation->round_trip_detail != null)
                                <h4 class="text-danger summary_roundtrip_titile">Round Trip</h4>
                                <div class="address_block">
                                    <p>
                                        @if($rideReservation->round_trip_detail->pickup_airport_id == Null)
                                            {{ $rideReservation->round_trip_detail['pickup_address'] }}
                                        @else
                                            {!! html_entity_decode(Helper::getAirportName($rideReservation->round_trip_detail->pickup_airport_id)) !!}<br>
                                            {{-- <i>Terminal:</i>  {{ Helper::getTerminalName($rideReservation->round_trip_detail['pickup_terminal_id']) }}
                                            <br> --}}
                                        @endif
                                    </p>
                                    <p><strong>To</strong></p>
                                    <p>
                                        @if($rideReservation->round_trip_detail->droppof_airport_id == NULL)
                                            {{ $rideReservation->round_trip_detail['dropof_address'] }}
                                        @else
                                            {!! html_entity_decode(Helper::getAirportName($rideReservation->round_trip_detail->droppof_airport_id)) !!}<br>
                                            {{-- <br> --}}
                                        @endif
                                    </p>
                                    <p> {{ date('D, M j Y', strtotime($rideReservation->round_trip_detail->pickup_date))}} @ {{$rideReservation->round_trip_detail->pickup_time}}<p>
                                </div>
                            @endif
                        </div>
                        {{-- <div class="tax-body">
                            <h3 class="input-title text-left">Base Price<span class="gst"></span></h3>

                            <p class="right-side">${{ number_format($basePrice,2,'.','')  }}</p>
                            <div class="clearfix"></div>
                        </div> --}}
                        @if($Settings->child_safety_seat == 1)
                            @if($rideReservation->round_trip_detail == null)
                                <div class="tax-body">
                                    <h3 class="input-title text-left">Child seats <span class="gst"> ({{$rideReservation->child_safety_seat}})</span></h3>

                                    <p class="right-side">${{ number_format($Child_sets,2,'.','') }}</p>
                                    <div class="clearfix"></div>
                                </div>
                            @else 
                                <div class="tax-body">
                                    <h3 class="input-title text-left">Child seats <span class="gst"> ({{$rideReservation->child_safety_seat+$rideReservation->round_trip_detail->child_safety_seat}}) (Include Round Trip)</span></h3>

                                    <p class="right-side">${{ number_format($Child_sets,2,'.','') }}</p>
                                    <div class="clearfix"></div>
                                </div>
                            @endif
                        @endif
                        @if($rideReservation->round_trip == 1)
                            <div class="tax-body">
                                <h3 class="input-title text-left">Round Trip Discount <span class="gst">({{ $Settings->round_trip_discount }}%)</span> </h3>
                                <p class="right-side">${{ number_format($Round_trip_discount,2,'.','')  }}</p>
                                <div class="clearfix"></div>
                            </div>
                        @endif
                        @if($rideReservation->discount_amount != null)
                        <div class="tax-body">
                            <div class="coupon" style="display: flex; align-items:center; justify-content:space-between;">
                                <div class="">
                                    <h3 class="input-title text-left font-semibold coupon-btn-wrap"><i class="fas fa-badge-percent" aria-hidden="true"></i> {{$rideReservation->coupon_code}}</h3>
                                    <span style="margin-left: 5px" class="text-green font-semibold">(Offer Applied)</span>
                                </div>
                                <p class="right-side"><a style="color:#ff412d; text-decoration:none;" class="" href="{{ url('/remove-coupon/' . $rideReservation['id']) }}">Remove</a></p>
                            </div>
                        </div>
                        @else
                        <div class="tax-body" style="display: flex; justify-content: space-between; align-items: center;">
                        <h3 class="input-title text-left"><i class="fas fa-badge-percent" aria-hidden="true"></i> Apply Coupon</h3>
                        <p><button type="button" class="btn btn-primary blue-btn right-side" id="openCouponModal">Apply</button></p>
                        </div>
                        @endif
                        @if($rideReservation->discount_amount != null)
                        <div class="tax-body">
                            @if($rideReservation['coupon_type'] == 'flat')
                            <h3 class="input-title text-left">Coupon Discount <span class="gst"></span></h3>
                            @else
                            <h3 class="input-title text-left">Coupon Discount <span class="gst">({{$rideReservation['coupon_value']}}%)</span></h3>
                            @endif
                            <p class="right-side coupon_discount" id="coupon-discount">
                                <span id="couponDiscount">${{ number_format($coupon_discount,2,'.','') }}</span>
                            </p>
                            {{-- <p class="right-side coupon_discount" style="display:none;" id="coupon-discount-new">
                                <span id="couponDis"></span>
                            </p> --}}
                            <div class="clearfix"></div>
                        </div>  
                        @endif
                        @if($isFirstRide == 'true')
                            @if($Settings->first_ride_discount > 0)
                            <div class="tax-body">
                                <h3 class="input-title text-left">First Ride Discount<span class="gst"></span></h3>
                                <p class="right-side">${{ number_format($ride_discount,2,'.','')  }}</p>
                                <div class="clearfix"></div>
                            </div>
                            @endif
                        @else
                            <div class="tax-body" id="create-account" style="display: none">
                                <h3 class="input-title text-left">First Ride Discount<span class="gst"></span></h3>
                                <p class="right-side">${{number_format($Settings->first_ride_discount,2, '.', '')}}</p>
                                <div class="clearfix"></div>
                            </div>
                        @endif
                        <div class="tax-body">
                            <h3 class="input-title text-left">Tax <span class="gst">({{$Settings->tax}}%)</span></h3>

                            <p class="right-side tax-amount">${{ number_format($Tax,2,'.','') }}</p>
                            <div class="clearfix"></div>
                        </div>
                        <div class="tax-body">
                            <h3 class="input-title text-left">Pre Arranged Charges <i class="fa fa-question-circle-o" data-toggle="tooltip" data-placement="top" title ="Toronto Pearson Airport charges a Pre-Arrange fees when you are pre-arranging a taxi or limo from the airport.

                            Designated pick-up areas for pre-arranged taxis and limos:

                                <p>Terminal 1: Door A</p>
                                <p>Terminal 3: Door A</p>" data-html="true"></i>
                            </h3>
                            <p class="right-side">${{ number_format($preArrangedCharges,2,'.','') }}</p>
                            <div class="clearfix"></div>
                        </div>
                        {{-- @if (Helper::getPickUpAirportPreArrangedCharges($vehicle->type, $rideReservation) != 0)
                        @endif --}}
                        {{-- @if($rideReservation->pickup_airport_id == env('PEARSON_AIRPORT_ID'))
                        @if(Helper::getPreArrangedCharges($vehicle->type) != 0)
                        <div class="tax-body">
                            <h3 class="input-title text-left">Pre Arranged Charges <i class="fa fa-question-circle-o" data-toggle="tooltip" data-placement="top" title ="Plan ahead and pre-arrange your Pearson Airport taxi, limo or bus before your arrival.

                                You don’t need to pre-book a taxi or limo if you’re arriving at Pearson Airport, but it is an option if you like to plan ahead. To pre-arrange a taxi or limo, contact the company of your choice. When you arrive at the airport, go to the designated area and let the dispatcher know you are waiting for your ride.

                                Designated pick-up areas for pre-arranged taxis and limos:

                                    <p>Terminal 1: Door A</p>
                                <p>Terminal 3: Door A</p>" data-html="true"></i></h3>
                                    <p class="right-side">${{ number_format(Helper::getPreArrangedCharges($vehicle->type),2,'.','') }}</p>
                                    <div class="clearfix"></div>
                                </div>
                                @endif
                            @endif --}}

                            <input type="hidden" class="text-input border-style required" name="guest_id" value="{{session()->get('guest_id')}}">

                            @if ($stoppageCharge != null)
                                <div class="tax-body">
                                    <h3 class="input-title text-left">Stoppage Charges</h3>

                                    <p class="right-side">${{ number_format($stoppageCharge,2,'.','') }}</p>
                                    <div class="clearfix"></div>
                                </div>  
                            @endif
                            @if($rideReservation['driver_tip_percentage'] != 0 && $Settings->tip_status == 1)
                                <div class="tax-body">
                                    <h3 class="input-title text-left">Tip <span class="gst tipPercentage">({{$rideReservation['driver_tip_percentage']}}%)</span></h3>

                                    <p class="right-side tip_amount" id="tip-amount">
                                        <span id="tipAmount">${{ number_format($tip_amount,2,'.','') }}</span>
                                    </p>
                                    <p class="right-side tip_amount" style="display:none;" id="tip-amount-new">
                                        <span id="tipAmount"></span>
                                    </p>
                                    <div class="clearfix"></div>
                                </div>
                            @endif  

                            {{Helper::activity('Payment Page','Payment Page',session()->get('reservation_id'),null,$Total > 0 ? number_format($Total,2) : 0,null)}}
                            <div class="main-footer" id="footer-total">
                                <h3 class="sub-heading text-left">Grand Total</h3>
                                <h3 class="sub-heading right-side total-amount">${{ $Total > 0 ? number_format($Total,2) : 0 }}</h3>
                                <div class="clearfix"></div>
                            </div>
                            <span class="hidden-content" id="grand-total">{{ $Total > 0 ? number_format($Total,2) : 0 }}</span>


                            <div class="clearfix"></div>
                            <div class="form-group text-right secure-icon">
                                <img src="{{asset('storage/images/home/secure.png') }}" alt="Secure">
                                <img src="{{asset('storage/images/home/norton.png') }}" alt="Norton">
                            </div>               
                        </div>
                    </div>
                    <div class="col-md-6 account-payment_section">
                        @if(Auth::check() == FALSE)
                            <p class="sign_btn_show">Already have an account? <a href="" data-toggle="modal" data-target="#gridSystemModal">sign-in</a></p>
                        @endif
                        <div class="left-panel">
                            <h3 class="sub-heading">Complete your Payment Details Below </h3>
                            <h4 class="input-title">Ride & Billing Information</h4>
                            @error('msg')
                            <p class="validation-message">{{ $message }}</p>
                            @enderror
                            <div class="payment_form-section">
                                <!-- <div class="has_email">
                                        <label for="email">Email</label>
                                            {{ Form::text('email', '', ['class' => 'text-input border-style','placeholder'=>'Email', 'id' => 'has_email' ]) }}
                                        <span class="email-validation-message"></span>
                                    </div> -->
                                @if(Auth::check() == FALSE)
                                <div class="has_account">
                                    <form method="POST" action="{{ route('login') }}">
                                        @csrf
                                        <div class="form-group val_label">
                                        <label  class="title">Email</label>
                                            <input id="email" type="text" class=" @error('email') is-invalid @enderror text-input border-style require email" name="email" value="{{ old('email') }}"  autocomplete="email" autofocus>

                                            @error('email')
                                                <span class="invalid-feedback validation-message" role="alert">
                                                {{ $message }}
                                                </span>
                                            @enderror
                                            <span class="message"></span>
                                            <span class="validation-message"></span>
                                            <span id="email-validation" class="validation-message2"></span>
                                        </div>
                                        <div class="has_email">
                                        <div class="pass_loader"></div>
                                            <div class="form-group">
                                                <label class="title">Password</label>
                                                <input id="password" type="password" class=" @error('password') is-invalid @enderror text-input border-style" name="password"  autocomplete="current-password" >

                                                @error('password')
                                                    <span class="invalid-feedback validation-message" role="alert">
                                                    {{ $message }}
                                                    </span>
                                                @enderror
                                                <span class="email-validation-message"></span>
                                                </div>
                                                <div class="form-group">
                                                <button class="primary-main_btn">Sign In</button>
                                                <h5 class="forget-text">
                                                        @if (Route::has('password.request'))
                                                            <a class="btn btn-link" href="{{ route('password.request') }}">
                                                            {{ __('Forgot Your Password?') }}
                                                            </a>
                                                        @endif
                                                    </h5>
                                                </div>
                                        </div>
                                    </form>
                                </div>
                                @endif

                                {{ Form::open(['route' => 'stripe.payment', 'method' => 'post', 'id'=>'payment-form']) }}

                                {{ csrf_field() }}
                                @if(Auth::check() == TRUE)
                                    <div class="form-group val_label">
                                    <label for="first_name">Email</label>
                                        {{ Form::text('email', $user == null ? (old('email')?old('email'):null) : $user['email'], ['class' => 'text-input border-style require','placeholder'=>'', 'id'=>"email"]) }}
                                        <span class="validation-message"></span>
                                        <span id="email-validation" class="validation-message2"></span>
                                    </div>
                                @else
                                    {{ Form::hidden('email', '', ['class' => 'text-input border-style require','placeholder'=>'', 'id'=> 'new_email']) }}
                                @endif

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group val_label">
                                            <label for="first_name">First Name</label>
                                            {{ Form::text('first_name', $user == null ? (old('first_name')?old('first_name'):null) : $user['first_name'], ['class' => 'text-input border-style require','placeholder'=>'', 'id'=> 'first_name']) }}
                                            <span id="first-name-validation" class="validation-message2"></span>
                                            <span class="validation-message">
                                                @if ($errors->has('first_name'))
                                                {{ $errors->first('first_name') }}
                                            @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group val_label">
                                        <label for="last_name">Last Name</label>
                                        {{ Form::text('last_name',  $user == null ? (old('last_name')?old('last_name'):null) : $user['last_name'], ['class' => 'text-input border-style require','placeholder'=>'', 'id'=> 'last_name']) }}
                                            <span class="validation-message">
                                            <span id="last-name-validation" class="validation-message2"></span>
                                            
                                                @if ($errors->has('last_name'))
                                                {{ $errors->first('last_name') }}
                                            @endif
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="form-group val_label">
                                        <label for="phone">Phone</label>
                                        {{ Form::text('phone',  $user == null ? (old('phone')?old('phone'):null) : $user->userDetail['phone'], ['class' => 'text-input border-style require','placeholder'=>'', 'id'=> 'phone']) }}
                                            <span id="phone-validation" class="validation-message2"></span>

                                            <span class="validation-message">
                                                @if ($errors->has('phone'))
                                                {{ $errors->first('phone') }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group val_label">
                                                {{ Form::Label('address', 'Address') }}
                                                {{ Form::text('address', $user == null ? (old('address')?old('address'):null) : $user->userDetail['address'], array('id'=>'address', 'class'=>'text-input border-style require', 'id'=> 'address')) }}
                                                <span id="address-validation" class="validation-message2"></span>
                                                
                                                <span class="validation-message">
                                                    @if ($errors->has('address'))
                                                    {{ $errors->first('address') }}
                                                    @endif
                                                </span>
                                                {{ Form::hidden('latitude', $user == null ? (old('latitude')?old('latitude'):null) : $user->userDetail['latitude'], ['class' => 'form-control','id'=>'latitude']) }}
                                                {{ Form::hidden('longitude',  $user == null ? (old('longitude')?old('longitude'):null) : $user->userDetail['longitude'], ['class' => 'form-control','id'=>'longitude']) }}

                                                @include('public.includes.error-message',['key' => 'latitude'])
                                                @include('public.includes.error-message',['key' => 'longitude'])
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group val_label">
                                            {{ Form::Label('city', 'City') }}
                                            {{ Form::text('city',$user == null ? (old('city')?old('city'):null) : $user->userDetail['city'], array('id'=>'city', 'class'=>'text-input border-style require', 'id'=> 'city')) }}
                                            <span id="city-validation" class="validation-message2"></span>
                                            
                                            <span class="validation-message">
                                                @if ($errors->has('city'))
                                                {{ $errors->first('city') }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group val_label">
                                            {{ Form::Label('state', 'Province') }}
                                            {{ Form::text('state',$user == null ? (old('state')?old('state'):null) : $user->userDetail['state'], array('id'=>'state', 'class'=>'text-input border-style require', 'id'=> 'state')) }}
                                            <span id="state-validation" class="validation-message2"></span>
                                            
                                            <span class="validation-message">
                                                @if ($errors->has('state'))
                                                {{ $errors->first('state') }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group val_label">
                                            {{ Form::Label('country', 'Country') }}
                                            {{ Form::text('country',$user == null ? (old('country')?old('country'):null) : $user->userDetail['country'], array('id'=>'country', 'class'=>'text-input border-style require')) }}
                                            <span id="country-validation" class="validation-message2"></span>
                                            
                                            <span class="validation-message">
                                                @if ($errors->has('country'))
                                                {{ $errors->first('country') }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group val_label">
                                            {{ Form::Label('pincode', 'Postal Code') }}
                                            {{ Form::text('pincode',$user == null ? (old('pincode')?old('pincode'):null) : $user->userDetail['pincode'], array('id'=>'pincode', 'class'=>'text-input border-style require', 'id'=> 'pincode')) }}
                                            <span id="pincode-validation" class="validation-message2"></span>
                                            <span class="validation-message">
                                                @if ($errors->has('pincode'))
                                                {{ $errors->first('pincode') }}
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            @if(Auth::check() == FALSE)
                            <div class="create_account">
                                <div class="checkbox-input clearfix ">
                                    {!! Form::checkbox('new_account','on', false ,['id'=>'new_account']) !!}
                                    {!! Form::label('new_account', 'Create a new account ?',['class'=>'input-title ']) !!}
                                </div>
                                <div class="row password_field payment_form-section">
                                    <div class="col-sm-6">
                                    <div class="form-group">
                                        {{ Form::Label('password', 'Password') }}
                                            <input id="new_password" type="password" class="text-input border-style required" name="password" id="password">
                                            @include('public.includes.error-message',['key' => 'password'])
                                    </div>
                                    </div>
                                    <div class="col-sm-6">
                                    <div class="form-group">
                                        {{ Form::Label('password-confirm', 'Confirm Password') }}
                                            <input id="confirm_password" type="password" class="text-input border-style required" name="password_confirmation" id="confirm_password">
                                            @include('public.includes.error-message',['key' => 'password-confirm'])
                                    </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div id="password_field_error" style="margin-bottom: 10px;"></div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @if ($Settings && $Settings->pay_by_cash == 1)
                            @if($Total > 0)
                                <div style="margin: 15px 0;">
                                    <input type="radio" name="payment_method" id="pay_by_card" value="pay_by_card" auth="{{Auth::check()}}" card-saved="{{(Auth::check() && Auth::user()->user_stripe_details != null) ? Auth::user()->user_stripe_details->id: ''}}" checked> Pay By Card
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input type="radio" name="payment_method" id="pay_by_cash" value="pay_by_cash" @if($Total == 0) checked @endif> Pay Driver
                                </div>
                                @endif
                            @endif
                            <div class="payment-detail-card">
                                <h4 class="input-title" id="payment-info">Payment Information</h4>
                                <div class="payment-detail-card gpay_btn" id="container"></div>
                                <div id="payment-request-button">
                                    <!-- A Stripe Element will be inserted here. -->
                                </div> 
                                <div id="payment-modal">
                                    <div class="panel-body mt-3">
                                        
                                                {{-- @if (Auth::check() && Auth::user()->user_stripe_details)
                                                <p class="choose-text Payment">Choose Method</p>
                                                    <div class="Payment Methods mb-2">
                                                        <div class="card-type">
                                                            <input id="card_token" type="radio" class="form-control cs-radio required" name="card_token" value="new" {{((!Auth::user()->user_stripe_details->stripe_cards()->first())?'checked="checked"':'')}}>
                                                            <label for="card_token">New</label>
                                                            <span class="help-block"><strong></strong></span>
                                                            @if ($errors->has('card_token'))
                                                                <span class="help-block">
                                                                    <strong>{{ $errors->first('card_token') }}</strong>
                                                                </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif --}}

                                        <div class='new-card'>
                                            {{-- <div class="table-responsive">
                                                <table class="table table-bordered">
                                                    <tbody>
                                                        <tr>
                                                            <td class="card-name">  {{ Form::text('name_on_card', old('name_on_card') , ['placeholder' => 'Name on Card', 'class'=> 'required', 'autocomplete'=>'off'])}}</td>
                                                            <td class="card-no"><i class="fa fa-credit-card"></i> {{ Form::text('card_no',  old('card_no')  , ['placeholder' => 'Card Number', 'class'=> 'required', 'autocomplete'=>'off'])}}</td>
                                                        </tr>
                                                        <tr>
                                                            <td class="month-year">  {{ Form::text('card_expire_date', old('card_expire_date') , ['placeholder' => 'MM', 'autocomplete'=>'off'])}} /  {{ Form::text('ccExpiryYear',  old('ccExpiryMonth')  , ['placeholder' => 'YY', 'class'=> 'required',  'autocomplete'=>'off'])}}</td>
                                                            <td class="cvv">{{ Form::text('cvvNumber', old('cvvNumber') , ['placeholder' => 'CVC', 'class'=> 'required', 'autocomplete'=>'off'])}}</td>

                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div> --}}
                                            <!-- New Design -->
                                            <div class="card-detail-new">
                                                <div id="payment-element">
                                                    <!--Stripe.js injects the Payment Element-->
                                                </div>
                                                {{-- <div class="form-group">
                                                    {{Form::label('card-holder', 'Cardholder name', ['class' => 'label'])}}
                                                    <div class="card-number form-icon">
                                                        {{ Form::text('name_on_card', old('name_on_card') , ['placeholder' => 'Name on Card', 'id'=> 'card-holder', 'class'=> 'form-control required', 'autocomplete'=>'off'])}}
                                                    </div>
                                                </div>   --}}
                                                {{-- <div class="form-group">
                                                    {{Form::label('card-number', 'Card number', ['class' => 'label'])}}
                                                    <div class="card-holder form-icon card_icons">
                                                    <div id="card-number-element" class="form-control"></div>
                                                    <img src="{{asset('storage/images/home/visa.png') }}" alt="Visa">
                                                    </div>
                                                </div>  --}}
                                                <div class="form-group form-row">
                                                    {{-- <div class="col">
                                                        {{Form::label('expire-month', 'Expiry Date', ['class' => 'label'])}}
                                                        <div class="card-expire form-icon">
                                                            <div id="card-expiry-element" class="form-control"></div>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        {{Form::label('cvv-number', 'CVV', ['class' => 'label'])}}
                                                        <div class="secure-code form-icon">
                                                            <div id="card-cvc-element" class="form-control"></div>
                                                        </div>
                                                    </div> --}}
                                                    <div>
                                                    <input type="hidden" id="stripe_token" name="stripe_token" />
                                                    <input type="hidden" id="stripe_customer" name="stripe_customer" />
                                                    {{ Form::hidden('amount', $Total > 0 ? $Total : 0)}}
                                                    {{ Form::hidden('total_distance', Helper::getRideTotalDistance($rideReservation) > 0 ? Helper::getRideTotalDistance($rideReservation) : 0)}}
                                                    {{ Form::hidden('vehicle_base_price', (Helper::checkTotalDistanceStatus($rideReservation) == true) ?  $vehicle->base_price : 0)}}
                                                    {{Form::hidden('vehicle_rate', $vehicle->rate > 0 ? $vehicle->rate : 0)}}
                                                    {{ Form::hidden('child_safety_seat_rate', $Child_sets > 0 ? $Child_sets : 0)}}
                                                    {{Form::hidden('first_ride_discount', $isFirstRide == 'true' ? $ride_discount : 0 )}}
                                                    {{Form::hidden('round_trip_discount', $Round_trip_discount > 0 ? $Round_trip_discount : 0)}}
                                                    {{Form::hidden('cost', $Cost > 0 ? $Cost : 0)}}
                                                    {{Form::hidden('preArrangedCharges', $preArrangedCharges > 0 ? $preArrangedCharges : 0)}}
                                                    {{Form::hidden('roundTripPrearrangeCharges', $roundTripPrearrangeCharges > 0 ? $roundTripPrearrangeCharges : 0)}}
                                                    {{Form::hidden('singleTripPrearrangeCharges', $singleTripPrearrangeCharges > 0 ? $singleTripPrearrangeCharges : 0)}}
                                                    {{Form::hidden('tax', $Tax > 0 ?  $Tax : 0)}}
                                                    {{Form::hidden('is_first_ride',$isFirstRide )}}
                                                    {{Form::hidden('tip_amount', $tip_amount)}}
                                                    {{Form::hidden('is_free', $is_free)}}
                                                    {{Form::hidden('coupon_discount', $coupon_discount)}}
                                                    {{ Form::hidden('child_safety_seat_cost', $rideReservation->child_safety_seat ? $Settings->child_safety_seat_rate * $rideReservation->child_safety_seat : 0)}}
                                                    {{ Form::hidden('round_child_safety_seat_cost', $rideReservation->round_trip_detail ? $Settings->child_safety_seat_rate * $rideReservation->round_trip_detail->child_safety_seat : 0)}}
                                                    </div>
                                                </div> 
                                            </div>
                                        </div>
                                        <div id="card-error" class="text-danger"></div>
                                        <div id="payment-success" class="text-success"></div>                                      
                                        {{-- @if ($errors->any())
                                            <div class="alert alert-danger" id="alert" error-count={{$errors->count()}}>
                                                <ul>
                                                    @foreach ($errors->all() as $error)
                                                        <li>{{ $error }}</li>
                                                    @endforeach
                                                </ul>
                                            </div><br />
                                        @endif --}}
                                        <div class="payment-loader" id="payment-loader">
                                            <div class="spinner" id="spinner"></div>
                                        </div>
                                        <div id="cash-error" class="text-danger"></div>
                                        @if($Total > 0)
                                        <div class="form-group text-center">
                                            @php $tot = $Total > 0 ? $Total : 0; @endphp
                                            {{ Form::button('Pay Now', ['name'=>'payment_popup','class'=>'primary-main_btn', 'id'=>'card-payment']) }}
                                            <br>
                                            {{ Form::submit('Confirm Booking', ['name'=>'payment_popup','class'=>'primary-main_btn mt-2', 'id'=>'cash-payment']) }}
                                        </div>
                                        @else
                                        {{ Form::submit('Confirm Ride', ['name'=>'payment_popup','class'=>'primary-main_btn mt-2', 'id'=>'free_ride']) }}
                                        @endif
                                        @if(Auth::check() == TRUE)
                                        <div class="form-group text-center" id="pay-later">
                                            <a href="{{ url('/') }}/save-and-pay-later" class="create-acc-btn">Save & Pay Later</a>
                                        </div>
                                        @endif
                                        {{ Form::close() }}
                                    </div>
                                    {{-- <div class="form-group text-center">
                                        <img src="{{asset('storage/images/home/visa.png') }}" alt="Visa">
                                    </div>  --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<!-- Model start -->
<div class="modal fade" role="dialog" aria-label="exampleModalLabel" aria-hidden="true" id="gridSystemModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal_login">
            <div class="ride_book-form">
                <div class="modal-header">
                <h2 class="login-heading">Rydeus Login</h2>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
                <div class="modal-body">
                    <div class="login-section">
                <!-- login form  start -->
             
                    
                      
                            <h3 class="verify-heading">REGISTERED CUSTOMERS</h3>
                                    <p class="mute-text">If you have an account, sign in with your email address </p>
                                    <form method="POST" action="{{ route('login') }}">
                                        @csrf
                                        <div class="form-group">
                                        <label  class="title">Email</label>
                                        <input id="email" type="text" class=" @error('email') is-invalid @enderror text-input border-style" name="email" value="{{ old('email') }}"  autocomplete="email" autofocus required>

                                            @error('email')
                                                <span class="invalid-feedback validation-message" role="alert">
                                                {{ $message }} 
                                                </span>
                                            @enderror
                                            </div>
                                            <div class="form-group">
                                            <label class="title">Password</label>
                                            <input id="password" type="password" class=" @error('password') is-invalid @enderror text-input border-style" name="password"  autocomplete="current-password" required>

                                            @error('password')
                                                <span class="invalid-feedback validation-message" role="alert">
                                                {{ $message }}
                                                </span>
                                            @enderror
                                            </div>
                                        <div class="text-left form-group">
                                            <input class="remember-box" type="checkbox" name="remember" id="remember"  {{ old('remember') ? 'checked' : '' }}><label for="remember" class="small-text">Remember Me</label>
                                        </div>
                                        <div class="form-group">
                                            <div class="recaptcha">
                                                {!! app('captcha')->display() !!}
                                            </div>
                                            @error('recaptcha')
                                                <span class="invalid-feedback validation-message" role="alert">
                                                {{ $message }}
                                                </span>
                                            @enderror
                                            <span class="validation-error"></span>
                                        </div>
                                            <button class="sign_in-btn"><i class="fa fa-sign-in"></i> Sign In</button>
                                            <h5 class="forget-text">
                                            @if (Route::has('password.request'))
                                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                                {{ __('Forgot Your Password?') }}
                                                </a>
                                            @endif
                                        </h5>
                                    </form>

                             
                       
                        </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Coupon Modal -->
<div id="couponModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="couponModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="couponModalLabel">Available Coupons</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="couponMessage"></div>
                
                <!-- Start of the form -->
                <form id="couponForm" method="POST" action={{route('apply.coupon')}}>
                    {{ csrf_field() }}
                    <div id="coupon">
                        <!-- Coupon details with checkbox will be dynamically inserted here -->
                    </div>

                    <input type="hidden" id="couponCodeInput" name="coupon_code">
                    <input type="hidden" id="emailInput" name="email">
                    <input type="hidden" id="totalInput" name="total">
                    <input type="hidden" id="RideIDInput" name="ride_id">
                </form>
                <!-- End of form -->

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-sm blue-btn" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
    
  <script src="https://js.stripe.com/v3/"></script>
  <script src="{{ asset('js/googlepay.js') }}"></script>
  <script src="{{ asset('js/applePayS3.js') }}"></script>
  <script src="https://pay.google.com/gp/p/js/pay.js" onload="onGooglePayLoaded()"></script>

@parent
    <script>
    $(document).ready(function () {
        
        $('#openCouponModal').click(function() {
            var email = $('input[name="email"]').val();
            $('#email-validation').text('');
            var regex =  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
            var total = '{{ number_format($Cost+$Child_sets,2,'.','')}}'; 
            var rideID = '{{ $rideReservation->id }}'; 
            var is_valid = 0;

            if(email == ""){
                $('input[name="email"]').siblings('.validation-message').html('Enter your email address to check for eligible coupons');
                is_valid++;
            }else if(!regex.test(email)){
                $('input[name="email"]').siblings('.validation-message').html('Please enter a valid email.');
                is_valid++;
            }else{
                $('input[name="email"]').siblings('.validation-message').html('');
            }

            if(is_valid == 0)
            {   
                $.ajax({
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url:'/get-coupon-discounts',
                dataType: "json",
                data: {email: email,total:total},
                success: function (response) {
                    if(response.success ==  true)
                    {   
                        console.log(response);
                        var coupon = response.couponDetail;
                         
                        var couponHtml = `
                            <div class="coupon-bar">
                                <div class="name-coupon-wrap">
                                    <span class="coupon_code"> ${coupon.coupon_code}</span> <span class="coupon_name"><strong>Coupon:</strong> ${coupon.coupon_name} </span>
                                </div>
                                <div>
                                    <button class="btn btn-primary btn-sm apply-coupon" data-coupon="${coupon.coupon_code}">Apply</button>
                                </div>
                            </div>
                        `;
                        $('#coupon').html(couponHtml);
                        if (response.disable === true) {
                            // Disable the button if disable is true
                            $('.apply-coupon').attr('disabled', true);
                            $('.apply-coupon').addClass('disabled');
                            var errorMessageHtml = `
                                <p style="color: red; margin-top: 10px; font-size: 14px;">
                                    The coupon is valid only if the minimum ride charge exceeds $${coupon.minimum_ride_value}.
                                </p>
                            `;
                            $('#coupon').append(errorMessageHtml);
                        }
                         
                        $('.apply-coupon').click(function() {
                            var couponCode = $(this).data('coupon');

                            $('#couponCodeInput').val(couponCode);
                            $('#emailInput').val(email); 
                            $('#totalInput').val(total);
                            $('#RideIDInput').val(rideID); 
                            $('.coupon-bar').removeClass('selected'); 
                            $(this).addClass('selected');

                            $('#couponForm').submit();
                        });
                       
                    }else{
                        $('#coupon').html('<p class="no-coupon" style="color:red">' + response.msg + '</p>');
                    }

                    $('#couponModal').modal('show');
                },
                error: function (xhr, status, error) {
                    // Handle error
                    console.log(error);
                    $('#couponMessage').html('<p style="color:red">Failed to load coupons. Please try again.</p>');
                }
                });

            }
        });
    });
    </script>
    <script>
            $('.sign_in-btn').click(function(e){
            var $captcha = $( '.recaptcha' ),
                response = grecaptcha.getResponse();


            if (response.length === 0) {
                $( '.validation-error').text( "The g-recaptcha-response field is required." );
                e.preventDefault();
            }
        });
    </script>
    <script>
            $(document).ready(function() {
            
                var paymentForm = $('#payment-form');
            
                var totalAmount = "{{ number_format($Total,2,'.','') }}";
                if (totalAmount == 0) {
                    $('.card-detail-new').hide();
                    paymentForm.attr('action', "{{env('APP_URL')}}/cash-payment");
                }

                $('#free_ride').click(function() {
                    paymentForm.attr('action', "{{env('APP_URL')}}/cash-payment");
                    $('.tip_input').hide();
                    $('input[name="phone"]').mask('000-000-0000');
                    $('#card-error').html('');
                    $('.validation-message').html('');
                    $('.validation-message2').html('');
                    $('#payment-loader').show();
                    $('#free_ride').hide();
                    $(document).on('submit', '#payment-form', function (event) {           
                        var is_valid=0;
                        event.preventDefault();
                        $('.require').each(function( index, element){
                            if($(element).val()=='' )
                            {
                                $(element).siblings('.validation-message').html($(element).closest('.val_label').find('label').text()+'  is required field.');
                                is_valid++;
                            }
                            else
                            {
                                $(element).siblings('.validation-message').html('');
                            }
                        });
                        var regex =  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                        if(!regex.test($('input[name="email"]').val()))
                        {
                            if($('input[name="email"]').val()!='')
                            {
                                $('input[name="email"]').siblings('.validation-message').html('Please enter a valid email.');
                                is_valid++;
                            }else{
                                is_valid++;
                            }
                        }
                        else
                        {
                            $('input[name="email"]').siblings('.validation-message').html('');
                        }
        
                        regex = /[0-9\-\(\)\s]+/;
                        if(!regex.test($('input[name="phone"]').val()))
                        {
                            if($('input[name="phone"]').val()!='')
                            $('input[name="phone"]').siblings('.validation-message').html('Please enter a valid phone no.');
                            is_valid++;
                        }
                        else
                        {
                            $('input[name="phone"]').siblings('.validation-message').html('');
                        }
                        const postalCodePattern = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/;
                        $('#pincode-validation').html('');
                        if(postalCodePattern.test($('input[name="pincode"]').val()) == false && $('input[name="pincode"]').val() != "") {
                            $('#pincode-validation').html('Please Enter valid pincode');
                            is_valid++;
                        }
        
                        if ($("#new_account").is(":checked")){
                            if($('#new_password').val()=='' || $('#confirm_password').val()==''){
                                $('#password_field_error').html('<span class="validation-message">Details required.</span>');
                                is_valid++;
                            }
                            else if($('#new_password').val().length < 6 ){
                                $('#password_field_error').html('<span class="validation-message">Password should be minimum 6 character.</span>');
                                is_valid++;
                            }
                            else if ($('#confirm_password').val().length < 6){
                                $('#password_field_error').html('<span class="validation-message">Confirm Password should be minimum 6 character.</span>');
                                is_valid++;
                            }
                            else if($('#new_password').val() != $('#confirm_password').val())
                            {
                                $('#password_field_error').html('<span class="validation-message">Password mismatch</span>');
                                is_valid++;
                            }
                        }
                        if (is_valid > 0) {
                            $('#payment-loader').hide();
                            $('#free_ride').show();
                            return; 
                        }
                    
                        $('#cash-payment').hide();
                        $('#card-payment').hide();
                        var email = $('input[name="email"]').val();
                        if(email != '')
                        {   
                            var ride_id = "{{session()->get('VehicleSelected')}}"
                            $.ajax({
                                type: "POST",
                                url: '/api/checkAppliedCoupon',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                data: { email: email, ride_id:ride_id },
                                dataType: "json",
                                success: function(data) {
                                    if (data.success === true) {
                                        paymentForm.attr('action', "{{env('APP_URL')}}/cash-payment");
                                        $('#payment-form')[0].submit(); // Submit form manually
                                    } else {
                                        $('#cash-error').show();
                                        $('#cash-error').html(data.error_msg);
                                        $('#payment-loader').hide();
                                        $('#cash-payment').hide();
                                        $('#card-payment').hide();
                                        $('#free_ride').show();
                                    }
                                },
                                error: function() {
                                    $('#payment-loader').hide();
                                    $('#cash-payment').hide();
                                    $('#card-payment').hide();
                                    $('#free_ride').show();
                                    $('#cash-error').html("Something went wrong, please try again.");
                                }
                            });
                        }
                    });
                       
                });
            });

            $(document).ready(function(){
                $('#payment-loader').hide();
                $('input[name="phone"]').mask('000-000-0000');
                var stripe_key = "{{env('STRIPE_KEY')}}";
                var clientSecret = "{{$clientSecret}}";
                if(clientSecret != " ")
                { 
                    const appearance = { theme:'stripe' };
                    var stripe = Stripe(stripe_key);
                    var elements = stripe.elements({ clientSecret,appearance });

                    const paymentElementOptions = {
                        layout: "tabs",
                    };

                    const paymentElement = elements.create("payment", {
                        paymentElementOptions,
                        fields: {
                            billingDetails: {
                                address: {
                                    country: 'never'
                                }
                            }
                        }
                    });
                    window.cardValidation = false;
                    paymentElement.mount("#payment-element");
                    paymentElement.on('change', function(event) {
                        console.log('======>',event);
                        if(event.complete == true && event.empty == false) {
                            window.cardValidation = true; 
                        } else {
                            window.cardValidation = false; 
                        }
                    });
                    document.querySelector("#card-payment").addEventListener("click", checkValidation);

                    function checkValidation(e)
                    {
                        $('.validation-message').html('');
                        $('.validation-message2').html('');
                        $('#card-error').html('');
                        var email = $('#email').val();
                        var first_name = $('#first_name').val();
                        var last_name = $('#last_name').val();
                        var phone = $('#phone').val();
                        var address = $('#address').val();
                        var city = $('#city').val();
                        var state = $('#city').val();
                        var country = $('#country').val();
                        var pincode = $('#pincode').val();
                        var password = $('#new_password').val();

                        var is_valid = 0;
                        const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                        
                        if(email == "") {
                            $('#email-validation').html('Please Enter Email');
                            is_valid++;
                        }
                        
                        if(emailRegex.test(email) == false)
                        {
                            $('#email-validation').html('Please Enter Valid Email');
                            is_valid++;
                        }

                        if(first_name == "") {
                            $('#first-name-validation').html('Please Enter First Name');
                            is_valid++;
                        }

                        if(last_name == "") {
                            $('#last-name-validation').html('Please Enter Last Name');
                            is_valid++;
                        }

                        if(phone == "") {
                            $('#phone-validation').html('Please Enter Phone Number');
                            is_valid++;
                        }

                        if(address == "") {
                            $('#address-validation').html('Please Enter address');
                            is_valid++;
                        }

                        if(city == "") {
                            $('#city-validation').html('Please Enter City');
                            is_valid++;
                        }

                        if(state == "") {
                            $('#state-validation').html('Please Enter State');
                            is_valid++;
                        }

                        if(country == "") {
                            $('#country-validation').html('Please Enter Country');
                            is_valid++;
                        }

                        if(pincode == "") {
                            $('#pincode-validation').html('Please Enter pincode');
                            is_valid++;
                        } else {
                            const postalCodePattern = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/;
                            $('#pincode-validation').html('');
                            if(postalCodePattern.test(pincode) == false) {
                                $('#pincode-validation').html('Please Enter valid pincode');
                                is_valid++;
                            }
                        }
                        if ($("#new_account").is(":checked")){
                            if($('#new_password').val()=='' || $('#confirm_password').val()==''){
                                $('#password_field_error').html('<span class="validation-message">Details required.</span>');
                                is_valid++;
                            } else if($('#new_password').val() != $('#confirm_password').val())
                            {
                                $('#password_field_error').html('<span class="validation-message">Password mismatch</span>');
                                is_valid++;
                            }
                        }

                        if(window.cardValidation == false) {
                            $('#card-error').html('Please fill card details.');
                            is_valid++;
                        }
                        
                        if(is_valid > 0) {
                            e.preventDefault();
                            console.log('Validation Failed');
                        } else {
                            $('#card-payment').hide();
                            $('#payment-loader').show();
                            var paymentIntentId = "{{$paymentIntentId}}";
                            $.ajax({
                                type: "POST",
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                url: "{{ env('APP_URL')}}/stripe-customer",
                                dataType: "json",
                                data: {
                                    email:email,
                                    first_name:first_name,
                                    last_name:last_name,
                                    phone:phone,
                                    address:address,
                                    city:city,
                                    state:state,
                                    country:country,
                                    pincode:pincode,
                                    payment_intent_id:paymentIntentId,
                                    latitude:$('#latitude').val(),
                                    longitude:$('#longitude').val(),
                                    password:password,
                                    amount:$("input[name='amount']").val()
                                }, 
                                success: function(data){
                                    console.log('hello', data.stripe_id);
                                    if(data.success == true) {
                                        $('#stripe_customer').val(data.stripe_id);
                                        // $('#card-payment').show();
                                        // $('#payment-loader').hide();
                                        payNowAction()
                                    }else{
                                        $('#card-error').html(data.error_msg);
                                        $('#card-payment').show();
                                        $('#payment-loader').hide();
                                    }
                                }, error: function(error) { 
                                    $('#card-error').html('Something went wrong');
                                    $('#card-payment').show();
                                    $('#payment-loader').hide();
                                    console.log(error);
                                }
                            });
                        }
                    }
                    
                    async function payNowAction() {
                        let email = $('#email').val();
                        let country = $('#country').val();
                        const { error, paymentIntent } = await stripe.confirmPayment({
                            elements,
                            confirmParams: {
                                return_url: `${window.location.origin}/payment#internal_start-section`,
                                receipt_email: email,
                                payment_method_data:{
                                    billing_details:{
                                        address:{
                                            country:'CA'
                                        }
                                    }
                                }
                            },
                            redirect:"if_required"
                        });
                        if(error && error.message) {
                            $('#card-payment').show();
                            $('#payment-loader').hide();
                            $('#card-error').html(error.message);
                        } else if (paymentIntent && paymentIntent.status === "succeeded") {
                            $('#payment-success').html('Payment status: ' + paymentIntent.status + '');
                            // $('#card-payment').show();
                            // $('#payment-loader').hide();
                            setTimeout(() => {
                                $('#stripe_token').val(paymentIntent.id);
                                $("#payment-form").submit();
                            }, 1000);
                        } else {
                            $('#card-error').html('Something went Wrong');
                        }
                        console.log('error', error);
                    }
                }

                // Stripe.setPublishableKey('pk_test_rd4jTdXH6MHwURA13hj2UlSy');

                // Stripe.applePay.checkAvailability(function(available) {

                //     if (available) {
                //         document.getElementById('apple-pay-button').style.display = 'block';
                //     }
                // });

                $('[data-toggle="tooltip"]').tooltip();
                $('#payment-request-button').show();
                $('#pay_by_cash').click(function(){
                    $('.validation-message2').html('');
                    $('.validation-message').html('');
                    $('#payment-request-button').hide();
                })
                $('#pay_by_card').click(function(){
                    $('.validation-message2').html('');
                    $('.validation-message').html('');
                    $('#payment-request-button').show();
                })
            });

            $(document).ready(function(){
                $('[data-toggle="tooltip"]').tooltip();

                // $('.edit-tip-icon').on('click', function() {
                //     console.log(2121);
                // });
            });

            // document.getElementById('apple-pay-button').addEventListener('click', beginApplePay);
            // function beginApplePay() {
            //     var paymentRequest = {
            //         countryCode: 'US',
            //         currencyCode: 'USD',
            //         total: {
            //             label: 'Rocketship Inc',
            //             amount: '19.99'
            //         }
            //     };

            //     var session = Stripe.applePay.buildSession(paymentRequest, function(result, completion) {
            //         $.post('/charges', { token: result.token.id }).done(function() {
            //             completion(ApplePaySession.STATUS_SUCCESS);
            //             // You can now redirect the user to a receipt page, and so on
            //             window.location.href = '/success.html';
            //         }).fail(function() {
            //             completion(ApplePaySession.STATUS_FAILURE);
            //         });

            //     }, function(error) {
            //         console.log(error.message);
            //     });

            //     session.oncancel = function() {
            //         console.log("User hit the cancel button in the payment window");
            //     };

            //     session.begin();
            // }

            var error = "{{ $errors->has('email') ? $errors->first('email') : '' }}";
            if(error == ''){
                $('.has_email').hide();
            }else{
                $('.has_email').show();
                $('.pass_loader').fadeOut()
            }
        
            $('.email').bind('change keyup focus',function(){
                var email = $(this).val();
                $('#new_email').val(email);
                $.ajax({
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/fetchemail',
                    dataType: "json",
                    data: {email:email}, 
                    success: function(data){
                        if(data['user_type'] == 2){
                            $('.pass_loader').fadeOut('slow');
                            $('.has_email').show();
                            $('.create_account').hide();
                            // $('.message').html('');
                        }
                    }, error: function() { 
                        $('.has_email').hide();
                        $('.create_account').show();
                        // $('.message').html('You can create an account after checkout.');
                    }
                });
            });

        $(document).ready(function(){
            
            if($('#new_password').val() == '')
            {
                $('.password_field').hide();
            }else{
                $('.password_field').show();
                $("#new_account").prop('checked', true);
            }

        });
        $("#new_account").on("click",function() {
            // if ($(this).is(':checked')) {
            //     $('#create-account').show();
            //     $('#tip-amount').hide();
            //     $('#tip-amount-new').show();
            //     $('#tip-amount-new').text('${{$tipAmount}}');
            //     // $('#coupon-discount').hide();
            //     // $('#coupon-discount-new').show();
            //     // $('#coupon-discount-new').text('${{$couponDis}}');
            //     $('.tax-amount').text('${{$taxAmount}}');
            //     $('.total-amount').text('${{round($totalAmount,2)}}');
            //     $("input[name='amount']").val("{{$totalAmount}}");
            //     $("input[name='tax']").val("{{$taxAmount}}");
            //     $("input[name='is_first_ride']").val("true");
            //     $("input[name='tip_amount']").val("{{$tipAmount}}");
            //     // $("input[name='coupon_discount']").val("{{$couponDis}}");
            // } else {
            //     $('#create-account').hide();
            //     var Tax = "${{number_format($Tax,2,'.','')}}";
            //     var Total = "${{number_format($Total,2,'.','')}}";
            //     $('#tip-amount').show();
            //     $('#tip-amount-new').hide();
            //     $('.tax-amount').text(Tax);
            //     // $('#coupon-discount').show();
            //     // $('#coupon-discount-new').hide();
            //     $('.total-amount').text(Total);
            //     $("input[name='amount']").val("{{$Total}}");
            //     $("input[name='tax']").val("{{$Tax}}");
            //     $("input[name='is_first_ride']").val("false");
            //     $("input[name='tip_amount']").val("{{$tip_amount}}");
            //     // $("input[name='coupon_discount']").val("{{$coupon_discount}}");
            //     $('#new_password').val('');
            //     $('#confirm_password').val('');
            // }
            $(".password_field").toggle(this.checked);
        });

        $(document).ready(function () {
            $('.tip_input').hide();
            $('input[name="phone"]').mask('000-000-0000');
            $("#pay_by_cash").on("click",function() {
                $('#card-error').html('');
                $('.validation-message').html('');
                $('.validation-message2').html('');
                if($(this).is(':checked')) {
                    $(document).on('submit', '#payment-form', function (event) {           
                        var is_valid=0;
                        event.preventDefault();
                        $('.require').each(function( index, element){
                            if($(element).val()=='' )
                            {
                                $(element).siblings('.validation-message').html($(element).closest('.val_label').find('label').text()+'  is required field.');
                                is_valid++;
                            }
                            else
                            {
                                $(element).siblings('.validation-message').html('');
                            }
                        });
        
                        //var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                        var regex =  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
                        if(!regex.test($('input[name="email"]').val()))
                        {
                            if($('input[name="email"]').val()!='')
                            {
                                $('input[name="email"]').siblings('.validation-message').html('Please enter a valid email.');
                                is_valid++;
                            }else{
                                is_valid++;
                            }
                        }
                        else
                        {
                            $('input[name="email"]').siblings('.validation-message').html('');
                        }
        
                        regex = /[0-9\-\(\)\s]+/;
                        if(!regex.test($('input[name="phone"]').val()))
                        {
                            if($('input[name="phone"]').val()!='')
                            $('input[name="phone"]').siblings('.validation-message').html('Please enter a valid phone no.');
                            is_valid++;
                        }
                        else
                        {
                            $('input[name="phone"]').siblings('.validation-message').html('');
                        }
                        const postalCodePattern = /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/;
                        $('#pincode-validation').html('');
                        if(postalCodePattern.test($('input[name="pincode"]').val()) == false && $('input[name="pincode"]').val() != "") {
                            $('#pincode-validation').html('Please Enter valid pincode');
                            is_valid++;
                        }
        
                        if ($("#new_account").is(":checked")){
                            if($('#new_password').val()=='' || $('#confirm_password').val()==''){
                                $('#password_field_error').html('<span class="validation-message">Details required.</span>');
                                is_valid++;
                            }
                            else if($('#new_password').val().length < 6 ){
                                $('#password_field_error').html('<span class="validation-message">Password should be minimum 6 character.</span>');
                                is_valid++;
                            }
                            else if ($('#confirm_password').val().length < 6){
                                $('#password_field_error').html('<span class="validation-message">Confirm Password should be minimum 6 character.</span>');
                                is_valid++;
                            }
                            else if($('#new_password').val() != $('#confirm_password').val())
                            {
                                $('#password_field_error').html('<span class="validation-message">Password mismatch</span>');
                                is_valid++;
                            }
                        }
                        if (is_valid > 0) {
                            return; 
                        }
                       
                        $('#cash-payment').hide();
                        $('#payment-loader').show();
                        // if(is_valid>0)
                        // {     
                        //     event.preventDefault();
                        //     $('#payment-loader').hide();
                        //     $('#cash-payment').show();
                        // }
                        var email = $('input[name="email"]').val();
                        if(email != '')
                        {   
                            var ride_id = "{{session()->get('VehicleSelected')}}"
                            $.ajax({
                                type: "POST",
                                url: '/api/checkAppliedCoupon',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                data: { email: email, ride_id:ride_id },
                                dataType: "json",
                                success: function(data) {
                                    if (data.success === true) {
                                        $('#payment-form')[0].submit(); // Submit form manually
                                    } else {
                                        $('#cash-error').show();
                                        $('#cash-error').html(data.error_msg);
                                        $('#payment-loader').hide();
                                        $('#cash-payment').show();
                                    }
                                },
                                error: function() {
                                    $('#payment-loader').hide();
                                    $('#cash-payment').show();
                                    $('#cash-error').html("Something went wrong, please try again.");
                                }
                            });
                        }
                    });
                }
            })
        });

        $(document).ready(function(){
            $('input[name="card_no"]').mask('0000-0000-0000-0000');
            $('input[name="card_expire_date"]').mask("00/00",{placeholder:"MM/YY"});
            // $('input[name="ccExpiryYear"]').mask('00');
            $('input[name="cvvNumber"]').mask('000');
        });

        $(document).ready(function(){
            $('#cash-payment').hide();
            $('#card-payment').show();

            if($("input[name='card_token']:checked").val()!='new' && $("input[name='card_token']:checked").length)
            {
                $('.new-card').hide();
            }
            
            $('input[name="card_token"]').click(function(){
                if($("input[name='card_token']:checked").val() != "") {
                    $('#alert').hide();
                }
            })

            $('input[type="radio"]').click(function(){
                if ($(this).is(':checked'))
                {
                    // if($(this).val() == 'new')
                    // {
                    //     $('.new-card').show();
                    //     if($('#alert').attr('error-count') > 0 ) {
                    //         $('#alert').show();
                    //     }
                    // }
                    // else
                    // {
                    //     $('.new-card').hide();
                    // }

                    if($(this).val() == 'pay_by_card')
                    {
                        $('.new-card').show();
                        $('#cash-payment').hide();
                        $('#cash-error').hide();
                        $('#card-payment').show();
                        $('#payment-form').attr('action', "{{env('APP_URL')}}/stripe-payment");
                        if($(this).attr('auth') == '') {
                            $('.new-card').show();
                        }
                        if($(this).attr('card-saved') == '') {
                            $('.new-card').show();
                        }
                        if($(this).attr('auth') != '') {
                            $('#pay-later').show();
                        }

                        if($('#alert').attr('error-count') > 0 ) {
                            $('.new-card').show();
                        }

                        $('#alert').show();
                        $('.Payment').show();
                        $('#payment-info').show();
                    }

                    if($(this).val() == 'pay_by_cash')
                    {
                        $('#cash-payment').show();
                        $('#card-payment').hide();
                        $('#payment-info').hide();
                        $('.new-card').hide();
                        $('.Payment').hide();
                        $('#pay-later').hide();
                        $('#alert').hide();
                        $('#payment-form').attr('action', "{{env('APP_URL')}}/cash-payment");
                    }
                }
            });

            if($('#alert').attr('error-count') > 0 ) {
                $("#card_token").prop('checked', true);
                $('.new-card').show();
            }

            $('.required').bind("cut copy paste", function(e) {
                e.preventDefault();
                $('.required').bind("contextmenu", function(e) {
                    e.preventDefault();
                });
            });
        });


        var autocomplete;
        var componentForm = {
            locality: 'city',
            administrative_area_level_1: 'state',
            country: 'country',
            postal_code: 'pincode'
        };

        var AddresssForm = {
            locality: 'long_name',
            administrative_area_level_1: 'long_name',
            country: 'long_name',
            postal_code: 'short_name'
        };
        
        function initAutocomplete() {
            autocomplete = new google.maps.places.Autocomplete(
                (document.getElementById('address')),
                {types: ['geocode']});
            autocomplete.addListener('place_changed', fillAddress);
            autocomplete.setComponentRestrictions(
                {'country': ['ca']});
            google.maps.event.addDomListener(document.getElementById('address'), 'keydown', function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                }
            });

        }

        function fillAddress() {
            var place = autocomplete.getPlace();

            for (var component in componentForm) {
                document.getElementById(componentForm[component]).value = '';
                document.getElementById(componentForm[component]).disabled = false;
            }
            document.getElementById('latitude').value = place.geometry.location.lat();
            document.getElementById('longitude').value = place.geometry.location.lng();

            for (var i = 0; i < place.address_components.length; i++) {
                var addressType = place.address_components[i].types[0];
                if (AddresssForm[addressType]) {
                    var val = place.address_components[i][AddresssForm[addressType]];
                    document.getElementById(componentForm[addressType]).value = val;
                }
            }
        }

        function geolocate() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var geolocation = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    var circle = new google.maps.Circle({
                        center: geolocation,
                        radius: position.coords.accuracy
                    });
                    autocomplete.setBounds(circle.getBounds());
                });
            }
        }

        function editTipButton() {
            $('.tip_input').show();
            $('.tip_amount').hide();
        }

        function onUpdateTipButton() {
            var tipAmount = $('input[name="tip_amount"]').val();
            var tipRideId = $('input[name="tip_ride_id"]').val();
             $.ajax({
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '{{url('update-tip')}}',
                dataType: "json",
                data: {tip_amount:tipAmount, tip_ride_id: tipRideId}, 
                success: function(data){
                    $('.tipPercentage').text('(' + data.data.tip_percentage + ' %)');
                    $('#tipAmount').text('$' + data.data.tip_amount);
                     $('.tip_input').hide();
                    $('.tip_amount').show();
                  
                }, error: function(error) { 
                    console.log('tip_error' . error);
                   $('.tip_input').hide();
                    $('.tip_amount').show();
                }
            });
        }


        
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1KQ_b84zwUjOGO3D3i_PVWbbQyR409OI&libraries=places&callback=initAutocomplete" async defer></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
@endsection