@extends('adminmodule::layouts.master')

@section('title', 'Customer Trips')

@push('css_or_js')
    <link rel="stylesheet" href="{{ asset('assets/admin-module/plugins/dataTables/jquery.dataTables.min.css') }}">
@endpush
@section('content')

    <!-- Main Content -->
    <div class="main-content">
        <div class="container-fluid">
            @can('user_view')
                <h2 class="fs-22 mb-4 text-capitalize">Customer Trips</h2>

                <div id="statistics">

                </div>
            @endcan
            <div class="row g-4">
                <div class="col-12">
                    <div class="d-flex flex-wrap justify-content-between align-items-center my-3 gap-3">
                        <div class="row g-4">
                            <div class="col-12">
                                <div class="">
                                    <ul class="nav d-inline-flex nav--tabs p-1 rounded bg-white">
                                        <li class="nav-item">
                                            <a href="{{ route('admin.customer.trips') }}"
                                                class="nav-link text-capitalize active">All trips</a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="{{ route('admin.customer.trips') }}"
                                                class="nav-link text-capitalize ">Completed</a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="{{ route('admin.customer.trips') }}"
                                                class="nav-link text-capitalize ">Canceled</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center gap-2">
                            <span class="text-muted text-capitalize">Total Completed Trips : </span>
                            <span class="text-primary fs-16 fw-bold"
                                id="total_record_count">{{ $totalCompletedTrips }}</span>
                        </div>
                    </div>

                    <div class="tab-content">
                        <div class="tab-pane fade active show" id="all" role="tabpanel">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-top d-flex flex-wrap gap-10 justify-content-between">
                                        <form class="search-form search-form_style-two">
                                            <div class="input-group search-form__input_group">
                                                <span class="search-form__icon">
                                                    <i class="bi bi-search"></i>
                                                </span>
                                                <input type="search" name="search" value="{{ request()->get('search') }}"
                                                    class="theme-input-style search-form__input"
                                                    placeholder="{{ translate('Search_Here_by_Customer_Name') }}">
                                            </div>
                                            <button type="submit" class="btn btn-primary search-submit"
                                                data-url="{{ url()->full() }}">{{ translate('search') }}</button>
                                        </form>
                                    </div>
                                    <div class="table-responsive mt-3">
                                        <table class="table table-borderless align-middle table-hover">
                                            <thead class="table-light align-middle text-capitalize">
                                                <tr>
                                                    <th class="sl">{{ translate('SL') }}</th>
                                                    <th class="customer-name text-capitalize">Customer</th>
                                                    <th class="text-capitalize">Trip Status</th>
                                                    <th class="text-capitalize">Driver</th>
                                                    <th class="text-capitalize">Final Fare</th>
                                                    <th class="text-capitalize">Time</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse ($customerWithCompletedTrips as $key => $customer)
                                                    @php
                                                        $completedTrips = $customer->customerTrips;
                                                        $latestTrip = $completedTrips->first();
                                                    @endphp
                                                    <tr>
                                                        <td>{{ $customerWithCompletedTrips->firstItem() + $key }}</td>
                                                        <td>
                                                            <a href="{{ route('admin.customer.show', ['id' => $customer->id]) }}"
                                                                class="media align-items-center gap-2">
                                                                <div class="rounded custom-box-size overflow-hidden"
                                                                    style="--size: 36px">
                                                                    <img loading="lazy" class="fit-object"
                                                                        src="{{ onErrorImage(
                                                                            $customer->profile_image,
                                                                            asset('storage/customer/profile') . '/' . $customer->profile_image,
                                                                            asset('assets/admin-module/img/avatar/avatar.png'),
                                                                            'customer/profile/',
                                                                        ) }}"
                                                                        alt="">
                                                                </div>
                                                                <div class="media-body">
                                                                    {{ $customer->first_name . ' ' . $customer->last_name }}
                                                                    ({{ $completedTrips->count() }})
                                                                </div>
                                                            </a>
                                                        </td>
                                                        <td>Completed</td>
                                                        <td>
                                                            @if ($latestTrip && $latestTrip->driver)
                                                                <a href="{{ route('admin.driver.show', ['id' => $latestTrip->driver->id]) }}"
                                                                    class="media align-items-center gap-2">
                                                                    <div class="rounded custom-box-size overflow-hidden"
                                                                        style="--size: 36px">
                                                                        <img loading="lazy" class="fit-object"
                                                                            src="{{ onErrorImage(
                                                                                $latestTrip->driver->profile_image,
                                                                                asset('storage/driver/profile') . '/' . $latestTrip->driver->profile_image,
                                                                                asset('assets/admin-module/img/avatar/avatar.png'),
                                                                                'driver/profile/',
                                                                            ) }}"
                                                                            alt="">
                                                                    </div>
                                                                    <div class="media-body">
                                                                        {{ $latestTrip->driver->first_name . ' ' . $latestTrip->driver->last_name }}
                                                                    </div>
                                                                </a>
                                                            @else
                                                                <span class="text-muted">N/A</span>
                                                            @endif
                                                        </td>
                                                        <td>{{ number_format($completedTrips->sum('paid_fare'), 2) }}</td>
                                                        <td>{{ $latestTrip ? $latestTrip->created_at->format('d M Y, H:i') : 'N/A' }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="6" class="text-center text-muted">
                                                            {{ translate('No completed trips found') }}
                                                        </td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="d-flex justify-content-end">
                                        {{ $customerWithCompletedTrips->links() }}
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Main Content -->

@endsection