@extends('layouts.admin.app')

@section('title', __('pages/contact-support.title'))

@section('content')
<div
    class="animate-fade-in"
    x-data="contactSupportPage({
        indexUrl: @js(route('admin.contact-support.index')),
        hasRecords: @js(($totalCount ?? 0) > 0),
        messages: @js(array_merge(
            __('pages/contact-support.messages'),
            ['confirm_delete_title'       => __('pages/contact-support.confirm.delete_title'),
             'confirm_delete_description' => __('pages/contact-support.confirm.delete_description')]
        ))
    })">

    {{-- Breadcrumb --}}
    <div class="px-4 py-4">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/contact-support.title')],
        ]" />
    </div>

    <div class="px-6 pb-6 space-y-4 mt-1">

        <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2" x-show="hasRecords" x-cloak>
            <div class="flex items-center gap-2 min-w-0 flex-wrap">

                {{-- Search --}}
                <div class="w-full sm:w-64 md:w-80 flex-shrink-0">
                    <x-forms.input
                        type="text"
                        x-model="filters.search"
                        data-cb-search
                        icon="heroicon-o-magnifying-glass"
                        placeholder="{{ __('pages/contact-support.placeholders.search') ?? __('pages/common.search', ['resource' => __('pages/contact-support.title')]) }}" />
                </div>

                {{-- Filter Dropdown --}}
                <x-common.table-filter>
                    <div>
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/contact-support.labels.status') }}</x-forms.label>
                        <x-forms.select x-model="filters.status" data-cb-filter="status">
                            <option value="">{{ __('pages/contact-support.filters.all_status') }}</option>
                            @foreach(App\Models\ContactSupport::STATUSES as $status)
                            <option value="{{ $status }}">{{ __('pages/contact-support.status.' . $status) }}</option>
                            @endforeach
                        </x-forms.select>
                    </div>
                    <div
                        x-ref="joinedDateFilter"
                        @range-change="
                            filters.date_from = $event.detail.from;
                            filters.date_to   = $event.detail.to;
                        ">
                        <x-forms.label class="mb-1.5 block text-xs font-medium text-foreground">{{ __('pages/contact-support.labels.received_at') }}</x-forms.label>
                        <x-forms.flatpickr
                            name="joined"
                            placeholder="{{ __('pages/contact-support.filters.date_from') }} — {{ __('pages/contact-support.filters.date_to') }}"
                            x-bind:value="filters.date_from && filters.date_to ? filters.date_from + ' to ' + filters.date_to : ''"
                            :config="[
                                'mode' => 'range',
                                'dateFormat' => 'Y-m-d',
                                'altFormat' => 'M d, Y',
                                'altInput' => true,
                                'maxDate' => date('Y-m-d'),
                            ]"
                        />
                    </div>
                </x-common.table-filter>

                <x-buttons.secondary type="button" class="hidden" data-cb-reset-filters>
                    <x-heroicon-o-arrow-path class="w-4 h-4" />
                    Reset
                </x-buttons.secondary>
            </div>
        </div>

        {{-- Skeleton template shown while AJAX loads --}}
        <div class="hidden" data-cb-skeleton-template>
            <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
                <div class="overflow-x-auto overflow-y-clip">
                    <table class="w-full table-fixed text-left text-sm text-muted-foreground" cellpadding="16">
                        <tbody>
                            @for($i = 0; $i < (int) config('pagination.skeleton_rows', 7); $i++)
                                <tr class="border-t border-border bg-card">
                                <td class="align-middle"><x-skeleton.horizontal class="h-4 w-8 rounded" /></td>
                                <td class="align-middle"><x-skeleton.horizontal class="h-4 w-36 max-w-full rounded" /></td>
                                <td class="align-middle"><x-skeleton.horizontal class="h-4 w-36 max-w-full rounded" /></td>
                                <td class="align-middle"><x-skeleton.horizontal class="h-4 w-28 max-w-full rounded" /></td>
                                <td class="align-middle"><x-skeleton.horizontal class="h-5 w-16 rounded-full" /></td>
                                <td class="align-middle"><x-skeleton.horizontal class="h-4 w-24 max-w-full rounded" /></td>
                                <td class="align-middle"><x-skeleton.horizontal class="h-4 w-24 max-w-full rounded" /></td>
                                <td class="text-right align-middle">
                                    <div class="flex items-center justify-end gap-1">
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                        <x-skeleton.horizontal class="h-8 w-8 rounded-lg" />
                                    </div>
                                </td>
                                </tr>
                                @endfor
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Empty state --}}
        <div class="hidden" data-cb-empty-template>
            <div class="flex flex-1 min-h-[320px] items-center justify-center py-10">
                <div class="w-full max-w-md rounded-2xl border border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 px-8 py-12 text-center shadow-sm">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-50 text-primary-600 dark:bg-primary-950/50 dark:text-primary-400 ring-1 ring-inset ring-primary-100 dark:ring-primary-900/60">
                        <x-heroicon-o-envelope class="w-8 h-8" />
                    </div>
                    <h2 class="mt-6 text-lg font-semibold text-surface-900 dark:text-white tracking-tight">{{ __('pages/contact-support.noDataAvailable.title') }}</h2>
                    <p class="mt-2 text-sm text-surface-500 dark:text-surface-400 leading-relaxed">
                        {{ __('pages/contact-support.noDataAvailable.description') }}
                    </p>
                </div>
            </div>
        </div>

        <div id="table-container"></div>
    </div>

    <x-alert-dialog />
</div>
@endsection

@push('before-app-js')
@vite(['resources/js/admin/contact-support.js'])
@endpush