@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
<main class="main-content">
  <section class="page-header">
    <div class="container">
      <h1 class="page-title">{{ __('lang.my_rides') }}</h1>
    </div>
  </section>

  <section class="rides-section">
    <div class="container">
      <div class="rides-tabs">
        <button class="ride-tab active" data-tab="booked">{{ __('lang.booked_rides') }}</button>
        <button class="ride-tab" data-tab="published">{{ __('lang.published_rides') }}</button>
      </div>
      
      <div class="rides-content" id="bookedRides">
        <div class="rides-status-filter">
          <button class="status-btn active" data-status="all">{{ __('lang.all') }}</button>
          <button class="status-btn" data-status="booked">{{ __('lang.booked') }}</button>
        </div>
        @if(session('payment_error'))
                <div class="alert alert-danger alert-dismissible fade show">
                    {{ session('payment_error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                @php session()->forget('payment_error'); @endphp
            @endif
        
        <div class="rides-list" id="bookedRidesList">
          <!-- Booked rides will be populated here -->
        </div>
      </div>
      
      <div class="rides-content hidden" id="publishedRides">
        <div class="rides-status-filter">
          <button class="status-btn active" data-status="all">{{ __('lang.all') }}</button>
          <button class="status-btn" data-status="placed">{{ __('lang.placed_tab') }}</button>
          <button class="status-btn" data-status="ongoing">{{ __('lang.on_going') }}</button>
          <button class="status-btn" data-status="completed">{{ __('lang.completed') }}</button>
        </div>
        <hr>
        <div class="rides-list" id="publishedRidesList">
          <!-- Published rides will be populated here -->
        </div>
      </div>
    </div>
  </section>
</main>

@endsection
@section('script')  
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>  
<script src="{{ asset('js/pages/my-rides.js') }}?v={{ time() }}"></script>
<script>
    $(document).on('click', '.delete-ride-btn', function(e) {
      e.stopPropagation();
      e.preventDefault();

      const rideId = $(this).data('ride-id');

      if (!confirm("{{trans('lang.are_you_sure_you_want_to_delete_this_published_ride')}}")) {
        return;
      }
      const $btn = $(this);
      $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin" style="color: #ef4444;"></i>');  

    
      db.collection('booking').doc(rideId).delete()
        .then(() => {
            state.ridesData.publishedRides = state.ridesData.publishedRides.filter(r => r.id !== rideId);
            renderRideList('published');
            showMessage(
                '{{trans("lang.ride_deleted_successfully")}}',
                'success'
            );
        })
        .catch((error) => {
            console.error("Error deleting ride:", error);

            showMessage(
                '{{trans("lang.failed_to_delete_ride_please_try_again")}}',
                'danger'
            );

            $btn.prop('disabled', false)
                .html('<i class="fa fa-trash" style="color: #ef4444; font-size: 18px;"></i>');
        });    
      
    });
</script>
@endsection