@extends('layouts.admin')
@section('title','Booking Detail')
@section('page-title','Booking Detail')
@section('content')
<div class="page-header">
    <h1>{{ $booking->reference_code }}</h1>
    <a href="{{ route('admin.bookings.index') }}" class="btn btn-outline btn-sm">← Back</a>
</div>
<div class="grid-2" style="align-items:start;">
    <div class="card">
        <div class="card-header"><span style="font-weight:600;">Booking Information</span></div>
        <div class="card-body">
            <table style="margin:0;">
                <tr><th style="background:none;border:none;width:40%;padding:.5rem .25rem;">Reference</th><td style="border:none;padding:.5rem .25rem;font-family:monospace;font-weight:700;color:#8B3252;">{{ $booking->reference_code }}</td></tr>
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Service</th><td style="border:none;padding:.5rem .25rem;">{{ $booking->service_name }}</td></tr>
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Date</th><td style="border:none;padding:.5rem .25rem;">{{ \Carbon\Carbon::parse($booking->appointment_date)->format('D, M j, Y') }}</td></tr>
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Time</th><td style="border:none;padding:.5rem .25rem;">{{ $booking->appointment_time }}</td></tr>
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Stylist</th><td style="border:none;padding:.5rem .25rem;">{{ $booking->staff_name ?? 'Not assigned' }}</td></tr>
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Service Price</th><td style="border:none;padding:.5rem .25rem;">₵{{ number_format($booking->service_price,2) }}</td></tr>
                @if($booking->discount_amount > 0)<tr><th style="background:none;border:none;padding:.5rem .25rem;">Discount</th><td style="border:none;padding:.5rem .25rem;color:#059669;">−₵{{ number_format($booking->discount_amount,2) }} ({{ $booking->coupon_code }})</td></tr>@endif
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Total</th><td style="border:none;padding:.5rem .25rem;font-weight:700;color:#8B3252;">₵{{ number_format($booking->total_amount,2) }}</td></tr>
                <tr><th style="background:none;border:none;padding:.5rem .25rem;">Payment</th><td style="border:none;padding:.5rem .25rem;"><span class="badge badge-{{ $booking->payment_status==='paid'?'paid':'unpaid' }}">{{ ucfirst($booking->payment_status) }}</span></td></tr>
                @if($booking->notes)<tr><th style="background:none;border:none;padding:.5rem .25rem;">Notes</th><td style="border:none;padding:.5rem .25rem;">{{ $booking->notes }}</td></tr>@endif
            </table>
        </div>
    </div>
    <div>
        <div class="card" style="margin-bottom:1.5rem;">
            <div class="card-header"><span style="font-weight:600;">Client Details</span></div>
            <div class="card-body">
                <div style="font-size:.9rem;"><strong>{{ $booking->client_name }}</strong><br>{{ $booking->client_email }}<br>{{ $booking->client_phone }}</div>
            </div>
        </div>
        <div class="card">
            <div class="card-header"><span style="font-weight:600;">Update Status</span></div>
            <div class="card-body">
                <p style="font-size:.85rem;color:#7A6058;margin-bottom:1rem;">Current: <span class="badge badge-{{ $booking->status }}">{{ ucfirst($booking->status) }}</span></p>
                <form method="POST" action="{{ route('admin.bookings.status',$booking) }}">
                    @csrf
                    <div class="form-group">
                        <select name="status">
                            @foreach(['pending','confirmed','paid','completed','cancelled'] as $s)
                            <option value="{{ $s }}" {{ $booking->status===$s?'selected':'' }}>{{ ucfirst($s) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" style="width:100%;">Update Status</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection