@extends('layout')

@section('content')
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>

<div class="container mt-5">
    <h1 class="text-center mb-4 text-primary fw-bold">Inventaire des Matériels</h1>

    <!-- Barre de recherche et bouton imprimer -->
    <div class="row mb-4">
        <div class="col-md-6">
            <input type="text" id="searchInput" class="form-control" placeholder="🔍 Rechercher...">
        </div>
        <div class="col-md-6 text-end">
            <button onclick="imprimerTableau()" class="btn btn-outline-primary"><i class="bi bi-printer"></i> Imprimer</button>
        </div>
    </div>

    <!-- Options pour masquer les colonnes -->
    <div class="mb-4 bg-light p-3 rounded shadow-sm">
        <h5 class="mb-3">Afficher/Masquer les colonnes :</h5>
        <div class="d-flex flex-wrap gap-3">
            <label><input type="checkbox" class="toggle-column" data-column="2" checked> Type</label>
            <label><input type="checkbox" class="toggle-column" data-column="3" checked> N° Inventaire</label>
            <label><input type="checkbox" class="toggle-column" data-column="4" checked> Désignation</label>
            <label><input type="checkbox" class="toggle-column" data-column="11" checked> Localité</label>
            @foreach($annees as $index => $annee)
                <label><input type="checkbox" class="toggle-column" data-column="{{ 12 + $index }}" checked> Situation {{ $annee }}</label>
            @endforeach
        </div>
    </div>

    <!-- Tableau responsive -->
    <div class="table-responsive">
        <table class="table table-bordered table-striped align-middle" id="inventaireTable">
            <thead class="table-dark text-center">
                <tr>
                    <th>#</th>
                    <th>Type</th>
                    <th>N° Inventaire</th>
                    <th>Désignation</th>
                    <th>N° Série</th>
                    <th>Date Acquisition</th>
                    <th>Mode Paiement</th>
                    <th>BC/BL</th>
                    <th>Bailleurs</th>
                    <th>Nature</th>
                    <th>Localité</th>
                    @foreach($annees as $annee)
                        <th>Situation {{ $annee }}</th>
                    @endforeach
                    <th>Utilisateurs</th>
                    <th>Repère</th>
                    <th>Coût Unitaire</th>
                    <th>Coût Total</th>
                    <th>Fournisseurs</th>
                </tr>
            </thead>
            <tbody>
                @foreach($inventaire as $item)
                    <tr>
                        <td>{{ $item->id }}</td>
                        <td>{{ $item->type }}</td>
                        <td>{{ $item->numero_inventaire ?? 'N/A' }}</td>
                        <td>{{ $item->designation ?? 'N/A' }}</td>
                        <td>{{ $item->numero_serie ?? 'N/A' }}</td>
                        <td>{{ $item->date_acquisition ?? 'N/A' }}</td>
                        <td>{{ $item->mode_paiement ?? 'N/A' }}</td>
                        <td>{{ $item->bc_bl ?? 'N/A' }}</td>
                        <td>{{ $item->bailleurs ?? 'N/A' }}</td>
                        <td>{{ $item->nature ?? 'N/A' }}</td>
                        <td>{{ optional($item->situations->last())->localite ?? 'N/A' }}</td>
                        @foreach($annees as $annee)
                            <td>{{ $item->situations[$annee]->situation ?? 'N/A' }}</td>
                        @endforeach
                        <td>{{ $item->utilisateurs ?? 'N/A' }}</td>
                        <td>{{ $item->repere ?? 'N/A' }}</td>
                        <td>{{ $item->cout_unitaire ?? 'N/A' }}</td>
                        <td>{{ $item->cout_total ?? 'N/A' }}</td>
                        <td>{{ $item->fournisseurs ?? 'N/A' }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Style impression -->
<style>
    @media print {
        .hidden-column {
            display: none !important;
        }
    }
</style>

<!-- Script -->
<script>
    function imprimerTableau() {
        window.print();
    }

    document.getElementById('searchInput').addEventListener('keyup', function () {
        let input = this.value.toLowerCase();
        document.querySelectorAll("#inventaireTable tbody tr").forEach(row => {
            let text = row.innerText.toLowerCase();
            row.style.display = text.includes(input) ? "" : "none";
        });
    });

    document.querySelectorAll(".toggle-column").forEach(checkbox => {
        checkbox.addEventListener("change", function () {
            let columnIndex = this.getAttribute("data-column");
            let cells = document.querySelectorAll(`#inventaireTable th:nth-child(${columnIndex}), #inventaireTable td:nth-child(${columnIndex})`);
            cells.forEach(cell => {
                cell.classList.toggle("hidden-column", !this.checked);
            });
        });
    });
</script>
@endsection