@extends('admin.layouts.app')

@section('title', 'Booking Details')

@section('content')
    <div class="px-4 py-6 sm:px-0">
        <div class="border-4 border-dashed border-gray-200 rounded-lg p-6">
            <div class="flex justify-between items-center mb-6">
                <h1 class="text-2xl font-bold text-gray-900">Booking Details</h1>
                <a href="{{ route('admin.bookings.index') }}"
                    class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Bookings
                </a>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Booking Information -->
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Booking Information</h3>
                        <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Booking ID</dt>
                                <dd class="mt-1 text-sm text-gray-900">#{{ $booking->id }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Service Type</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->service_type }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Booking Date</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->booking_date->format('M d, Y') }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Booking Time</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->booking_time }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Status</dt>
                                <dd class="mt-1">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $booking->status_color }}-100 text-{{ $booking->status_color }}-800">
                                        {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                                    </span>
                                </dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Payment Status</dt>
                                <dd class="mt-1">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $booking->payment_color }}-100 text-{{ $booking->payment_color }}-800">
                                        {{ ucfirst($booking->payment_status) }}
                                    </span>
                                </dd>
                            </div>
                            <div class="sm:col-span-2">
                                <dt class="text-sm font-medium text-gray-500">Total Price</dt>
                                <dd class="mt-1 text-sm text-gray-900">
                                    {{ $booking->total_price ? 'Rp ' . number_format($booking->total_price) : 'Not set' }}
                                </dd>
                            </div>
                            @if ($booking->description)
                                <div class="sm:col-span-2">
                                    <dt class="text-sm font-medium text-gray-500">Description</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $booking->description }}</dd>
                                </div>
                            @endif
                            @if ($booking->notes)
                                <div class="sm:col-span-2">
                                    <dt class="text-sm font-medium text-gray-500">Admin Notes</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $booking->notes }}</dd>
                                </div>
                            @endif
                        </dl>
                    </div>
                </div>

                <!-- Customer Information -->
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Customer Information</h3>
                        <dl class="grid grid-cols-1 gap-x-4 gap-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Name</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->user->name }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Email</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->user->email }}</dd>
                            </div>
                            @if ($booking->user->phone)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Phone</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $booking->user->phone }}</dd>
                                </div>
                            @endif
                            @if ($booking->user->address)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Address</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $booking->user->address }}</dd>
                                </div>
                            @endif
                        </dl>
                    </div>
                </div>

                <!-- Vehicle Information -->
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Vehicle Information</h3>
                        <dl class="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Brand</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->vehicle_brand }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Model</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->vehicle_model }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Year</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->vehicle_year }}</dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Plate Number</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $booking->vehicle_plate }}</dd>
                            </div>
                        </dl>
                    </div>
                </div>

                <!-- Payment Proof -->
                @if ($booking->bukti_pembayaran)
                    <div class="bg-white overflow-hidden shadow rounded-lg">
                        <div class="px-4 py-5 sm:p-6">
                            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Payment Proof</h3>
                            <div class="mt-2">
                                <img src="{{ $booking->payment_proof_url }}" alt="Payment Proof"
                                    class="max-w-full h-auto rounded-lg shadow-md">
                            </div>
                            <div class="mt-4">
                                <a href="{{ $booking->payment_proof_url }}" target="_blank"
                                    class="text-blue-600 hover:text-blue-900">
                                    <i class="fas fa-external-link-alt mr-2"></i>View Full Size
                                </a>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <!-- Action Forms -->
            <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Update Status Form -->
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Update Booking Status</h3>
                        <form action="{{ route('admin.bookings.updateStatus', $booking) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <label for="status" class="block text-sm font-medium text-gray-700">Status</label>
                                    <select id="status" name="status"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                        <option value="pending" {{ $booking->status === 'pending' ? 'selected' : '' }}>
                                            Pending</option>
                                        <option value="confirmed" {{ $booking->status === 'confirmed' ? 'selected' : '' }}>
                                            Confirmed</option>
                                        <option value="in_progress"
                                            {{ $booking->status === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="completed" {{ $booking->status === 'completed' ? 'selected' : '' }}>
                                            Completed</option>
                                        <option value="cancelled" {{ $booking->status === 'cancelled' ? 'selected' : '' }}>
                                            Cancelled</option>
                                    </select>
                                </div>
                                <div>
                                    <label for="total_price" class="block text-sm font-medium text-gray-700">Total
                                        Price</label>
                                    <input type="number" id="total_price" name="total_price"
                                        value="{{ $booking->total_price }}" step="0.01"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="notes" class="block text-sm font-medium text-gray-700">Admin
                                        Notes</label>
                                    <textarea id="notes" name="notes" rows="3"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ $booking->notes }}</textarea>
                                </div>
                                <div>
                                    <button type="submit"
                                        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                                        Update Status
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Update Payment Status Form -->
                <div class="bg-white overflow-hidden shadow rounded-lg">
                    <div class="px-4 py-5 sm:p-6">
                        <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Update Payment Status</h3>
                        <form action="{{ route('admin.bookings.updatePayment', $booking) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <div class="grid grid-cols-1 gap-4">
                                <div>
                                    <label for="payment_status" class="block text-sm font-medium text-gray-700">Payment
                                        Status</label>
                                    <select id="payment_status" name="payment_status"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                        <option value="pending"
                                            {{ $booking->payment_status === 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="paid"
                                            {{ $booking->payment_status === 'paid' ? 'selected' : '' }}>Paid</option>
                                        <option value="refunded"
                                            {{ $booking->payment_status === 'refunded' ? 'selected' : '' }}>Refunded
                                        </option>
                                    </select>
                                </div>
                                <div>
                                    <button type="submit"
                                        class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
                                        Update Payment Status
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection