@extends('layouts.master')
@section('breadcrumb')
    @include('components.breadcrumb',['breadcrumbs' => [
        [
            'name'  => __("dashboard"),
            'url'   => route("home"),
        ]
    ], 'active' =>  __(@$title)])
@endsection
@section('content')
    <style>
        .bg-primary {
            background: linear-gradient(90deg, #fff, #fff) !important;
        }
    </style>
    <div class="body-wrapper">
        @include("layouts.alert")
            <!-- Formulaire de recherche -->
            <form id="searchForm" class="row col-12 text-center mb-3" action="{{ route('transactionsclients.search') }}">
                <div class="col p-0">
                    <input type="text" id="tel" name="tel" class="form-control search-slt"
                           placeholder="@lang("teldeposant")" value="{{ request()->input('tel') }}">
                </div>
                <div class="col p-0">
                    <input type="text" id="telrecever" name="telrecever" class="form-control search-slt"
                           placeholder="@lang("telrecever")" value="{{ request()->input('telrecever') }}">
                </div>
                <div class="col p-0">
                    <input type="text" id="id_transaction" name="id_transaction" class="form-control search-slt"
                           placeholder="@lang('id_transaction')" value="{{ request()->input('id_transaction') }}">
                </div>
            </form>

            <!-- Conteneur pour les résultats de la recherche -->
            <div id="results" class="dashboard-list-wrapper">
                @include('serviceclient.transactionsclients.partials', ['transactions' => $transactions])
            </div>

            <!-- Conteneur pour la pagination -->
            <div id="pagination" class="d-flex justify-content-center">
                {{ $transactions->appends(request()->input())->links('layouts.paginationlinks') }}
            </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
         style="position:fixed;top:20%; ;transform:translate(-50%;-50%)" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">@lang("Confirmation")</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="post" id="statutForm1">
                    @csrf
                    @method("put")
                    <div class="modal-body">
                        <p>
                            @lang("QuestionConfirmation")
                        </p>
                        <div class="form-group" id="motifGroup" style="display: none;">
                                    <textarea id="motif" placeholder="Veuillez saisire le motif"  name="motif"
                                              class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal"> @lang("Non")</button>
                        <button class="btn btn-primary" onclick="submitForm()">@lang("Oui")</button>
                    </div>
                </form>
            </div>

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

    <!-- Inclusion de jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#clientSelect').hide();
            $('#searchForm input').on('keyup change', function () {
                console.log('Requête envoyée'); // Affiche un message dans la console lorsque la requête est envoyée
                $.ajax({
                    url: "{{ route('transactionsclients.search') }}",
                    method: "GET",
                    data: $('#searchForm').serialize(),
                    success: function (data) {
                        $('#results').html(data.transactions);
                        $('#pagination').html(data.pagination);
                        if(data.client){
                            $('#clientSelect').show();
                            $('#clientName').text(data.client.nom);
                            $('#clientPrenoms').text(data.client.prenoms);
                            $('#clientTel').text(data.client.full_login);
                            console.log(data.client);
                        }else{
                            $('#clientSelect').hide();
                        }
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error('Erreur AJAX:', textStatus, errorThrown); // Affiche les détails de l'erreur
                        alert('Erreur lors de la recherche');
                    }
                });
            });
            window.confirmActionstatut = function (input, action, id) {
                console.log(input, action, id);
                var url = '{{ route("transactionsclients.rollback", [":id", ":action"]) }}';
                url = url.replace(':id', id).replace(':action', action);
                $("#statutForm1").prop("action", url);
                $("#motifGroup").show();
            }

            window.submitForm = function () {
                var action = $('#statutForm1').prop("action");
                var motif = $('#motif').val();
                if (action.includes('rollback') && motif) {
                    action += '/' + encodeURIComponent(motif);
                }
                $('#statutForm1').prop("action", action);
                $('#statutForm1').submit();
            }
        });
    </script>
@endsection