@extends('admin.layouts.app')

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

@section('content')
<div class="bg-white p-4 md:p-6 lg:p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
    <div class="space-y-4 md:space-y-6">
        <div>
            <label class="block text-sm font-semibold text-[#645443] mb-2">Name</label>
            <p class="text-base md:text-lg text-[#524438] font-medium">{{ $inquiry->name }}</p>
        </div>
        
        <div>
            <label class="block text-sm font-semibold text-[#645443] mb-2">Email</label>
            <p class="text-base md:text-lg text-[#524438] break-words">
                <a href="mailto:{{ $inquiry->email }}" class="text-[#7d6a52] hover:text-[#9d8566] transition-colors break-all">{{ $inquiry->email }}</a>
            </p>
        </div>
        
        <div>
            <label class="block text-sm font-semibold text-[#645443] mb-2">Product</label>
            <p class="text-base md:text-lg text-[#524438] font-medium">{{ $inquiry->product ? $inquiry->product->name : 'General Inquiry' }}</p>
        </div>
        
        <div>
            <label class="block text-sm font-semibold text-[#645443] mb-2">Status</label>
            <p class="text-base md:text-lg">
                <span class="px-3 py-1 rounded-full text-xs md:text-sm font-semibold {{ $inquiry->status === 'pending' ? 'bg-[#fef3c7] text-[#92400e]' : 'bg-[#d1fae5] text-[#065f46]' }}">
                    {{ ucfirst($inquiry->status) }}
                </span>
            </p>
        </div>
        
        <div>
            <label class="block text-sm font-semibold text-[#645443] mb-2">Date</label>
            <p class="text-base md:text-lg text-[#524438]">{{ $inquiry->created_at->format('F d, Y \a\t g:i A') }}</p>
        </div>
        
        <div>
            <label class="block text-sm font-semibold text-[#645443] mb-2 md:mb-3">Message</label>
            <div class="bg-[#faf8f5] p-4 md:p-6 rounded-xl border border-[#e8ddd0]">
                <p class="whitespace-pre-wrap text-[#645443] leading-relaxed text-sm md:text-base">{{ $inquiry->message }}</p>
            </div>
        </div>
    </div>
    
    <div class="mt-6 md:mt-8 flex flex-col sm:flex-row gap-3 md:gap-4">
        @if($inquiry->status === 'pending')
            <form method="POST" action="{{ route('admin.inquiries.update', $inquiry->id) }}">
                @csrf
                @method('PUT')
                <input type="hidden" name="status" value="resolved">
                <button type="submit" class="w-full sm:w-auto bg-[#9d8566] text-white px-4 md:px-6 py-2 md:py-3 rounded-full hover:bg-[#b8a088] transition-all font-semibold shadow-md hover:shadow-lg text-sm md:text-base">
                    Mark as Resolved
                </button>
            </form>
        @endif
        <form method="POST" action="{{ route('admin.inquiries.destroy', $inquiry->id) }}" onsubmit="return confirm('Are you sure?')" class="inline w-full sm:w-auto">
            @csrf
            @method('DELETE')
            <button type="submit" class="w-full sm:w-auto bg-[#c97d60] text-white px-4 md:px-6 py-2 md:py-3 rounded-full hover:bg-[#b86a4f] transition-all font-semibold shadow-md hover:shadow-lg text-sm md:text-base">
                Delete Inquiry
            </button>
        </form>
        <a href="{{ route('admin.inquiries.index') }}" class="w-full sm:w-auto bg-[#e8ddd0] text-[#524438] px-4 md:px-6 py-2 md:py-3 rounded-full hover:bg-[#d4c4b0] transition-all font-semibold inline-flex items-center justify-center gap-2 text-sm md:text-base">
            <svg class="w-5 h-5" 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"></path>
            </svg>
            Back to List
        </a>
    </div>
</div>
@endsection