@extends('frontend::layouts.user')
@section('title')
    {{ __('Dashboard') }}
@endsection
@section('content')
    <div class="td-dashboard-content-box-intro">
        <h2>{{ __('Welcome') }}, {{ $user->full_name }}.</h2>
        <div class="row g-4">
            <div class="col-sm-6 col-xl-3">
                <div class="td-dashboard-content-box-intro-card"
                    data-background="{{ asset('frontend/default/img/dashboard/dashbaord-card-bg-3.png') }}">
                    <span>{{ __('Total Bookings') }}</span>
                    <h3>{{ $total_bookings }}</h3>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="td-dashboard-content-box-intro-card"
                    data-background="{{ asset('frontend/default/img/dashboard/dashbaord-card-bg-1.png') }}">
                    <span>{{ __('Total Spend') }}</span>
                    <h3>{{ $currencySymbol . $total_spend }}</h3>
                </div>
            </div>
            <div class="col-sm-6 col-xl-3">
                <div class="td-dashboard-content-box-intro-card"
                    data-background="{{ asset('frontend/default/img/dashboard/dashbaord-card-bg-2.png') }}">
                    <span>{{ __('Total Payments') }}</span>
                    <h3>{{ $total_payments }}</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="td-dashboard-content-box-bookings">
        <div class="td-dashboard-content-box-bookings-title">
            <h3>{{ __('My Booking List') }}</h3>
        </div>

        <div class="td-dashboard-content-box-bookings-table table-responsive">
            <table class="table align-middle custom-table-width">
                <thead>
                    <tr>
                        <th scope="col" class="text-start">{{ __('Image') }}</th>
                        <th scope="col" class="text-start">{{ __('Title') }}</th>
                        <th scope="col" class="text-center">{{ __('Location') }}</th>
                        <th scope="col" class="text-center">{{ __('From') }}</th>
                        <th scope="col" class="text-center">{{ __('To') }}</th>
                        <th scope="col" class="text-center">{{ __('Amount') }}</th>
                        <th scope="col" class="text-center">{{ __('Payment Status') }}</th>
                        <th scope="col" class="text-center">{{ __('Status') }}</th>
                        <th scope="col" class="text-center">{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($bookings as $booking)
                        <tr>
                            <td class="text-start">
                                <img class="avatar" src="{{ asset($booking->space->banner_image) }}" alt="">
                            </td>
                            <td class="text-center">
                                <a
                                    href="{{ route('service.details', encrypt($booking->space_id)) }}">{{ $booking->space?->title }}</a>
                            </td>
                            <td class="text-center">{{ $booking->space?->location?->name }}</td>
                            <td class="text-center">{{ $booking->booking_from->format('d M Y h:i A') }}</td>
                            <td class="text-center">{{ $booking->booking_to->format('d M Y h:i A') }}</td>
                            <td class="amount text-center">
                                {{ $currencySymbol . $booking->total_amount }}
                            </td>
                            <td class="status text-end">
                                <button
                                    @class([
                                        'success' => $booking->is_paid,
                                        'ongoing' => !$booking->is_paid,
                                    ])>{{ $booking->is_paid ? __('Paid') : __('Unpaid') }}</button>
                            </td>
                            <td class="status text-end">
                                <button @class([
                                    'success' => $booking->status == App\Enums\BookingStatus::Booked,
                                    'ongoing' => $booking->status !== App\Enums\BookingStatus::Booked,
                                ])>{{ ucfirst($booking->status->value) }}</button>
                            </td>
                            <td class="status text-end">
                                <div class="action-btns">
                                    @if (!$booking->is_paid && $booking->status !== App\Enums\BookingStatus::Cancelled)
                                        <a href="{{ route('user.booking.booked', $booking->booking_id) }}" target="_blank"
                                            class="print-btn" aria-label="{{ __('Pay Now') }}" data-bs-toggle="tooltip"
                                            data-bs-placement="top" data-bs-original-title="{{ __('Pay Now') }}">
                                            <i class="fa-solid fa-paper-plane"></i>
                                        </a>
                                    @endif
                                    <a href="{{ route('user.booking.invoice', $booking->booking_id) }}" class="print-btn"
                                        aria-label="{{ __('Download Invoice') }}" data-bs-toggle="tooltip"
                                        data-bs-placement="top" data-bs-original-title="{{ __('Download Invoice') }}">
                                        <i class="fa-solid fa-print"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{ $bookings->links('frontend::include.__pagination') }}
    </div>
@endsection
