@extends('admin.layout.index')
@section('title', 'Admin | Rides Management')
@section('custom-style')
    <style>

    </style>
@endsection
@section('content')

    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Start::page-header -->
            <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Rides Management</h1>
                    <div class="">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Rides Detail</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <!-- End::page-header -->


            <!-- Start::row-4 -->
            <div class="row">
                <div class="col-xl-12">
                    <div class="card custom-card">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                All Rides
                            </div>
                            <div class="d-flex flex-wrap gap-2">
                                <div>
                                    <input class="form-control form-control-sm" id="search-rides" type="text"
                                        placeholder="Search Here" aria-label=".form-control-sm example">
                                </div>
                                {{-- <div class="dropdown">
                                    <a href="javascript:void(0);"
                                        class="btn btn-primary btn-sm btn-wave waves-effect waves-light"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        Sort By<i class="ri-arrow-down-s-line align-middle ms-1 d-inline-block"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a class="dropdown-item" href="javascript:void(0);">New</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0);">Popular</a></li>
                                        <li><a class="dropdown-item" href="javascript:void(0);">Relevant</a></li>
                                    </ul>
                                </div> --}}
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="nav nav-tabs tab-style-2 mb-3 d-sm-flex" id="myTab1" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="activeRide-tab" data-bs-toggle="tab"
                                        data-bs-target="#activeRide-tab-pane" data-status="active" type="button"
                                        role="tab" aria-controls="activeRide-tab-pane" aria-selected="true"><i
                                            class="bi bi-activity me-1 align-middle"></i>Active
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="completedRide-tab" data-bs-toggle="tab"
                                        data-bs-target="#completedRide-tab-pane" data-status="completed" type="button"
                                        role="tab" aria-controls="completedRide-tab-pane" aria-selected="false"
                                        tabindex="-1"><i class="bi bi-check-all me-1 align-middle"></i>Completed
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="cancelRide-tab" data-bs-toggle="tab"
                                        data-bs-target="#cancelRide-tab-pane" data-status="cancelled" type="button"
                                        role="tab" aria-controls="cancelRide-tab-pane" aria-selected="false"
                                        tabindex="-1"><i class="bi bi-trash me-1 align-middle"></i>Cancelled
                                    </button>
                                </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                                <div class="tab-pane fade show active text-muted border" id="activeRide-tab-pane"
                                    role="tabpanel" aria-labelledby="activeRide-tab" tabindex="0">

                                    <div id="active-rides-container">
                                        @include('admin.rides-paginate', ['rides' => $activeRides])

                                    </div>
                                </div>
                                <div class="tab-pane fade  text-muted border" id="completedRide-tab-pane" role="tabpanel"
                                    aria-labelledby="completedRide-tab" tabindex="0">
                                    <div id="completed-rides-container">
                                        @include('admin.rides-paginate', ['rides' => $completeRides])
                                    </div>
                                </div>
                                <div class="tab-pane fade  text-muted border" id="cancelRide-tab-pane" role="tabpanel"
                                    aria-labelledby="cancelRide-tab" tabindex="0">

                                    <div id="cancelled-rides-container">

                                        @include('admin.rides-paginate', [
                                            'rides' => $cancelledRides,
                                        ])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-4 -->

        </div>
    </div>

@endsection
@section('custom-script')
    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Event delegation for modal triggers
        document.addEventListener('click', function(event) {
            var target = event.target.closest('[data-modal-target]');
            if (target) {
                var modalId = target.getAttribute('data-modal-target');
                var modal = new bootstrap.Modal(document.querySelector(modalId));
                modal.show();
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('search-rides');

            searchInput.addEventListener('keyup', function() {
                const query = searchInput.value.trim();
                const status = document.querySelector('.nav-link.active').dataset.status;
                fetchRides(1, status, query);
            });

            document.addEventListener('click', function(event) {
                if (event.target.classList.contains('page-link')) {
                    event.preventDefault();
                    const page = event.target.dataset.page;
                    const status = document.querySelector('.nav-link.active').dataset.status;
                    const query = document.getElementById('search-rides').value.trim();
                    fetchRides(page, status, query);
                }
            });

            function fetchRides(page, status, query = '') {
                const url = `{{ url('admin/rides') }}?page=${page}&status=${status}&search=${query}`;

                fetch(url, {
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => response.text())
                    .then(data => {
                        const containerId = `${status}-rides-container`;
                        document.getElementById(containerId).innerHTML = data;
                    })
                    .catch(error => {
                        console.error('Error fetching rides:', error);
                    });
            }
        });


        // document.addEventListener('click', function(event) {
        //     if (event.target.classList.contains('page-link')) {
        //         event.preventDefault();
        //         const page = event.target.dataset.page;
        //         const status = document.querySelector('.nav-link.active').dataset.status;
        //         if (page && status) {
        //             fetchPaginatedRides(page, status);
        //         }
        //     }
        // });

        // function fetchPaginatedRides(page, status) {
        //     const url = `{{ url('admin/rides') }}?page=${page}&status=${status}`;

        //     fetch(url, {
        //             headers: {
        //                 'X-Requested-With': 'XMLHttpRequest'
        //             }
        //         })
        //         .then(response => response.text())
        //         .then(data => {
        //             const containerId = `${status}-rides-container`;
        //             document.getElementById(containerId).innerHTML = data;
        //         })
        //         .catch(error => {
        //             console.error('Error fetching rides:', error);
        //         });
        // }




        // Load data on tab click
        // $('.nav-link').on('click', function() {
        //     let status = $(this).data('status');
        //     loadRides(status, 1);
        // });

        // // Load data on pagination click
        // $(document).on('click', '.pagination-link', function(e) {
        //     e.preventDefault();
        //     let page = $(this).data('page');
        //     let status = $('.nav-link.active').data('status');
        //     loadRides(status, page);
        // });

        // function loadRides(status, page) {
        //     $.ajax({
        //         url: '{{ route('rides') }}',
        //         type: 'GET',
        //         data: {
        //             status: status,
        //             page: page
        //         },
        //         success: function(data) {
        //             $('#ride-container').html(data);
        //         },
        //         error: function(xhr) {
        //             console.error(xhr);
        //         }
        //     });
        // }
    </script>

@endsection