@extends('laravelticket::layouts.master')

@section('page', trans('laravelticket::admin.category-index-title'))

@section('laravelticket_header')
    <a href="{{ route($setting->grab('admin_route').'.category.create') }}"
       class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md transition-colors">
        {{ trans('laravelticket::admin.btn-create-new-category') }}
    </a>
@stop

@section('laravelticket_content_parent_class', 'p-0')

@section('laravelticket_content')
    @if ($categories->isEmpty())
        <div class="p-6 text-center text-gray-500 dark:text-gray-400">
            {{ trans('laravelticket::admin.category-index-no-categories') }}
            <a href="{{ route($setting->grab('admin_route').'.category.create') }}" class="text-blue-600 dark:text-blue-400 underline ml-1">
                {{ trans('laravelticket::admin.category-index-create-new') }}
            </a>
        </div>
    @else
        <div id="message"></div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-400 dark:text-gray-400">
                <thead class="text-xs text-white uppercase bg-gray-700 dark:bg-gray-900">
                    <tr>
                        <th class="px-4 py-3">{{ trans('laravelticket::admin.table-id') }}</th>
                        <th class="px-4 py-3">{{ trans('laravelticket::admin.table-name') }}</th>
                        <th class="px-4 py-3">{{ trans('laravelticket::admin.table-action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                @foreach($categories as $category)
                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                        <td class="px-4 py-3">{{ $category->id }}</td>
                        <td class="px-4 py-3" style="color: {{ $category->color }}">{{ $category->name }}</td>
                        <td class="px-4 py-3">
                            <div class="flex items-center gap-2">
                                {{ html()->a(route($setting->grab('admin_route').'.category.edit', $category->id), trans('laravelticket::admin.btn-edit'))
                                    ->class('inline-flex items-center px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-medium rounded transition-colors') }}
                                {{ html()->a(route($setting->grab('admin_route').'.category.destroy', $category->id), trans('laravelticket::admin.btn-delete'))
                                    ->attributes([
                                        'class'   => 'inline-flex items-center px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-xs font-medium rounded transition-colors',
                                        'form'    => "delete-$category->id",
                                        'node'    => $category->name,
                                        'onclick' => "event.preventDefault(); if(confirm('" . addslashes(trans('laravelticket::admin.category-index-js-delete')) . " \' + this.getAttribute(\'node\') + \' ?')){ document.getElementById(this.getAttribute('form')).submit(); }",
                                    ]) }}
                                {!! html()->form('DELETE', route($setting->grab('admin_route').'.category.destroy', $category->id))->id("delete-$category->id")->open() !!}
                                {!! html()->closeModelForm() !!}
                            </div>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    @endif
@stop