@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/trainings.page_title') }}</h4>

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

        <!-- Menu bar -->
        @canany(['trainings.create', 'trainings.delete'])
        <div class="col-lg-12 sticky-menu-bar">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            @can('trainings.create')
                            <a href="{{ route('admin.trainings.create') }}" class="btn btn-info add-btn">
                                <i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/trainings.actions.add_training') }}
                            </a>
                            @endcan
                        </div>
                        <div class="flex-shrink-0">
                            <div class="hstack text-nowrap gap-2">
                                @can('trainings.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/trainings.actions.selection_delete') }}
                                </button>
                                @endcan
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endcanany

        <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/trainings.trainings_list') }}</h4>
                </div>

                <!-- Barre de recherche et filtres -->
                <div class="card-body border-bottom">
                    <form method="GET" action="{{ route('admin.trainings.index') }}" class="row g-3">
                        <div class="col-md-3">
                            <div class="position-relative">
                                <input type="text" name="search" class="form-control search" id="searchInput" placeholder="{{ __('admin/trainings.filters.search_placeholder') }}" value="{{ request('search') }}" autocomplete="off">
                                <span class="position-absolute top-50 end-0 translate-middle-y pe-3">
                                    <i class="ri-search-line text-muted"></i>
                                </span>
                            </div>
                            <!-- <div class="search-box">
                                <input type="text" name="search" class="form-control search"
                                    placeholder="{{ __('admin/trainings.filters.search_placeholder') }}"
                                    value="{{ request('search') }}">
                                <i class="ri-search-line search-icon"></i>
                            </div> -->
                        </div>
                        <div class="col-md-2">
                            <select name="status" class="form-select">
                                <option value="">{{ __('admin/trainings.filters.all_statuses') }}</option>
                                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>{{ __('admin/trainings.table.status.active') }}</option>
                                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>{{ __('admin/trainings.table.status.inactive') }}</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="category" class="form-select">
                                <option value="">{{ __('admin/trainings.filters.all_categories') }}</option>
                                @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ request('category') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name ?? $category->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="location" class="form-select">
                                <option value="">{{ __('admin/trainings.filters.all_locations') }}</option>
                                @foreach($trainingLocations as $location)
                                <option value="{{ $location->id }}" {{ request('location') == $location->id ? 'selected' : '' }}>
                                    {{ $location->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-1">
                            <select name="per_page" class="form-select">
                                <option value="15" {{ $perPage == '15' ? 'selected' : '' }}>15</option>
                                <option value="25" {{ $perPage == '25' ? 'selected' : '' }}>25</option>
                                <option value="50" {{ $perPage == '50' ? 'selected' : '' }}>50</option>
                                <option value="100" {{ $perPage == '100' ? 'selected' : '' }}>100</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="ri-equalizer-fill me-1"></i> {{ __('admin/trainings.actions.filter') }}
                            </button>
                        </div>
                        <div class="col-md-1">
                            <a href="{{ route('admin.trainings.index') }}" class="btn btn-light w-100">
                                <i class="ri-refresh-line me-1"></i> {{ __('admin/trainings.actions.reset') }}
                            </a>
                        </div>
                    </form>
                </div>

                <div class="card-body">
                    <!-- Informations sur les résultats -->
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="text-muted">
                            {{ __('admin/trainings.table.results_info', [
                                'first' => $trainings->firstItem() ?? 0,
                                'last' => $trainings->lastItem() ?? 0,
                                'total' => $trainings->total()
                            ]) }}
                            @if(request('search'))
                            {{ __('admin/trainings.table.results_search', ['search' => request('search')]) }}
                            @endif
                        </div>
                        @if($trainings->hasPages())
                        <div class="text-muted">
                            {{ __('admin/trainings.table.page_info', [
                                'current' => $trainings->currentPage(),
                                'last' => $trainings->lastPage()
                            ]) }}
                        </div>
                        @endif
                    </div>

                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap table-hover mb-0 mt-3">
                            <thead class="table-light">
                                <tr>
                                    @can('trainings.delete')
                                    <th scope="col" style="width: 50px;">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                        </div>
                                    </th>
                                    @endcan
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'id', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/trainings.table.headers.id') }}
                                            @if(request('sort') == 'id')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    {{-- <th scope="col">{{ __('admin/trainings.table.headers.image') }}</th> --}}
                                    <th scope="col">{{ __('admin/trainings.table.headers.training') }}</th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'price', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/trainings.table.headers.price') }}
                                            @if(request('sort') == 'price')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">{{ __('admin/trainings.table.headers.location') }}</th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'nb_seminars', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/trainings.table.headers.seminars') }}
                                            @if(request('sort') == 'nb_seminars')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'order', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/trainings.table.headers.order') }}
                                            @if(request('sort') == 'order')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/trainings.table.headers.creation') }}
                                            @if(request('sort') == 'created_at')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">{{ __('admin/trainings.table.headers.status') }}</th>
                                    <th scope="col" class="text-center">Nb {{ __('admin/trainings.table.headers.image') }}</th>
                                    <th scope="col" class="text-end">{{ __('admin/trainings.table.headers.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($trainings as $training)
                                <tr>
                                    @can('trainings.delete')
                                    <th scope="row">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" name="chk_child" value="{{ $training->id }}">
                                        </div>
                                    </th>
                                    @endcan
                                    <td><span class="fw-medium">{{ $training->id }}</span></td>
                                    {{-- <td>
                                        @if($training->image)
                                        <img src="{{ Storage::url($training->image) }}" alt="no pic" class="rounded-circle avatar-sm">
                                    @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>
                                        <div class="d-flex align-items-center">
                                            <div class="workshop-title">
                                                <h6 class="mb-0">{{ Str::limit($training->title, 40) }}</h6>
                                                @if($training->ufc)
                                                <p class="mb-0"><small class="text-info">UFC: {{ $training->ufc }}</small></p>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <strong>{{ $training->formatted_price }}</strong>
                                        </div>
                                        <small class="text-muted">{{ __('admin/trainings.table.student_price_short', ['price' => $training->formatted_student_price]) }}</small>
                                    </td>
                                    <td>
                                        @if($training->location)
                                        <span class="badge bg-secondary-subtle text-secondary">{{ $training->location->name }}</span>
                                        @else
                                        <span class="text-muted">{{ __('admin/trainings.table.price_not_defined') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-info-subtle text-info">{{ $training->futureSessions->count() }}</span>
                                        @if($training->nb_cheques > 0)
                                        <div><small class="text-muted">{{ __('admin/trainings.table.cheques_count', ['count' => $training->nb_cheques]) }}</small></div>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-primary-subtle text-primary">{{ $training->order }}</span>
                                    </td>
                                    <td>{{ $training->created_at->format(__('admin/trainings.date_format.date_only')) }}</td>
                                    <td>
                                        @if($training->is_active)
                                        <span class="badge bg-success-subtle text-success">{{ __('admin/trainings.table.status.active') }}</span>
                                        @else
                                        <span class="badge bg-danger-subtle text-danger">{{ __('admin/trainings.table.status.inactive') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-secondary-subtle text-secondary fs-7">
                                            {{ ($training->image ? 1 : 0) + $training->images_count }}
                                        </span>
                                    </td>
                                    <td class="text-end">
                                        <div class="gap-1 d-flex justify-content-md-end">
                                            @can('trainings.view')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/trainings.tooltips.view') }}">
                                                <a class="btn btn-icon bg-info-subtle text-info" href="{{ route('admin.trainings.show', $training->id) }}">
                                                    <i class="ri-eye-line"></i>
                                                </a>
                                            </span>
                                            @endcan
                                            @can('trainings.edit')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/trainings.tooltips.edit') }}">
                                                <a class="btn btn-icon bg-primary-subtle text-primary" href="{{ route('admin.trainings.edit', $training->id) }}">
                                                    <i class="ri-pencil-line"></i>
                                                </a>
                                            </span>
                                            @endcan
                                            @can('trainings.delete')
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/trainings.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.trainings.destroy', $training->id) }}"
                                                    data-item-name="{{ $training->translate(app()->getLocale())->title ?? $training->translate()->title }}"
                                                    data-item-type="{{ __('admin/trainings.delete_modal.item_type') }}"
                                                    id="delete-record-{{ $training->id }}">
                                                    <i class="ri-delete-bin-line align-bottom"></i>
                                                </button>
                                            </span>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="20" class="text-center py-4">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="ri-search-line fs-1 text-muted mb-3"></i>
                                            <h5 class="text-muted">{{ __('admin/trainings.table.empty') }}</h5>
                                            @if(request('search') || request('status') || request('category') || request('location'))
                                            <p class="text-muted mb-3">{{ __('admin/trainings.table.no_results_search') }}</p>
                                            <a href="{{ route('admin.trainings.index') }}" class="btn btn-primary">
                                                <i class="ri-refresh-line me-1"></i> {{ __('admin/trainings.actions.reset') }}
                                            </a>
                                            @else
                                            <p class="text-muted mb-3">{{ __('admin/trainings.table.no_results_help') }}</p>
                                            <a href="{{ route('admin.trainings.create') }}" class="btn btn-primary">
                                                <i class="ri-add-line me-1"></i> {{ __('admin/trainings.actions.add_training') }}
                                            </a>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

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

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/trainings.delete_modal.item_type') }}"
    confirm-text="{{ __('admin/trainings.delete_modal.confirm_text') }}"
    delete-text="{{ __('admin/trainings.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 / trainings.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) {
            if (typeof showInfoToast === 'function') {
                showInfoToast('{{ __('
                    admin / trainings.messages.no_selection ') }}');
            } else {
                alert('{{ __('
                    admin / trainings.messages.no_selection ') }}');
            }
            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 = selectedIds.length + ' formation(s)';
            var confirmText = '{{ __('
            admin / trainings.delete_modal.confirm_text ') }} ' + selectedIds.length + ' formation(s)';

            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.trainings.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