@extends('frontend.layouts.app')

@section('title')
    <title>@lang('frontend.booking_history') | {{ Hyvikk::get('app_name') }}</title>
@endsection

@section('content')
    @if (request()->is('booking-history/' . \Auth::user()->id))
        <style>
            .img-back-shadow1 {
                background-color: #f2f2f4 !important;
           }

           .set-icon-image:hover {
                transform:translateX(8px); 
           }


      .modal-content {
    background-color: #fff !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

        </style>
    @endif
    <section class="booking-history-title background-container">

         @if (session('success')) 
                
                <div class="custom-alert-msg">
                    <div class="alert alert-success custom-alert" style="background: #428d42;border: 1px solid #428d42;" role="alert">
                        <strong style="color:white;">{{ session('success') }}</strong>
                    </div>
                </div>
             @endif 




        <div class="booking-history-round">
            <img src="{{asset('assets/images/booking-history.png')}}" alt="round">
        </div>
        <div class="container">
            <div class="col-12">
                <div class="history-title">
                    <h2>
                        @lang('frontend.booking_history')
                    </h2>
                </div>
            </div>
        </div>
    </section>
    <section class="background-container mb-5">
        <div class="booking-history-details">
            <div class="container">
                <div class="row load-data">
                   @include('frontend.booking_history_tbl')

                   
                </div>

            </div>
        </div>
        @if ($bookings->count() > 3)
        <div class="load-disable">
            <div class="scroll-arrow" id="scroll">
                <a href="javascript:void(0);" id="button" class="load-page" style="cursor: pointer;"><i class="fa-sharp fa-solid fa-angle-down"></i></a>
            </div>
        </div>
        @endif

  
    </div>

      

    </section>


<!-- Modal -->
<div class="modal fade" id="cancelBooking" tabindex="-1">
  <div class="modal-dialog modal-dialog">
    <div class="modal-content">

      <!-- Header -->
      <div class="modal-header">
        <h5 class="modal-title">Cancel Booking</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Form Start -->
      <form action="{{ url('/front/cancel-booking') }}" method="POST" id="cancel_booking">
        @csrf

        <!-- Body -->
        <div class="modal-body p-4">
          <p>Are you sure you want to cancel this ride?</p>

          <input type="hidden" name="cancel_id" id="cancel_id">

          <div class="mb-3">
              <label class="form-label">Select Reason</label>
              <select name="reason" class="form-select" required>
                <option value="">Select Reason</option>
                  @foreach($reasons as $reason)
                      <option value="{{ $reason->id }}">{{ $reason->reason }}</option>
                  @endforeach
              </select>
          </div>
        </div>

        <!-- Footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
              Close
          </button>
          <button type="submit" class="btn btn-danger">
              Cancel Ride
          </button>
        </div>

      </form>
      <!-- Form End -->

    </div>
  </div>
</div>


@endsection


@section('script')

<script>
document.addEventListener('DOMContentLoaded', function () {
    var cancelModal = document.getElementById('cancelBooking');

    cancelModal.addEventListener('show.bs.modal', function (event) {
        var button = event.relatedTarget;
        var id = button.getAttribute('data-id');

        document.getElementById('cancel_id').value = id;
    });
});
</script>

@if (session('success'))
    <script>
        setTimeout(function() {
            $(".custom-alert-msg").html('');
        }, 6000);
    </script>
@endif

@if ($errors->any())
    <script>
        setTimeout(function() {
            $(".clear-msg").html('');
        }, 6000);
    </script>
@endif



<script>

$(document).ready(function(){
    let stopLoading = false;
    let page = 2;

    function loadData() {
        if (stopLoading) return; 

        $.ajax({
            url: "{{ url('load_bookinghistory') }}",
            type: "get",
            data: {
                "page": page++
            },
            success: function(response) {
                if (response.status == 100) {
                    stopLoading = true;
                    $(".load-disable").html('');
                } else  {
                    $('.load-data').append(response.data).hide().fadeIn('slow');
                }
            },
            error: function(xhr, status, error) {
                console.log('Error: ' + error);
            }
        });
    }

    

    
    $(".load-page").on("click", function(){
        loadData();
    });

    
});
</script>

@endsection
