@extends('admin.layouts.app')

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

@section('content')
    <div class="flex items-center justify-between mb-6">
        <div>
            <a href="{{ route('admin.inquiries.index') }}"
                class="text-gray-500 hover:text-gray-700 text-sm mb-2 inline-flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back to Inquiries
            </a>
            <h2 class="text-2xl font-bold text-gray-900">Inquiry from {{ $inquiry->name }}</h2>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Contact Info -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Contact Information</h3>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <p class="text-sm text-gray-500">Name</p>
                        <p class="font-medium text-gray-900">{{ $inquiry->name }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Phone</p>
                        <a href="tel:{{ $inquiry->phone }}"
                            class="font-medium text-primary-600 hover:underline">{{ $inquiry->phone }}</a>
                    </div>
                    @if ($inquiry->email)
                        <div>
                            <p class="text-sm text-gray-500">Email</p>
                            <a href="mailto:{{ $inquiry->email }}"
                                class="font-medium text-primary-600 hover:underline">{{ $inquiry->email }}</a>
                        </div>
                    @endif
                </div>

                <div class="flex gap-3 mt-6">
                    <a href="tel:{{ $inquiry->phone }}" class="btn btn-primary inline-flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                        </svg>
                        Call Now
                    </a>
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $inquiry->phone) }}" target="_blank"
                        class="btn btn-whatsapp inline-flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M17.47,14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94,1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.39-1.48-.88-.79-1.48-1.76-1.65-2.06-.17-.3,0-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37,0-.52-.07-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51-.17,0-.37-.01-.57-.01-.2,0-.52.07-.79.37-.27.3-1.04,1.02-1.04,2.48s1.06,2.88,1.21,3.07c.15.2,2.1,3.2,5.08,4.49.71.31,1.26.49,1.69.63.71.23,1.36.2,1.87.12.57-.09,1.76-.72,2.01-1.41.25-.69.25-1.29.17-1.41-.07-.12-.27-.2-.57-.35z" />
                        </svg>
                        WhatsApp
                    </a>
                    @if ($inquiry->email)
                        <a href="mailto:{{ $inquiry->email }}" class="btn btn-outline inline-flex items-center gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            Send Email
                        </a>
                    @endif
                </div>
            </div>

            <!-- Message -->
            @if ($inquiry->message)
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Message</h3>
                    <div class="prose max-w-none">
                        {!! nl2br(e($inquiry->message)) !!}
                    </div>
                </div>
            @endif

            <!-- Property -->
            @if ($inquiry->property)
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Related Property</h3>
                    <a href="{{ route('admin.properties.show', $inquiry->property) }}"
                        class="block p-4 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
                        <div class="flex gap-4">
                            @if ($inquiry->property->primary_image_url)
                                <div class="w-24 h-20 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="{{ $inquiry->property->primary_image_url }}" alt=""
                                        class="w-full h-full object-cover">
                                </div>
                            @endif
                            <div class="flex-1">
                                <p class="font-medium text-gray-900 mb-1">{{ $inquiry->property->title }}</p>
                                <p class="text-sm text-gray-500">{{ $inquiry->property->full_location }}</p>
                                <p class="text-lg font-bold text-primary-600 mt-2">
                                    {{ $inquiry->property->formatted_price }}</p>
                            </div>
                        </div>
                    </a>
                </div>
            @endif

            <!-- Notes -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Admin Notes</h3>

                @if ($inquiry->admin_notes)
                    <div class="bg-gray-50 rounded-lg p-4 mb-4 whitespace-pre-wrap text-sm text-gray-700">
                        {{ $inquiry->admin_notes }}</div>
                @endif

                <form action="{{ route('admin.inquiries.add-note', $inquiry) }}" method="POST">
                    @csrf
                    <textarea name="note" rows="3" class="form-textarea mb-3" placeholder="Add a note..."></textarea>
                    <button type="submit" class="btn btn-outline">Add Note</button>
                </form>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Status -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Update Status</h3>

                <form action="{{ route('admin.inquiries.update', $inquiry) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4">
                        <div>
                            <label class="form-label">Status</label>
                            <select name="status" class="form-select">
                                <option value="new" {{ $inquiry->status === 'new' ? 'selected' : '' }}>New</option>
                                <option value="viewed" {{ $inquiry->status === 'viewed' ? 'selected' : '' }}>Viewed
                                </option>
                                <option value="contacted" {{ $inquiry->status === 'contacted' ? 'selected' : '' }}>
                                    Contacted</option>
                                <option value="follow_up" {{ $inquiry->status === 'follow_up' ? 'selected' : '' }}>Follow
                                    Up</option>
                                <option value="converted" {{ $inquiry->status === 'converted' ? 'selected' : '' }}>
                                    Converted</option>
                                <option value="closed" {{ $inquiry->status === 'closed' ? 'selected' : '' }}>Closed
                                </option>
                            </select>
                        </div>

                        <div>
                            <label class="form-label">Priority</label>
                            <select name="priority" class="form-select">
                                <option value="">None</option>
                                <option value="low" {{ $inquiry->priority === 'low' ? 'selected' : '' }}>Low</option>
                                <option value="medium" {{ $inquiry->priority === 'medium' ? 'selected' : '' }}>Medium
                                </option>
                                <option value="high" {{ $inquiry->priority === 'high' ? 'selected' : '' }}>High</option>
                                <option value="urgent" {{ $inquiry->priority === 'urgent' ? 'selected' : '' }}>Urgent
                                </option>
                            </select>
                        </div>

                        <div>
                            <label class="form-label">Follow Up Date</label>
                            <input type="date" name="follow_up_date" value="{{ $inquiry->follow_up_date }}"
                                class="form-input">
                        </div>

                        <button type="submit" class="btn btn-primary w-full">Update</button>
                    </div>
                </form>

                <!-- Convert to CRM Lead -->
                @if ($inquiry->status !== 'converted')
                    <div class="mt-4 pt-4 border-t border-gray-200">
                        <form action="{{ route('admin.inquiries.convert-to-lead', $inquiry) }}" method="POST">
                            @csrf
                            <button type="submit"
                                class="btn btn-secondary w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white border-0 hover:from-purple-600 hover:to-indigo-700">
                                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                Convert to CRM Lead
                            </button>
                        </form>
                        <p class="text-xs text-gray-500 text-center mt-2">Move to leads for better tracking</p>
                    </div>
                @else
                    <div class="mt-4 pt-4 border-t border-gray-200">
                        <div class="bg-green-50 text-green-700 text-sm p-3 rounded-lg text-center">
                            ✓ Already converted to lead
                        </div>
                    </div>
                @endif
            </div>

            <!-- Meta -->
            <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Details</h3>
                <div class="space-y-3 text-sm">
                    <div class="flex justify-between">
                        <span class="text-gray-500">Type</span>
                        <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $inquiry->inquiry_type)) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Source</span>
                        <span class="font-medium">{{ ucfirst(str_replace('_', ' ', $inquiry->source)) }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-gray-500">Created</span>
                        <span class="font-medium">{{ $inquiry->created_at->format('M d, Y H:i') }}</span>
                    </div>
                    @if ($inquiry->preferred_visit_date)
                        <div class="flex justify-between">
                            <span class="text-gray-500">Preferred Visit</span>
                            <span class="font-medium">{{ $inquiry->preferred_visit_date }}</span>
                        </div>
                    @endif
                    <div class="flex justify-between">
                        <span class="text-gray-500">IP Address</span>
                        <span class="font-medium">{{ $inquiry->ip_address }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection