@extends('layout')

@section('title', 'Liste OMI')

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

<div class="container py-5">
    <div class="card shadow-lg" style="border-radius: 15px;">
        <div class="card-header text-white text-center" style="background-color: #1d3557; border-radius: 15px 15px 0 0;">
            <h2 class="fw-bold">Liste OMI</h2>
        </div>
        <div class="card-body" style="background-color: #f1faee; border-radius: 0 0 15px 15px;">

            <!-- Zone de Recherche -->
            <div class="input-group mb-4">
                <span class="input-group-text" style="background-color: #457b9d; color: white;">
                    <i class="bi bi-search"></i>
                </span>
                <input type="text" class="form-control" id="searchInput" placeholder="Rechercher un matériel...">
            </div>

            @if ($omis->isEmpty())
                <div class="alert alert-info text-center fs-5">
                    Aucun matériel OMI enregistré pour le moment.
                </div>
            @else
                <!-- Bouton Imprimer -->
                <div class="text-center mb-4">
                    <button class="btn btn-outline-success" onclick="imprimerTableau()">
                        <i class="bi bi-printer"></i> Imprimer
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-hover align-middle text-center">
                        <thead class="text-white" style="background-color: #457b9d;">
                            <tr>
                                <th>#</th>
                                <th>Numéro d'Inventaire</th>
                                <th>Désignation</th>
                                <th>Numéro de Série</th>
                                <th>Date Acquisition</th>
                                <th>Mode Paiement</th>
                                <th>BC / BL</th>
                                <th>Bailleurs</th>
                                <th>Nature</th>
                                <th>Situations</th>
                                <th>Utilisateurs</th>
                                <th>Repère</th>
                                <th>Fournisseurs</th>
                                <th>Coût Unitaire</th>
                                <th>Coût Total</th>
                                <th class="signature-column">Signature</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="materielTableBody">
                            @foreach($omis as $omi)
                            <tr class="bg-white border-bottom">
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $omi->numero_inventaire }}</td>
                                <td>{{ $omi->designation }}</td>
                                <td>{{ $omi->numero_serie ?? 'N/A' }}</td>
                                <td>{{ $omi->date_acquisition ?? 'N/A' }}</td>
                                <td>{{ $omi->mode_paiement ?? 'N/A' }}</td>
                                <td>{{ $omi->bc_bl ?? 'N/A' }}</td>
                                <td>{{ $omi->bailleurs ?? 'N/A' }}</td>
                                <td>{{ $omi->nature ?? 'N/A' }}</td>
                                <td>{{ $omi->situations ?? 'N/A' }}</td>
                                <td>{{ $omi->utilisateurs ?? 'N/A' }}</td>
                                <td>{{ $omi->repere ?? 'N/A' }}</td>
                                <td>{{ $omi->fournisseurs ?? 'N/A' }}</td>
                                <td>{{ number_format($omi->cout_unitaire, 2, ',', ' ') }} Ar</td>
                                <td>{{ number_format($omi->cout_total, 2, ',', ' ') }} Ar</td>
                                <td class="signature-column">___</td>
                                <td>
                                    <div class="d-flex flex-column gap-2 align-items-center">
                                        <a href="{{ route('omi.edit', $omi->id) }}" class="btn btn-outline-primary btn-lg rounded-circle" title="Modifier" style="width: 50px; height: 50px;">
                                            <i class="bi bi-pencil" style="font-size: 1.5rem;"></i>
                                        </a>
                                        <a href="{{ route('omi.show', $omi->id) }}" 
                                           class="btn btn-outline-info btn-lg rounded-circle" 
                                           title="Voir" 
                                           style="width: 50px; height: 50px;">
                                            <i class="bi bi-eye" style="font-size: 1.5rem;"></i>
                                        </a>

                                        <form action="{{ route('omi.destroy', $omi->id) }}" method="POST" onsubmit="return confirm('Supprimer ce matériel ?');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger btn-lg rounded-circle" title="Supprimer" style="width: 50px; height: 50px;">
                                                <i class="bi bi-trash" style="font-size: 1.5rem;"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.getElementById('searchInput').addEventListener('keyup', function() {
        let filter = this.value.toLowerCase();
        let rows = document.querySelectorAll('#materielTableBody tr');

        rows.forEach(function(row) {
            row.style.display = row.innerText.toLowerCase().includes(filter) ? '' : 'none';
        });
    });

    function imprimerTableau() {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        document.body.appendChild(iframe);

        var doc = iframe.contentWindow.document;
        var tableContent = document.querySelector('.table').outerHTML;

        doc.open();
        doc.write('<html><head><title>Impression</title>');
        doc.write('<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">');
        doc.write('</head><body>');
        doc.write('<h2 class="text-center">Liste des Matériels OMI</h2>');
        doc.write(tableContent);
        doc.write('</body></html>');
        doc.close();

        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
    }
</script>

<style>
    .signature-column { display: none; }

    @media print {
        .signature-column { display: table-cell; }
        table { width: 100% !important; table-layout: fixed; }
        body { margin: 0; padding: 0; }
        h2 { font-size: 24px; margin-bottom: 10px; }
    }
</style>
@endsection