@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', 'Booking ' . $booking->booking_code)
@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')

@php
    $today = now()->toDateString();
    $upcoming = $booking->visits->where('scheduled_date', '>=', $today);
    $completed = $booking->visits->where('status', 'completed');
    $pct = $booking->visits_per_period ? round(($booking->visits_used / $booking->visits_per_period) * 100, 0) : 0;
    $commission = \App\Services\CommissionService::forBooking($booking);
    $partnerProfile = $booking->partner;
    $commissionPercent = \App\Services\CommissionService::effectivePercentFor($partnerProfile);
@endphp

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

<div class="flex-between mb-3">
    <div>
        <a href="{{ route('partner.bookings') }}" class="btn btn-ghost btn-sm">← All bookings</a>
        <h2 style="font-size: 24px; font-weight: 700; margin-top: 8px;">Booking {{ $booking->booking_code }}</h2>
        <p class="muted" style="font-size: 13px; margin-top: 4px;">{{ $booking->service->name ?? 'Service' }} · {{ $booking->customer->name ?? $booking->customer_name }}</p>
    </div>
    <span class="pill {{ $booking->subscription_status === 'active' ? 'pill-green' : ($booking->subscription_status === 'paused' ? 'pill-orange' : 'pill-grey') }}" style="font-size: 13px; padding: 6px 14px;">{{ ucfirst($booking->subscription_status ?? 'active') }}</span>
</div>

<div class="kpi-row" style="margin-bottom: 22px;">
    <div class="kpi-card kpi-green">
        <div class="kpi-ic">✓</div>
        <div><strong>{{ $booking->visits_used }}</strong><span>Visits done</span></div>
    </div>
    <div class="kpi-card kpi-orange">
        <div class="kpi-ic">⏰</div>
        <div><strong>{{ $booking->visits_per_period - $booking->visits_used }}</strong><span>Visits left</span></div>
    </div>
    <div class="kpi-card kpi-blue">
        <div class="kpi-ic">📊</div>
        <div><strong>{{ $pct }}%</strong><span>Complete</span></div>
    </div>
    <div class="kpi-card kpi-purple">
        <div class="kpi-ic">₹</div>
        <div><strong>₹{{ number_format($booking->total_paise/100, 0) }}</strong><span>Monthly</span></div>
    </div>
</div>

<div class="grid-2" style="grid-template-columns: 1fr 1.4fr;">
    {{-- Detail --}}
    <div class="panel">
        <div class="panel-head"><h3>Subscription details</h3></div>
        <table class="table">
            <tbody>
                <tr><td><strong>Service</strong></td><td>{{ $booking->service->name ?? '—' }}</td></tr>
                <tr><td><strong>Customer</strong></td><td>{{ $booking->customer->name ?? $booking->customer_name }}<div class="muted" style="font-size: 11.5px;">{{ $booking->customer->phone ?? $booking->customer_phone }}</div></td></tr>
                <tr><td><strong>Area</strong></td><td>{{ $booking->area->name ?? '—' }} · {{ $booking->area->city ?? '' }}</td></tr>
                <tr><td><strong>Address</strong></td><td>{{ $booking->address }}@if($booking->pincode) · {{ $booking->pincode }}@endif</td></tr>
                <tr><td><strong>Schedule</strong></td><td>{{ $booking->scheduled_date?->format('d M Y') ?? '—' }} · {{ $booking->scheduled_slot }}</td></tr>
                <tr><td><strong>Period</strong></td><td>{{ $booking->current_period_start?->format('d M') }} – {{ $booking->current_period_end?->format('d M Y') }}</td></tr>
                <tr><td><strong>Next billing</strong></td><td>{{ $booking->next_billing_date?->format('d M Y') ?? '—' }}</td></tr>
                <tr><td><strong>Auto-renew</strong></td><td>{{ $booking->auto_renew ? 'On' : 'Off' }}</td></tr>
                @if($booking->notes)
                <tr><td><strong>Notes</strong></td><td>{{ $booking->notes }}</td></tr>
                @endif
            </tbody>
        </table>
    </div>

    {{-- Visits --}}
    <div class="panel">
        <div class="panel-head">
            <h3>Visits</h3>
            <span class="muted" style="font-size: 12.5px;">{{ $completed->count() }} done · {{ $booking->visits->where('status', 'cancelled')->count() }} cancelled · {{ $booking->visits->count() }} total</span>
        </div>
        <div class="table-wrap" style="max-height: 500px; overflow-y: auto;">
            <table class="table">
                <thead>
                    <tr><th>Date</th><th>Slot</th><th>Team</th><th>Status</th><th>Attendance</th><th></th></tr>
                </thead>
                <tbody>
                    @foreach($booking->visits as $v)
                        <tr>
                            <td data-label="Date">
                                <strong>{{ $v->scheduled_date->format('d M') }}</strong>
                                <div class="muted" style="font-size: 11px;">{{ $v->scheduled_date->format('D, Y') }}</div>
                            </td>
                            <td data-label="Slot">{{ $v->scheduled_slot }}</td>
                            <td data-label="Team">
                                @if($v->teamMember)
                                    <span class="pill pill-purple">{{ $v->teamMember->name }}</span>
                                @else
                                    <span class="muted" style="font-size: 12px;">Self</span>
                                @endif
                            </td>
                            <td data-label="Status">
                                @if($v->status === 'completed')
                                    <span class="pill pill-green">Done</span>
                                @elseif($v->status === 'in_progress')
                                    <span class="pill pill-orange">In progress</span>
                                @elseif($v->status === 'cancelled')
                                    <span class="pill pill-red">Cancelled</span>
                                @else
                                    <span class="pill pill-gold">Scheduled</span>
                                @endif
                            </td>
                            <td data-label="Attendance">
                                @if($v->attendance_status === 'present')
                                    <span class="pill pill-green">Present</span>
                                @elseif($v->attendance_status === 'late')
                                    <span class="pill pill-orange">Late</span>
                                @elseif($v->attendance_status === 'absent')
                                    <span class="pill pill-red">Absent</span>
                                @else
                                    <span class="muted" style="font-size: 12px;">—</span>
                                @endif
                            </td>
                            <td data-label="">
                                <a href="{{ route('partner.visit', $v) }}" class="ic-btn" title="Open"><x-icon name="eye" :size="14" /></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Commission breakdown for this booking --}}
