@extends('layouts.app-mobile-partner')
@section('title', 'My Bookings — Partner App')
@section('apptitle', 'My bookings')

@section('content')

{{-- KPI cards --}}
<div class="bk-kpi-row">
    <div class="bk-kpi bk-kpi-active">
        <span class="bk-kpi-ic">📦</span>
        <div>
            <strong>{{ $kpis['active'] }}</strong>
            <span>Active subs</span>
        </div>
    </div>
    <div class="bk-kpi bk-kpi-total">
        <span class="bk-kpi-ic">📊</span>
        <div>
            <strong>{{ $kpis['total'] }}</strong>
            <span>Total</span>
        </div>
    </div>
    <div class="bk-kpi bk-kpi-visits">
        <span class="bk-kpi-ic">✓</span>
        <div>
            <strong>{{ $kpis['visits'] }}</strong>
            <span>Visits done</span>
        </div>
    </div>
    <div class="bk-kpi bk-kpi-money">
        <span class="bk-kpi-ic">₹</span>
        <div>
            <strong>₹{{ number_format(($kpis['revenue'] ?? 0)/100, 0) }}</strong>
            <span>Monthly</span>
        </div>
    </div>
</div>

{{-- Create new + tabs --}}
<div class="bk-toolbar">
    <a href="{{ route('pa.bookings.new') }}" class="btn-new-booking">
        <x-icon name="plus" :size="16" /> New booking
    </a>
    <div class="app-tab-row app-tab-row-sm" style="margin: 0;">
        <a href="{{ route('pa.bookings', ['tab' => 'active']) }}" class="app-tab {{ $tab === 'active' ? 'active' : '' }}">Active</a>
        <a href="{{ route('pa.bookings', ['tab' => 'completed']) }}" class="app-tab {{ $tab === 'completed' ? 'active' : '' }}">Done</a>
        <a href="{{ route('pa.bookings', ['tab' => 'cancelled']) }}" class="app-tab {{ $tab === 'cancelled' ? 'active' : '' }}">Cancelled</a>
        <a href="{{ route('pa.bookings', ['tab' => 'all']) }}" class="app-tab {{ $tab === 'all' ? 'active' : '' }}">All</a>
    </div>
</div>

<div class="app-section app-pad">
    @if($bookings->count())
        @foreach($bookings as $b)
            <a href="{{ route('pa.booking.show', $b->booking_code) }}" class="bk-card">
                <div class="bk-card-head">
                    <div>
                        <strong>{{ $b->service->name ?? 'Service' }}</strong>
                        <div class="bk-customer">{{ $b->customer->name ?? $b->customer_name }}</div>
                    </div>
                    <div class="bk-status-col">
                        @if($b->subscription_status)
                            <span class="bk-pill bk-pill-{{ $b->subscription_status }}">{{ ucfirst($b->subscription_status) }}</span>
                        @else
                            <span class="bk-pill bk-pill-{{ $b->status }}">{{ ucfirst($b->status) }}</span>
                        @endif
                    </div>
                </div>
                <div class="bk-card-meta">
                    <span>📍 {{ $b->area->name ?? '—' }}</span>
                    <span>📅 {{ $b->scheduled_date?->format('d M') ?? '—' }} · {{ $b->scheduled_slot }}</span>
                </div>
                <div class="bk-card-foot">
                    <div class="bk-code">{{ $b->booking_code }}</div>
                    <div class="bk-amount">₹{{ number_format(($b->total_paise ?? 0)/100, 0) }}<small>/mo</small></div>
                </div>
                <div class="bk-card-progress">
                    @php $pct = $b->visits_per_period ? round(($b->visits_used / $b->visits_per_period) * 100, 0) : 0; @endphp
                    <div class="bk-progress-bar"><div class="bk-progress-fill" style="width: {{ $pct }}%"></div></div>
                    <span class="bk-progress-text">{{ $b->visits_used }} / {{ $b->visits_per_period }} visits</span>
                </div>
            </a>
        @endforeach
        <div class="app-pagination">{{ $bookings->links() }}</div>
    @else
        <div class="empty-app">
            <div class="ea-ic">📋</div>
            <h3>No {{ $tab }} bookings</h3>
            <p>Tap the "+ New booking" button above to add a customer subscription.</p>
            <a href="{{ route('pa.bookings.new') }}" class="btn btn-primary" style="margin-top:14px;">
                <x-icon name="plus" :size="14" /> Create a booking
            </a>
        </div>
    @endif
</div>

@endsection