@extends('layouts.app')

@section('title', 'Contact Inquiries')
@section('nav_inquiries', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Contact Inquiries')
@section('page_subtitle', 'Messages submitted through the public contact form')

@section('content')

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border-[0.5px] border-green-200 rounded-xl text-sm text-green-700">
    {{ session('success') }}
</div>
@endif

{{-- Filter tabs + search --}}
<div class="flex flex-wrap items-center justify-between gap-3 mb-5">
    <div class="flex flex-wrap gap-2">
        <a href="{{ route('inquiries.index') }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'all' ? 'bg-gray-800 text-white border-gray-800' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            All <span class="ml-1 text-gray-400">{{ $counts['all'] }}</span>
        </a>
        <a href="{{ route('inquiries.index', ['filter' => 'new']) }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'new' ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            New <span class="ml-1 {{ $filter === 'new' ? 'text-teal-200' : 'text-gray-400' }}">{{ $counts['new'] }}</span>
        </a>
        <a href="{{ route('inquiries.index', ['filter' => 'read']) }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'read' ? 'bg-gray-600 text-white border-gray-600' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            Read <span class="ml-1 text-gray-400">{{ $counts['read'] }}</span>
        </a>
        <a href="{{ route('inquiries.index', ['filter' => 'archived']) }}"
           class="px-3 py-1.5 text-xs font-medium rounded-lg border-[0.5px] transition-colors
                  {{ $filter === 'archived' ? 'bg-amber-500 text-white border-amber-500' : 'bg-white text-gray-500 border-gray-200 hover:bg-gray-50' }}">
            Archived <span class="ml-1 text-gray-400">{{ $counts['archived'] }}</span>
        </a>
    </div>

    <form method="GET" action="{{ route('inquiries.index') }}" class="flex items-center gap-2">
        @if($filter !== 'all')
        <input type="hidden" name="filter" value="{{ $filter }}">
        @endif
        <input type="text" name="search" value="{{ $search }}" placeholder="Search name, email or message…"
               class="border-[0.5px] border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400 w-full sm:w-56 transition-colors">
        <button type="submit"
                class="px-3 py-1.5 text-xs font-medium bg-white border-[0.5px] border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
            Search
        </button>
        @if($search)
        <a href="{{ route('inquiries.index', $filter !== 'all' ? ['filter' => $filter] : []) }}"
           class="text-xs text-gray-400 hover:text-gray-600 transition-colors">Clear</a>
        @endif
    </form>
</div>

{{-- List --}}
@if($inquiries->isEmpty())
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-12 text-center text-gray-300 text-sm">
    @if($search)
        No inquiries match "{{ $search }}".
    @else
        No inquiries yet. The contact form is live on the public website.
    @endif
</div>
@else
<div class="space-y-3">
    @foreach($inquiries as $inq)
    <div x-data="{ open: false }"
         class="bg-white border-[0.5px] rounded-xl p-4 transition-colors {{ $inq->status === 'new' ? 'border-teal-200' : 'border-gray-200' }} {{ $inq->status === 'archived' ? 'opacity-70' : '' }}">
        <div class="flex items-start justify-between gap-4">
            <div class="min-w-0 flex-1">
                <div class="flex items-center gap-2 flex-wrap">
                    <span class="font-semibold text-gray-800 text-sm">{{ $inq->name }}</span>
                    @if($inq->status === 'new')
                    <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-teal-50 text-teal-700 border-teal-200">
                        <span class="w-1.5 h-1.5 rounded-full bg-teal-500 inline-block"></span>New
                    </span>
                    @elseif($inq->status === 'archived')
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-amber-50 text-amber-700 border-amber-200">Archived</span>
                    @else
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold border-[0.5px] bg-gray-100 text-gray-500 border-gray-300">Read</span>
                    @endif
                </div>
                <div class="flex items-center gap-3 mt-1 text-xs text-gray-500 flex-wrap">
                    <a href="mailto:{{ $inq->email }}" class="text-teal-600 hover:text-teal-800">{{ $inq->email }}</a>
                    @if($inq->phone)<span class="text-gray-300">·</span><span>{{ $inq->phone }}</span>@endif
                </div>
                @if($inq->subject)
                <p class="text-sm font-medium text-gray-700 mt-2">{{ $inq->subject }}</p>
                @endif
                <p class="text-sm text-gray-600 mt-1 whitespace-pre-line"
                   :class="open ? '' : 'line-clamp-2'">{{ $inq->message }}</p>
                @if(strlen($inq->message) > 140)
                <button type="button" @click="open = !open"
                        class="text-xs text-teal-600 hover:text-teal-800 font-medium mt-1"
                        x-text="open ? 'Show less' : 'Show more'"></button>
                @endif
            </div>
            <div class="text-right flex-shrink-0">
                <p class="text-xs text-gray-500">{{ $inq->created_at->format('M j, Y') }}</p>
                <p class="text-[10px] text-gray-400">{{ $inq->created_at->format('g:i A') }}</p>
            </div>
        </div>

        {{-- Actions --}}
        <div class="flex items-center gap-2 mt-3 pt-3 border-t border-gray-50">
            @if($inq->status !== 'read')
            <form method="POST" action="{{ route('inquiries.status', $inq->id) }}">
                @csrf
                <input type="hidden" name="status" value="read">
                <button type="submit" class="text-xs font-medium text-gray-600 hover:text-gray-900 transition-colors">Mark read</button>
            </form>
            @endif
            @if($inq->status !== 'archived')
            <span class="text-gray-200">·</span>
            <form method="POST" action="{{ route('inquiries.status', $inq->id) }}">
                @csrf
                <input type="hidden" name="status" value="archived">
                <button type="submit" class="text-xs font-medium text-amber-600 hover:text-amber-800 transition-colors">Archive</button>
            </form>
            @else
            <span class="text-gray-200">·</span>
            <form method="POST" action="{{ route('inquiries.status', $inq->id) }}">
                @csrf
                <input type="hidden" name="status" value="new">
                <button type="submit" class="text-xs font-medium text-teal-600 hover:text-teal-800 transition-colors">Restore to New</button>
            </form>
            @endif
            <span class="text-gray-200">·</span>
            <a href="mailto:{{ $inq->email }}?subject=Re: {{ rawurlencode($inq->subject ?: 'Your inquiry') }}"
               class="text-xs font-medium text-teal-600 hover:text-teal-800 transition-colors">Reply by email</a>
            <span class="ml-auto"></span>
            <form method="POST" action="{{ route('inquiries.destroy', $inq->id) }}"
                  data-confirm="Delete this inquiry from {{ $inq->name }}?" data-danger="true">
                @csrf @method('DELETE')
                <button type="submit" class="text-xs font-medium text-red-500 hover:text-red-700 transition-colors">Delete</button>
            </form>
        </div>
    </div>
    @endforeach
</div>

@if($inquiries->hasPages())
<div class="mt-4">
    {{ $inquiries->links() }}
</div>
@endif
@endif

@endsection