@extends('master', ['title' => __('dashboard.categories')])

@section('content')
    <div class="container">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4 class="mb-0">{{ __('dashboard.all_categories') }}</h4>
                <a href="{{ route('categories.create') }}" class="btn btn-primary"> <i data-feather="plus"></i>
                    {{ __('dashboard.add_category') }}</a>
            </div>
            <div class="card-body">
                <table id="categories-table" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="text-center">{{ __('dashboard.id') }}</th>
                            <th class="text-center">{{ __('dashboard.image') }}</th>
                            <th class="text-center">{{ __('dashboard.name') }}</th>
                            <th class="text-center">{{ __('dashboard.background_color') }}</th>
                            <!-- <th class="text-center">{{ __('dashboard.status') }}</th> -->
                            <th class="text-center">{{ __('dashboard.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($categories as $category)
                            <tr>
                                <td class="text-center">{{ $loop->iteration }}</td>
                                <td class="text-center">
                                    @if ($category->image)
                                        <img src="{{ getPath('categories', $category->id, $category->image->path) }}" width="100"
                                            class="rounded">
                                    @else
                                        <span>-</span>
                                    @endif
                                </td>
                                <td class="text-center">{{ $category->getTranslation('name', app()->getLocale()) }}</td>
                                <td class="text-center">
                                    <div class="d-inline-block rounded border"
                                        style="width: 25px; height: 25px; background-color: {{ $category->background_color }};">
                                    </div>
                                    <div class="small text-muted">{{ $category->background_color }}</div>
                                </td>
                                <!-- <td class="text-center d-flex justify-content-center align-items-center">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input toggle-status" type="checkbox"
                                            data-id="{{ $category->id }}" {{ $category->is_active ? 'checked' : '' }}>
                                    </div>
                                </td> -->
                                <td class="text-center">
                                    <a href="{{ route('categories.edit', $category->id) }}" class="btn btn-warning btn-sm"
                                        title="{{ __('dashboard.edit_category') }}">
                                        <i class="fas fa-edit"></i>
                                    </a>

                                    <form id="delete-form-{{ $category->id }}"
                                        action="{{ route('categories.destroy', $category->id) }}" method="POST"
                                        style="display:inline-block;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-danger btn-sm" id="confirm-delete-text"
                                            data-form-id="delete-form-{{ $category->id }}" title="{{ __('dashboard.delete') }}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center fw-bold text-muted">
                                    {{ __('dashboard.no_categories') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>

                <div class="mt-2">
                    {{ $categories->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    @if ($categories->count())
        <script>
            $(document).ready(function () {
                $('#categories-table').DataTable({
                    "paging": false,
                    "info": false,
                    language: {
                        search: "{{ __('dashboard.search') }}",
                    }
                });

                $('.toggle-status').change(function () {
                    let id = $(this).data('id');
                    let isChecked = $(this).is(':checked') ? 1 : 0;

                    $.ajax({
                        url: "{{ url('/admin/categories') }}/" + id + "/toggle-status",
                        type: 'PATCH',
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function (data) {
                            Swal.fire({
                                title: "{{ __('dashboard.success') }}",
                                text: data.message,
                                icon: "success",
                                timer: 2000,
                                showConfirmButton: false
                            });
                        },
                        error: function () {
                            Swal.fire("{{ __('dashboard.error') }}",
                                "{{ __('dashboard.error_occurred') }}", "error");
                        }
                    });
                    l(function () {
                        Swal.fire("{{ __('dashboard.error') }}",
                            "{{ __('dashboard.error_occurred') }}", "error");
                    });
                });
            });
        </script>
    @endif
@endpush