@extends('layouts.admin')
@section('title', 'Detail Pesan')
@section('page-title', 'Detail Pesan Kontak')
@section('breadcrumb')
<a href="{{ route('admin.contacts.index') }}">Pesan</a>
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
<span class="current">Detail</span>
@endsection

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('admin.contacts.index') }}" class="admin-action-link admin-action-view mb-6 inline-flex">
        <svg class="w-4 h-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>
        Kembali ke Daftar Pesan
    </a>

    <div class="admin-card">
        <div class="admin-card-body">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="font-heading text-xl font-bold text-gray-800">{{ $contact->subject }}</h2>
                    <p class="text-sm text-gray-400 mt-0.5">{{ $contact->created_at->format('d M Y, H:i') }}</p>
                </div>
                <form method="POST" action="{{ route('admin.contacts.destroy', $contact) }}" onsubmit="return confirm('Hapus pesan ini?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="admin-btn admin-btn-danger admin-btn-sm">
                        <svg class="w-3.5 h-3.5" 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>
                        Hapus
                    </button>
                </form>
            </div>

            <div class="space-y-4 border-t border-gray-100 pt-6">
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <span class="text-gray-400 block text-xs font-medium uppercase tracking-wide">Nama</span>
                        <span class="font-semibold text-gray-800 mt-0.5 block">{{ $contact->name }}</span>
                    </div>
                    <div>
                        <span class="text-gray-400 block text-xs font-medium uppercase tracking-wide">Email</span>
                        <a href="mailto:{{ $contact->email }}" class="font-semibold text-[#ff6b2b] hover:text-[#ea5a1b] mt-0.5 block">{{ $contact->email }}</a>
                    </div>
                    @if($contact->phone)
                    <div>
                        <span class="text-gray-400 block text-xs font-medium uppercase tracking-wide">Telepon</span>
                        <span class="font-semibold text-gray-800 mt-0.5 block">{{ $contact->phone }}</span>
                    </div>
                    @endif
                </div>

                <div class="border-t border-gray-100 pt-4">
                    <span class="text-gray-400 text-xs font-medium uppercase tracking-wide block mb-2">Pesan</span>
                    <div class="text-gray-700 leading-relaxed bg-gray-50 rounded-xl p-5 text-sm">{{ $contact->message }}</div>
                </div>
            </div>

            <div class="flex items-center gap-3 mt-6 pt-6 border-t border-gray-100">
                @if($contact->phone)
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $contact->phone) }}?text=Halo {{ $contact->name }}, terima kasih telah menghubungi Instrudigi."
                   target="_blank" class="admin-btn admin-btn-sm" style="background:#25d366;color:white;">
                    Balas via WhatsApp
                </a>
                @endif
                <a href="mailto:{{ $contact->email }}?subject=Re: {{ $contact->subject }}" class="admin-btn admin-btn-primary admin-btn-sm">
                    Balas via Email
                </a>
            </div>
        </div>
    </div>
</div>
@endsection