@extends("admin.admin_app")
@section('content')
<div class="content-page">
    <div class="content">
        <div class="container-fluid">

            <!-- Titre -->
            <div class="row">
                <div class="col-12">
                    <h4 class="page-title">Comparer les Contenus</h4>
                </div>
            </div>

            <!-- Formulaire de Recherche -->
            <div class="row mb-4">
                <div class="col-md-9">
                    <form id="searchForm" class="form-inline">
                        <div class="form-group mr-3">
                            <label for="title" class="mr-2">Titre :</label>
                            <input type="text" id="title" class="form-control" placeholder="Rechercher un titre">
                        </div>
                        <div class="form-group mr-3">
                            <button type="submit" class="btn btn-primary">Rechercher</button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Barre de Chargement -->
            <div id="loading-bar" style="display: none; margin-bottom: 20px;">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 
                         style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                        Chargement...
                    </div>
                </div>
            </div>

            <!-- Résultats -->
            <div class="row">
                <div class="col-12">
                    <div class="card-box table-responsive">
                        <h4 class="header-title">Résultats</h4>
                        <div id="results-container">
                            <!-- Les résultats seront chargés ici via AJAX -->
                            <p>Chargement des résultats...</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        // Fonction pour afficher ou masquer la barre de chargement
        function toggleLoading(show) {
            if (show) {
                $('#loading-bar').show(); // Affiche la barre de chargement
            } else {
                $('#loading-bar').hide(); // Masque la barre de chargement
            }
        }

        function fetchResults(page = 1) {
            const title = $('#title').val();

            // Affiche la barre de chargement et un message dans la section résultats
            toggleLoading(true);
            $('#results-container').html('<p>Chargement des résultats...</p>');

            $.ajax({
                url: "{{ route('compare.ajax') }}",
                method: "GET",
                data: { title: title, page: page },
                success: function (response) {
                    // Insère les résultats et masque la barre de chargement
                    $('#results-container').html(response);
                    toggleLoading(false);
                },
                error: function () {
                    $('#results-container').html('<p>Erreur lors du chargement des résultats.</p>');
                    toggleLoading(false);
                }
            });
        }

        // Soumettre le formulaire de recherche
        $('#searchForm').on('submit', function (e) {
            e.preventDefault();
            fetchResults();
        });

        // Charger les résultats par défaut
        fetchResults();
    });
</script>
@endsection