@extends('provider.layout')
@section('title', 'HS Bookings')

@section('content')
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem">
    <div>
        <h1 style="font-size:1.375rem;font-weight:800">Home Service Bookings</h1>
        <p style="color:var(--text-muted)">Manage all your home service appointments and assignments.</p>
    </div>
</div>

@if($hsBookings && (count($hsBookings) > 0 || request()->has('staff_id')))
<div style="margin-bottom:0.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem">
    <div style="display:flex;align-items:center;gap:0.5rem">
        <i data-lucide="wrench" style="width:16px;height:16px;color:var(--brand-500)"></i>
        <span style="font-weight:700;font-size:0.9375rem">Home Services</span>
    </div>
    
    <form method="GET" action="{{ route('provider.bookings') }}" id="staff-filter-form" style="display:flex;align-items:center;gap:0.5rem">
        <label for="staff_id" style="font-size:0.8125rem;font-weight:600;color:var(--text-muted)">Staff:</label>
        <select name="staff_id" id="staff_id" class="form-select" style="padding:0.375rem 2rem 0.375rem 0.75rem;font-size:0.8125rem;width:auto;height:auto" onchange="document.getElementById('staff-filter-form').submit()">
            <option value="">All Bookings</option>
            <option value="unassigned" {{ request('staff_id') == 'unassigned' ? 'selected' : '' }}>Unassigned (Me)</option>
            @if(isset($staffMembers))
            @foreach($staffMembers as $staff)
                <option value="{{ $staff->user_id }}" {{ request('staff_id') == $staff->user_id ? 'selected' : '' }}>{{ $staff->user->name }}</option>
            @endforeach
            @endif
        </select>
        @if(request()->has('staff_id') && request('staff_id') != '')
            <a href="{{ route('provider.bookings') }}" class="btn btn-ghost" style="padding:0.375rem;border-radius:var(--radius-full)" title="Clear filter">
                <i data-lucide="x" style="width:14px;height:14px"></i>
            </a>
        @endif
    </form>
</div>
<div class="table-wrapper" style="margin-bottom:2rem">
    <table>
        <thead>
            <tr>
                <th>Ref</th>
                <th>Customer</th>
                <th>Service</th>
                <th>Scheduled</th>
                <th>Staff</th>
                <th>Amount</th>
                <th>Payment</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($hsBookings as $booking)
            <tr id="pbook-row-{{ $booking->id }}">
                <td>
                    <a href="{{ route('provider.hs.bookings.show', $booking) }}" style="font-size:0.875rem;font-weight:700;color:var(--brand-600);text-decoration:underline">
                        #{{ $booking->booking_ref }}
                    </a>
                </td>
                <td style="font-weight:500">{{ $booking->user->name ?? $booking->customer_name }}</td>
                <td>{{ $booking->service->title ?? '—' }}</td>
                <td style="font-size:0.8125rem">
                    {{ $booking->scheduled_date?->format('d M Y') }}
                    <span style="color:var(--text-muted)">{{ $booking->scheduled_time ? date('h:i A', strtotime($booking->scheduled_time)) : '' }}</span>
                </td>
                <td>
                    @if($booking->assignedToUser)
                        <div style="font-weight:500;font-size:0.875rem">{{ $booking->assignedToUser->name }}</div>
                        <div style="font-size:0.75rem;color:var(--brand-600)">Assigned</div>
                    @else
                        <div style="font-weight:500;font-size:0.875rem;color:var(--text-muted)">Unassigned</div>
                    @endif
                </td>
                <td style="font-weight:600">{!! \App\Helpers\CurrencyHelper::formatForProvider($booking->amount, auth()->user()) !!}</td>
                <td>
                    @if($booking->payment)
                        <div style="font-size:0.875rem;font-weight:600;color:{{ $booking->payment->payment_status === 'paid' ? 'var(--success-600)' : 'var(--warning-600)' }}">
                            {{ ucfirst($booking->payment->payment_status) }}
                        </div>
                        <div style="font-size:0.75rem;color:var(--text-muted)">
                            {{ ucfirst($booking->payment->payment_method) }}
                        </div>
                    @else
                        <span style="font-size:0.75rem;color:var(--text-muted)">Unpaid</span>
                    @endif
                </td>
                <td>
                    <span class="badge {{ $booking->getStatusBadgeClass() }}">{{ ucfirst(str_replace('_',' ',$booking->status)) }}</span>
                </td>
                <td>
                    @if($booking->status === 'pending')
                    <form method="POST" action="{{ route('provider.hs.bookings.status', $booking) }}" style="display:inline">
                        @csrf <input type="hidden" name="status" value="confirmed">
                        <button class="btn btn-success btn-sm" id="pbook-confirm-{{ $booking->id }}">Accept</button>
                    </form>
                    @elseif($booking->status === 'confirmed')
                    <form method="POST" action="{{ route('provider.hs.bookings.status', $booking) }}" style="display:inline">
                        @csrf <input type="hidden" name="status" value="in_progress">
                        <button class="btn btn-primary btn-sm" id="pbook-start-{{ $booking->id }}">Start</button>
                    </form>
                    @elseif($booking->status === 'in_progress')
                    <form method="POST" action="{{ route('provider.hs.bookings.status', $booking) }}" style="display:inline">
                        @csrf <input type="hidden" name="status" value="completed">
                        <button class="btn btn-success btn-sm" id="pbook-done-{{ $booking->id }}">Done</button>
                    </form>
                    @else
                    <span style="font-size:0.75rem;color:var(--text-muted)">—</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<div style="padding:0.75rem 0">{{ $hsBookings->appends(request()->query())->links() }}</div>
@else
<div style="text-align:center;padding:4rem 2rem;background:white;border-radius:var(--radius-xl);border:1.5px solid var(--border-default)">
    <i data-lucide="calendar-x" style="width:52px;height:52px;opacity:0.2;display:block;margin:0 auto 1rem"></i>
    <h3 style="font-weight:700;margin-bottom:0.5rem">No bookings yet</h3>
    <p style="color:var(--text-muted)">Bookings from customers will appear here.</p>
</div>
@endif
@endsection