@extends('layouts.web')
@section('page-title', 'Customer Details')
@section('link-active-2', 'active')

@section('main-container')

    <div id="container-main-customer">
        <div class="container-main-customer-left-side">
        <form action="{{route('create-ticket')}}" id="form-customer-submit" method="POST">
            @csrf
            <div class="customer-details-fill">
                <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">
                            </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>
                <div style="margin: 3px 0px;clear:both;display:block;height:3px;width:100%;"></div>
                <section class="view-col-full">
                    <input type="radio" name="paymentmode" class="radiochecked" value="Mobile" checked> Mobile - payments <a class="btnHowToPayMB">(Show How To Pay)</a>
                    <div style="margin: 3px 0px;clear:both;display:block;height:3px;width:100%;"></div>
                </section>

                @php

                   $now_dt_tm = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', date('Y-m-d H:i:s'));
                   $dep_dt_tm = \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', "$depature->depature_date $depature->depature_time");

                   if($dep_dt_tm >= $now_dt_tm )
                    {

                        $diff_in_hours = $now_dt_tm->diffInHours($dep_dt_tm);
                        if($diff_in_hours > 5)
                        {
                            echo 
                            "
                            <section class='view-col-full'>
                                <input type='radio' name='paymentmode' class='radiochecked' value='Booking'> Booking
                            </section>
                            ";
                        }
                    }
                @endphp
                                <section class="view-col-full">
                                    <div class="block-cont">
                                        <input type="text" name="receipt" id="inputreference" class="form-control" placeholder="Enter reference number only for mobile payment">
                                    </div>
                                    <div style="margin: 3px 0px;clear:both;display:block;height:3px;width:100%;"></div>
                                </section>
            </div>

            <hr>
                <p>
                    Note: 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 
                </p>
                <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}}">
                <input type="hidden" name="subroute" value="{{$sub_route->id}}">
                <button type="submit" class="btn btn-success w-25">
                    Confirm Booking
                </button>
       
            
        </form>
        </div>

        <div class="container-main-customer-right-side">
            <h3>Trip Details</h3>
            <table style="width:100%; margin: 10px 0px 30px 0px">
                <tr>
                    <td class="title-bold">Start From:</td>
                    <td>{{$route->start_from}}({{$route->end_to}})</td>
                </tr>
                <tr>
                   <td class="title-bold">Destination:</td>
                   <td>{{$sub_route->name}}</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">Reporting:</td>
                <td>{{date_format(date_create($datetodepatureinp), 'd M Y')}}, {{date_format(date_create($depature->reporting_time), 'H:i A')}}</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), 'd M Y H:i A')}}</td>
               </tr>
               <tr>
                   <td class="title-bold">Fare:</td>
                   <td>{{number_format($vipfare, 2)}} TZS</td>
               </tr>
            </table>

            <hr>

            <h3>Please Note:</h3>
            <ol>
                <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>

        </div>

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

    <div class="modal fade in" id="how-to-pay-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Aifola Express Booking</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick = "$('#how-to-pay-modal').modal('hide')">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <img src="{{asset('./media/images/how-to-pay.jpeg')}}" class="img-fluid" alt="How to Pay">
            </div>
            </div>
        </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"});
        });

        $(document).on('submit', '#form-customer-submit', function(e){
            
            if($('input[name="paymentmode"]:checked').val() == "Mobile")
            {
                if($('#inputreference').val() == null ||  $('#inputreference').val() == "")
                {
                    e.preventDefault();
                    alert("Please enter payment reference number to continue");
                }
            }
        })
        $(document).on('click', '.btnHowToPayMB', function(){
            $("#how-to-pay-modal").modal('show');
        });
        $(document).on('click', '.modal .close', function(){
            $("#how-to-pay-modal").modal('hide');
        });
        $("#how-to-pay-modal").modal('hide');

    });
</script>

@endpush