@extends('layouts.android-customer')
@section('page-title', 'Customer Details')

@section('main-container')

    <div id="container-main-customer">
        <div class="container-main-customer-left-side">
        <form action="{{route('create-ticket-android')}}" method="POST">
            @csrf
            <div class="customer-details-fill">
                <h2>Trip Details</h2>
                <table style="width:100%; margin: 10px 0px 30px 0px">
                    <tr>
                        <td class="title-bold">Start From:</td>
                        <td>{{$route->start_from}}</td>
                    </tr>
                    <tr>
                       <td class="title-bold">Destination:</td>
                       <td>{{$route->end_to}}</td>
                   </tr>
                   <tr>
                    <td class="title-bold">Vehicle Number:</td>
                    <td>{{Str::upper($depature->registration_number)}}</td>
                </tr>
                   <tr>
                       <td class="title-bold">Boarding Point:</td>
                       <td>{{$boarding}}</td>
                   </tr>
                   <tr>
                       <td class="title-bold">VIA:</td>
                       <td>{{$depature->via}}</td>
                   </tr>
                   <tr>
                       <td class="title-bold">Departure:</td>
                       <td>{{date_format(date_create($datetodepatureinp), 'd M Y')}}, {{date_format(date_create($depature->depature_time), 'H:i A')}}</td>
                   </tr>
                   <tr>
                       <td class="title-bold">Expected Arrival:</td>
                       <td>{{date_format(date_create($depature->expected_arrival_time), 'H:i A')}}</td>
                   </tr>
                   <tr>
                       <td class="title-bold">Fare:</td>
                       <td>{{number_format($vipfare, 2)}} TZS</td>
                   </tr>
                </table>

                <hr>

                <h2>Traveller Details</h2>
                    <section class="view-col-full">
                        <section class="view-col-half-left">
                            <h5>Traveller Full Names</h5>
                            <input type="text" name="name" class="form-control" placeholder="Enter first name and last name" required>
                        </section>
                    </section>
                    <section class="view-col-full">
                        <section class="view-col-half-left">
                            <h5>Traveller Address</h5>
                            <input type="text" name="address" class="form-control" placeholder="Enter your current resident details" required>
                        </section>
                    </section>
                    <section class="view-col-full">
                        <section class="view-col-half-left">
                            <h5>Traveller Phone Number(Format Eg: 255652125503)</h5>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text" id="basic-addon1">255</span>
                                </div>
                                <input type="text" class="form-control" placeholder="*********" name="phone" class='form-control' pattern="[6-7]{1}[0-9]{8}" maxlength="9" minlength="9" required>
                            </div>
                        </section>
                    </section>
                    <section class="view-col-full">
                        <section class="view-col-half-left">
                            <h5>Relative Phone Number(Format Eg: 255652125503)</h5>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                  <span class="input-group-text" id="basic-addon1">255</span>
                                </div>
                                <input type="text" class="form-control" placeholder="*********" name="relphone" class='form-control' pattern="[6-7]{1}[0-9]{8}" maxlength="9" minlength="9" required>
                            </div>
                        </section>
                    </section>
                    <section class="view-col-full">
                        <section class="view-col-half-left">
                            <h5>Traveller Email address</h5>
                            <input type="email" name="email" class="form-control" placeholder="Enter your email address">
                        </section>
                    </section>
                    <div class="block-cont"></div>
            </div>
            <div class="payment-details-fill">
                <h2>Payment Details</h2>
                <section class="view-col-full">
                    <input type="radio" name="paymentmode" value="Mobile" checked> Mobile - payments
                </section>
                <section class="view-col-full" >
                    <input type="radio" name="paymentmode" value="Bank"> Bank - payments
                </section>
                <section class="view-col-full">
                    <input type="radio" name="paymentmode" value="Cash"> Cash - payments
                </section>
            </div>

            <hr>
                <h2>Please Note:</h2>

                <ol>
                    <li>You will have 1 hour to complete your payment once you confirm your booking, failure to do so will result in automatic cancellation of your booking </li>
                    <li>Price listed does not include luggage price </li>
                    <li>Passenger will allowed to board freely with two handbags only, and extra bag will be charged. </li>
                    <li>Ensure information provided is correct </li>
                    <li>You will receive confirmation SMS/Email once your payment is confirmed</li>
                    <li>Any booking unpaid until expiration date will automatically be cancelled </li>
                    <li>Fares are not guaranteed until Aifola Express confirms your booking and payment is made in full </li>
                    <li><strong>Disclaimer:</strong> Aifola Express may refuse carriage of you or your baggage if, in the exercise of our reasonable discretion, we determine either that the payment of your fare is fraudulent or the booking of your seat has been done fraudulently or unlawfully </li>
                </ol>

                <hr>

                <p>
                    <strong>Ticket Price : {{number_format($vipfare, 2)}} TZS</strong> 
                </p>

                <p>
                    <input type="checkbox" name="agree" value="0" required> I have read & agreed to the <a href="{{route('web.terms-of-use')}}" target="_blank">Terms of Service</a> and <a href="{{route('web.terms-of-use')}}" target="_blank">Privacy Policy</a>
                </p>
 

            <hr>
                <input type="hidden" name="dates" value="{{$datetodepatureinp}}">
                <input type="hidden" name="dapatureid" value="{{$depatureidnoinp}}">
                <input type="hidden" name="routeid" value="{{$routeidnoinp}}">
                <input type="hidden" name="sitnumber" value="{{$sitnochoosed}}">
                <input type="hidden" name="boarding" value="{{$boarding}}">
                <input type="hidden" name="vip" value="{{$vip}}">
                <input type="hidden" name="fareprice" value="{{$vipfare}}">
                <button type="submit" class="btn btn-success w-25">
                    Confirm Booking
                </button>
       
            
        </form>
    </div>

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

@endsection


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

<script>
    $(function(){
        $(document).on('click', '.bus-info-btn button', function(){
            //alert("hello");
            $('#seat-and-confirm').css({"display":"block"});
        });
    });
</script>

@endpush