@extends('layouts.app')

@section('title', 'যোগাযোগ বার্তা')

@section('content')
<style>
    .ct-wrap{--ink:#0f172a;--muted:#64748b;--line:#eef1f6;--accent:#6366f1;--soft:#eef2ff;--green:#16a34a;--red:#dc2626;}
    .ct-head{margin:18px 0 22px}
    .ct-head h4{font-size:22px;font-weight:700;color:var(--ink);margin:0}
    .ct-head p{color:var(--muted);margin:4px 0 0;font-size:13.5px}
    .ct-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
    .ct-filters{display:flex;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:#fafbfc}
    .ct-filters a{padding:5px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted);background:var(--line);text-decoration:none;transition:.15s}
    .ct-filters a.active,ct-filters a:hover{background:var(--accent);color:#fff}
    .ct-filters a.active{background:var(--accent);color:#fff}
    .ct-row{display:grid;grid-template-columns:1fr auto;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);transition:background .1s}
    .ct-row:last-child{border-bottom:0}
    .ct-row:hover{background:#f8fafc}
    .ct-row.unread{border-left:3px solid var(--accent);background:#f5f7ff}
    .ct-row.unread:hover{background:#eef2ff}
    .ct-name{font-weight:700;font-size:14px;color:var(--ink)}
    .ct-meta{font-size:12.5px;color:var(--muted);margin:2px 0 6px}
    .ct-msg{font-size:13.5px;color:#334155;line-height:1.6}
    .ct-badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:700;background:var(--soft);color:var(--accent)}
    .ct-badge.contact{background:#fef9c3;color:#854d0e}
    .ct-badge.newsletter{background:#dcfce7;color:#15803d}
    .ct-actions{display:flex;gap:6px;align-items:flex-start;flex-shrink:0}
    .ct-btn{padding:5px 12px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
    .ct-btn-read{background:#eef2ff;color:var(--accent)}
    .ct-btn-read:hover{background:#e0e7ff}
    .ct-btn-del{background:#fef2f2;color:var(--red)}
    .ct-btn-del:hover{background:#fee2e2}
    .ct-empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:14px}
</style>

<div class="ct-wrap">
    <div class="ct-head">
        <h4>
            যোগাযোগ বার্তা
            @if($unread > 0)
                <span style="background:#6366f1;color:#fff;font-size:13px;padding:2px 10px;border-radius:999px;margin-left:8px">{{ $unread }} নতুন</span>
            @endif
        </h4>
        <p>সাইটের যোগাযোগ ফর্ম থেকে আসা সব বার্তা।</p>
    </div>

    <div class="ct-card">
        {{-- Filters --}}
        <div class="ct-filters">
            <a href="{{ route('admin.contacts.index') }}" class="{{ !request('read') && !request('source') ? 'active' : '' }}">সব</a>
            <a href="{{ route('admin.contacts.index', ['read'=>'0']) }}" class="{{ request('read')==='0' ? 'active' : '' }}">অপঠিত</a>
            <a href="{{ route('admin.contacts.index', ['source'=>'contact']) }}" class="{{ request('source')==='contact' ? 'active' : '' }}">যোগাযোগ ফর্ম</a>
            <a href="{{ route('admin.contacts.index', ['source'=>'newsletter']) }}" class="{{ request('source')==='newsletter' ? 'active' : '' }}">নিউজলেটার</a>
            @if($unread > 0)
                <form method="POST" action="{{ route('admin.contacts.read-all') }}" style="margin-left:auto">
                    @csrf
                    <button class="ct-btn ct-btn-read" type="submit">✅ সব পড়া চিহ্নিত করুন</button>
                </form>
            @endif
        </div>

        {{-- List --}}
        @forelse($submissions as $sub)
            <div class="ct-row {{ $sub->is_read ? '' : 'unread' }}">
                <div>
                    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
                        <span class="ct-name">{{ $sub->name }}</span>
                        <span class="ct-badge {{ $sub->source }}">{{ $sub->source }}</span>
                        @if(!$sub->is_read)
                            <span style="background:#6366f1;color:#fff;font-size:10px;padding:1px 7px;border-radius:999px;font-weight:700">নতুন</span>
                        @endif
                    </div>
                    <div class="ct-meta">
                        @if($sub->phone) 📞 {{ $sub->phone }} &nbsp; @endif
                        @if($sub->email) ✉️ {{ $sub->email }} &nbsp; @endif
                        🕐 {{ $sub->created_at->diffForHumans() }}
                        @if($sub->ip) &nbsp; · IP: {{ $sub->ip }} @endif
                    </div>
                    <div class="ct-msg">{{ $sub->message }}</div>
                </div>
                <div class="ct-actions">
                    @if(!$sub->is_read)
                        <form method="POST" action="{{ route('admin.contacts.read', $sub) }}">@csrf
                            <button class="ct-btn ct-btn-read" type="submit" title="পড়া চিহ্নিত করুন">✓</button>
                        </form>
                    @endif
                    <form method="POST" action="{{ route('admin.contacts.destroy', $sub) }}" onsubmit="return confirm('এই বার্তা মুছে ফেলবেন?')">
                        @csrf @method('DELETE')
                        <button class="ct-btn ct-btn-del" type="submit" title="মুছুন">🗑</button>
                    </form>
                </div>
            </div>
        @empty
            <div class="ct-empty">কোনো বার্তা নেই।</div>
        @endforelse
    </div>

    <div style="margin-top:16px">
        {{ $submissions->links() }}
    </div>
</div>
@endsection