@extends('admin.layouts.app')

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

@section('content')
<div class="mb-8 flex items-center justify-between gap-4">
    <div>
        <a href="{{ route('admin.inquiries.index') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-primary-600 hover:underline mb-3">
            <i class="fas fa-arrow-left"></i> Back to inquiries
        </a>
        <h2 class="text-2xl font-bold text-gray-900">{{ $inquiry->full_name }}</h2>
        <p class="mt-1 text-sm text-gray-500">Submitted {{ $inquiry->created_at->format('M d, Y g:i A') }}</p>
    </div>
    <form method="POST" action="{{ route('admin.inquiries.toggle-read', $inquiry) }}">
        @csrf @method('PATCH')
        <button class="rounded-xl px-4 py-2.5 text-sm font-semibold text-white" style="background:#027fc5;">
            {{ $inquiry->is_read ? 'Mark Unread' : 'Mark Read' }}
        </button>
    </form>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
        <h3 class="text-lg font-bold text-gray-900 mb-4">Message</h3>
        <div class="rounded-2xl bg-gray-50 border border-gray-100 p-5 text-gray-700 leading-relaxed min-h-40">
            {{ $inquiry->message ?: 'No message provided.' }}
        </div>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 space-y-5">
        <div>
            <div class="text-xs font-bold text-gray-400 uppercase mb-1">Phone</div>
            <a href="tel:{{ $inquiry->phone }}" class="font-semibold text-primary-600">{{ $inquiry->phone }}</a>
        </div>
        <div>
            <div class="text-xs font-bold text-gray-400 uppercase mb-1">Email</div>
            @if($inquiry->email)
            <a href="mailto:{{ $inquiry->email }}" class="font-semibold text-primary-600 break-all">{{ $inquiry->email }}</a>
            @else
            <span class="text-gray-500">Not provided</span>
            @endif
        </div>
        <div>
            <div class="text-xs font-bold text-gray-400 uppercase mb-1">Course</div>
            <div class="font-semibold text-gray-900">{{ $inquiry->course ?: '-' }}</div>
        </div>
        <div>
            <div class="text-xs font-bold text-gray-400 uppercase mb-1">Destination</div>
            <div class="font-semibold text-gray-900">{{ $inquiry->country ?: '-' }}</div>
        </div>
        <div>
            <div class="text-xs font-bold text-gray-400 uppercase mb-1">Source</div>
            <div class="font-semibold text-gray-900 capitalize">{{ $inquiry->source }}</div>
        </div>
        <div>
            <div class="text-xs font-bold text-gray-400 uppercase mb-1">Status</div>
            <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-semibold {{ $inquiry->is_read ? 'bg-gray-100 text-gray-600' : 'bg-green-50 text-green-700' }}">
                {{ $inquiry->is_read ? 'Read' : 'Unread' }}
            </span>
        </div>
    </div>
</div>
@endsection