@extends('layouts.app-shell')
@section('bottomnav')
    <a href="{{ route('customer.bookings') }}" class="{{ request()->routeIs('customer.bookings*') ? 'active' : '' }}"><span class="ic">📋</span><span>Subs</span></a>
    <a href="{{ route('customer.schedule') }}" class="{{ request()->routeIs('customer.schedule*') ? 'active' : '' }}"><span class="ic">📅</span><span>Schedule</span></a>
    <a href="{{ route('customer.services.browse') }}" class="{{ request()->routeIs('customer.services*') || request()->routeIs('customer.service.*') ? 'active' : '' }}"><span class="ic">🛠</span><span>Services</span></a>
    <a href="{{ route('customer.track.form') }}" class="{{ request()->routeIs('customer.track.*') ? 'active' : '' }}"><span class="ic">🔍</span><span>Track</span></a>
    <a href="{{ route('customer.profile') }}" class="{{ request()->routeIs('customer.profile*') ? 'active' : '' }}"><span class="ic">👤</span><span>Profile</span></a>
@endsection
@section('title', 'My Subscriptions')
@section('sidebar')
    <a href="{{ route('customer.bookings') }}" class="{{ request()->routeIs('customer.bookings*') ? 'active' : '' }}"><span class="ic">📋</span> My subscriptions</a>
    <a href="{{ route('customer.schedule') }}" class="{{ request()->routeIs('customer.schedule*') ? 'active' : '' }}"><span class="ic">📅</span> Schedule</a>
    <a href="{{ route('customer.services.browse') }}" class="{{ request()->routeIs('customer.services*') || request()->routeIs('customer.service.*') ? 'active' : '' }}"><span class="ic">🛠</span> Browse services</a>
    <a href="{{ route('customer.track.form') }}" class="{{ request()->routeIs('customer.track.*') ? 'active' : '' }}"><span class="ic">🔍</span> Track visit</a>
    <a href="{{ route('customer.profile') }}" class="{{ request()->routeIs('customer.profile*') ? 'active' : '' }}"><span class="ic">👤</span> Profile</a>
    <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('lo').submit()"><span class="ic">⤴</span> Logout</a>
    <form id="lo" method="POST" action="{{ route('logout') }}" style="display:none">@csrf</form>
@endsection
@section('content')
<div class="tabs">
    <a href="{{ route('customer.bookings', ['tab' => 'active']) }}" class="{{ $tab === 'active' ? 'active' : '' }}">🔄 Active</a>
    <a href="{{ route('customer.bookings', ['tab' => 'cancelled']) }}" class="{{ $tab === 'cancelled' ? 'active' : '' }}">✕ Cancelled</a>
    <a href="{{ route('customer.bookings', ['tab' => 'all']) }}" class="{{ $tab === 'all' ? 'active' : '' }}">📋 All</a>
</div>

<div class="panel">
    <div class="table-wrap">
        <table class="table">
            <thead><tr><th>Code</th><th>Service</th><th>Partner</th><th>Next visit</th><th>Monthly</th><th>Status</th><th></th></tr></thead>
            <tbody>
                @forelse($bookings as $b)
                    <tr>
                        <td data-label="Code"><a href="{{ route('customer.booking', $b->booking_code) }}"><span class="code">{{ $b->booking_code }}</span></a></td>
                        <td data-label="Service"><strong>{{ $b->service->name }}</strong></td>
                        <td data-label="Partner">{{ $b->partner?->display_name ?? '—' }}</td>
                        <td data-label="Next visit">
                            @php $next = $b->visits()->where('status', 'scheduled')->where('scheduled_date', '>=', now()->toDateString())->orderBy('scheduled_date')->first(); @endphp
                            @if($next)
                                <span style="font-size: 13px;">{{ $next->scheduled_date->format('d M') }}<div class="muted" style="font-size:11px;">{{ $next->scheduled_slot }}</div></span>
                            @else
                                <span class="muted">—</span>
                            @endif
                        </td>
                        <td data-label="Monthly">₹{{ number_format($b->total_rupees, 0) }}</td>
                        <td data-label="Status"><span class="pill pill-{{ $b->status_color }}">{{ $b->display_status }}</span></td>
                        <td data-label=""><a href="{{ route('customer.booking', $b->booking_code) }}" class="btn-app btn-outline">Open</a></td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="empty" data-label="t" style="text-align:center;padding:40px;">No subscriptions yet. <a href="{{ route('services.index') }}">Browse services →</a></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
<div>{{ $bookings->links() }}</div>
@endsection