@extends('admin.master')

@section('content')
<style>
    .message-admin-page {
        padding: 24px;
    }

    .message-admin-header {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 20px;
    }

    .message-admin-unread {
        padding: 8px 13px;
        border-radius: 20px;
        background: #fff0eb;
        color: #e64917;
        font-size: 13px;
        font-weight: 700;
    }

    .message-admin-filter {
        display: grid;
        grid-template-columns: 1fr 180px auto;
        gap: 10px;
        margin-bottom: 18px;
    }

    .message-admin-control {
        min-height: 42px;
        padding: 9px 12px;
        border: 0;
        border-radius: 7px;
        outline: 0;
        background: #ffffff;
    }

    .message-admin-filter-button {
        border: 0;
        border-radius: 7px;
        background: #ff5722;
        color: #ffffff;
        cursor: pointer;
        font-weight: 700;
    }

    .message-admin-table-wrap {
        overflow-x: auto;
        border-radius: 10px;
        background: #ffffff;
    }

    .message-admin-table {
        width: 100%;
        min-width: 1100px;
        border-collapse: collapse;
    }

    .message-admin-table th {
        padding: 13px 15px;
        background: #f1f5f9;
        color: #64748b;
        font-size: 11px;
        text-align: left;
        text-transform: uppercase;
    }

    .message-admin-table td {
        padding: 14px 15px;
        color: #374151;
        font-size: 13px;
    }

    .message-admin-table tr.unread {
        background: #fff8f5;
        font-weight: 700;
    }

    .message-admin-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 7px 11px;
        border: 0;
        border-radius: 6px;
        background: #eaf2ff;
        color: #2563eb;
        cursor: pointer;
        text-decoration: none;
    }

    .message-admin-button.delete {
        background: #fee2e2;
        color: #dc2626;
    }

    .message-admin-actions {
        display: flex;
        gap: 7px;
    }

    .message-admin-actions form {
        margin: 0;
    }

    @media (max-width: 767px) {
        .message-admin-page {
            padding: 16px;
        }

        .message-admin-filter {
            grid-template-columns: 1fr;
        }

        .message-admin-filter-button {
            min-height: 42px;
        }
    }
</style>

<div class="message-admin-page">
    <div class="message-admin-header">
        <div>
            <h1 style="margin:0 0 6px;">
                Contact Messages
            </h1>

            <p style="margin:0;color:#64748b;">
                View messages submitted from the contact form.
            </p>
        </div>

        <span class="message-admin-unread">
            {{ $unreadCount }} Unread
        </span>
    </div>

    @if (session('success'))
        <div style="
            margin-bottom:18px;
            padding:13px;
            border-radius:7px;
            background:#dcfce7;
            color:#166534;
        ">
            {{ session('success') }}
        </div>
    @endif

    <form
        action="{{ route(
            'admin.contact-messages.index'
        ) }}"
        method="GET"
        class="message-admin-filter"
    >
        <input
            type="text"
            name="search"
            class="message-admin-control"
            value="{{ request('search') }}"
            placeholder="Search name, email, mobile or location"
        >

        <select
            name="status"
            class="message-admin-control"
        >
            <option value="">All messages</option>

            <option
                value="unread"
                @selected(request('status') === 'unread')
            >
                Unread
            </option>

            <option
                value="read"
                @selected(request('status') === 'read')
            >
                Read
            </option>
        </select>

        <button
            type="submit"
            class="message-admin-filter-button"
        >
            Search
        </button>
    </form>

    <div class="message-admin-table-wrap">
        <table class="message-admin-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Contact</th>
                    <th>Feedback Type</th>
                    <th>Location</th>
                    <th>Date</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>

            <tbody>
                @forelse (
                    $contactMessages as $contactMessage
                )
                    <tr class="{{ $contactMessage->read_at
                        ? ''
                        : 'unread' }}"
                    >
                        <td>
                            {{ $contactMessage->name }}
                        </td>

                        <td>
                            {{ $contactMessage->email }}

                            <br>

                            {{ $contactMessage->mobile_number }}
                        </td>

                        <td>
                            {{ $contactMessage
                                ->feedback_type_name }}
                        </td>

                        <td>
                            {{ $contactMessage->location_name }}
                        </td>

                        <td>
                            {{ $contactMessage->created_at
                                ->format('d M Y, h:i A') }}
                        </td>

                        <td>
                            {{ $contactMessage->read_at
                                ? 'Read'
                                : 'Unread' }}
                        </td>

                        <td>
                            <div class="message-admin-actions">
                                <a
                                    href="{{ route(
                                        'admin.contact-messages.show',
                                        $contactMessage
                                    ) }}"
                                    class="message-admin-button"
                                >
                                    View
                                </a>

                                <form
                                    action="{{ route(
                                        'admin.contact-messages.destroy',
                                        $contactMessage
                                    ) }}"
                                    method="POST"
                                    onsubmit="return confirm('Delete this message?');"
                                >
                                    @csrf
                                    @method('DELETE')

                                    <button
                                        type="submit"
                                        class="message-admin-button delete"
                                    >
                                        Delete
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td
                            colspan="7"
                            style="padding:50px;text-align:center;"
                        >
                            No contact message found.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>

        @if ($contactMessages->hasPages())
            <div style="padding:18px;">
                {{ $contactMessages->links() }}
            </div>
        @endif
    </div>
</div>
@endsection