@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
  <div class="breadcrumb-area">
    <div class="container">
        <div class="breadcrumb-wrap text-center">
            <h2 class="page-title">{{ __('Track Order') }}</h2>
            <ul class="breadcrumb-pages">
                <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                <li class="page-item">{{ __('Track Order') }}</li>
            </ul>
        </div>
    </div>
  </div>
    <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">
                                @foreach ($orders as $order)
                                    <div class="col-md-6">
                                        <div class="mt-5 mb-4 rscnLoyalityFilterBox">
                                            <label
                                                class="rscnListItemTit fw-bold rscnLoyalityTitle">#<span>{{ $order->Order_Number }}</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>{{ date('Y-m-d', strtotime($order->created_at)) }}</div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="user-box-title mb-2">{{ __('Amount') }}</div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div>{{ $order->Grand_Total }} JOD</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-between">
                                                <div class="col-md-8">
                                                    <div class="d-flex">
                                                        <a href="{{ route('track.order.show', $order->id) }}"
                                                            class="{{ app()->getLocale() == 'fr' ? 'ms-5' : 'me-5' }} payment-txt-link checkout-payment-txt">{{ __('View') }}</a>
                                                        @if ($order->Order_Status == ORDER_PENDING || $order->Order_Status == ORDER_PROCESSING)
                                                            <button type="button"
                                                                class="border-0 bg-transparent p-0 checkout-payment-txt payment-txt-link cancel-order"
                                                                data-bs-toggle="modal" data-bs-target="#cancelOrderModal"
                                                                data-order-id="{{ $order->Order_Number }}"
                                                                data-id="{{ $order->id }}">{{ __('Cancel') }}</button>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="col-md-4 text-end">
                                                    @if ($order->Order_Status == ORDER_PENDING)
                                                        <div class="black-txt"> {{ __('Pending') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_PROCESSING)
                                                        <div class="black-txt"> {{ __('Processing') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_SHIPPED)
                                                        <div class="black-txt"> {{ __('Shipped') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_DELIVERED)
                                                        <div class="greenish-txt"> {{ __('Delivered') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_CANCELLED)
                                                        <div class="red-txt"> {{ __('Canceled') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_RETURN)
                                                        <div class="red-txt"> {{ __('Returned') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_NOT_PAYMENT_YET)
                                                        <div class="black-txt"> {{ __('Not Payment Yet') }}</div>
                                                    @elseif ($order->Order_Status == ORDER_DELIVERED_FAILED)
                                                        <div class="black-txt"> {{ __('Delivery Failed') }}</div>
                                                    @endif
                                                    {{-- 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>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{ $orders->appends(request()->input())->links('vendor.pagination.careers') }}
        </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 Order') }} #<span
                            class="order-number"></span></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 target="_blank"
                            href="{{ route('cancel-policy-front') }}"
                            class="payment-txt-link checkout-payment-txt">{{ __('click here') }}</a>
                        {{ __('to review the cancelation policy') }}
                    </div>
                    <div class="text-center">
                        <div class="label-style">{{ __('Are you sure you want to cancel your order?') }}</div>
                        <div class="mt-4">

                            {{-- 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 accepet-cancel"
                                data-bs-toggle="modal">{{ __('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>
                        </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 Order') }} #<span
                            class="success-order-number"></span></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 success-msg">
                        <span class="hyperpayMsg"></span>
                        <span class="codMsg"></span>
                    </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 refreshPage"
                        data-bs-dismiss="modal">{{ __('OK') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('post_script')
    <script type="text/javascript">
        let id = 0
        let order_number = 0
        let hyperpayMsg = "{{ __('Refund request was sent to our team it will be reviewed and processed shortly') }}"
        let codMsg = "{{ __('Your order has been canceled') }}"
        //////used in  tenders.purchase//////
        $('.cancel-order').on('click', function() {
            order_number = $(this).attr("data-order-id")
            $('.order-number').text(order_number);
            id = $(this).attr("data-id")
        });
        $('.accepet-cancel').on('click', function() {
            event.preventDefault();
            $('#cancelOrderModal').modal('hide');
            $('#preloader').show();
            $('#status').show();
            var token = $('meta[name="csrf-token"]').attr('content');
            let href = "{{ route('cancel.order') }}";
            $.ajax({
                type: "POST",
                url: href,
                data: {
                    id: id,
                    _token: token
                },
                beforeSend: function() {},
                // return the result
                success: function(result) {
                    $('.success-order-number').text(order_number);
                    console.log(result)
                    if (result.payment_method == 'COD') {
                        $('.codMsg').text(codMsg)
                    } else if (result.payment_method == 'HYPERPAY' || result.payment_method ==
                        'Paid Per Points') {
                        console.log()
                        $('.hyperpayMsg').text(hyperpayMsg)
                    }
                },
                complete: function() {
                    $('#preloader').hide();
                    $('#status').hide();
                    $('#hyperpayOrderModal').modal('show');
                },
                error: function(jqXHR, testStatus, error) {
                    console.log(error);
                    alert("Page " + href + " cannot open. Error:" + error);
                    $('#loader').hide();
                },
                timeout: 8000
            })
        });
        $('.refreshPage').on('click', function() {
            location.reload(true);
        });
    </script>
@endpush