@extends('layouts.admin')

@section('title', 'Queries | Smart Dermatology')
@section('page_title', 'Inbox & Queries')
@section('page_subtitle', 'Track feedback and support requests coming from the user side.')

@push('styles')
    <style>
        .query-card { border: none; border-radius: 15px; transition: 0.3s; margin-bottom: 20px; border-left: 5px solid #eee; }
        .query-card.unread { border-left-color: var(--brand-pink); }
        .query-card:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    </style>
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-10">
            @forelse ($queries as $query)
                <div class="card query-card {{ $query->status === 'Unread' ? 'unread' : '' }} p-4 bg-white">
                    <div class="d-flex justify-content-between align-items-start gap-3 flex-wrap">
                        <div class="d-flex align-items-center">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($query->name) }}&background=F690A6&color=fff" class="rounded-circle me-3" width="50" alt="{{ $query->name }}">
                            <div>
                                <h6 class="fw-bold mb-0">{{ $query->name }}</h6>
                                <small class="text-muted d-block">{{ $query->email }}</small>
                                @if ($query->phone)
                                    <small class="text-muted d-block">{{ $query->phone }}</small>
                                @endif
                                <small class="text-muted">Received: {{ $query->created_at?->diffForHumans() }}</small>
                            </div>
                        </div>
                        <span class="badge text-white" style="background: var(--brand-pink);">{{ $query->status }}</span>
                    </div>
                    <div class="mt-3">
                        <p class="text-dark mb-0">"{{ $query->message }}"</p>
                    </div>
                    <div class="d-flex justify-content-end gap-2 mt-3 flex-wrap">
                        <a href="{{ route('admin.queries.show', $query) }}" class="btn btn-sm btn-outline-secondary px-3">View</a>
                        <form action="{{ route('admin.queries.status', $query) }}" method="POST">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm text-white px-3" style="background: var(--brand-pink); border:none;">
                                {{ $query->status === 'Unread' ? 'Mark as Read' : 'Mark as Unread' }}
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="card query-card p-4 bg-white">
                    <p class="mb-0 text-muted">No user queries have been submitted yet.</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection