@extends('layouts.app')

@section('title', 'Modèles - Print Manager')

@section('content')
        <div class="card">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h1 class="mb-0">Liste des Modèles <span class="badge bg-light text-dark ms-2">{{ $modeles->count() }}</span></h1>
                <a href="{{ route('modeles.create') }}" class="btn btn-light">
                    <i class="fas fa-plus me-2"></i>Ajouter un Modèle
                </a>
            </div>
            <div class="card-body">
                @include('partials.session-alerts')

                <form method="GET" class="row g-3 mb-3" id="filter-form">
                    <div class="col-md-2">
                        <label class="form-label">Marques</label>
                        <div class="filter-checkbox-group" id="filter-marque">
                            @foreach($marques as $marque)
                                <div class="form-check">
                                    <input class="form-check-input filter-marque-cb" type="checkbox"
                                        name="marque_id[]" value="{{ $marque->id }}"
                                        id="mq_{{ $marque->id }}"
                                        {{ in_array($marque->id, (array) request('marque_id', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label small" for="mq_{{ $marque->id }}">{{ $marque->nom }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-2 d-flex flex-column gap-1">
                        <label class="form-label invisible">&nbsp;</label>
                        <div class="d-flex gap-1">
                            <button type="submit" class="btn btn-primary flex-fill"><i class="fas fa-search me-1"></i> Filtrer</button>
                            <a href="{{ route('modeles.index') }}" class="btn btn-outline-secondary flex-fill">Reset</a>
                        </div>
                    </div>
                </form>

                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Marque</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($modeles as $modele)
                        <tr>
                            <td>{{ $modele->nom }}</td>
                            <td>{{ $modele->marque->nom ?? 'N/A' }}</td>
                            <td>
                                @if($modele->statut)
                                    <span class="d-none">Actif</span>
                                    <form action="{{ route('modeles.toggle-status', $modele) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="sort" value="{{ request('sort') }}">
                                        <input type="hidden" name="dir" value="{{ request('dir') }}">
                                        @foreach((array) request('marque_id', []) as $mid)
                                        <input type="hidden" name="marque_id[]" value="{{ $mid }}">
                                        @endforeach
                                    <button type="submit" class="btn btn-sm btn-action"
                                                title="Désactiver"
                                                style="background-color: #ffc107; border-color: #ffc107; color: white;">
                                            <i class="fas fa-ban"></i>
                                    </button>
                                </form>
                                @else
                                    <span class="d-none">Inactif</span>
                                    <form action="{{ route('modeles.toggle-status', $modele) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="sort" value="{{ request('sort') }}">
                                        <input type="hidden" name="dir" value="{{ request('dir') }}">
                                        @foreach((array) request('marque_id', []) as $mid)
                                        <input type="hidden" name="marque_id[]" value="{{ $mid }}">
                                        @endforeach
                                        <button type="submit" class="btn btn-sm btn-action"
                                                title="Réactiver"
                                                style="background-color: #28a745; border-color: #28a745; color: white;">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </form>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('modeles.show', array_merge([$modele], request()->only(['sort', 'dir', 'marque_id']))) }}" class="btn btn-sm btn-action" title="Voir" style="background-color: #9c27b0; border-color: #9c27b0; color: white;">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <a href="{{ route('modeles.edit', array_merge([$modele], request()->only(['sort', 'dir', 'marque_id']))) }}" class="btn btn-sm btn-action" title="Modifier" style="background-color: #ff9800; border-color: #ff9800; color: white;">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('modeles.destroy', $modele) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                                    <input type="hidden" name="dir" value="{{ request('dir') }}">
                                    @foreach((array) request('marque_id', []) as $mid)
                                    <input type="hidden" name="marque_id[]" value="{{ $mid }}">
                                    @endforeach
                                    <button type="submit" class="btn btn-sm btn-action btn-delete"
                                            title="Supprimer"
                                            style="background-color: #f44336; border-color: #f44336; color: white;">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
            @endforeach
        </tbody>
    </table>
        </div>
    </div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    initCheckboxFilters('filter-form', 'filter-marque', null);
    // No modele group here, so initCheckboxFilters only handles form submit

    const table = document.querySelector('.table');
    if (!table) return;
    const thead = table.querySelector('thead');
    const tbody = table.querySelector('tbody');
    const headers = thead.querySelectorAll('th');
    const urlParams = new URLSearchParams(window.location.search);
    const sortIndex = urlParams.get('sort');
    const sortDir = urlParams.get('dir');

    function sortRows(index, asc) {
        headers.forEach(h => { h.classList.remove('sort-asc', 'sort-desc'); h.style.backgroundColor = ''; h.innerHTML = h.innerHTML.replace(' (A-Z)', '').replace(' (Z-A)', ''); });
        const header = headers[index];
        header.classList.add(asc ? 'sort-asc' : 'sort-desc');
        header.style.backgroundColor = 'rgba(255,255,255,0.15)';
        header.innerHTML += asc ? ' (A-Z)' : ' (Z-A)';

        const rows = Array.from(tbody.querySelectorAll('tr'));
        rows.sort(function(a, b) {
            const aText = a.children[index].textContent.trim().toLowerCase();
            const bText = b.children[index].textContent.trim().toLowerCase();
            return asc ? aText.localeCompare(bText, 'fr', { numeric: true }) : bText.localeCompare(aText, 'fr', { numeric: true });
        });
        rows.forEach(row => tbody.appendChild(row));
    }

    function updateActionLinks() {
        const params = new URLSearchParams(window.location.search);
        const sort = params.get('sort') || '';
        const dir = params.get('dir') || '';
        const query = window.location.search;
        document.querySelectorAll('a[href*="/modeles/"]').forEach(function(link) {
            if (link.href.includes('/edit') || link.href.includes('/show')) {
                const base = link.href.split('?')[0];
                link.href = base + query;
            }
        });
        document.querySelectorAll('input[name="sort"]').forEach(function(inp) { inp.value = sort; });
        document.querySelectorAll('input[name="dir"]').forEach(function(inp) { inp.value = dir; });
    }

    headers.forEach(function(header, index) {
        if (index > 2) return;
        header.style.cursor = 'pointer';
        header.addEventListener('click', function() {
            const asc = !this.classList.contains('sort-asc');
            const url = new URL(window.location);
            url.searchParams.set('sort', index);
            url.searchParams.set('dir', asc ? 'asc' : 'desc');
            window.history.replaceState({}, '', url);
            sortRows(index, asc);
            updateActionLinks();
        });
    });

    if (sortIndex !== null && headers[sortIndex]) {
        sortRows(parseInt(sortIndex), sortDir !== 'desc');
    }
    updateActionLinks();
});
</script>
@endpush
@endsection