@extends('backend.app')

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

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h3 class="content-header-title float-left mb-0">Contact Messages</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-body">
                <!-- Messages Table Section -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Messages List</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Name</th>
                                                <th>Email</th>
                                                <th>Subject</th>
                                                <th>Status</th>
                                                <th>Date</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse($messages as $message)
                                                <tr class="message-row"
                                                    data-href="{{ route('admin.contact-messages.show', $message->id) }}"
                                                    style="cursor: pointer; {{ !$message->is_read ? 'background-color: rgba(115, 103, 240, 0.05); font-weight: bold;' : '' }}">
                                                    <td><span class="badge badge-light-primary">#{{ $message->id }}</span></td>
                                                    <td>{{ $message->name }}</td>
                                                    <td>{{ $message->email }}</td>
                                                    <td>{{ Str::limit($message->subject, 40) }}</td>
                                                    <td>
                                                        @if(!$message->is_read)
                                                            <span class="badge badge-warning">Unread</span>
                                                        @else
                                                            <span class="badge badge-success">Read</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $message->created_at->format('M d, Y H:i') }}</td>
                                                    <td>
                                                        <div class="d-flex">
                                                            <a href="{{ route('admin.contact-messages.show', $message->id) }}"
                                                                class="btn btn-sm btn-info mr-1" title="View">
                                                                <i data-feather="eye"></i>
                                                            </a>
                                                            <form action="{{ route('admin.contact-messages.destroy', $message->id) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this message?')">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm btn-danger" title="Delete">
                                                                    <i data-feather="trash-2"></i>
                                                                </button>
                                                            </form>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="7" class="text-center py-5">
                                                        <div class="empty-state">
                                                            <i data-feather="inbox" class="fa-3x text-muted mb-3"></i>
                                                            <p class="text-muted">No contact messages found.</p>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>
                                </div>

                                <!-- Pagination -->
                                @if ($messages->hasPages())
                                    <div class="d-flex justify-content-center mt-3">
                                        {{ $messages->links() }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <style>
        .message-row {
            transition: all 0.2s ease;
        }

        .message-row:hover {
            background-color: rgba(115, 103, 240, 0.08) !important;
            box-shadow: 0 2px 8px rgba(115, 103, 240, 0.1);
        }
    </style>
    <script>
        $(document).ready(function() {
            // Make message rows clickable
            $('.message-row').on('click', function(e) {
                // Don't navigate if clicking on links, buttons, or forms
                if ($(e.target).closest('a, button, form').length > 0) {
                    return;
                }

                const url = $(this).data('href');
                if (url) {
                    window.location.href = url;
                }
            });
        });
    </script>
@endpush