@extends('layouts.admin')

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

@section('content')
<div class="max-w-4xl space-y-6">
    <div class="flex items-center justify-between">
        <a href="{{ route('admin.contact-inquiries.index') }}" class="inline-flex items-center text-sm font-bold text-slate-500 hover:text-indigo-600 transition-colors uppercase tracking-widest gap-2">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
            Back to Inquiries
        </a>
        
        <form action="{{ route('admin.contact-inquiries.destroy', $inquiry) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this inquiry?')">
            @csrf
            @method('DELETE')
            <button type="submit" class="inline-flex items-center px-4 py-2 bg-white border border-red-200 text-red-600 text-xs font-black uppercase tracking-widest rounded-lg hover:bg-red-50 transition-colors gap-2">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Delete Inquiry
            </button>
        </form>
    </div>

    <div class="bg-white border border-slate-200 rounded-[2rem] shadow-sm overflow-hidden">
        <!-- Header -->
        <div class="px-8 py-8 border-b border-slate-100 bg-slate-50/50">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
                <div class="space-y-1">
                    <span class="text-indigo-600 text-[10px] font-black uppercase tracking-[0.2em] block mb-1">Sender Information</span>
                    <h3 class="text-2xl font-black text-slate-800 tracking-tight">{{ $inquiry->name }}</h3>
                    <div class="flex flex-wrap items-center gap-4 pt-2">
                        <div class="flex items-center gap-2 text-slate-500 text-sm font-medium">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                            {{ $inquiry->email }}
                        </div>
                        <div class="h-1 w-1 bg-slate-300 rounded-full"></div>
                        <div class="flex items-center gap-2 text-slate-500 text-sm font-medium">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            {{ $inquiry->created_at->format('M d, Y \a\t H:i') }}
                        </div>
                        <div class="h-1 w-1 bg-slate-300 rounded-full"></div>
                        <div class="flex items-center gap-2 text-slate-500 text-sm font-medium">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                            {{ $inquiry->ip_address ?? 'N/A' }}
                        </div>
                    </div>
                </div>
                <div class="shrink-0">
                    <span class="px-3 py-1 text-[11px] font-black uppercase tracking-widest rounded-full {{ $inquiry->status === 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-indigo-100 text-indigo-700' }}">
                        Status: {{ $inquiry->status }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="p-8 md:p-12 space-y-8">
            <div class="space-y-2">
                <span class="text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] block">Subject</span>
                <p class="text-xl font-bold text-slate-800 leading-tight">{{ $inquiry->subject }}</p>
            </div>

            <div class="space-y-4 pt-4 border-t border-slate-50">
                <span class="text-slate-400 text-[10px] font-black uppercase tracking-[0.2em] block">Message Content</span>
                <div class="bg-slate-50 p-6 md:p-8 rounded-2xl border border-slate-100 text-slate-600 leading-relaxed font-medium">
                    {!! nl2br(e($inquiry->message)) !!}
                </div>
            </div>

            <div class="pt-8 border-t border-slate-50 flex items-center gap-4">
                <a href="mailto:{{ $inquiry->email }}?subject=Re: {{ $inquiry->subject }}" class="px-8 py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-indigo-700 shadow-xl shadow-indigo-100 transition-all flex items-center gap-2 group">
                    <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                    Reply via Email
                </a>
            </div>
        </div>
    </div>
</div>
@endsection