@extends('admin.layouts.app')

@section('title', 'Messages')
@section('page-title', 'Contact Messages')

@section('content')
<!-- Success/Error Messages -->
@if(session('success'))
    <div class="alert-auto-dismiss" style="background: rgba(0, 255, 65, 0.1); border: 1px solid var(--primary); border-radius: 4px; padding: 12px 16px; margin-bottom: 1.5rem; color: var(--primary); box-shadow: 0 0 10px var(--primary-glow);">
        {{ session('success') }}
    </div>
@endif

<div class="card">
    <div class="card-header">
        <h3>All Messages 
            @if($newCount > 0)
            <span style="background: var(--danger); color: white; padding: 2px 10px; border-radius: 50px; font-size: 0.8rem; margin-left: 10px;">{{ $newCount }} New</span>
            @endif
        </h3>
    </div>
    <div style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; table-layout: fixed;">
            <thead>
                <tr style="background: rgba(0,0,0,0.2);">
                    <th style="padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); width: 100px;">Status</th>
                    <th style="padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); width: 15%;">From</th>
                    <th style="padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); width: 25%;">Email</th>
                    <th style="padding: 1rem; text-align: left; border-bottom: 1px solid var(--border);">Message</th>
                    <th style="padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); width: 150px;">Date</th>
                    <th style="padding: 1rem; text-align: center; border-bottom: 1px solid var(--border); width: 160px;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($messages as $message)
                <tr style="border-bottom: 1px solid var(--border); {{ $message->status === 'new' ? 'background: rgba(0, 255, 65, 0.05);' : '' }}">
                    <td style="padding: 1rem; white-space: nowrap;">
                        @if($message->status === 'new')
                            <span style="display:inline-block; background: var(--danger); color: white; padding: 4px 10px; border-radius: 50px; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; min-width: 60px; text-align: center;">New</span>
                        @elseif($message->status === 'read')
                            <span style="display:inline-block; background: rgba(0, 255, 65, 0.1); color: var(--primary); border: 1px solid var(--primary); padding: 4px 10px; border-radius: 50px; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; box-shadow: 0 0 10px var(--primary-glow); min-width: 60px; text-align: center;">Read</span>
                        @else
                            <span style="display:inline-block; background: rgba(0, 255, 65, 0.1); color: var(--primary); border: 1px solid var(--primary); padding: 4px 10px; border-radius: 50px; font-size: 0.7rem; text-transform: uppercase; font-weight: 700; box-shadow: 0 0 10px var(--primary-glow); min-width: 60px; text-align: center;">Resolved</span>
                        @endif
                    </td>
                    <td style="padding: 1rem; font-weight: {{ $message->status === 'new' ? '700' : '400' }}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $message->name }}</td>
                    <td style="padding: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ $message->email }}">{{ $message->email }}</td>
                    <td style="padding: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ Str::limit($message->message, 40) }}</td>
                    <td style="padding: 1rem; white-space: nowrap;">{{ $message->created_at->diffForHumans() }}</td>
                    <td style="padding: 1rem; text-align: center;">
                        <div style="display: flex; gap: 5px; justify-content: center;">
                            <a href="{{ route('admin.messages.show', $message) }}" class="btn btn-primary btn-sm" style="font-size: 0.7rem; padding: 5px 10px;">VIEW</a>
                            <form action="{{ route('admin.messages.destroy', $message) }}" method="POST" style="display: inline;">
                                @csrf
                                @method('DELETE')
                                <button type="button" class="btn btn-danger btn-sm" style="font-size: 0.7rem; padding: 5px 10px;" data-delete="Delete message from {{ $message->name }}?">DELETE</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align: center; color: var(--text-muted); padding: 3rem;">
                        No messages yet. When users submit the contact form, messages will appear here.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@if($messages->hasPages())
<div style="margin-top: 1.5rem; display: flex; justify-content: center;">
    {{ $messages->links() }}
</div>
@endif
@endsection