@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="Contact Details"
                    description="Full details of the submitted contact message.">
                    <a href="{{ route('contacts.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Contacts
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Contact Information</h5>
                            <p class="form-section__sub mb-0">
                                Details about the student and their submitted message.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-item__label">Contact ID</div>
                                <div class="detail-item__value">#{{ $contact->id }}</div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Submitted At</div>
                                <div class="detail-item__value">
                                    {{ $contact->created_at->format('Y-m-d H:i') }}
                                    <small class="d-block text-muted fw-normal" style="font-size:0.82rem;">
                                        {{ $contact->created_at->diffForHumans() }}
                                    </small>
                                </div>
                            </div>

                            <div class="detail-item" style="grid-column: span 12 / span 12;">
                                <div class="detail-item__label">Student</div>
                                <div class="detail-item__value">
                                    @if ($contact->student)
                                        <div class="task-staff-wrap" style="justify-content: flex-start;">
                                            <div class="task-staff-avatar">
                                                {{ strtoupper(substr($contact->student->full_name, 0, 2)) }}
                                            </div>
                                            {{ $contact->student->full_name }}
                                        </div>
                                    @else
                                        <span class="ui-muted">—</span>
                                    @endif
                                </div>
                            </div>

                            <div class="detail-item" style="grid-column: span 12 / span 12;">
                                <div class="detail-item__label">Message</div>
                                <div class="detail-item__value detail-item__value--multiline">
                                    {{ $contact->message }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

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

@push('styles')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .detail-item {
            grid-column: span 6 / span 6;
            border: 1px solid #edf2f7;
            background: #fbfcfe;
            border-radius: 16px;
            padding: 1rem;
        }

        .detail-item__label {
            font-size: 0.84rem;
            font-weight: 700;
            color: #64748b;
            margin-bottom: 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .detail-item__value {
            color: #111827;
            font-size: 0.97rem;
            font-weight: 600;
            line-height: 1.6;
        }

        .detail-item__value--multiline {
            white-space: pre-line;
            font-weight: 500;
        }

        .task-staff-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .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;
        }

        .asset-btn {
            min-height: 44px;
            padding: 0.72rem 1.05rem;
            border-radius: 12px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            text-decoration: none;
            font-weight: 700;
            transition: 0.2s ease;
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        @media (max-width: 991.98px) {
            .detail-item {
                grid-column: span 12 / span 12;
            }
        }
    </style>
@endpush