@extends('layouts.app-shell')
@section('bottomnav')
    <a href="{{ route('partner.dashboard') }}"><span class="ic">📊</span><span>Home</span></a>
    <a href="{{ route('partner.bookings') }}" class="active"><span class="ic">📋</span><span>Bookings</span></a>
    <a href="{{ route('partner.schedule') }}"><span class="ic">📅</span><span>Schedule</span></a>
    <a href="{{ route('partner.team') }}"><span class="ic">👥</span><span>Team</span></a>
    <a href="{{ route('partner.profile') }}"><span class="ic">👤</span><span>Profile</span></a>
@endsection
@section('title', 'My bookings')
@section('sidebar')
    <a href="{{ route('partner.dashboard') }}"><span class="ic">📊</span> Dashboard</a>
    <a href="{{ route('partner.bookings') }}" class="active"><span class="ic">📋</span> My bookings</a>
    <a href="{{ route('partner.schedule') }}"><span class="ic">📅</span> Schedule</a>
    <a href="{{ route('partner.attendance') }}"><span class="ic">📍</span> Attendance</a>
    <a href="{{ route('partner.leaves') }}"><span class="ic">🏖</span> Leaves</a>
    <a href="{{ route('partner.team') }}"><span class="ic">👥</span> My team</a>
    <a href="{{ route('partner.earnings') }}"><span class="ic">💰</span> Earnings</a>
    <a href="{{ route('partner.profile') }}"><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')

@if(session('success'))
    <div class="alert alert-success" style="max-width: 1100px; margin-bottom: 18px;">{{ session('success') }}</div>
@endif

<div class="flex-between mb-3">
    <div>
        <h2 style="font-size: 24px; font-weight: 700;">My bookings</h2>
        <p class="muted" style="font-size: 13px;">Add & manage customer subscriptions.</p>
    </div>
    <a href="{{ route('partner.bookings.new') }}" class="btn btn-primary"><x-icon name="plus" :size="14" /> New booking</a>
</div>

{{-- KPIs --}}
<div class="kpi-row" style="margin-bottom: 18px;">
    <div class="kpi-card kpi-orange">
        <div class="kpi-ic">📦</div>
        <div>
            <strong>{{ $kpis['active'] }}</strong>
            <span>Active subs</span>
        </div>
    </div>
    <div class="kpi-card kpi-blue">
        <div class="kpi-ic">📊</div>
        <div>
            <strong>{{ $kpis['total'] }}</strong>
            <span>Total</span>
        </div>
    </div>
    <div class="kpi-card kpi-green">
        <div class="kpi-ic">✓</div>
        <div>
            <strong>{{ $kpis['visits'] }}</strong>
            <span>Visits done</span>
        </div>
    </div>
    <div class="kpi-card kpi-purple">
        <div class="kpi-ic">₹</div>
        <div>
            <strong>₹{{ number_format(($kpis['revenue'] ?? 0)/100, 0) }}</strong>
            <span>Monthly</span>
        </div>
    </div>
</div>

{{-- Tabs --}}
<div class="flex" style="gap: 8px; margin-bottom: 14px;">
    <a href="{{ route('partner.bookings', ['tab' => 'active']) }}" class="btn btn-sm {{ $tab === 'active' ? 'btn-primary' : 'btn-outline' }}">Active</a>
    <a href="{{ route('partner.bookings', ['tab' => 'completed']) }}" class="btn btn-sm {{ $tab === 'completed' ? 'btn-primary' : 'btn-outline' }}">Done</a>
    <a href="{{ route('partner.bookings', ['tab' => 'cancelled']) }}" class="btn btn-sm {{ $tab === 'cancelled' ? 'btn-primary' : 'btn-outline' }}">Cancelled</a>
    <a href="{{ route('partner.bookings', ['tab' => 'all']) }}" class="btn btn-sm {{ $tab === 'all' ? 'btn-primary' : 'btn-outline' }}">All</a>
</div>

<div class="panel">
    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr>
                    <th>Code</th>
                    <th>Service</th>
                    <th>Customer</th>
                    <th>Area</th>
                    <th>Schedule</th>
                    <th>Progress</th>
                    <th>Monthly</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($bookings as $b)
                    @php $pct = $b->visits_per_period ? round(($b->visits_used / $b->visits_per_period) * 100, 0) : 0; @endphp
                    <tr>
                        <td data-label="Code"><code style="background:var(--bfk-bg-soft); padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600;">{{ $b->booking_code }}</code></td>
                        <td data-label="Service"><strong>{{ $b->service->name ?? '—' }}</strong></td>
                        <td data-label="Customer">
                            <strong>{{ $b->customer->name ?? $b->customer_name }}</strong>
                            <div class="muted" style="font-size: 11px;">{{ $b->customer->phone ?? $b->customer_phone }}</div>
                        </td>
                        <td data-label="Area">{{ $b->area->name ?? '—' }}</td>
                        <td data-label="Schedule">{{ $b->scheduled_date?->format('d M') ?? '—' }}<div class="muted" style="font-size: 11px;">{{ $b->scheduled_slot }}</div></td>
                        <td data-label="Progress">
                            <div style="display:flex; align-items:center; gap:6px;">
                                <div style="flex:1; height:6px; background: var(--bfk-bg-soft); border-radius:999px; overflow:hidden;">
                                    <div style="width: {{ $pct }}%; height:100%; background: linear-gradient(90deg, var(--bfk-primary), var(--bfk-primary-2));"></div>
                                </div>
                                <span class="muted" style="font-size: 11px; white-space: nowrap;">{{ $b->visits_used }}/{{ $b->visits_per_period }}</span>
                            </div>
                        </td>
                        <td data-label="Monthly"><strong>₹{{ number_format(($b->total_paise ?? 0)/100, 0) }}</strong></td>
                        <td data-label="Status">
                            @if($b->subscription_status === 'active')
                                <span class="pill pill-green">Active</span>
                            @elseif($b->subscription_status === 'paused')
                                <span class="pill pill-orange">Paused</span>
                            @elseif($b->subscription_status === 'completed')
                                <span class="pill pill-blue">Done</span>
                            @elseif(in_array($b->subscription_status, ['cancelled', 'expired']))
                                <span class="pill pill-red">Cancelled</span>
                            @else
                                <span class="pill pill-gold">{{ ucfirst($b->subscription_status ?? 'pending') }}</span>
                            @endif
                        </td>
                        <td data-label="">
                            <a href="{{ route('partner.booking.show', $b->booking_code) }}" class="ic-btn" title="Open"><x-icon name="eye" :size="14" /></a>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="9"><div class="empty">No {{ $tab }} bookings. <a href="{{ route('partner.bookings.new') }}" style="color: var(--bfk-primary); font-weight: 600;">Add your first →</a></div></td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-3">{{ $bookings->appends(request()->query())->links() }}</div>

@endsection