@extends('layouts.app')

@section('title', 'Marques - Print Manager')

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

                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Description</th>
                            <th>Statut</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($marques as $marque)
                        <tr>
                            <td>{{ $marque->nom }}</td>
                            <td>{{ $marque->description ?? '-' }}</td>
                            <td>
                                @if($marque->statut)
                                    <span class="d-none">Actif</span>
                                    <form action="{{ route('marques.toggle-status', $marque) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="sort" value="{{ request('sort') }}">
                                        <input type="hidden" name="dir" value="{{ request('dir') }}">
                                    <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('marques.toggle-status', $marque) }}" method="POST" class="d-inline">
                                        @csrf
                                        <input type="hidden" name="sort" value="{{ request('sort') }}">
                                        <input type="hidden" name="dir" value="{{ request('dir') }}">
                                        <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('marques.show', array_merge([$marque], request()->only(['sort', 'dir']))) }}" 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('marques.edit', array_merge([$marque], request()->only(['sort', 'dir']))) }}" 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('marques.destroy', $marque) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <input type="hidden" name="sort" value="{{ request('sort') }}">
                                    <input type="hidden" name="dir" value="{{ request('dir') }}">
                                    <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() {
    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*="/marques/"]').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