@extends('layouts.user')

@section('title', __('expenses_categories.page_title'))
@section('page_title', __('expenses_categories.page_title'))
@section('breadcrumb', __('expenses_categories.breadcrumb'))

@section('content')
@php
    $totalCategories = $categories->total();
    $currentPageCount = $categories->count();
    $search = trim((string) request('search'));
@endphp

<div class="w-full px-1 sm:px-2 lg:px-3 space-y-3">

    {{-- Header --}}
    <div class="border border-slate-300 bg-white shadow-sm">
        <div class="flex flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between">
            <div>
                <p class="text-[10px] font-semibold uppercase tracking-[0.16em] text-slate-500">
                    {{ __('expenses_categories.header.kicker') }}
                </p>
                <h2 class="mt-1 text-sm font-bold text-slate-900">
                    {{ __('expenses_categories.header.title') }}
                </h2>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('user.expenses.index') }}"
                   class="inline-flex items-center justify-center border border-slate-300 bg-white px-3 py-1.5 text-[11px] font-medium text-slate-700 transition hover:bg-slate-50">
                    {{ __('expenses_categories.header.back_to_expenses') }}
                </a>

                <a href="{{ route('user.expense_categories.create') }}"
                   class="inline-flex items-center justify-center border border-slate-900 bg-slate-900 px-3 py-1.5 text-[11px] font-semibold text-white transition hover:bg-slate-800">
                    {{ __('expenses_categories.header.add_category') }}
                </a>
            </div>
        </div>
    </div>

    {{-- Stats --}}
    <div class="grid gap-2 md:grid-cols-3">
        <div class="border border-slate-300 bg-white px-3 py-2.5 shadow-sm">
            <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400">
                {{ __('expenses_categories.stats.total_categories') }}
            </p>
            <h3 class="mt-1 text-base font-bold text-slate-900">{{ $totalCategories }}</h3>
            <p class="mt-0.5 text-[10px] text-slate-500">
                {{ __('expenses_categories.stats.total_categories_hint') }}
            </p>
        </div>

        <div class="border border-slate-300 bg-white px-3 py-2.5 shadow-sm">
            <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400">
                {{ __('expenses_categories.stats.this_page') }}
            </p>
            <h3 class="mt-1 text-base font-bold text-slate-900">{{ $currentPageCount }}</h3>
            <p class="mt-0.5 text-[10px] text-slate-500">
                {{ __('expenses_categories.stats.this_page_hint') }}
            </p>
        </div>

        <div class="border border-slate-300 bg-white px-3 py-2.5 shadow-sm">
            <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-400">
                {{ __('expenses_categories.stats.search_status') }}
            </p>
            <h3 class="mt-1 text-sm font-bold text-slate-900">
                {{ filled($search) ? __('expenses_categories.stats.filtered') : __('expenses_categories.stats.all_records') }}
            </h3>
            <p class="mt-0.5 text-[10px] text-slate-500">
                {{ filled($search)
                    ? __('expenses_categories.stats.search_term', ['search' => $search])
                    : __('expenses_categories.stats.showing_every_category') }}
            </p>
        </div>
    </div>

    {{-- Search Bar --}}
    <div class="border border-slate-300 bg-white px-4 py-3 shadow-sm">
        <form method="GET"
              action="{{ route('user.expense_categories.index') }}"
              class="grid gap-2 md:grid-cols-[1fr_auto_auto] md:items-end">
            <div>
                <label class="mb-1 block text-[11px] font-semibold text-slate-700">
                    {{ __('expenses_categories.search.label') }}
                </label>
                <input type="text"
                       name="search"
                       value="{{ request('search') }}"
                       placeholder="{{ __('expenses_categories.search.placeholder') }}"
                       class="w-full border border-slate-300 bg-white px-3 py-2 text-xs text-slate-800 outline-none transition focus:border-slate-900">
            </div>

            <button type="submit"
                    class="inline-flex items-center justify-center border border-slate-900 bg-slate-900 px-4 py-2 text-xs font-semibold text-white transition hover:bg-slate-800">
                {{ __('expenses_categories.search.submit') }}
            </button>

            <a href="{{ route('user.expense_categories.index') }}"
               class="inline-flex items-center justify-center border border-slate-300 bg-white px-4 py-2 text-xs font-medium text-slate-700 transition hover:bg-slate-50">
                {{ __('expenses_categories.search.reset') }}
            </a>
        </form>
    </div>

    {{-- Table --}}
    <div class="border border-slate-300 bg-white shadow-sm overflow-hidden">
        <div class="flex items-center justify-between border-b border-slate-300 px-4 py-3">
            <div>
                <h2 class="text-sm font-bold text-slate-900">
                    {{ __('expenses_categories.table.title') }}
                </h2>
            </div>

            <a href="{{ route('user.expense_categories.create') }}"
               class="inline-flex items-center justify-center border border-slate-900 bg-slate-900 px-3 py-1.5 text-[11px] font-semibold text-white transition hover:bg-slate-800">
                {{ __('expenses_categories.table.add_new') }}
            </a>
        </div>

        @if($categories->count())
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-200 text-xs">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-[10px] font-bold uppercase tracking-[0.14em] text-slate-500">
                                {{ __('expenses_categories.table.columns.sl') }}
                            </th>
                            <th class="px-4 py-3 text-left text-[10px] font-bold uppercase tracking-[0.14em] text-slate-500">
                                {{ __('expenses_categories.table.columns.category_name') }}
                            </th>
                            <th class="px-4 py-3 text-left text-[10px] font-bold uppercase tracking-[0.14em] text-slate-500">
                                {{ __('expenses_categories.table.columns.expenses') }}
                            </th>
                            <th class="px-4 py-3 text-left text-[10px] font-bold uppercase tracking-[0.14em] text-slate-500">
                                {{ __('expenses_categories.table.columns.created') }}
                            </th>
                            <th class="px-4 py-3 text-right text-[10px] font-bold uppercase tracking-[0.14em] text-slate-500">
                                {{ __('expenses_categories.table.columns.actions') }}
                            </th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-slate-100 bg-white">
                        @foreach($categories as $index => $category)
                            <tr class="transition hover:bg-slate-50">
                                <td class="px-4 py-3 text-xs font-semibold text-slate-600">
                                    {{ $categories->firstItem() + $index }}
                                </td>

                                <td class="px-4 py-3">
                                    <div class="font-semibold text-slate-900">{{ $category->name }}</div>
                                    <div class="mt-0.5 text-[10px] text-slate-500">
                                        {{ __('expenses_categories.table.expense_category_label') }}
                                    </div>
                                </td>

                                <td class="px-4 py-3">
                                    <span class="inline-flex items-center border border-slate-300 bg-slate-50 px-2.5 py-1 text-[10px] font-semibold text-slate-700">
                                        {{ trans_choice('expenses_categories.table.expense_count', $category->expenses_count, ['count' => $category->expenses_count]) }}
                                    </span>
                                </td>

                                <td class="px-4 py-3 text-[11px] text-slate-600">
                                    {{ $category->created_at?->locale(app()->getLocale())->translatedFormat('d M Y, h:i A') }}
                                </td>

                                <td class="px-4 py-3">
                                    <div class="flex justify-end gap-2">
                                        <a href="{{ route('user.expense_categories.edit', $category->id) }}"
                                           class="inline-flex items-center justify-center border border-amber-300 bg-amber-50 px-3 py-1.5 text-[11px] font-semibold text-amber-700 transition hover:bg-amber-100">
                                            {{ __('expenses_categories.actions.edit') }}
                                        </a>

                                        <form action="{{ route('user.expense_categories.destroy', $category->id) }}"
                                              method="POST"
                                              class="js-delete"
                                              data-swal-title="{{ __('expenses_categories.swal.delete_title') }}"
                                              data-swal-text="{{ __('expenses_categories.swal.delete_text') }}"
                                              data-swal-confirm="{{ __('expenses_categories.swal.confirm') }}"
                                              data-swal-cancel="{{ __('expenses_categories.swal.cancel') }}">
                                            @csrf
                                            @method('DELETE')

                                            <button type="submit"
                                                    class="inline-flex items-center justify-center border border-rose-300 bg-rose-50 px-3 py-1.5 text-[11px] font-semibold text-rose-700 transition hover:bg-rose-100">
                                                {{ __('expenses_categories.actions.delete') }}
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-slate-300 px-4 py-3">
                {{ $categories->links() }}
            </div>
        @else
            <div class="px-6 py-12 text-center">
                <div class="mx-auto flex h-14 w-14 items-center justify-center border border-slate-300 bg-slate-50 text-xl">
                    📂
                </div>

                <h3 class="mt-4 text-sm font-bold text-slate-900">
                    {{ __('expenses_categories.empty.title') }}
                </h3>

                <p class="mx-auto mt-2 max-w-md text-xs text-slate-500">
                    {{ filled(request('search'))
                        ? __('expenses_categories.empty.search_subtitle')
                        : __('expenses_categories.empty.default_subtitle') }}
                </p>

                <div class="mt-5 flex flex-wrap items-center justify-center gap-2">
                    @if(filled(request('search')))
                        <a href="{{ route('user.expense_categories.index') }}"
                           class="inline-flex items-center justify-center border border-slate-300 bg-white px-4 py-2 text-xs font-medium text-slate-700 transition hover:bg-slate-50">
                            {{ __('expenses_categories.empty.clear_search') }}
                        </a>
                    @endif

                    <a href="{{ route('user.expense_categories.create') }}"
                       class="inline-flex items-center justify-center border border-slate-900 bg-slate-900 px-4 py-2 text-xs font-semibold text-white transition hover:bg-slate-800">
                        {{ __('expenses_categories.empty.add_category') }}
                    </a>
                </div>
            </div>
        @endif
    </div>
</div>

@if(!empty($categories) && method_exists($categories, 'count') && $categories->count())
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof Swal === 'undefined') return;

    document.querySelectorAll('.js-delete').forEach(function (form) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            Swal.fire({
                title: form.dataset.swalTitle,
                text: form.dataset.swalText,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: form.dataset.swalConfirm,
                cancelButtonText: form.dataset.swalCancel,
                reverseButtons: true,
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    });
});
</script>
@endif
@endsection