@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- breadcrumb area start here  -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('My 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">{{ __('My Order') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- breadcrumb area end here  -->
    <!-- Profile Page area start here  -->
    <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' => 'history'])
                </div>
                <div class="col-xl-9 col-lg-8">
                    @if (isset($bookings))
                        <div class="user-profile-right-part">
                            <div class="rscnUserPerInfoBox" id="bookings_history_box">
                                <h3 class="rscnCardTit">{{ __('Bookings history') }}</h3>
                                <div class="rscnUserPerInfoList">
                                    <div class="row">
                                        @foreach ($bookings as $booking)
                                            <div class="col-md-6">
                                                <div class="rscnBookHistoryBox">
                                                    <div class="rscnBookHistoryLabel rscnBookHistoryTit">
                                                        {{ $booking->reservation->name }}
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="rscnBookHistoryLabel mb22">{{ __('Added Date') }}
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="rscnBookHistoryLabel mb22 fw-normal">
                                                                {{ date('d M Y', strtotime($booking->created_at)) }}</div>
                                                        </div>
                                                    </div>
                                                    {{-- <div class="row">
                                      <div class="col-md-6">
                                        <div class="rscnBookHistoryLabel mb22">{{ __('Booking Date') }}</div>
                                      </div>
                                      <div class="col-md-6">
                                        <div class="rscnBookHistoryLabel mb22 fw-normal">15 Jan 2023</div>
                                      </div>
                                    </div> --}}
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="rscnBookHistoryLabel mb22">{{ __('# of visitors') }}
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="rscnBookHistoryLabel mb22 fw-normal">
                                                                {{ $booking->num_visitor }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="rscnBookHistoryLabel mb22">{{ __('Paid amount') }}
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="rscnBookHistoryLabel mb22 fw-normal">
                                                                {{ $booking->totalWithDiscount }} JOD</div>
                                                        </div>
                                                    </div>
                                                    <hr class="rscnCardDividor">
                                                    <div class="rscnBookHistoryBtnBox d-flex justify-content-between">
                                                        <a
                                                            href="{{ route('user.profile.viewBookingDetails', $booking->id) }}"><button
                                                                type="button"
                                                                class="btn p-0 rscnBtnLink">{{ __('View') }}</button></a>
                                                        @if ($booking->status == 1)
                                                            <button id="detailsModalBtn" type="button"
                                                                class="btn p-0 rscnBtnLink cancel-book m-auto"
                                                                data-bs-toggle="modal" data-bs-target="#detailsModal"
                                                                data-id="{{ $booking->id }}">
                                                                {{ __('Cancel') }}
                                                            </button>
                                                            <span
                                                                class="p-0 rscnBtnLink text-success">{{ __('Confirmed') }}</span>
                                                        @elseif($booking->status == 0)
                                                            <span
                                                                class="p-0 rscnBtnLink text-danger">{{ __('Canceled') }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                    {{ $bookings->links('vendor.pagination.careers') }}
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="user-profile-right-part">
                            <div class="rscnUserPerInfoBox" id="bookings_history_box">
                                <h3 class="rscnCardTit">{{ __('No Bookings history') }}</h3>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    {{-- Details Modal --}}
    <div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
        <div class="modal-dialog rscnTenderModal">
            <div class="modal-content border-0">
                <div class="modal-header">
                    <div class="d-flex align-items-center">
                        <h5 class="modal-title" id="detailsModalLabel">{{ __('Cancel booking') }} <span
                                class="book-number"></span></h5>
                        <div class="rscnTenderNum d-flex">
                            <span id="number"></span>
                        </div>
                    </div>
                    <button type="button" class="btn-close rscnTenderCloseBtn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Before proceeding with the cancelation, please') }} <a
                            href="{{ route('cancel-policy-front') }}" class="btn p-0 rscnBtnLink"><button type="button"
                                class="btn p-0 rscnBtnLink">{{ __('click here') }}</button></a>
                        {{ __('to review the Cancelation policy') }}</p>
                    <hr class="rscnCardDividor">
                    <p class="m-auto text-center">{{ __('Are you sure you want to cancel your booking?') }}</p>
                </div>
                <div class="modal-footer pt-2 pb-5 border-top-0 m-auto text-center">
                    <div class="row w-100">
                        <div class="col-md-6 d-flex">
                            <a class="accepet-cancel"><button type="button"
                                    class="btn p-0 rscnBtnLink">{{ __('Yes') }}</button></a>
                        </div>
                        <div class="col-md-6 d-flex">
                            <button type="button" class="btn p-0 rscnBtnLink"
                                data-bs-dismiss="modal">{{ __('No') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
        <div class="modal-dialog rscnTenderModal">
            <div class="modal-content border-0">
                <div class="modal-header">
                    <div class="d-flex align-items-center">
                        <h5 class="modal-title" id="successModalLabel">{{ __('Cancel booking') }} <span
                                class="success-book-number"></span></h5>
                        <div class="rscnTenderNum d-flex">
                            <span id="number"></span>
                        </div>
                    </div>
                    <button type="button" class="btn-close rscnTenderCloseBtn" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>{{ __('Refund request was sent to our team, it will be reviewed and processed shortly') }}</p>
                </div>
            </div>
        </div>
    </div>
    {{-- /Details Modal --}}
    <!-- Profile Page area end here  -->
@endsection
@push('post_script')
    <script type="text/javascript">
        let id = 0
        let book_id = 0
        let clickedButton = null;
        //////used in  tenders.purchase//////
        $('.cancel-book').on('click', function() {
            book_id = $(this).attr("data-book-id")
            $('.book-number').text(book_id);
            id = $(this).attr("data-id")
            clickedButton = $(this);
        });
        $('.accepet-cancel').on('click', function() {
            event.preventDefault();
            $('#detailsModal').modal('hide');
            $('#preloader').show();
            $('#status').show();
            var token = $('meta[name="csrf-token"]').attr('content');
            let href = "{{ route('request.refund.save') }}";
            $.ajax({
                type: "POST",
                url: href,
                data: {
                    detail_id: id,
                    book_id: book_id,
                    _token: token
                },
                beforeSend: function() {

                },
                // return the result
                success: function(result) {
                    $('.success-book-number').text(book_id);
                    if (clickedButton) {
                      clickedButton.hide();
                    }
                    $('#preloader').hide();
                    $('#status').hide();
                    $('#successModal').modal('show');
                    // Hide the modal after 4 seconds
                    setTimeout(function() {
                      $('#successModal').modal('hide');
                    }, 4000);
                },
                complete: function() {},
                error: function(jqXHR, testStatus, error) {
                    console.log(error);
                    alert("Page " + href + " cannot open. Error:" + error);
                    $('#loader').hide();
                },
                timeout: 8000
            })
        });
    </script>
@endpush