@extends('layouts.agent')
@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')}}" id="form-customer-submit" 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}}({{$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>

                <h2>Traveller Details</h2>
                    <section class="view-col-full">
                        <section class="view-col-full">
                            <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-full">
                            <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-full">
                            <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-full">
                            <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>
                    <div class="block-cont"></div>
                    <section class="view-col-full">
                        <section class="view-col-full">
                            <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" class="radiochecked" value="Cash" checked> Cash - payments
                </section>
                <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>
                    <strong>Ticket Price : {{number_format($vipfare, 2)}} TZS</strong> 
                </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-100">
                    Confirm Booking
                </button>
       
            
        </form>
    </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('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