@extends('layouts.app')

@section('title', 'Detail Pesan - Admin Dashboard')

@push('styles')
<style>
    .message-card {
        background: #fff;
        border: 1px solid #E2E8F0;
        border-radius: 14px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    .status-badge {
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .status-pending { background: #FEF3C7; color: #92400E; }
    .status-read { background: #DBEAFE; color: #1E40AF; }
    .status-replied { background: #D1FAE5; color: #065F46; }

    /* ===== DARK MODE FOR CONTACTS SHOW PAGE ===== */
    
    .dark .message-card {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
    
    .dark h1 {
        color: #f1f5f9 !important;
    }
    
    .dark p {
        color: #cbd5e1 !important;
    }
    
    .dark [style*="color:#1E293B"] {
        color: #f1f5f9 !important;
    }
    
    .dark [style*="color:#64748B"] {
        color: #cbd5e1 !important;
    }
    
    .dark [style*="color:#334155"] {
        color: #cbd5e1 !important;
    }
    
    .dark [style*="color:#94A3B8"] {
        color: #94a3b8 !important;
    }
    
    /* Status badges dark mode */
    .dark .status-pending {
        background: rgba(217, 119, 6, 0.2) !important;
        color: #fcd34d !important;
    }
    
    .dark .status-read {
        background: rgba(59, 130, 246, 0.2) !important;
        color: #93c5fd !important;
    }
    
    .dark .status-replied {
        background: rgba(16, 185, 129, 0.2) !important;
        color: #86efac !important;
    }
    
    /* Message styling */
    .dark [style*="background:#F8FAFF"] {
        background: #334155 !important;
    }
    
    .dark [style*="border:1px solid #E2E8F0"] {
        border-color: #334155 !important;
    }
    
    .dark [style*="background:#F0FDF4"] {
        background: rgba(16, 185, 129, 0.1) !important;
        border-color: #065f46 !important;
    }
    
    .dark [style*="color:#065F46"] {
        color: #86efac !important;
    }
    
    /* Form elements */
    .dark textarea {
        background: #334155 !important;
        border-color: #475569 !important;
        color: #f1f5f9 !important;
    }
    
    .dark textarea::placeholder {
        color: #94a3b8 !important;
    }
    
    .dark input[type="checkbox"] {
        background: #334155 !important;
        border-color: #475569 !important;
    }
    
    /* ===== LIGHT MODE FALLBACK ===== */
    
    .light .message-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    
    .light h1 {
        color: #1e293b !important;
    }
    
    .light p {
        color: #64748b !important;
    }
</style>
@endpush

@section('content')
<div>
    <!-- Header -->
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem">
        <div>
            <h1 style="font-size:1.75rem;font-weight:800;color:#1E293B;margin-bottom:0.25rem">Detail Pesan</h1>
            <p style="color:#64748B">Lihat detail dan balas pesan dari pengguna</p>
        </div>
        <div>
            <a href="{{ route('admin.contacts.index') }}" class="btn btn-secondary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M19 12H5M12 19l-7-7 7-7"/>
                </svg>
                Kembali
            </a>
        </div>
    </div>

    <!-- Message Details -->
    <div class="message-card">
        <div style="display:flex;justify-content:space-between;margin-bottom:1.5rem">
            <div>
                <div style="display:flex;align-items:center;gap:1rem;margin-bottom:0.5rem">
                    <div style="width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#667EEA,#764BA2);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:1.2rem">
                        {{ strtoupper(substr($contact->name,0,1)) }}
                    </div>
                    <div>
                        <h3 style="font-size:1.1rem;font-weight:700;color:#1E293B;margin:0">{{ $contact->name }}</h3>
                        <p style="color:#64748B;margin:0">{{ $contact->email }}</p>
                    </div>
                </div>
            </div>
            <div style="text-align:right">
                <span class="status-badge status-{{ $contact->status }}">
                    {{ ucfirst($contact->status) }}
                </span>
                <p style="font-size:0.75rem;color:#94A3B8;margin-top:0.5rem">
                    Dikirim: {{ $contact->created_at->format('d M Y, H:i') }}
                </p>
                @if($contact->read_at)
                <p style="font-size:0.75rem;color:#94A3B8;margin:0">
                    Dibaca: {{ $contact->read_at->format('d M Y, H:i') }}
                </p>
                @endif
            </div>
        </div>

        <div style="margin-bottom:1rem">
            <h4 style="font-size:0.875rem;font-weight:600;color:#64748B;margin-bottom:0.5rem">Subjek</h4>
            <p style="font-size:1rem;font-weight:600;color:#1E293B;margin:0">{{ $contact->subject }}</p>
        </div>

        <div style="margin-bottom:1.5rem">
            <h4 style="font-size:0.875rem;font-weight:600;color:#64748B;margin-bottom:0.5rem">Pesan</h4>
            <div style="background:#F8FAFF;padding:1rem;border-radius:8px;border:1px solid #E2E8F0">
                <p style="color:#334155;line-height:1.6;margin:0;white-space:pre-wrap">{{ $contact->message }}</p>
            </div>
        </div>

        @if($contact->admin_note)
        <div style="margin-bottom:1.5rem;background:#F0FDF4;border-left:4px solid #10B981;padding:1rem;border-radius:8px">
            <h4 style="font-size:0.875rem;font-weight:600;color:#065F46;margin-bottom:0.5rem">Balasan Admin</h4>
            <p style="color:#334155;margin:0;white-space:pre-wrap">{{ $contact->admin_note }}</p>
            @if($contact->replied_at)
            <p style="font-size:0.7rem;color:#64748B;margin-top:0.5rem">
                Dibalas: {{ $contact->replied_at->format('d M Y, H:i') }}
            </p>
            @endif
        </div>
        @endif
    </div>

    <!-- Reply Form -->
    @if($contact->status != 'replied')
    <div class="message-card">
        <h3 style="font-size:1.1rem;font-weight:700;color:#1E293B;margin-bottom:1rem">Balas Pesan</h3>
        
        <form action="{{ route('admin.contacts.reply', $contact->id) }}" method="POST">
            @csrf
            
            <div style="margin-bottom:1rem">
                <label for="reply_message" style="display:block;font-size:0.875rem;font-weight:600;color:#334155;margin-bottom:0.5rem">
                    Balasan Anda
                </label>
                <textarea name="reply_message" id="reply_message" rows="6" 
                          class="@error('reply_message') is-invalid @enderror"
                          style="width:100%;padding:0.75rem;border:1px solid #E2E8F0;border-radius:8px;font-family:inherit"
                          placeholder="Tulis balasan Anda di sini..."></textarea>
                @error('reply_message')
                    <p style="color:#DC2626;font-size:0.75rem;margin-top:0.25rem">{{ $message }}</p>
                @enderror
            </div>
            
            <div style="margin-bottom:1rem">
                <label style="display:flex;align-items:center;gap:0.5rem">
                    <input type="checkbox" name="send_copy" value="1">
                    <span style="font-size:0.875rem;color:#334155">Kirim salinan ke email saya</span>
                </label>
            </div>
            
            <div style="display:flex;gap:1rem">
                <button type="submit" class="btn btn-primary">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="22" y1="2" x2="11" y2="13"/>
                        <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                    </svg>
                    Kirim Balasan
                </button>
                
                <form action="{{ route('admin.contacts.update-status', $contact->id) }}" method="POST" style="display:inline">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="status" value="archived">
                    <button type="submit" class="btn btn-secondary">Arsipkan</button>
                </form>
                
                <button type="button" onclick="deleteContact({{ $contact->id }})" class="btn btn-danger">
                    Hapus Pesan
                </button>
            </div>
        </form>
    </div>
    @endif
</div>

@push('scripts')
<script>
    function deleteContact(id) {
        if (confirm('Apakah Anda yakin ingin menghapus pesan ini?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/contacts/${id}`;
            form.innerHTML = '@csrf @method("DELETE")';
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
@endpush
@endsection