@extends('layouts.dashboard')

@section('title', __('messages.booking_details'))
@section('header', __('messages.booking_details'))

@section('content')
@if(session('success'))
    <div class="mb-6 bg-green-50 border border-green-200 text-green-800 px-6 py-4 rounded-xl">
        {{ session('success') }}
    </div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Content -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Booking Information -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-6">{{ __('messages.booking_information') ?? 'Booking Information' }}</h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">{{ __('messages.visitor_name') ?? 'Visitor Name' }}</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $booking->name }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">{{ __('messages.email') ?? 'Email' }}</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $booking->email }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">{{ __('messages.phone') ?? 'Phone' }}</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $booking->phone }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">{{ __('messages.status') ?? 'Status' }}</label>
                    <div>
                        @if($booking->status === 'pending')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
                                {{ __('messages.pending') ?? 'Pending' }}
                            </span>
                        @elseif($booking->status === 'confirmed')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
                                {{ __('messages.confirmed') ?? 'Confirmed' }}
                            </span>
                        @elseif($booking->status === 'cancelled')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
                                {{ __('messages.cancelled') ?? 'Cancelled' }}
                            </span>
                        @elseif($booking->status === 'completed')
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                {{ __('messages.completed') ?? 'Completed' }}
                            </span>
                        @endif
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">{{ __('messages.preferred_date') ?? 'Preferred Date' }}</label>
                    <p class="text-lg font-semibold text-gray-900">{{ $booking->preferred_date ? \Carbon\Carbon::parse($booking->preferred_date)->format('F d, Y') : 'N/A' }}</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-500 mb-1">{{ __('messages.preferred_time') ?? 'Preferred Time' }}</label>
                    <p class="text-lg font-semibold text-gray-900">{{ date('g:i A', strtotime($booking->preferred_time)) }}</p>
                </div>
            </div>

            @if($booking->message)
                <div class="mt-6 pt-6 border-t border-gray-200">
                    <label class="block text-sm font-medium text-gray-500 mb-2">{{ __('messages.message') ?? 'Message' }}</label>
                    <p class="text-gray-900 whitespace-pre-line">{{ $booking->message }}</p>
                </div>
            @endif
        </div>

        <!-- Property Information -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-6">{{ __('messages.property_information') ?? 'Property Information' }}</h3>
            <div class="flex items-start gap-4">
                @if($booking->property->primaryImage || $booking->property->images->count() > 0)
                    <img src="{{ $booking->property->primary_image_url }}" 
                         alt="{{ $booking->property->title }}"
                         class="w-24 h-24 object-cover rounded-lg">
                @endif
                <div class="flex-1">
                    <a href="{{ route('company.properties.show', $booking->property) }}" class="text-xl font-bold text-blue-600 hover:text-blue-800">
                        {{ $booking->property->title }}
                    </a>
                    <p class="text-gray-600 mt-1">{{ $booking->property->address }}, {{ $booking->property->city }}</p>
                    <p class="text-lg font-semibold text-gray-900 mt-2">
                        {{ number_format($booking->property->price, 0) }} {{ $booking->property->currency ?? 'TZS' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Update Booking Status -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">{{ __('messages.update_booking') ?? 'Update Booking' }}</h3>
            <form action="{{ route('company.bookings.update', $booking) }}" method="POST">
                @csrf
                @method('PUT')
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('messages.status') ?? 'Status' }}</label>
                        <select name="status" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="pending" {{ $booking->status === 'pending' ? 'selected' : '' }}>{{ __('messages.pending') ?? 'Pending' }}</option>
                            <option value="confirmed" {{ $booking->status === 'confirmed' ? 'selected' : '' }}>{{ __('messages.confirmed') ?? 'Confirmed' }}</option>
                            <option value="cancelled" {{ $booking->status === 'cancelled' ? 'selected' : '' }}>{{ __('messages.cancelled') ?? 'Cancelled' }}</option>
                            <option value="completed" {{ $booking->status === 'completed' ? 'selected' : '' }}>{{ __('messages.completed') ?? 'Completed' }}</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('messages.assigned_to') ?? 'Assign To' }}</label>
                        <select name="assigned_to" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="">{{ __('messages.unassigned') ?? 'Unassigned' }}</option>
                            @foreach($agents as $agent)
                                <option value="{{ $agent->id }}" {{ $booking->assigned_to === $agent->id ? 'selected' : '' }}>
                                    {{ $agent->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div id="cancellation_reason_field" style="display: none;">
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('messages.cancellation_reason') ?? 'Cancellation Reason' }}</label>
                        <textarea name="cancellation_reason" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{{ $booking->cancellation_reason }}</textarea>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('messages.admin_notes') ?? 'Admin Notes' }}</label>
                        <textarea name="admin_notes" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{{ $booking->admin_notes }}</textarea>
                    </div>

                    <button type="submit" class="w-full bg-blue-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-blue-700">
                        {{ __('messages.update_booking') ?? 'Update Booking' }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Booking Timeline -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h3 class="text-lg font-bold text-gray-900 mb-4">{{ __('messages.timeline') ?? 'Timeline' }}</h3>
            <div class="space-y-4">
                <div>
                    <p class="text-sm text-gray-500">{{ __('messages.created') ?? 'Created' }}</p>
                    <p class="text-sm font-medium text-gray-900">{{ $booking->created_at->format('M d, Y g:i A') }}</p>
                </div>
                @if($booking->confirmed_at)
                    <div>
                        <p class="text-sm text-gray-500">{{ __('messages.confirmed') ?? 'Confirmed' }}</p>
                        <p class="text-sm font-medium text-gray-900">{{ $booking->confirmed_at->format('M d, Y g:i A') }}</p>
                    </div>
                @endif
                @if($booking->cancelled_at)
                    <div>
                        <p class="text-sm text-gray-500">{{ __('messages.cancelled') ?? 'Cancelled' }}</p>
                        <p class="text-sm font-medium text-gray-900">{{ $booking->cancelled_at->format('M d, Y g:i A') }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const statusSelect = document.querySelector('select[name="status"]');
        const cancellationField = document.getElementById('cancellation_reason_field');
        
        function toggleCancellationField() {
            if (statusSelect.value === 'cancelled') {
                cancellationField.style.display = 'block';
            } else {
                cancellationField.style.display = 'none';
            }
        }
        
        statusSelect.addEventListener('change', toggleCancellationField);
        toggleCancellationField();
    });
</script>
@endsection