@extends('admin.layouts.app')
@section('title', 'Contact Request #' . $contactSubmission->id)
@section('page-title', 'Contact Request Detail')

@section('content')
<nav class="flex items-center gap-2 text-sm text-gray-500 mb-6">
    <a href="{{ route('admin.contact-submissions.index') }}" class="hover:text-blue-600">Contact Requests</a>
    <span>/</span>
    <span class="text-gray-800 font-medium">{{ $contactSubmission->name }}</span>
</nav>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
    <div class="xl:col-span-2 space-y-5">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div class="flex items-start justify-between mb-5">
                <div>
                    <h2 class="text-xl font-bold text-gray-800">{{ $contactSubmission->name }}</h2>
                    <p class="text-gray-500 text-sm">
                        Request #{{ $contactSubmission->id }} - {{ $contactSubmission->created_at->format('d M Y, h:i A') }}
                    </p>
                </div>
                <span class="inline-flex px-3 py-1 rounded-full text-sm font-semibold {{ $contactSubmission->statusBadge() }}">
                    {{ ucfirst($contactSubmission->status) }}
                </span>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Phone</p>
                    <p class="font-medium text-gray-700">{{ $contactSubmission->phone }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Email</p>
                    <p class="font-medium text-gray-700">{{ $contactSubmission->email }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">First Country</p>
                    <p class="font-medium text-gray-700">{{ $contactSubmission->country_name ?: '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Second Country</p>
                    <p class="font-medium text-gray-700">{{ $contactSubmission->second_country_name ?: 'Not selected' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Study Level</p>
                    <p class="font-medium text-gray-700">{{ str_replace('_', ' ', ucfirst($contactSubmission->study_level)) }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Consultation Mode</p>
                    <p class="font-medium text-gray-700">{{ str_replace('_', ' ', ucfirst($contactSubmission->consultation_mode)) }}</p>
                </div>
            </div>

            <div class="mt-5 pt-5 border-t border-gray-100">
                <p class="text-xs text-gray-400 uppercase tracking-wide mb-2">Message</p>
                <p class="text-sm text-gray-700 whitespace-pre-line">{{ $contactSubmission->message ?: 'No extra message.' }}</p>
            </div>

            @if($contactSubmission->lead_id)
                <div class="mt-5 pt-5 border-t border-gray-100">
                    <p class="text-xs text-gray-400 uppercase tracking-wide mb-2">Lead Conversion</p>
                    <p class="text-sm text-gray-700">
                        Converted to Lead #{{ $contactSubmission->lead_id }}
                        @if($contactSubmission->converted_at)
                            on {{ $contactSubmission->converted_at->format('d M Y, h:i A') }}
                        @endif
                    </p>
                    <a href="{{ route('admin.leads.show', $contactSubmission->lead_id) }}"
                       class="inline-flex mt-3 px-3 py-1.5 text-xs font-semibold rounded-lg bg-cyan-50 text-cyan-700 hover:bg-cyan-100 transition">
                        Open Converted Lead
                    </a>
                </div>
            @endif
        </div>
    </div>

    <div class="space-y-5">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-base font-bold text-gray-800 mb-4">Update Status</h3>
            <form method="POST" action="{{ route('admin.contact-submissions.update', $contactSubmission) }}" class="space-y-3">
                @csrf
                @method('PATCH')
                <select name="status" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    @foreach(['new' => 'New', 'contacted' => 'Contacted', 'closed' => 'Closed'] as $value => $label)
                        <option value="{{ $value }}" {{ $contactSubmission->status === $value ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
                <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold py-2.5 rounded-lg transition">
                    Save Status
                </button>
            </form>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-base font-bold text-gray-800 mb-4">Lead Conversion</h3>
            @if($contactSubmission->lead_id)
                <a href="{{ route('admin.leads.show', $contactSubmission->lead_id) }}"
                   class="w-full inline-flex justify-center bg-cyan-600 hover:bg-cyan-700 text-white text-sm font-semibold py-2.5 rounded-lg transition">
                    Open Lead #{{ $contactSubmission->lead_id }}
                </a>
            @else
                <form method="POST" action="{{ route('admin.contact-submissions.convert', $contactSubmission) }}"
                      onsubmit="return confirm('Convert this contact request into a lead now?')">
                    @csrf
                    <button type="submit" class="w-full bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-semibold py-2.5 rounded-lg transition">
                        Convert To Lead
                    </button>
                </form>
            @endif
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <h3 class="text-base font-bold text-gray-800 mb-4">Tracking Info</h3>
            <div class="space-y-3 text-sm">
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Source</p>
                    <p class="text-gray-700">{{ $contactSubmission->source ?: '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">Page URL</p>
                    <p class="text-gray-700 break-all">{{ $contactSubmission->page_url ?: '-' }}</p>
                </div>
                <div>
                    <p class="text-xs text-gray-400 uppercase tracking-wide">IP Address</p>
                    <p class="text-gray-700">{{ $contactSubmission->ip_address ?: '-' }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <form method="POST" action="{{ route('admin.contact-submissions.destroy', $contactSubmission) }}"
                  onsubmit="return confirm('Delete this contact request permanently?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="w-full border border-red-200 text-red-600 hover:bg-red-50 text-sm font-semibold py-2.5 rounded-lg transition">
                    Delete Request
                </button>
            </form>
        </div>
    </div>
</div>
@endsection