@extends('layouts.master')
@section('content')
    <div class="page-container mt-5">



        <div class="modal fade" id="ActivateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="ActivateModal">Activer ce profil</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('profile.activate') }}" method="POST">

                            @csrf
                            <input type="hidden" name="activate_profile_id" id="activate_profile_id">


                            <p class="m-0">Vous etes sur le point d'activer ce profil. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, activer</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->
        <div class="modal fade" id="deleteModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Supprimer ce profile</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('profile.delete') }}" method="POST">

                            @csrf
                            <input type="hidden" name="profile_id" id="profile_id">


                            <p class="m-0">Vous etes sur le point de supprimer ce profile. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, supprimer</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->


        <div class="modal fade" id="DesactivateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Désactiver ce profil</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div> <!-- end modal header -->
                    <div class="modal-body">
                        <form action="{{ route('profile.desactivate') }}" method="POST">

                            @csrf
                            <input type="hidden" name="desactivate_profile_id" id="desactivate_profile_id">


                            <p class="m-0">Vous etes sur le point de désactiver ce profil. Si c'est le cas,
                                confirmer
                            </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                        <button type="submit" class="btn btn-danger">Oui, désactiver</button>
                    </div> <!-- end modal footer -->
                </div> <!-- end modal content-->
                </form>
            </div> <!-- end modal dialog-->
        </div> <!-- end modal-->


        <div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Annonceurs total</h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:user-check-bold"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">{{ $total_annonceur }}</h3>
                            <iconify-icon icon="solar:user-check-bold"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>

                    </div>
                </div>
            </div><!-- end col -->

            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Actifs</h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:check-circle-broken"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">{{ $annonceur_actif }}</h3>
                            <iconify-icon icon="solar:check-circle-broken"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>

                    </div>
                </div>
            </div><!-- end col -->

            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Solde total
                        </h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:wallet-money-bold-duotone"></iconify-icon>
                                </span>
                            </div>
                            <h3 class="mb-0 fw-bold">
                                {{ number_format((int) $solde, 0, ',', ' ') }}
                                <small class="text-muted">FCFA</small>
                            </h3>

                            <iconify-icon icon="solar:wallet-money-bold-duotone"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>

                    </div>
                </div>
            </div><!-- end col -->

            <div class="col">
                <div class="card overflow-hidden">
                    <div class="card-body">
                        <h5 class="text-muted fs-13 text-uppercase" title="Number of Orders">Campagnes total
                        </h5>
                        <div class="d-flex align-items-center gap-2 my-2 py-1">
                            <div class="user-img fs-42 flex-shrink-0">
                                <span style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" class="avatar-title text-bg-primary rounded-circle fs-22">
                                    <iconify-icon icon="solar:microphone-line-duotone"></iconify-icon>
                                </span>
                                {{-- <svg style="width: 20px !important" class="avatar-title text-bg-primary rounded-circle " xmlns="http://www.w3.org/2000/svg" width="4" height="4"
                                    viewBox="0 0 24 24">
                                    <g fill="none" stroke="currentColor" stroke-width="1.5">
                                        <path d="M7 8a5 5 0 0 1 10 0v3a5 5 0 0 1-10 0z" />
                                        <path stroke-linecap="round"
                                            d="M13 8h4m-4 3h4m3-1v1a8 8 0 0 1-8 8m-8-9v1a8 8 0 0 0 8 8m0 0v3"
                                            opacity="0.5" />
                                    </g>
                                </svg> --}}

                            </div>
                            <h3 class="mb-0 fw-bold">{{ $total_campagne }}</h3>
                            <iconify-icon icon="solar:microphone-line-duotone"
                                class="ms-auto display-1 position-absolute opacity-25 text-muted widget-icon"></iconify-icon>
                        </div>

                    </div>
                </div>
            </div><!-- end col -->
        </div><!-- end row -->


        <div class="row">
            <div class="col-12">
                <div class="card">



                    @if (Session::get('success'))
                        <div class="alert alert-success alert-dismissible d-flex align-items-center border-2 border border-success"
                            role="alert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                            <iconify-icon icon="solar:check-read-line-duotone" class="fs-20 me-1"></iconify-icon>
                            <div class="lh-1"><strong>Success - </strong>{{ Session::get('success') }} </div>
                        </div>
                    @endif

                    @if (Session::get('error'))
                        <div class="alert alert-danger alert-dismissible d-flex align-items-center border-2 border border-danger"
                            role="alert">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                            <iconify-icon icon="solar:danger-triangle-bold-duotone" class="fs-20 me-1"></iconify-icon>
                            <div class="lh-1"><strong>Error - </strong> {{ Session::get('error') }}</div>
                        </div>
                    @endif
                    <div class="card-body">
                        <div class="d-flex justify-content-end">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb mb-0 py-2">
                                    <li class="breadcrumb-item"><a href="{{ route('dash.index') }}">Tableau de bord</a>
                                    </li>
                                    {{-- <li class="breadcrumb-item"><a href="#">Liste des administrateurs</a></li> --}}
                                    <li class="breadcrumb-item active" aria-current="page">Liste des annonceurs</li>
                                </ol>
                            </nav>
                        </div>
                        <h4 class="header-title">Liste des annonceurs</h4>

                        <div class="text-end mb-3">

                            <button style="background-color: #EC5A00 !important; border-color:#EC5A00 !important" onclick="window.location.href='{{ route('profile.create') }}'"
                                class="btn btn-primary">Ajouter un annonceur</button>
                        </div>


                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="keywords1" class="form-label">Rechercher par entreprise, contact</label>
                                    <input type="text" name="keywords" id="keywords" class="form-control"
                                        onkeyup="fetchList()">
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="keywords2" class="form-label">Pays</label>

                                    <select name="pays_id" id="pays_id" class="form-control select2"
                                        data-toggle="select2" onchange="fetchList()">
                                        <option value="">Tous les pays</option>

                                         @foreach ($pays as $pay)
                                            <option value="{{ $pay->id }}">{{ $pay->nom_fr_fr }}</option>
                                        @endforeach 

                                    </select>

                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="keywords2" class="form-label">Types</label>

                                    <select name="types_id" id="types_id" class="form-control select2"
                                        data-toggle="select2" onchange="fetchList()">
                                        <option value="">Tous les types</option>

                                         @foreach ($type_annonceurs as $type_annonceur)
                                            <option value="{{ $type_annonceur->id }}">{{ $type_annonceur->nom }}</option>
                                        @endforeach 

                                    </select>

                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label for="keywords2" class="form-label">Etat KYC</label>

                                    <select name="categorie_id" id="cat" class="form-control select2"
                                        data-toggle="select2" onchange="fetchList()">
                                        <option value="">Tous les KYC</option>

                                        <option value="">Vérifié</option>
                                        <option value="">En attente</option>
                                        <option value="">Rejetté</option>


                                    </select>

                                </div>
                            </div>

                            {{-- <div class="col-md-3">
                                    <div class="mb-3">
                                        <label for="keywords2" class="form-label">Filtrer par quantité</label>

                                        <select name="categorie_id" id="searchh" class="form-control"
                                            onchange="fetchList()" style="padding: 5px; margin-right: 10px;">
                                            <option value="">Filtrer par...</option>

                                            <option value="low_quantity">Produits en stock faible</option>

                                        </select>

                                    </div>
                                </div> --}}
                        </div>


                        {{-- <button type="button" id="sweetalert-confirm-button" class="btn btn-secondary">Click Me</button> --}}

                        {{-- <button type="button" id="sweetalert-info" class="btn btn-info">Info Alert</button> --}}




                        @if ($annonceurs->isEmpty())
                            <div class="alert alert-warning text-center mt-3">Désolé, votre liste est vide !</div>
                        @else
                            <table id="" class="table dt-responsive nowrap w-100 data">
                               
                            </table>
                        @endif
                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div> <!-- end row-->
    </div> <!-- end row-->


    <script>
        $(document).on('click', '.delete_profile', function(e) {
            e.preventDefault();
            var profile_id = $(this).data('id');
            $('#profile_id').val(profile_id);
        });

        $(document).on('click', '.desactivate_profile', function(e) {
            e.preventDefault();
            var desactivate_profile_id = $(this).data('id');
            $('#desactivate_profile_id').val(desactivate_profile_id);
        });
        $(document).on('click', '.activate_profile', function(e) {
            e.preventDefault();
            var activate_profile_id = $(this).data('id');
            $('#activate_profile_id').val(activate_profile_id);
        });


        $('#deleteprofileForm').on('submit', function(e) {
            console.log("📤 Formulaire soumis !");
        });
    </script>


