@extends('layouts.admin.app')

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

@section('content')
<div class="animate-fade-in">

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

    <div class="px-6 pb-8 space-y-6">

        {{-- Page heading --}}
        <div>
            <h1 class="text-xl font-bold text-foreground">{{ __('pages/contact-support.dashboard.title') }}</h1>
            <p class="mt-0.5 text-sm text-muted-foreground">{{ __('pages/contact-support.dashboard.subtitle') }}</p>
        </div>

        {{-- Stats Grid --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
            <x-widgets.stats-card
                title="{{ __('pages/contact-support.dashboard.total') }}"
                value="{{ number_format($stats['total']) }}"
                color="primary"
                :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\'/></svg>'"
            />
            <x-widgets.stats-card
                title="{{ __('pages/contact-support.dashboard.open') }}"
                value="{{ number_format($stats['open']) }}"
                color="cyan"
                :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4\'/></svg>'"
            />
            <x-widgets.stats-card
                title="{{ __('pages/contact-support.dashboard.in_progress') }}"
                value="{{ number_format($stats['in_progress']) }}"
                color="amber"
                :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z\'/></svg>'"
            />
            <x-widgets.stats-card
                title="{{ __('pages/contact-support.dashboard.closed') }}"
                value="{{ number_format($stats['closed']) }}"
                color="green"
                :icon="'<svg class=\'w-6 h-6\' fill=\'none\' stroke=\'currentColor\' viewBox=\'0 0 24 24\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\'/></svg>'"
            />
        </div>

        {{-- Chart + Latest Records --}}
        <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

            {{-- Pie Chart --}}
            @php
                $chartLabels = [
                    'open'        => __('pages/contact-support.status.open'),
                    'in_progress' => __('pages/contact-support.status.in_progress'),
                    'closed'      => __('pages/contact-support.status.closed'),
                ];
            @endphp
            <div class="xl:col-span-1 h-full">
                <x-widgets.chart-card
                    class="h-full"
                    title="{{ __('pages/contact-support.dashboard.chart_title') }}"
                    subtitle="{{ __('pages/contact-support.dashboard.chart_sub') }}"
                    chartId="contact-support-status-chart"
                    height="min-h-[16rem]">
                    <canvas
                        class="w-full h-full min-h-[16rem]"
                        data-stats='@json($stats)'
                        data-labels='@json($chartLabels)'
                        data-chart-target="contact-support-status-chart"
                    ></canvas>
                </x-widgets.chart-card>
            </div>

            {{-- Latest Records Table --}}
            <div class="xl:col-span-2 h-full">
                <div class="rounded-xl border border-border bg-card text-card-foreground shadow-card h-full flex flex-col">
                    <div class="flex items-center justify-between gap-4 border-b border-border px-6 py-4">
                        <div>
                            <h3 class="text-base font-semibold text-foreground">{{ __('pages/contact-support.dashboard.recent') }}</h3>
                            <p class="mt-0.5 text-xs text-muted-foreground">{{ __('pages/contact-support.dashboard.latest_records') }}</p>
                        </div>
                        <a href="{{ route('admin.contact-support.index') }}" class="text-xs font-medium text-primary-600 hover:underline dark:text-primary-400">
                            {{ __('pages/contact-support.dashboard.view_all') }}
                        </a>
                    </div>

                    @if($latestRecords->isEmpty())
                    <div class="px-6 py-10 text-center text-sm text-muted-foreground">
                        {{ __('pages/contact-support.dashboard.no_recent') }}
                    </div>
                    @else
                    <div class="overflow-x-auto">
                        <table class="w-full text-sm" cellpadding="14">
                            <thead>
                                <tr class="border-b border-border bg-muted/40 text-xs font-medium uppercase tracking-wider text-muted-foreground">
                                    <th class="text-left px-4 py-3">#</th>
                                    <th class="text-left px-4 py-3">{{ __('pages/contact-support.labels.user_details') }}</th>
                                    <th class="text-left px-4 py-3">{{ __('pages/contact-support.labels.email') }}</th>
                                    <th class="text-left px-4 py-3">{{ __('pages/contact-support.labels.subject') }}</th>
                                    <th class="text-left px-4 py-3">{{ __('pages/contact-support.labels.status') }}</th>
                                    <th class="text-left px-4 py-3">{{ __('pages/contact-support.labels.submitted_date') }}</th>
                                    <th class="text-right px-4 py-3">{{ __('pages/contact-support.labels.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($latestRecords as $record)
                                <tr class="border-t border-border transition-colors hover:bg-muted/40">
                                    <td class="px-4 py-3 text-surface-500 dark:text-surface-400">{{ $loop->iteration }}</td>
                                    <td class="px-4 py-3">
                                        <p class="font-medium text-foreground truncate max-w-[10rem]">{{ $record->full_name }}</p>
                                    </td>
                                    <td class="px-4 py-3 text-surface-600 dark:text-surface-300 truncate max-w-[10rem]">{{ $record->email }}</td>
                                    <td class="px-4 py-3 text-surface-600 dark:text-surface-300 truncate max-w-[10rem]">{{ $record->subject }}</td>
                                    <td class="px-4 py-3">
                                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ $record->status_badge_class }}">
                                            {{ $record->status_label }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-surface-500 dark:text-surface-400 whitespace-nowrap">{{ $record->formatted_created_at }}</td>
                                    <td class="px-4 py-3 text-right">
                                        <a href="{{ route('admin.contact-support.show', $record->id) }}" class="text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
                                            <x-heroicon-o-eye class="w-4 h-4 inline" />
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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