{{-- resources/views/admin/pesan-kontak/index.blade.php --}}
@extends('admin.layouts.app') 
@section('title', 'Kotak Pesan')
@section('content')
<div class="container-fluid py-4">
    <h4 class="mb-4 fw-bold">Inbox Publik</h4>
    @if(session('success')) <div class="alert alert-success border-0 shadow-sm">{{ session('success') }}</div> @endif

    <div class="card border-0 shadow-sm">
        <table class="table mb-0 align-middle table-hover">
            <thead class="table-light"><tr><th width="20%">Pengirim</th><th width="20%">Kontak</th><th width="45%">Subjek & Pesan</th><th width="15%">Aksi</th></tr></thead>
            <tbody>
                @foreach($pesans as $p)
                <tr class="{{ $p->is_read ? 'bg-transparent' : 'bg-primary bg-opacity-10 fw-bold' }}">
                    <td>{{ $p->nama }}</td>
                    <td class="small">{{ $p->email }}<br>{{ $p->no_hp }}</td>
                    <td><strong class="d-block text-primary">{{ $p->subjek }}</strong><span class="small text-muted">{{ Str::limit($p->pesan, 50) }}</span></td>
                    <td>
                        <button class="btn btn-sm btn-primary btn-read" data-id="{{ $p->id }}" data-bs-toggle="modal" data-bs-target="#modalShow{{ $p->id }}">Buka</button>
                        <form action="{{ route('admin.pesan-kontak.destroy', $p->id) }}" method="POST" class="d-inline">@csrf @method('DELETE') <button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i></button></form>
                    </td>
                </tr>

                <div class="modal fade" id="modalShow{{ $p->id }}">
                    <div class="modal-dialog">
                        <div class="modal-content border-0">
                            <div class="modal-header bg-light"><h5 class="fw-bold">{{ $p->subjek }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                            <div class="modal-body">
                                <p class="mb-1"><strong>Dari:</strong> {{ $p->nama }} ({{ $p->email }})</p>
                                <p class="mb-3"><strong>No HP:</strong> {{ $p->no_hp }}</p><hr>
                                <p>{{ $p->pesan }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
    document.querySelectorAll('.btn-read').forEach(btn => {
        btn.addEventListener('click', function() {
            let id = this.getAttribute('data-id');
            fetch('/admin/pesan-kontak/' + id + '/read', {
                method: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(res => { this.closest('tr').classList.remove('bg-primary', 'bg-opacity-10', 'fw-bold'); });
        });
    });
</script>
@endpush
@endsection