@extends('layout.mainlayout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
@section('content')
    <div class="page-wrapper">
        <div class="content">
            @component('components.pageheader')
                @slot('title')
                    Créer un module
                @endslot
                @slot('title_1')
                @endslot
            @endcomponent
            <form action="{{ route('createModule') }}" method="POST" id="newReportForm">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-lg-4 col-sm-12">
                                <div class="form-group">
                                    <label for="projet_name">Projet</label>
                                    <select name="projet_id" class="form-control projet-select" required>
                                        <option value="">Sélectionner un projet</option>
                                        @foreach ($projets as $projet)
                                            <option value="{{ $projet->id }}">{{ $projet->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-12">
                                <div class="form-group">
                                    <label>Libellé</label>
                                    <input type="text" name="name" class="form-control" required
                                        placeholder="Entrez un libellé Module">
                                </div>
                            </div>

                            <div class="col-lg-2 col-sm-12 d-flex align-items-end">
                                <button type="submit" class="btn btn-success w-100">Ajouter</button>
                            </div>

                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="page-wrapper">
        <div class="content">
            @component('components.pageheader')
                @slot('title')
                    Liste des Modules
                @endslot
                @slot('title_1')
                @endslot
            @endcomponent

            <!-- Barre de recherche -->
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12 col-sm-12">
                            <input type="text" id="moduleSearch" class="form-control"
                                placeholder="Rechercher un module...">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Liste des Modules -->
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="tables" class="table table-striped">
                            <thead>
                                <tr>
                                    <th>libelle</th>
                                </tr>
                            </thead>
                            <tbody id="moduleTableBody">
                                @foreach ($modules as $module)
                                    <tr>
                                        <td>{{ $module->name }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $('#tables').DataTable({
                "language": {
                    'url': "//cdn.datatables.net/plug-ins/1.11.5/i18n/fr_fr.json"
                }
            })
        })
        document.getElementById('moduleSearch').addEventListener('keyup', function() {
            let filter = this.value.toLowerCase();
            let rows = document.querySelectorAll('#moduleTableBody tr');

            rows.forEach(row => {
                let moduleName = row.querySelector('td').textContent.toLowerCase();
                if (moduleName.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        });
    </script>
@endsection