@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="CRM Contacts"
                    description="Browse and review contact messages submitted by students.">
                </x-page-title>

                <div class="ui-card ui-card--table" style="border-radius: 20px 20px 0px 0px !important;">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap" style="margin-right: auto">
                                Filters
                            </h6>
                            <x-table-controls :action="route('contacts.index')" searchName="search" searchPlaceholder="Search by message or student..." />
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table" style="border-radius:0px;">
                    <x-table :headers="['#', 'Student', 'Message', 'Date', 'Actions']" :paginator="$contacts"
                        emptyMessage="No contacts found matching the current filters.">
                        @forelse ($contacts as $contact)
                            <tr class="ui-row-click"
                                onclick="window.location='{{ route('contacts.show', $contact) }}'">
                                <td class="text-center">
                                    <span class="ui-muted">#{{ $contact->id }}</span>
                                </td>
                                <td class="text-center">
                                    @if ($contact->student)
                                        <div class="task-staff-wrap">
                                            <div class="task-staff-avatar">
                                                {{ strtoupper(substr($contact->student->full_name, 0, 2)) }}
                                            </div>
                                            <div class="ui-title">{{ $contact->student->full_name }}</div>
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <div class="ui-title">
                                        {{ \Illuminate\Support\Str::limit($contact->message, 80) }}
                                    </div>
                                </td>
                                <td class="text-center">
                                    <div class="ui-muted">{{ $contact->created_at->format('Y-m-d') }}</div>
                                    <small class="d-block text-muted">{{ $contact->created_at->diffForHumans() }}</small>
                                </td>
                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        <a href="{{ route('contacts.show', $contact) }}" class="table-action"
                                            data-bs-toggle="tooltip" title="View Contact">
                                            <iconify-icon icon="lucide:eye"></iconify-icon>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </x-table>
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .task-staff-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
        }

        .task-staff-avatar {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f3f4f6;
            border: 1px solid #e5e7eb;
            color: #374151;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .table-action {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
            background: #fff;
            color: #374151;
            transition: 0.2s ease;
            font-size: 18px;
            text-decoration: none;
        }

        .table-action:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            $('[data-bs-toggle="tooltip"]').tooltip();
        });
    </script>
@endpush