<script>
     function fetchList() {
            var query = $('#keywords').val();
            var pays_id = $('#pays_id').val();
            var types_id = $('#types_id').val();
            var stock = $('#stock_filter').val(); // Utiliser le champ caché
            var filter = $('#searchh').val();

            fetchProduits(query, pays_id, types_id, stock, filter, 1);
        }

        // Fonction pour récupérer les produits avec pagination
        function fetchProduits(query, pays_id, types_id, stock, filter, page) {
            var image = `
        <tr>
            <td colspan="100%">
                <div class="d-flex justify-content-center align-items-center" style="height: 150px;">
                    <img src="{{ asset('gif2.gif') }}" alt="Spinner" style="width: 200px;">
                </div>
            </td>
        </tr>
    `;
            $('.data').html(image);
            $('#paginations').html('');

            $('#paginations').addClass('disabled');

            // Inclure stock uniquement si le filtre est actif
            var data = {
                search_string: query,
                pays_id: pays_id,
                types_id: types_id,
                filter: filter,
                page: page,
                _token: $('meta[name="csrf-token"]').attr('content')
            };
           

            $.ajax({
                type: "POST",
                url: "{{ route('search.annonceur') }}",
                data: data,
                success: function(res) {
                    console.log('Response:', res);
                    if (res.status === 200) {
                        $('.data').html(res.tableBody);
                        $('#produitsTotal').html(res.produitsTotal);
                        updatePagination(res.pagination);
                    } else {
                        $('.data').html(`
                    <tr>
                        <td colspan="7" class="text-center text-danger">${res.message}</td>
                    </tr>
                `);
                        $('#produitsTotal').text(0);
                        $('#paginations').html('');
                    }
                },
                error: function(err) {
                    if (err.responseJSON && err.responseJSON.message) {
                        console.log(err.responseJSON.message);
                    } else {
                        alert('Erreur inconnue.');
                    }
                    console.error("Erreur AJAX :", err);
                    $('.data').html(`
                <tr>
                    <td colspan="7" class="text-center text-danger">Erreur lors du chargement des données</td>
                </tr>
            `);
                },
                complete: function() {
                    $('#paginations').removeClass('disabled');
                }
            });
        }

        // Fonction pour mettre à jour la pagination (version originale)
        function updatePagination(pagination) {
            var paginationHtml = '';

            // Bouton précédent
            if (pagination.current_page > 1) {
                paginationHtml += `<li class="page-item" data-page="${pagination.current_page - 1}">
                        <a class="page-link" href="#">«</a>
                    </li>`;
            } else {
                paginationHtml += `<li class="page-item disabled"><a class="page-link" href="#">«</a></li>`;
            }

            // Pages numérotées
            for (var i = 1; i <= pagination.last_page; i++) {
                paginationHtml += `<li class="page-item ${pagination.current_page === i ? 'active' : ''}" data-page="${i}">
                        <a class="page-link" href="#">${i}</a>
                    </li>`;
            }

            // Bouton suivant
            if (pagination.current_page < pagination.last_page) {
                paginationHtml += `<li class="page-item" data-page="${pagination.current_page + 1}">
                        <a class="page-link" href="#">»</a>
                    </li>`;
            } else {
                paginationHtml += `<li class="page-item disabled"><a class="page-link" href="#">»</a></li>`;
            }

            // Injecter dans le DOM
            $('#paginations').html(paginationHtml);
        }

        // Gérer les clics sur les liens de pagination
        $(document).on('click', '#paginations .page-item', function(e) {
            e.preventDefault();
            if ($(this).hasClass('disabled') || $(this).hasClass('active')) return;

            var page = $(this).data('page');
            console.log('Clicked page:', page);
            var query = $('#keywords').val();
            var cate_id = $('#cat').val();
            var date = $('#date').val();
            var stock = $('#stock_filter').val(); // Utiliser le champ caché
            var filter = $('#searchh').val();

            fetchProduits(query, cate_id, date, stock, filter, page);
        });

        // Initialiser au chargement
        window.onload = function() {
            fetchList();
        };
</script>



    <script src="{{ asset('assets/js/components/extended-sweetalerts.js') }}"></script>
@endsection