@extends('layouts.app')

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

@push('styles')
<style>
    .stat-card {
        background: #fff;
        border: 1px solid #E2E8F0;
        border-radius: 14px;
        padding: 1.25rem;
        transition: all 0.2s;
    }
    .stat-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .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; }
    .status-archived { background: #F3F4F6; color: #374151; }

    /* ===== DARK MODE FOR CONTACTS PAGE ===== */
    
    .dark .stat-card {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
    
    .dark .admin-card {
        background: #1e293b !important;
        border-color: #334155 !important;
    }
    
    .dark h1 {
        color: #f1f5f9 !important;
    }
    
    .dark p {
        color: #cbd5e1 !important;
    }
    
    /* Form Controls */
    .dark [style*="padding:0.5rem 0.75rem"] {
        background: #334155 !important;
        border-color: #475569 !important;
        color: #f1f5f9 !important;
    }
    
    .dark input[type="text"],
    .dark select {
        background: #334155 !important;
        border-color: #475569 !important;
        color: #f1f5f9 !important;
    }
    
    .dark input[type="text"]::placeholder {
        color: #94a3b8 !important;
    }
    
    /* Table Headers */
    .dark [style*="border-bottom:2px solid #E2E8F0"] {
        border-bottom-color: #334155 !important;
    }
    
    .dark [style*="color:#64748B"][style*="font-weight:600"] {
        color: #cbd5e1 !important;
    }
    
    /* Table Rows */
    .dark [style*="border-bottom:1px solid #F1F5F9"] {
        border-bottom-color: #334155 !important;
    }
    
    .dark [style*="background:#FEFCE8"] {
        background: rgba(217, 119, 6, 0.1) !important;
    }
    
    .dark [style*="color:#1E293B"] {
        color: #f1f5f9 !important;
    }
    
    .dark [style*="color:#94A3B8"] {
        color: #cbd5e1 !important;
    }
    
    .dark [style*="color:#334155"] {
        color: #cbd5e1 !important;
    }
    
    /* Status Badges */
    .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;
    }
    
    .dark .status-archived {
        background: #475569 !important;
        color: #cbd5e1 !important;
    }
    
    /* Pagination Border */
    .dark [style*="border-top:1px solid #E2E8F0"] {
        border-top-color: #334155 !important;
    }
    
    /* Empty State Icon */
    .dark svg[stroke="#CBD5E1"] {
        stroke: #64748b !important;
    }
    
    /* ===== LIGHT MODE FALLBACK ===== */
    
    .light .stat-card {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
    }
    
    .light .admin-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">Kelola Pesan</h1>
            <p style="color:#64748B">Kelola dan balas pesan yang masuk dari pengguna</p>
        </div>
        <div>
            <a href="{{ route('admin.contacts.export', request()->query()) }}" class="btn btn-secondary" style="margin-right:0.5rem">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 3v12m0 0-3-3m3 3 3-3M5 21h14"/>
                </svg>
                Export CSV
            </a>
            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                </svg>
                Kembali
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem">
        <div class="stat-card">
            <div style="font-size:0.75rem;color:#64748B;margin-bottom:0.5rem">Total Pesan</div>
            <div style="font-size:1.75rem;font-weight:800;color:#1E293B">{{ $stats['total'] }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem;color:#64748B;margin-bottom:0.5rem">Belum Dibaca</div>
            <div style="font-size:1.75rem;font-weight:800;color:#F59E0B">{{ $stats['unread'] }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem;color:#64748B;margin-bottom:0.5rem">Menunggu Respon</div>
            <div style="font-size:1.75rem;font-weight:800;color:#DC2626">{{ $stats['pending'] }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem;color:#64748B;margin-bottom:0.5rem">Sudah Dibaca</div>
            <div style="font-size:1.75rem;font-weight:800;color:#3B82F6">{{ $stats['read'] }}</div>
        </div>
        <div class="stat-card">
            <div style="font-size:0.75rem;color:#64748B;margin-bottom:0.5rem">Sudah Dibalas</div>
            <div style="font-size:1.75rem;font-weight:800;color:#10B981">{{ $stats['replied'] }}</div>
        </div>
    </div>

    <!-- Filter and Search -->
    <div class="admin-card" style="margin-bottom:1.5rem">
        <form method="GET" action="{{ route('admin.contacts.index') }}" style="display:flex;gap:1rem;flex-wrap:wrap">
            <div style="flex:1">
                <input type="text" name="search" placeholder="Cari berdasarkan nama, email, atau subjek..." 
                       value="{{ request('search') }}" 
                       style="width:100%;padding:0.5rem 0.75rem;border:1px solid #E2E8F0;border-radius:8px">
            </div>
            <div>
                <select name="status" style="padding:0.5rem 1rem;border:1px solid #E2E8F0;border-radius:8px">
                    <option value="all" {{ request('status') == 'all' ? 'selected' : '' }}>Semua Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Menunggu</option>
                    <option value="read" {{ request('status') == 'read' ? 'selected' : '' }}>Sudah Dibaca</option>
                    <option value="replied" {{ request('status') == 'replied' ? 'selected' : '' }}>Sudah Dibalas</option>
                    <option value="archived" {{ request('status') == 'archived' ? 'selected' : '' }}>Arsip</option>
                </select>
            </div>
            <div>
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('admin.contacts.index') }}" class="btn btn-secondary">Reset</a>
            </div>
        </form>
    </div>

    <!-- Contacts Table -->
    <div class="admin-card">
        @if($contacts->count() > 0)
        <div style="overflow-x:auto">
            <table style="width:100%;border-collapse:collapse">
                <thead>
                    <tr style="border-bottom:2px solid #E2E8F0">
                        <th style="text-align:left;padding:0.75rem 0.5rem;font-size:0.75rem;font-weight:600;color:#64748B">
                            <input type="checkbox" id="select-all" style="margin:0">
                        </th>
                        <th style="text-align:left;padding:0.75rem 0.5rem;font-size:0.75rem;font-weight:600;color:#64748B">Pengirim</th>
                        <th style="text-align:left;padding:0.75rem 0.5rem;font-size:0.75rem;font-weight:600;color:#64748B">Subjek</th>
                        <th style="text-align:left;padding:0.75rem 0.5rem;font-size:0.75rem;font-weight:600;color:#64748B">Status</th>
                        <th style="text-align:left;padding:0.75rem 0.5rem;font-size:0.75rem;font-weight:600;color:#64748B">Tanggal</th>
                        <th style="text-align:right;padding:0.75rem 0.5rem;font-size:0.75rem;font-weight:600;color:#64748B">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($contacts as $contact)
                    <tr style="border-bottom:1px solid #F1F5F9;{{ !$contact->read_at ? 'background:#FEFCE8' : '' }}">
                        <td style="padding:0.75rem 0.5rem">
                            <input type="checkbox" class="contact-checkbox" value="{{ $contact->id }}" style="margin:0">
                        </td>
                        <td style="padding:0.75rem 0.5rem">
                            <div style="font-weight:600;color:#1E293B">{{ $contact->name }}</div>
                            <div style="font-size:0.7rem;color:#94A3B8">{{ $contact->email }}</div>
                        </td>
                        <td style="padding:0.75rem 0.5rem">
                            <div style="font-size:0.875rem;color:#334155">{{ Str::limit($contact->subject, 40) }}</div>
                            <div style="font-size:0.7rem;color:#94A3B8;margin-top:0.25rem">{{ Str::limit($contact->message, 50) }}</div>
                        </td>
                        <td style="padding:0.75rem 0.5rem">
                            <span class="status-badge status-{{ $contact->status }}">
                                {{ ucfirst($contact->status) }}
                            </span>
                        </td>
                        <td style="padding:0.75rem 0.5rem">
                            <div style="font-size:0.75rem;color:#64748B">{{ $contact->created_at->format('d M Y') }}</div>
                            <div style="font-size:0.7rem;color:#94A3B8">{{ $contact->created_at->diffForHumans() }}</div>
                        </td>
                        <td style="padding:0.75rem 0.5rem;text-align:right">
                            <a href="{{ route('admin.contacts.show', $contact->id) }}" 
                               class="btn btn-sm btn-primary" 
                               style="padding:0.25rem 0.75rem;font-size:0.75rem">
                                Detail
                            </a>
                            <button onclick="deleteContact({{ $contact->id }})" 
                                    class="btn btn-sm btn-danger" 
                                    style="padding:0.25rem 0.75rem;font-size:0.75rem;margin-left:0.5rem">
                                Hapus
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        
        <!-- Bulk Actions -->
        <div style="margin-top:1rem;padding-top:1rem;border-top:1px solid #E2E8F0;display:flex;justify-content:space-between;align-items:center">
            <div>
                <button id="bulk-delete" class="btn btn-danger" style="display:none" onclick="bulkDelete()">
                    Hapus Terpilih
                </button>
            </div>
            <div>
                {{ $contacts->appends(request()->query())->links() }}
            </div>
        </div>
        
        @else
        <div style="text-align:center;padding:3rem">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#CBD5E1" stroke-width="1.5">
                <path 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>
            <p style="color:#94A3B8;margin-top:1rem">Belum ada pesan masuk</p>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script>
    // Select all functionality
    const selectAll = document.getElementById('select-all');
    const checkboxes = document.querySelectorAll('.contact-checkbox');
    const bulkDeleteBtn = document.getElementById('bulk-delete');
    
    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            updateBulkDeleteButton();
        });
        
        checkboxes.forEach(cb => {
            cb.addEventListener('change', updateBulkDeleteButton);
        });
    }
    
    function updateBulkDeleteButton() {
        const checked = document.querySelectorAll('.contact-checkbox:checked');
        bulkDeleteBtn.style.display = checked.length > 0 ? 'inline-block' : 'none';
    }
    
    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();
        }
    }
    
    function bulkDelete() {
        const selected = Array.from(document.querySelectorAll('.contact-checkbox:checked')).map(cb => cb.value);
        if (selected.length === 0) return;
        
        if (confirm(`Hapus ${selected.length} pesan yang dipilih?`)) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route("admin.contacts.bulk-destroy") }}';
            form.innerHTML = '@csrf @method("DELETE") <input type="hidden" name="ids" value="' + selected.join(',') + '">';
            document.body.appendChild(form);
            form.submit();
        }
    }
</script>
@endpush
@endsection