<div class="panel mt-3" style="background: linear-gradient(135deg, #fff7f3, #fff3e6); border-left: 4px solid var(--bfk-primary);">
    <div class="panel-head" style="border-color: rgba(255,74,28,0.18);">
        <h3><x-icon name="money" :size="14" style="color: var(--bfk-primary);" /> Commission for this booking</h3>
        <span class="muted" style="font-size: 12px;">Rate: <strong style="color: var(--bfk-primary);">{{ number_format($commissionPercent, 1) }}%</strong>{{ $partnerProfile->commission_percent !== null ? ' (custom)' : ' (global)' }}</span>
    </div>
    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;">
        <div>
            <div style="font-size: 11px; color: var(--bfk-text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;">Gross</div>
            <div style="font-size: 22px; font-weight: 800; color: #111;">₹{{ number_format($commission['gross_paise']/100, 0) }}</div>
            <div style="font-size: 11px; color: var(--bfk-text-3);">monthly total</div>
        </div>
        <div>
            <div style="font-size: 11px; color: var(--bfk-text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;">Platform cut</div>
            <div style="font-size: 22px; font-weight: 800; color: var(--bfk-primary);">−₹{{ number_format($commission['platform_paise']/100, 0) }}</div>
            <div style="font-size: 11px; color: var(--bfk-text-3);">{{ number_format($commissionPercent, 1) }}%</div>
        </div>
        <div>
            <div style="font-size: 11px; color: var(--bfk-text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;">TDS</div>
            <div style="font-size: 22px; font-weight: 800; color: var(--bfk-red);">−₹{{ number_format($commission['tds_paise']/100, 0) }}</div>
            <div style="font-size: 11px; color: var(--bfk-text-3);">{{ number_format(\App\Services\CommissionService::tdsPercent(), 1) }}%</div>
        </div>
        <div>
            <div style="font-size: 11px; color: var(--bfk-text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;">Your net</div>
            <div style="font-size: 22px; font-weight: 800; color: var(--bfk-green);">₹{{ number_format($commission['partner_net_paise']/100, 0) }}</div>
            <div style="font-size: 11px; color: var(--bfk-text-3);">to wallet</div>
        </div>
    </div>
    <div style="margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255,74,28,0.18); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
        <span style="font-size: 12px; color: var(--bfk-text-2);">Per-visit share: <strong>₹{{ number_format(($commission['partner_net_paise']/max(1,$booking->visits_per_period))/100, 0) }}</strong> across {{ max(1, $booking->visits_per_period) }} visits</span>
        <a href="{{ route('partner.earnings') }}" class="btn-app btn-outline"><x-icon name="money" :size="14" /> See full earnings</a>
    </div>
</div>

@endsection