@extends('layouts.xiamen-restaurant')
@section('content')
<!-- Page Title -->
<section class="page-title" style="background-image: url({{ asset('four-seasons-restaurant/images/background/10.jpg') }})">
    <div class="auto-container">
        <h1>Account</h1>
        <ul class="page-breadcrumb">
            <li><a href="{{ route('xiamen.index') }}">home</a></li>
            <li>Account</li>
        </ul>
    </div>
</section>
<!-- End Page Title -->

<!-- Account Page Section -->
<div class="account-page-section">
    <div class="auto-container">
        <!-- Account Info Tabs -->
        <div class="row mb-4">
            <div class="col-lg-4 col-md-4 col-sm-12">
                <div class="left-menu">
                    <ul>
                        <li><a href="{{ route('xiamen.customer.dashboard') }}"><i class="fa fa-desktop"></i> Dashboard</a> </li>
                        <li><a href="{{ route('xiamen.customer.orders') }}"><i class="fa fa-list-alt"></i> Order History</a> </li>
                        <li  class="active-btn-left-menu"><a href="{{ route('xiamen.customer.party-booking') }}"><i class="fa fa-list-alt"></i> Party Booking History</a> </li>
                        <li><a href="{{ route('xiamen.customer.table-booking') }}"><i class="fa fa-list-alt"></i> Table Booking History</a> </li>
                        <li><a href="{{ route('xiamen.customer.manage-account') }}"><i class="fa fa-user"></i> Manage Account</a> </li>
                        <li><a href="{{ route('xiamen.customer.manage-address') }}"><i class="fa fa-map-marker"></i> Manage Billing & Delivery Address</a> </li>
                        <li><a href="{{ route('xiamen.customer.change-password') }}"><i class="fa fa-key"></i> Change Password</a> </li>
                        <li><a href="{{ route('xiamen.customer.logout') }}"><i class="fa fa-lock"></i> Logout</a> </li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-12">
                <h3 class="mb-2"><u><strong>Party Booking Details</strong></u></h3>
                <div class="table-responsive">
                    <table class="table table-bordered" style="font-size: 15px"> 
                    <tr> 
                        <th >Customer Info</th>
                        <td >
                            {{$customer_party_bookings->name}} <br />
                            {{$customer_party_bookings->email}} <br />
                            {{$customer_party_bookings->phone}} <br />
                        </td>
                    </tr>
                    <tr>
                        <th>EventType</th>
                        <td>{{ $customer_party_bookings->event_type }}</td>
                    </tr>
                    <tr>
                        <th>Event Date</th>
                        <td>{{ $customer_party_bookings->event_date }}</td>
                    </tr>
                    <tr>
                        <th>Person</th>
                        <td>{{ $customer_party_bookings->person }}</td>
                    </tr>
                    <tr>
                        <th>Status</th>
                        <td>
                            @if($customer_party_bookings->status =="Pending")
                                <div class="badge rounded-pill text-warning bg-light-warning p-2 text-uppercase px-3">
                                <i class='bx bxs-circle me-1'></i>Pending</div>
                            @elseif($customer_party_bookings->status =="Approved")
                                <div class="badge rounded-pill text-primary bg-light-primary p-2 text-uppercase px-3">
                                    <i class='bx bxs-circle me-1'></i>Approved</div>
                            @elseif($customer_party_bookings->status =="Canceled")
                                <div class="badge rounded-pill text-danger bg-light-danger p-2 text-uppercase px-3">
                                    <i class='bx bxs-circle me-1'></i>Canceled</div>
                            @endif
                        </td>
                    </tr>                    
                    <tr>
                        <th>Event Requirements</th>
                        <td>
                            @foreach($customer_party_bookings->event_requirements as $key)
                                {{ $key}}, 
                            @endforeach
                        </td>
                    </tr>  
                    
                    <tr>
                        <th>Package Menus</th>
                        <td>{{ $customer_party_bookings->package_menu->title }}</td>
                    </tr>                  
                    <tr>
                        <th>Description</th>
                        <td>
                            {{ $customer_party_bookings->description}}
                        </td>
                    </tr> 
                    @if ($customer_party_bookings->advance_amount>0)
                        <tr>
                            <th>Advance Amount</th>
                            <td>{{ $customer_party_bookings->advance_amount }}</td>
                        </tr>
                        <tr>
                            <th>Advance Payment Amount</th>
                            <td>{{ $customer_party_bookings->advance_payment_amount }}</td>
                        </tr>                                                
                        <tr>
                            <th>Payment Status</th>
                            <td>
                                {{ $customer_party_bookings->transaction_status }}
                            </td>
                        </tr>
                    @endif
                  
                    <tr>
                        <th>Actions</th>
                        <td>
                            <input type="hidden" name="csrf-token"  value="{{ csrf_token() }}">
                            <input type="hidden" id="booking_id" name="booking_id"  value="{{ $customer_party_bookings->id }}">
                            <input type="hidden" id="advance_amount" name="advance_amount"  value="{{ $customer_party_bookings->advance_amount }}">
                                    <button class="btn btn-primary btn-lg btn-block" id="sslczPayBtn"
                                        token="if you have any token validation"
                                        postdata="your javascript arrays or objects which requires in backend"
                                        order="If you already have the transaction generated for current order"
                                        endpoint="{{ url('/pay-via-ajax-reservation') }}"> Pay Now
                                </button>
                        </td>
                    </tr> 
                </table>
 
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Account Page Section -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>


    <!-- If you want to use the popup integration, -->
    <script>
       
        var obj = {};
        obj.booking_id = $('#booking_id').val();
        obj.advance_amount = $('#advance_amount').val();

        $('#sslczPayBtn').prop('postdata', obj);

        (function (window, document) {
            var loader = function () {
                var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
                // script.src = "https://seamless-epay.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7); // USE THIS FOR LIVE
                script.src = "https://sandbox.sslcommerz.com/embed.min.js?" + Math.random().toString(36).substring(7); // USE THIS FOR SANDBOX
                tag.parentNode.insertBefore(script, tag);
            };

            window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
        })(window, document);
    </script>
@endsection