@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
<div class="profile-page-area section">
  <div class="container">
    <div class="row">
      <div class="col-xl-3 col-lg-4">
        @include('front.layouts.include.user_profile_sidebar', ['menu' => 'order'])
      </div>
      <div class="col-xl-9 col-lg-8">
        <div class="rscnUserPerInfoBox">
          <h3 class="rscnCardTit">{{ __('Order History') }}</h3>
          <div class="rscnUserPerInfoList">
            <div class="row"> 
              <div class="col-md-6">
                <div class="mt-5 mb-4 rscnLoyalityFilterBox">
                  <label class="rscnListItemTit fw-bold rscnLoyalityTitle">#<span>85544</span></label>
                  <div class="user-order-box">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="user-box-title mb-2">Order Date</div>
                      </div>
                      <div class="col-md-6">
                        <div>5 Jan 2023</div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="user-box-title mb-2">Ammount</div>
                      </div>
                      <div class="col-md-6">
                        <div>150 JOD</div>
                      </div>
                    </div>
                  </div>
                  <div class="row justify-content-between">
                    <div class="col-md-8">
                      <div class="d-flex">
                        <a href="{{ route('user.track-order.show') }}" class="me-5 payment-txt-link checkout-payment-txt">View</a>
                        <button type="button" class="border-0 bg-transparent p-0 checkout-payment-txt payment-txt-link" data-bs-toggle="modal" data-bs-target="#cancelOrderModal">Cancel</button>
                      </div>
                    </div>
                    <div class="col-md-4 text-end">
                      <div class="black-txt">Shipped</div>

                      {{-- the other statuses : --}}
                      {{-- <div class="greenish-txt">Delivered</div>
                      <div class="red-txt">cancel</div> 
                      <div class="black-txt">Processing</div> --}} 
                    
                    </div>
                  </div>
                </div>  
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{{-- cancelation modal --}}
<div class="modal fade" id="cancelOrderModal" tabindex="-1" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog loyalityPointsModal">
    <div class="modal-content border-0">
      <div class="modal-header">
        <h5 class="modal-title" id="cancelOrderModalLabel">Cancel booking #</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
       <div class="user-order-box">
         Before proceeding with the cancelation, please <a href="#" class="payment-txt-link checkout-payment-txt">click here</a> to review the cancelation policy 
       </div>
       <div class="text-center">
         <div>Are you sure you want to cancel your booking?</div>
         <div class="mt-4">
           <form action="" method="">
             @csrf

              {{-- If the order was paid by Hyperpay --}}
              <button type="button" id="hyperpayOrderBtn" class="border-0 bg-transparent payment-txt-link checkout-payment-txt me-3" data-bs-toggle="modal" data-bs-target="#hyperpayOrderModal">Yes</button>

              {{-- If the order was COD --}}
              {{-- <button type="button" class="border-0 bg-transparent payment-txt-link checkout-payment-txt me-3" data-bs-toggle="modal" data-bs-target="#codOrderModal">Yes</button> --}}

              <button type="button" class="border-0 bg-transparent payment-txt-link checkout-payment-txt" data-bs-dismiss="modal">No</button>
           </form>
         </div>
       </div>
      </div>      
    </div>
  </div>
</div>

{{-- Hyperpay Order modal --}}
<div class="modal fade" id="hyperpayOrderModal" tabindex="-1" aria-labelledby="hyperpayOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog loyalityPointsModal">
    <div class="modal-content border-0">
      <div class="modal-header">
        <h5 class="modal-title" id="hyperpayOrderModalLabel">Cancel booking #</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <div class="text-center">
          Refund request was sent to our team, it will be reviewed and processed shortly
        </div>
      </div>   
      <div class="modal-footer border-top-0 justify-content-center py-4">
        <button type="button" class="modal-close-btn border-0 m-0" data-bs-dismiss="modal">OK</button>
      </div>   
    </div>
  </div>
</div>

{{-- COD Order modal --}}
<div class="modal fade" id="codOrderModal" tabindex="-1" aria-labelledby="codOrderModalLabel" aria-hidden="true">
  <div class="modal-dialog loyalityPointsModal">
    <div class="modal-content border-0">
      <div class="modal-header">
        <h5 class="modal-title" id="codOrderModalLabel">Cancel booking #</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-4">
        <div class="text-center">
          Your order has been canceled
        </div>
      </div>  
      <div class="modal-footer border-top-0 justify-content-center py-4">
        <button type="button" class="modal-close-btn border-0 m-0" data-bs-dismiss="modal">OK</button>
      </div>    
    </div>
  </div>
</div>

@endsection
@push('post_script')
  

@endpush