@extends('admin.layout')
@section('title', "Recherche Particulier")

@section('content')

<style>
    .search-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 0 20px rgba(0,0,0,0.05);
    }

    .search-card .card-header {
        background: #fff;
        border-bottom: 1px solid #eee;
        padding: 20px;
    }

    .search-card .card-header h5 {
        color: #333;
        font-weight: 600;
        margin: 0;
    }

    .search-card .card-body {
        padding: 25px;
    }

    .form-row {
        display: flex;
        margin: 0 -12px;
        flex-wrap: wrap;
    }

    .form-col {
        flex: 0 0 50%;
        padding: 0 12px;
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #555;
        font-weight: 500;
        font-size: 14px;
    }

    .form-control {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        transition: all 0.3s ease;
        font-size: 14px;
    }

    .form-control:focus {
        border-color: #FFD700;
        box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
    }

    select.form-control {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
        padding-right: 40px;
        appearance: none;
    }

    .btn-submit {
        background: linear-gradient(45deg, #D92332,rgb(255, 94, 73));
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        margin-top: 10px;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(217, 35, 50, 0.2);
    }

    .loader {
        display: none;
        width: 20px;
        height: 20px;
        border: 2px solid #f3f3f3;
        border-radius: 50%;
        border-top: 2px solid #D92332;
        animation: spin 1s linear infinite;
        margin-left: 10px;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .client-select-container {
        display: none;
        margin-top: 20px;
    }

    .select2-container--bootstrap4.select2-container--focus .select2-selection {
        border-color: #FFD700;
        box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25);
    }

    .list-group {
        position: absolute;
        width: 100%;
        z-index: 1000;
        max-height: 300px;
        overflow-y: auto;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .list-group-item {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .list-group-item:hover {
        background-color: #f8f9fa;
    }

    .client-select-container {
        position: relative;
    }
</style>

<div class="col-md-10 mx-auto">
    <div class="card search-card">
        <div class="card-header">
            <h5><i class="fas fa-search mr-2"></i> Recherche Particulier</h5>
        </div>
        <div class="card-body">
            <form id="smartSearchForm">
                @csrf
                <div class="form-row">
                    <div class="col-12">
                        <div class="form-group">
                            <label><i class="fas fa-building mr-1"></i> Agence</label>
                            <div class="d-flex align-items-center">
                                <select name="agence" class="form-control code_agence" id="agence">
                                    <option value="">Sélectionnez l'agence</option>
                                    @foreach($serveurs as $serveur)
                                        <option value="{{ $serveur->code_agence }}" {{ request()->get('agence') == $serveur->code_agence ? 'selected' : '' }}>
                                            {{ $serveur->libelle_agence }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="loader" id="agenceLoader"></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 client-select-container" id="clientContainer">
                        <div class="form-group">
                            <label><i class="fas fa-user mr-1"></i> Code Client</label>
                            <div class="d-flex align-items-center">
                                <input type="text"
                                       class="form-control"
                                       id="clientSearch"
                                       placeholder="Entrez le code client"
                                       autocomplete="off">
                                <div class="loader" id="clientLoader"></div>
                            </div>
                            <div id="clientResults" class="mt-2"></div>
                        </div>
                    </div>

                    <hr>
                    <!-- Première ligne -->
                    <div class="form-col">
                        <div class="form-group">
                            <label><i class="fas fa-user mr-1"></i> Nom complet</label>
                            <input type="text" class="form-control" name="FullName" id="FullName"
                                placeholder="Entrez le nom complet" required>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label><i class="fas fa-calendar mr-1"></i> Date de naissance</label>
                            <input type="date" class="form-control" name="DateOfBirth" id="DateOfBirth" required>
                        </div>
                    </div>

                    <!-- Deuxième ligne -->
                    <div class="form-col">
                        <div class="form-group">
                            <label><i class="fas fa-id-card mr-1"></i> Numéro d'identification</label>
                            <input type="text" class="form-control" name="IdNumber" id="IdNumber"
                                placeholder="Entrez le numéro d'identification" required>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label><i class="fas fa-passport mr-1"></i> Type de pièce d'identité</label>
                            <select class="form-control" name="IdNumberType" id="IdNumberType" required>
                                <option value="">Sélectionnez le type</option>
                                <option value="NationalID">Carte Nationale d'Identité</option>
                                <option value="PassportNumber">Passeport</option>
                                <option value="DrivingLicenseNumber">Permis de Conduire</option>
                                <option value="ResidencePermitNumber">Permis de Résidence</option>
                                <option value="ConsularCard">Carte Consulaire</option>
                            </select>
                        </div>
                    </div>

                    <!-- Troisième ligne -->
                    <div class="form-col">
                        <div class="form-group">
                            <label><i class="fas fa-globe mr-1"></i> Pays émetteur</label>
                            <select class="form-control" name="IdNumberIssuerCountry" id="IdNumberIssuerCountry">
                                <option value="">Sélectionnez le pays</option>
                                <option value="ML">Mali</option>
                                <option value="CI">Côte d'Ivoire</option>
                                <option value="SN">Sénégal</option>
                                <option value="BN">Bénin</option>
                                <option value="TG">Togo</option>
                                <option value="BF">Burkina Faso</option>
                                <option value="GB">Guinée-Bissau</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-col">
                        <div class="form-group">
                            <label><i class="fas fa-question-circle mr-1"></i> Motif de la recherche</label>
                            <select class="form-control" name="InquiryReason" id="InquiryReason" required>
                                <option value="">Sélectionnez le motif</option>
                                <option value="ApplicationForCreditOrAmendmentOfCreditTerms">Demande de crédit</option>
                                <option value="EvaluationOfCurrentCustomerSupplierPartnerOrOwnEmployee">Évaluation</option>
                                <option value="PaymentAgreement">Accord de paiement</option>
                                <option value="AnotherReason">Autre raison</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="text-center">
                    <button type="submit" class="btn btn-submit" id="submitButton">
                        <span id="buttonText">Rechercher</span>
                        <i id="buttonSpinner" style="display: none" class="fas fa-circle-notch fa-spin"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="printableSearch" style="display:none;"></div>

<script>
    $(document).ready(function() {
        console.log('Document ready - Initializing event handlers');

        $('#smartSearchForm').submit(function(e) {
            e.preventDefault(); // Prevent default form submission

            $('#submitButton').attr('disabled', true);
            $('#buttonText').text('Chargement...');
            $('#buttonSpinner').show();
            $(".loader-bg").show();

            var formData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                FullName: $('#FullName').val(),
                DateOfBirth: $('#DateOfBirth').val(),
                IdNumber: $('#IdNumber').val(),
                IdNumberType: $('#IdNumberType').val(),
                IdNumberIssuerCountry: $('#IdNumberIssuerCountry').val(),
                InquiryReason: $('#InquiryReason').val(),
            };

            $.ajax({
                url: "{{ route('smart_search_individual') }}",
                type: 'POST',
                data: formData,
                success: function(response) {
                    if (response && response.SmartSearchIndividualResult) {
                        const result = response.SmartSearchIndividualResult;

                        if (result.Status === "SubjectFound") {
                            const record = result.IndividualRecords?.SearchIndividualRecord;
                            const creditinfoId = result.CreditinfoId;

                            let printableContent = `
                                <strong>credit info Id :</strong> ${record?.CreditinfoId || 'Non disponible'}<br>
                                <strong>Nom complet :</strong> ${record?.FullName || 'Non disponible'}<br>
                                <strong>Date de naissance :</strong> ${record?.DateOfBirth?.split('T')[0] || 'Non disponible'}<br>
                                <strong>National ID :</strong> ${record?.NationalID || 'Non disponible'}<br>
                            `;

                            if (creditinfoId !== null) {
                                printableContent += `
                                    <br>
                                    <button id="printPdfButton" class="btn btn-danger">Imprimer le PDF <i class="fas fa-file-pdf"></i></button>
                                    <!--button id="viewReportButton" class="btn btn-success">Voir le rapport</button-->
                                `;
                            }

                            $('#printableSearch').html(printableContent);

                            Swal.fire({
                                title: 'Résultat de la recherche',
                                html: printableContent,
                                showConfirmButton: false,
                            });

                            $(document).on('click', '#viewReportButton', function () {
                                console.log('Bouton Rapport cliqué');
                                generateCustomReport(result);
                            });

                            // Bind click event to PDF generation button
                            $(document).on('click', '#printPdfButton', function () {
                                console.log('Bouton PDF cliqué');
                                generatePDF(result);
                            });
                        } else {
                            Swal.fire({
                                title: 'Aucun résultat trouvé',
                                html: 'La recherche n\'a retourné aucun résultat.',
                                icon: 'warning',
                            });
                        }
                    } else {
                        Swal.fire({
                            title: 'Erreur!',
                            text: 'Aucun resultat trouvé !.',
                            icon: 'error',
                        });
                    }
                },
                error: function(xhr) {
                    let message = 'Une erreur est survenue.';

                    if (xhr.status === 400) {
                        message = 'Requête invalide. Veuillez vérifier les champs.';
                    } else if (xhr.status === 401) {
                        message = 'Non autorisé. Veuillez vous reconnecter.';
                    } else if (xhr.status === 403) {
                        message = 'Accès refusé. Vous n\'avez pas les autorisations nécessaires.';
                    } else if (xhr.status === 404) {
                        message = 'Ressource non trouvée.';
                    } else if (xhr.status === 500) {
                        message = 'Erreur serveur interne. Veuillez réessayer plus tard.';
                    }

                    Swal.fire({
                        title: 'Erreur!',
                        html: `${message}<br>Message technique: ${xhr.responseText}`,
                        icon: 'error',
                    });
                },
                complete: function() {
                    $('#submitButton').attr('disabled', false);
                    $('#buttonText').text('Rechercher');
                    $('#buttonSpinner').hide();
                },
                timeout: 120000 // Handle timeouts (10 seconds)
            }).fail(function(jqXHR, textStatus) {
                if (textStatus === "timeout") {
                    Swal.fire({
                        title: 'Erreur!',
                        text: 'La requête a expiré. Veuillez vérifier votre connexion réseau et réessayer.',
                        icon: 'error',
                    });
                }
            });
        });

        function printDiv(divId) {
            var content = document.getElementById(divId).innerHTML;
            var myWindow = window.open('', 'Print', 'height=600,width=800');
            myWindow.document.write('<html><head><title>Imprimer</title></head><body>' + content + '</body></html>');
            myWindow.document.close();
            myWindow.print();
            myWindow.close();
        }

        function generateCustomReport(result) {
            console.log('Generating custom report for:', result);

            // Vérification initiale des données
            if (!result || !result.IndividualRecords || !result.IndividualRecords.SearchIndividualRecord) {
                console.error('Données invalides:', result);
                Swal.fire({
                    title: 'Erreur',
                    text: 'Données insuffisantes pour générer le rapport',
                    icon: 'error'
                });
                return;
            }

            const individualRecord = result.IndividualRecords.SearchIndividualRecord;

            // Vérifier si CreditinfoId existe
            if (!individualRecord.CreditinfoId && !result.CreditinfoId) {
                console.error('CreditinfoId manquant');
                Swal.fire({
                    title: 'Erreur',
                    text: 'Identifiant CreditInfo manquant',
                    icon: 'error'
                });
                return;
            }

            Swal.fire({
                title: 'Génération du rapport en cours...',
                html: '<div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div>',
                allowOutsideClick: false,
                showConfirmButton: false,
            });

            // Préparer les données avec les valeurs correctes
            const reportData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                ReportName: 'CustomReport',
                FullName: individualRecord.FullName,
                DateOfBirth: individualRecord.DateOfBirth.split('T')[0],
                IdNumber: individualRecord.CreditinfoId || result.CreditinfoId,
                IdNumberIssuerCountry: $('#IdNumberIssuerCountry').val() || 'ML',
                IdNumberType: 'CreditinfoId',
                InquiryReason: $('#InquiryReason').val() || 'ApplicationForCreditOrAmendmentOfCreditTerms',
                InquiryReasonText: '',
                CustomerCode: '',
                SubjectType: 'Individual'
            };

            console.log('Sending report data:', reportData);

            $.ajax({
                url: "/get_individual_custom_report",
                type: 'POST',
                data: reportData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                },
                beforeSend: function() {
                    console.log('Sending request with data:', reportData);
                },
                success: function(response) {
                    console.log('Report generation response:', response);
                    Swal.close();

                    if (response.success) {
                        Swal.fire({
                            title: 'Rapport généré avec succès!',
                            html: response.html_content,
                            icon: 'success',
                            showConfirmButton: true,
                            confirmButtonText: 'Fermer',
                            width: '90%',
                            customClass: {
                                container: 'custom-swal-container',
                                popup: 'custom-swal-popup'
                            }
                        });
                    } else {
                        console.error('Error in response:', response);
                        Swal.fire({
    title: 'Erreur lors de la génération du rapport',
    html: `<p>${response.message || 'Une erreur inattendue est survenue.'}</p>
           ${response.error ? `<p style="font-size: 0.8em; color: #888;">Erreur technique : ${response.error}</p>` : ''}`,
    icon: 'error'
});
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error details:', {
                        status: status,
                        error: error,
                        response: xhr.responseText,
                        data: reportData
                    });

                    let errorMessage = 'La génération du rapport a échoué.';

                    try {
                        const responseData = JSON.parse(xhr.responseText);
                        errorMessage = responseData.message || errorMessage;
                        if (responseData.errors) {
                            errorMessage += '\n' + Object.values(responseData.errors).join('\n');
                        }
                    } catch (e) {
                        console.error('Error parsing response:', e);
                    }

                    Swal.fire({
                        title: 'Erreur!!',
                        text: errorMessage,
                        icon: 'error'
                    });
                }
            });
        }

        function generatePDF(result) {
            Swal.fire({
                title: 'Génération du PDF en cours...',
                html: '<div class="spinner-border" role="status"><span class="visually-hidden">Chargement...</span></div>',
                allowOutsideClick: false,
                showConfirmButton: false,
            });

            const pdfData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                ReportName: 'CreditinfoReport', // Replace with the appropriate report name
                FullName: result.IndividualRecords.SearchIndividualRecord.FullName,
                DateOfBirth: result.IndividualRecords.SearchIndividualRecord.DateOfBirth,
                IdNumber: result.IndividualRecords.SearchIndividualRecord.NationalID,
                IdNumberIssuerCountry: 'CI', // Adjust based on your data
                IdNumberType: 'NationalID', // Adjust based on your data
                InquiryReason: 'ApplicationForCreditOrAmendmentOfCreditTerms', // Replace with the actual InquiryReason
                InquiryReasonText: '', // Optional field
                CustomerCode: '', // Optional field
            };

            $.ajax({
                url: "{{ route('get_individual_report_pdf') }}", // Adjust this route
                type: 'POST',
                data: pdfData,
                success: function (response) {
                    Swal.close();

                    if (response.success) {
                        Swal.fire({
                            title: 'PDF généré avec succès!',
                            html: `<a href="/reports/${response.file_name}" target="_blank" class="btn btn-success">Télécharger le PDF <i class="fas fa-file-pdf fa-beat"></i></a>`,
                            icon: 'success',
                            showConfirmButton: false,
                        });
                    } else {
                        Swal.fire({
                            title: 'Erreur lors de la génération du PDF',
                            text: response.message || 'Une erreur inattendue est survenue.',
                            icon: 'error',
                        });
                    }
                },
                error: function (xhr) {
                    Swal.close();
                    Swal.fire({
                        title: 'Erreur!',
                        text: 'La génération du PDF a échoué. Veuillez réessayer.',
                        icon: 'error',
                    });
                },
            });
        }

        let searchTimeout;

        $('#agence').on('change', function() {
            const agenceCode = $(this).val();
            const clientContainer = $('#clientContainer');

            if (!agenceCode) {
                clientContainer.hide();
                return;
            }

            clientContainer.slideDown();
            $('#clientSearch').val('');
            $('#clientResults').empty();
        });

        $('#clientSearch').on('input', function() {
            const searchTerm = $(this).val();
            const agenceCode = $('#agence').val();
            const loader = $('#clientLoader');
            const resultsContainer = $('#clientResults');

            clearTimeout(searchTimeout);

            if (searchTerm.length < 2) {
                resultsContainer.empty();
                return;
            }

            loader.show();

            searchTimeout = setTimeout(() => {
                $.ajax({
                    url: "{{ route('get_clients_by_agence') }}",
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        agence_code: agenceCode,
                        search_term: searchTerm
                    },
                    success: function(response) {
                        if (response.success && response.clients.length > 0) {
                            let html = '<div class="list-group">';
                            response.clients.forEach(client => {
                                html += `
                                    <a href="#" class="list-group-item list-group-item-action client-item"
                                       data-code="${client.COD_CLIENTE}"
                                       data-name="${client.NOM_CLIENTE}"
                                       data-tel="${client.TEL_PRINCIPAL || ''}"
                                       data-tel-sec="${client.TEL_SECUNDARIO || ''}"
                                       data-tel-autre="${client.TEL_OTRO || ''}"
                                       data-type="${client.IND_PERSONA || ''}"
                                       data-date-naissance="${client.FEC_INGRESO || ''}"
                                       data-num-id="${client.NUM_ID || ''}"
                                       data-type-id="${client.COD_TIPO_ID || ''}"
                                       data-date-expiration="${client.FEC_VENCIM || ''}">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <strong>${client.COD_CLIENTE}</strong>
                                            <span>${client.NOM_CLIENTE}</span>
                                        </div>
                                        <div class="small text-muted">
                                            ${client.NUM_ID ? `ID: ${client.NUM_ID}` : ''}
                                            ${client.TEL_PRINCIPAL ? ` | Tél: ${client.TEL_PRINCIPAL}` : ''}
                                        </div>
                                    </a>`;
                            });
                            html += '</div>';
                            resultsContainer.html(html);
                        } else {
                            resultsContainer.html('<div class="alert alert-info">Aucun client trouvé</div>');
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erreur',
                            text: xhr.responseJSON?.message || 'Erreur lors de la recherche'
                        });
                    },
                    complete: function() {
                        loader.hide();
                    }
                });
            }, 500);
        });

        // Quand un client est sélectionné dans les résultats
        $(document).on('click', '.client-item', function(e) {
            e.preventDefault();
            const client = {
                code: $(this).data('code'),
                name: $(this).data('name'),
                tel: $(this).data('tel'),
                type: $(this).data('type'),
                dateNaissance: $(this).data('date-naissance'),
                numId: $(this).data('num-id'),
                typeId: $(this).data('type-id'),
                dateExpiration: $(this).data('date-expiration')
            };

            // Remplir les champs avec les données disponibles
            $('#clientSearch').val(client.code);
            $('#FullName').val(client.name);

            if (client.tel) {
                $('#Phone').val(client.tel);
            }

            if (client.type) {
                $('#PersonType').val(client.type);
            }

            if (client.dateNaissance) {
                $('#BirthDate').val(client.dateNaissance);
            }

            if (client.numId) {
                $('#IdNumber').val(client.numId);
            }

            if (client.typeId) {
                $('#IdType').val(client.typeId);
            }

            if (client.dateExpiration) {
                $('#ExpirationDate').val(client.dateExpiration);
            }
            $('#IdNumberType').val("NationalID");
            $('#IdNumberIssuerCountry').val("ML");

            $('#clientResults').empty();
        });

        $('#viewReportButton').on('click', function(e) {
            e.preventDefault();
            console.log('View Report button clicked');

            // Récupérer les données du formulaire
            var formData = {
                ReportName: 'CustomReport',
                FullName: $('#FullName').val(),
                DateOfBirth: $('#DateOfBirth').val(),
                IdNumber: $('#IdNumber').val(),
                IdNumberIssuerCountry: $('#IdNumberIssuerCountry').val(),
                IdNumberType: $('#IdNumberType').val(),
                InquiryReason: $('#InquiryReason').val(),
                InquiryReasonText: $('#InquiryReasonText').val() || '',
                CustomerCode: $('#CustomerCode').val() || ''
            };

            console.log('Form data:', formData);

            // Afficher un indicateur de chargement
            Swal.fire({
                title: 'Génération du rapport en cours...',
                text: 'Veuillez patienter...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // Appel AJAX
            $.ajax({
                url: '/get_individual_custom_report',
                method: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    console.log('Success response:', response);
                    Swal.close();

                    if (response.success) {
                        // Afficher le rapport dans un modal ou une nouvelle fenêtre
                        Swal.fire({
                            title: 'Rapport généré avec succès',
                            html: response.html_content,
                            width: '90%',
                            showCloseButton: true,
                            showConfirmButton: true,
                            confirmButtonText: 'Fermer'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Erreur',
                            text: response.message || 'Une erreur est survenue lors de la génération du rapport.'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    console.error('Status:', status);
                    console.error('Response:', xhr.responseText);

                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: 'Une erreur est survenue lors de la communication avec le serveur.'
                    });
                }
            });
        });
    });
</script>

@endsection