@extends('cabMeWebsite.master')
@section('content')


    <div class="container">
        <div class="col-12">
            <div class="row">
                <div class="receipt ml-auto mr-auto mb-2 mb-sm-3 mb-md-5 mt-2 mt-sm-3 mt-md-5">
                    <a class="theme-text back-to-trip" style="text-decoration: underline" href="{{url('/triplist')}}">Back
                        to trips</a>
                    <div class="head text-center">
                        <h4>Receipt</h4>
                        <p><label id="invoiceDate"></label></p>
                    </div>
                    <div class="bg-gray p-2 p-sm-3 p-md-4">
                        <strong>Name:</strong> <label id="driver_name"></label><br />
                        <strong>Rating:</strong>
                        <label id="stars"></label>
                    </div>
                    <p class="text-right py-2">Ride# <label id="booking_code"></label></p>
                    <div class="pl-3 pr-3">
                        <p class="mb-0"><small class="text-gray">Trip Request date</small></p>
                        <p><label id="tripRequestDate"></label>{{--Friday, July 23, 2019 at 8:05AM--}}</p>
                    </div>
                    <div class="pl-3 pr-3">
                        <p class="mb-0"><small class="text-gray">Pickup Location </small></p>
                        <p><label id="pickupLocation"></label></p>
                    </div>
                    <div class="pl-3 pr-3 border-bottom">
                        <p class="mb-0"><small class="text-gray">Destination Location</small></p>
                        <p><label id="destinationLocation"></label></p>
                    </div>
                    <div class="pl-3 pr-3">
                        <p class="theme-text text-center pt-2 pt-md-3">Charges</p>
                        <div class="row">
                            <div class="col-12 col-md-8">
                                <p>Fare (incl.GST)</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="fare_charge"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Booking Fee</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="booking_fee"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Surcharges</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="surcharges"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Night Charges</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="night_charges"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Wait Time</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="wait_time"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Toll Charge</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="toll_charge"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Promocode Discount</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="promo_code_discount"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>NSW Government Transporty Levy</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="nsw_govt_price"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>NSW CTP Charge</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="ctp_price"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Tip</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="tip"></label> </p>
                            </div>

                            <div class="col-12 col-md-8">
                                <p>Cancellation Fee</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="cancellation_charge"></label> </p>
                            </div>
                        </div>
                        <!--//Row-->
                        <div class="row border-bottom">
                         {{--   <div class="col-12 col-md-8">
                                <p>Commission</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="commission"></label></p>
                            </div>--}}
                        </div>
                        <!--//Row-->
                        <div class="row mt-3">
                            <div class="col-12 col-md-8">
                                <p>Fare Amount</p>
                            </div>
                            <div class="col-12 col-md-4 text-right">
                                <p><label id="earnedAmount"></label></p>
                            </div>
                        </div>
                        <!--//Row-->
                    </div>
                    <div class="pl-3 pr-3">
                        <img src="{{asset('laravel-website')}}/img/card.jpg" alt="" /> Card
                    </div>
                    <div class="pl-3 pr-3 text-center mt-3 trip_status">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var base_url = '