@extends('layouts.admin')

@section('content')

@php
    $bookingsFilterActive = request()->hasAny(['q', 'status']);
    $bookingsFilterSummary = 'All bookings';
    if ($bookingsFilterActive) {
        $parts = [];
        if (request('q')) {
            $parts[] = '"' . \Illuminate\Support\Str::limit(request('q'), 12) . '"';
        }
        if (request('status')) {
            $parts[] = ucfirst(request('status'));
        }
        $bookingsFilterSummary = implode(' · ', $parts);
    }
@endphp

<div class="mb-2 mb-md-4">
    <h4 class="brand-font text-uppercase text-secondary mb-0">Manage Repair Bookings</h4>
</div>

<div class="card border-0 shadow-sm rounded-4 p-2 p-md-4 bg-white mb-3 mb-md-4">
    <x-admin-filter-bar
        id="bookingFiltersCollapse"
        :action="route('admin.bookings.index')"
        :summary="$bookingsFilterSummary"
        :active="$bookingsFilterActive"
        :clear-url="route('admin.bookings.index')">

        <div class="col-12 col-md-5">
            <label class="form-label small text-muted mb-1 d-md-none">Search</label>
            <input type="text" class="form-control form-control-sm rounded-pill px-2 px-md-3 admin-filter-input" name="q" placeholder="Customer, phone, bike type..." value="{{ request('q') }}">
        </div>
        <div class="col-6 col-md-4">
            <label class="form-label small text-muted mb-1 d-md-none">Status</label>
            <select class="form-select form-select-sm rounded-pill px-2 px-md-3 admin-filter-select" name="status">
                <option value="">All Booking Statuses</option>
                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending Confirmation</option>
                <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmed / In Workshop</option>
                <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
            </select>
        </div>
        <div class="col-6 col-md-3">
            <button type="submit" class="btn btn-primary-mj w-100 rounded-pill py-1 py-md-2 btn-sm">
                <i class="bi bi-search d-md-none"></i><span class="d-none d-md-inline">Filter</span><span class="d-md-none ms-1">Apply</span>
            </button>
        </div>
    </x-admin-filter-bar>

    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr class="text-uppercase text-secondary small" style="font-size: 10px;">
                    <th scope="col">Customer</th>
                    <th scope="col">Phone</th>
                    <th scope="col">Bike Type</th>
                    <th scope="col">Scheduled Date</th>
                    <th scope="col">Pickup</th>
                    <th scope="col">Status</th>
                    <th scope="col">Est. Cost</th>
                    <th scope="col" class="text-end">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($bookings as $bk)
                    <tr>
                        <td class="fw-bold text-secondary">{{ $bk->name }}</td>
                        <td class="small text-muted">{{ $bk->phone }}</td>
                        <td class="small text-muted">{{ $bk->bike_type }}</td>
                        <td class="small text-muted">{{ $bk->preferred_date->format('d/m/Y') }}</td>
                        <td>
                            @if($bk->pickup_required)
                                <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-2.5 py-1" style="font-size: 9px;">Yes</span>
                            @else
                                <span class="badge bg-secondary bg-opacity-10 text-secondary rounded-pill px-2.5 py-1" style="font-size: 9px;">No</span>
                            @endif
                        </td>
                        <td>
                            @if($bk->status === 'confirmed')
                                <span class="badge bg-success bg-opacity-10 text-success rounded-pill px-2.5 py-1">Confirmed</span>
                            @elseif($bk->status === 'completed')
                                <span class="badge bg-info bg-opacity-10 text-info rounded-pill px-2.5 py-1">Completed</span>
                            @elseif($bk->status === 'cancelled')
                                <span class="badge bg-danger bg-opacity-10 text-danger rounded-pill px-2.5 py-1">Cancelled</span>
                            @else
                                <span class="badge bg-warning bg-opacity-10 text-warning rounded-pill px-2.5 py-1">Pending</span>
                            @endif
                        </td>
                        <td class="fw-bold text-secondary">
                            {{ $bk->estimated_cost ? 'KSh ' . number_format($bk->estimated_cost) : 'TBD' }}
                        </td>
                        <td class="text-end">
                            <a href="{{ route('admin.bookings.show', $bk->id) }}" class="btn btn-outline-primary btn-sm rounded-circle admin-action-btn" title="View booking">
                                <i class="bi bi-eye"></i>
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-3 mt-md-4">
        {{ $bookings->links('pagination::bootstrap-5') }}
    </div>
</div>

@endsection
