@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <!-- Breadcrumb -->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.bookings.index') }}">Booking Management</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $booking->booking_no }}</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <a href="{{ route('admin.bookings.index') }}" class="btn btn-secondary radius-30">
                    <i class="bx bx-arrow-back me-1"></i>Back to Booking List
                </a>
            </div>
        </div>

        <!-- Main Header Card -->
        <div class="card radius-10 border-top border-0 border-4 border-primary shadow-sm mb-4">
            <div class="card-body p-4">
                <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                    <div>
                        <span class="badge bg-light-primary text-primary mb-1">READ-ONLY DETAILS</span>
                        <h4 class="mb-1 text-primary fw-bold">Booking #{{ $booking->booking_no }}</h4>
                        <p class="mb-0 text-muted">Created Date: <strong>{{ $booking->created_at ? $booking->created_at->format('d M Y, h:i A') : '-' }}</strong></p>
                    </div>
                    <div class="d-flex align-items-center gap-3">
                        <div>
                            <span class="text-muted d-block small">Booking Status:</span>
                            @php
                                $status = strtolower(trim($booking->status));
                                $statusClass = match ($status) {
                                    'completed' => 'bg-light-success text-success',
                                    'confirmed' => 'bg-light-info text-info',
                                    'requested' => 'bg-light-warning text-warning',
                                    'cancelled' => 'bg-light-danger text-danger',
                                    default => 'bg-light-primary text-primary',
                                };
                            @endphp
                            <span class="badge {{ $statusClass }} fw-bold px-3 py-2 fs-6">
                                {{ ucwords(str_replace('_', ' ', $status)) }}
                            </span>
                        </div>
                        <div>
                            <span class="text-muted d-block small">Payment Status:</span>
                            @php
                                $pStatusClass = match ($booking->payment_status) {
                                    'paid' => 'bg-light-success text-success',
                                    'pending' => 'bg-light-warning text-warning',
                                    'failed' => 'bg-light-danger text-danger',
                                    'refunded' => 'bg-light-info text-info',
                                    default => 'bg-light-secondary text-secondary',
                                };
                            @endphp
                            <span class="badge {{ $pStatusClass }} fw-bold px-3 py-2 fs-6">
                                {{ ucwords(str_replace('_', ' ', $booking->payment_status)) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Left Column: Customer, Partner & Location Info -->
            <div class="col-lg-8">
                <!-- User & Partner Info Row -->
                <div class="row">
                    <!-- Customer Card -->
                    <div class="col-md-6 mb-3">
                        <div class="card radius-10 h-100 shadow-sm">
                            <div class="card-header bg-transparent border-bottom py-3">
                                <h6 class="mb-0 fw-bold"><i class="bx bx-user me-2 text-primary"></i>Customer Information</h6>
                            </div>
                            <div class="card-body">
                                <p class="mb-2"><strong>Name:</strong> {{ $booking->user?->name ?? 'N/A' }}</p>
                                <p class="mb-2"><strong>Email:</strong> {{ $booking->user?->email ?? 'N/A' }}</p>
                                <p class="mb-2"><strong>Phone:</strong> {{ $booking->user?->phone_country_code }} {{ $booking->user?->phone_no }}</p>
                                <p class="mb-0"><strong>Account Status:</strong> <span class="badge bg-light-success text-success fw-bold">{{ ucfirst($booking->user?->status ?? 'Active') }}</span></p>
                            </div>
                        </div>
                    </div>

                    <!-- Partner Card -->
                    <div class="col-md-6 mb-3">
                        <div class="card radius-10 h-100 shadow-sm">
                            <div class="card-header bg-transparent border-bottom py-3">
                                <h6 class="mb-0 fw-bold"><i class="bx bx-id-card me-2 text-info"></i>Partner Information</h6>
                            </div>
                            <div class="card-body">
                                <p class="mb-2"><strong>Name:</strong> {{ $booking->partner?->name ?? 'N/A' }}</p>
                                <p class="mb-2"><strong>Email:</strong> {{ $booking->partner?->email ?? 'N/A' }}</p>
                                <p class="mb-2"><strong>Phone:</strong> {{ $booking->partner?->phone_country_code }} {{ $booking->partner?->phone_no }}</p>
                                <p class="mb-0"><strong>KYC Status:</strong> <span class="badge bg-light-success text-success fw-bold">{{ ucfirst($booking->partner?->kyc_status ?? 'Completed') }}</span></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Service Location Card -->
                <div class="card radius-10 mb-3 shadow-sm">
                    <div class="card-header bg-transparent border-bottom py-3">
                        <h6 class="mb-0 fw-bold"><i class="bx bx-map-pin me-2 text-danger"></i>Service Location Details</h6>
                    </div>
                    <div class="card-body">
                        <p class="mb-2"><strong>Service Address:</strong> {{ $booking->service_address }}</p>
                        <div class="row pt-2">
                            <div class="col-md-6">
                                <small class="text-muted d-block">Service Latitude / Longitude:</small>
                                <code>{{ $booking->service_latitude }}, {{ $booking->service_longitude }}</code>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block">Distance & Estimated Travel Time:</small>
                                <span class="fw-bold">{{ $booking->distance_km }} km ({{ $booking->travel_time_minutes }} mins)</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Schedule Timeline Card -->
                <div class="card radius-10 mb-3 shadow-sm">
                    <div class="card-header bg-transparent border-bottom py-3">
                        <h6 class="mb-0 fw-bold"><i class="bx bx-time-five me-2 text-warning"></i>Schedule & Timestamps Timeline</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-sm mb-0">
                                <tbody>
                                    <tr>
                                        <th style="width:40%;">Scheduled Start Time</th>
                                        <td>{{ $booking->scheduled_start_at ? $booking->scheduled_start_at->format('d M Y, h:i A') : '-' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Scheduled End Time</th>
                                        <td>{{ $booking->scheduled_end_at ? $booking->scheduled_end_at->format('d M Y, h:i A') : '-' }}</td>
                                    </tr>
                                    @if($booking->accepted_at)
                                    <tr>
                                        <th>Accepted At</th>
                                        <td>{{ $booking->accepted_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    @endif
                                    @if($booking->paid_at)
                                    <tr>
                                        <th>Paid At</th>
                                        <td>{{ $booking->paid_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    @endif
                                    @if($booking->started_at)
                                    <tr>
                                        <th>Started At</th>
                                        <td>{{ $booking->started_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    @endif
                                    @if($booking->completed_at)
                                    <tr>
                                        <th>Completed At</th>
                                        <td>{{ $booking->completed_at->format('d M Y, h:i A') }}</td>
                                    </tr>
                                    @endif
                                    @if($booking->cancelled_at)
                                    <tr class="table-danger">
                                        <th>Cancelled At</th>
                                        <td>{{ $booking->cancelled_at->format('d M Y, h:i A') }} (By: {{ $booking->cancelledBy?->name ?? 'System' }})</td>
                                    </tr>
                                    <tr class="table-danger">
                                        <th>Cancellation Reason</th>
                                        <td>{{ $booking->cancellation_reason ?? 'N/A' }}</td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column: Pricing & Payment Summary Card -->
            <div class="col-lg-4">
                <div class="card radius-10 mb-3 shadow-sm">
                    <div class="card-header bg-transparent border-bottom py-3">
                        <h6 class="mb-0 fw-bold"><i class="bx bx-receipt me-2 text-success"></i>Pricing & Payment Summary</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-secondary">Hourly Rate:</span>
                            <strong>₹ {{ number_format((float)$booking->hourly_rate, 2) }} / hr</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-secondary">Booked Hours:</span>
                            <strong>{{ $booking->booked_hours }} hrs</strong>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-secondary">Subtotal Amount:</span>
                            <strong>₹ {{ number_format((float)$booking->subtotal_amount, 2) }}</strong>
                        </div>
                        @if($booking->discount_amount > 0)
                        <div class="d-flex justify-content-between mb-2 text-success">
                            <span>Discount:</span>
                            <strong>- ₹ {{ number_format((float)$booking->discount_amount, 2) }}</strong>
                        </div>
                        @endif
                        @if($booking->tax_amount > 0)
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-secondary">Tax ({{ number_format((float)$booking->tax_rate * 100, 1) }}%):</span>
                            <strong>₹ {{ number_format((float)$booking->tax_amount, 2) }}</strong>
                        </div>
                        @endif
                        <hr />
                        <div class="d-flex justify-content-between fs-5 fw-bold text-primary mb-3">
                            <span>Total Amount:</span>
                            <span>₹ {{ number_format((float)$booking->total_amount, 2) }}</span>
                        </div>
                        <div class="p-3 bg-light rounded radius-10 border">
                            <div class="mb-2">
                                <small class="text-muted d-block">Payment Method:</small>
                                <strong>{{ strtoupper($booking->payment_method ?? 'N/A') }}</strong>
                            </div>
                            <div>
                                <small class="text-muted d-block">Payment Status:</small>
                                <span class="badge {{ $pStatusClass }} fw-bold">{{ ucfirst($booking->payment_status) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection