@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/trainingcategories.page_title') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/trainingcategories.breadcrumb.trainings') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/trainingcategories.breadcrumb.categories') }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            @can('trainingcategories.create')
                            <a href="{{ route('admin.trainingcategories.create') }}" class="btn btn-info add-btn">
                                <i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/trainingcategories.actions.add_category') }}
                            </a>
                            @endcan
                        </div>
                        <div class="flex-shrink-0">
                            <div class="d-flex gap-1 flex-wrap">
                                <div class="flex-shrink-0">
                                    <div class="hstack text-nowrap gap-2">
                                        @can('trainingcategories.delete')
                                        <button class="btn btn-soft-danger material-shadow-none" id="remove-actions" onclick="deleteMultiple()" style="display: none;">
                                            <i class="ri-delete-bin-2-line"></i> {{ __('admin/trainingcategories.actions.delete_selection') }}
                                        </button>
                                        @endcan
                                    </div>
                                </div>
                                <!-- Filtres -->
                                <div class="dropdown">
                                    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                        <i class="ri-filter-line me-1"></i>{{ __('admin/trainingcategories.actions.filters') }}
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['status' => 'active']) }}">{{ __('admin/trainingcategories.filters.active') }}</a></li>
                                        <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['status' => 'inactive']) }}">{{ __('admin/trainingcategories.filters.inactive') }}</a></li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li><a class="dropdown-item" href="{{ route('admin.trainingcategories.index') }}">{{ __('admin/trainingcategories.filters.all') }}</a></li>
                                    </ul>
                                </div>

                                <!-- Recherche -->
                                <form method="GET" class="d-flex">
                                    <input type="hidden" name="status" value="{{ request('status') }}">
                                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                                    <input type="hidden" name="direction" value="{{ request('direction') }}">

                                    <div class="input-group">
                                        <input type="text" name="search" class="form-control" placeholder="{{ __('admin/trainingcategories.actions.search') }}" value="{{ request('search') }}">
                                        <button class="btn btn-outline-secondary" type="submit">
                                            <i class="ri-search-line"></i>
                                        </button>
                                    </div>
                                </form>
                                <div class="">
                                    <a href="{{ route('admin.trainingcategories.index') }}" class="btn btn-light w-100">
                                        <i class="ri-refresh-line me-1"></i> {{ __('admin/trainingcategories.actions.reset') }}
                                    </a>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/trainingcategories.categories_list') }}</h4>
                    <div class="flex-shrink-0">
                        <div class="d-flex gap-1">
                            <!-- Tri -->
                            <div class="dropdown">
                                <button class="btn btn-soft-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                    <i class="ri-sort-desc me-1"></i>{{ __('admin/trainingcategories.actions.sort') }}
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort' => 'order', 'direction' => 'asc']) }}">{{ __('admin/trainingcategories.sort.order_asc') }}</a></li>
                                    <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort' => 'order', 'direction' => 'desc']) }}">{{ __('admin/trainingcategories.sort.order_desc') }}</a></li>
                                    <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => 'desc']) }}">{{ __('admin/trainingcategories.sort.recent') }}</a></li>
                                    <li><a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => 'asc']) }}">{{ __('admin/trainingcategories.sort.oldest') }}</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    @can('trainingcategories.delete')
                                    <th scope="col">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="checkAll" value="option">
                                        </div>
                                    </th>
                                    @endcan
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.id') }}</th>
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.image') }}</th>
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.name') }}</th>
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.trainings') }}</th>
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.status') }}</th>
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.order') }}</th>
                                    <th scope="col">{{ __('admin/trainingcategories.table.headers.creation') }}</th>
                                    @canany(['trainingcategories.edit', 'trainingcategories.delete'])
                                    <th scope="col" class="text-end">{{ __('admin/trainingcategories.table.headers.actions') }}</th>
                                    @endcanany
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($categories as $category)
                                <tr>
                                    @can('trainingcategories.delete')
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="chk_child" value="{{ $category->id }}">
                                        </div>
                                    </td>
                                    @endcan
                                    <td>{{ $category->id }}</td>
                                    <td>
                                        @if($category->image)
                                        <div class="avatar-sm">
                                            <img src="{{ asset('storage/' . $category->image) }}" alt="{{ __('admin/trainingcategories.table.headers.image') }}" class="rounded-circle avatar-sm">
                                        </div>
                                        @else
                                        <div class="avatar-sm">
                                            <span class="avatar-title bg-light text-muted rounded-circle">
                                                <i class="ri-image-line"></i>
                                            </span>
                                        </div>
                                        @endif
                                    </td>
                                    <td>
                                        <h6 class="mb-1">{{ $category->name }}</h6>
                                        <small class="text-muted">{{ __('admin/trainingcategories.table.slug_label') }} : <span class="badge bg-info-subtle text-info">{{ $category->slug }}</span></small>
                                    </td>
                                    <td>
                                        <span class="badge bg-primary-subtle text-primary">{{ __('admin/trainingcategories.table.trainings_count', ['count' => $category->trainings_count ?? $category->trainings()->count()]) }}</span>
                                    </td>
                                    <td>
                                        @if($category->is_active)
                                        <span class="badge bg-success-subtle text-success">{{ __('admin/trainingcategories.table.status.active') }}</span>
                                        @else
                                        <span class="badge bg-danger-subtle text-danger">{{ __('admin/trainingcategories.table.status.inactive') }}</span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-primary-subtle text-primary">{{ $category->order }}</span>
                                    </td>
                                    <td>
                                        {{ $category->created_at->format(__('admin/trainingcategories.date_format.short')) }}
                                    </td>
                                    @canany(['trainingcategories.edit', 'trainingcategories.delete'])
                                    <td class="text-end">
                                        <div class="gap-1 d-flex justify-content-md-end">
                                            @can('trainingcategories.edit')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/trainingcategories.tooltips.edit') }}">
                                                <a class="btn btn-icon bg-primary-subtle text-primary" href="{{ route('admin.trainingcategories.edit', $category->id) }}">
                                                    <i class="ri-pencil-line"></i>
                                                </a>
                                            </span>
                                            @endcan
                                            @can('trainingcategories.delete')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/trainingcategories.tooltips.delete') }}">
                                                <button class="open-delete-modal btn btn-icon bg-danger-subtle text-danger"
                                                    data-bs-toggle="modal"
                                                    href="#deleteRecordModal"
                                                    data-delete-url="{{ route('admin.trainingcategories.destroy', $category->id) }}"
                                                    data-item-name="{{ $category->name }}"
                                                    data-item-type="{{ __('admin/trainingcategories.delete_modal.item_type') }}"
                                                    id="delete-record-{{ $category->id }}">
                                                    <i class="ri-delete-bin-line align-bottom"></i>
                                                </button>
                                            </span>
                                            @endcan
                                        </div>
                                    </td>
                                    @endcanany
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="ri-folder-2-line fs-24 mb-2 d-block"></i>
                                            <p class="mb-0">{{ __('admin/trainingcategories.table.empty') }}</p>
                                            @if(request('search') || request('status'))
                                            <a href="{{ route('admin.trainingcategories.index') }}" class="btn btn-sm btn-link">{{ __('admin/trainingcategories.table.clear_filters') }}</a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Actions groupées -->
                    <!-- @if($categories->count() > 0) -->
                    <!-- <div class="row align-items-center mt-3" id="selection-element" style="display: none;">
                        <div class="col-sm">
                            <div class="text-muted">
                                {{ __('admin/trainingcategories.selection.selected') }} <span id="select-content">0</span> {{ __('admin/trainingcategories.selection.on') }} {{ $categories->total() }}
                            </div>
                        </div>

                    </div> -->
                    <!-- @endif -->
                </div>

                @if($categories->hasPages())
                <div class="card-footer">
                    <div class="d-flex justify-content-center mt-4">
                        {!! $categories->withQueryString()->links('pagination::bootstrap-5') !!}
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/trainingcategories.delete_modal.item_type') }}"
    confirm-text="{{ __('admin/trainingcategories.delete_modal.confirm_text') }}"
    delete-text="{{ __('admin/trainingcategories.delete_modal.delete_text') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages />
@endsection

@push('script')
<script>
    $(document).ready(function() {
        // Initialiser la gestion des checkboxes
        ischeckboxcheck();

        // Gestion de la sélection globale
        $('#checkAll').on('click', function() {
            var isChecked = this.checked;
            $('input[name="chk_child"]').each(function() {
                this.checked = isChecked;

                // Ajouter/supprimer la classe table-active
                if (isChecked) {
                    $(this).closest("tr").addClass("table-active");
                } else {
                    $(this).closest("tr").removeClass("table-active");
                }
            });

            // Mettre à jour l'affichage du bouton de suppression
            updateRemoveButton();
        });

        // Soumission automatique du formulaire lors du changement de "par page"
        $('select[name="per_page"]').on('change', function() {
            $(this).closest('form').submit();
        });
    });

    // Fonction pour gérer les checkboxes individuelles
    function ischeckboxcheck() {
        Array.from(document.getElementsByName("chk_child")).forEach(function(checkbox) {
            checkbox.addEventListener("change", function(e) {
                if (checkbox.checked) {
                    e.target.closest("tr").classList.add("table-active");
                } else {
                    e.target.closest("tr").classList.remove("table-active");
                }

                // Mettre à jour l'état du checkbox "Tout sélectionner"
                updateCheckAllState();

                // Mettre à jour l'affichage du bouton de suppression
                updateRemoveButton();
            });
        });
    }

    // Mettre à jour l'état du checkbox "Tout sélectionner"
    function updateCheckAllState() {
        var totalCheckboxes = document.querySelectorAll('input[name="chk_child"]').length;
        var checkedCheckboxes = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var checkAllBox = document.getElementById('checkAll');

        if (checkAllBox) {
            checkAllBox.checked = totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0;
            checkAllBox.indeterminate = checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes;
        }
    }

    // Mettre à jour l'affichage du bouton de suppression
    function updateRemoveButton() {
        var checkedCount = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var removeButton = document.getElementById('remove-actions');

        if (removeButton) {
            removeButton.style.display = checkedCount > 0 ? "block" : "none";
        }
    }

    // Réinitialiser la modal quand elle se ferme
    $('#deleteRecordModal').on('hidden.bs.modal', function() {
        var modal = $(this);

        // Supprimer les champs de suppression multiple
        modal.find('form').find('input[name="ids[]"]').remove();

        // Réinitialiser les textes par défaut
        modal.find('.modal-body p').text('{{ __("admin/trainingcategories.delete_modal.confirm_text") }}');
        modal.find('#item-name-text-deleteRecordModal').text('');
        modal.find('#item-type-text-deleteRecordModal').text('');
    });

    // Fonction de suppression multiple
    function deleteMultiple() {
        var selectedIds = [];

        document.querySelectorAll('input[name="chk_child"]:checked').forEach(function(checkbox) {
            selectedIds.push(checkbox.value);
        });

        if (selectedIds.length === 0) {
            showInfoToast('{{ __("admin/trainingcategories.selection.select_at_least_one") }}');
            return;
        }

        // Utiliser la modal pour la suppression multiple
        var modal = $('#deleteRecordModal');

        if (modal.length) {
            // Personnaliser le contenu de la modal pour la suppression multiple
            var itemText = '{{ __("admin/trainingcategories.delete_modal.multiple_items") }}' + selectedIds.length;
            var confirmText = '{{ __("admin/trainingcategories.delete_modal.multiple_confirm") }}' + selectedIds.length;

            modal.find('#item-type-text-deleteRecordModal').text(itemText);
            modal.find('.modal-body p').text(confirmText);

            // Modifier l'action du formulaire pour la suppression multiple
            modal.find('form').attr('action', '{{ route("admin.trainingcategories.destroy-multiple") }}');
            modal.find('form').attr('method', 'POST');

            // Ajouter les IDs en tant que champs cachés
            modal.find('form').find('input[name="ids[]"]').remove(); // Supprimer les anciens
            selectedIds.forEach(function(id) {
                var input = $('<input>').attr({
                    type: 'hidden',
                    name: 'ids[]',
                    value: id
                });
                modal.find('form').append(input);
            });

            // Afficher la modal
            modal.modal('show');
        }
    }    
</script>
@endpush