@extends('layouts.base')

@section('title')
    Prévisualisation - Export Comptabilité
@endsection

@section('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        .badge-entree {
            background-color: {{ config('colors.lnb_green') }};
            color: white;
        }
        .badge-sortie {
            background-color: #dc3545;
            color: white;
        }
        .preview-table {
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow-x: auto;
        }
        .editable-field {
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 4px 8px;
            min-width: 120px;
        }
        .editable-field:focus {
            border-color: {{ config('colors.lnb_green') }};
            outline: none;
            box-shadow: 0 0 0 0.2rem rgba(0,117,84,.25);
        }
        .editable-field.required-error {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25);
        }
        .summary-section {
            background: linear-gradient(135deg, rgba(0,117,84,0.1) 0%, rgba(0,117,84,0.05) 100%);
            border: 1px solid {{ config('colors.lnb_green') }};
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .summary-section .alert {
            border: none !important;
            background: transparent !important;
        }
        
        /* Responsive styles */
        @media (max-width: 768px) {
            .card-header {
                flex-direction: column;
                gap: 10px;
            }
            
            .card-header h5 {
                text-align: center;
                margin-bottom: 10px;
            }
            
            .card-header .d-flex {
                flex-direction: column;
                width: 100%;
            }
            
            .card-header .btn {
                width: 100%;
                margin-bottom: 5px;
            }
            
            .summary-section {
                padding: 15px;
            }
            
            .preview-table {
                font-size: 12px;
            }
            
            .preview-table th,
            .preview-table td {
                padding: 8px 4px;
                white-space: nowrap;
            }
            
            .badge {
                font-size: 10px;
                padding: 4px 6px;
            }
            
            .editable-field {
                min-width: 80px;
                font-size: 12px;
                padding: 3px 6px;
            }
        }
        
        @media (max-width: 576px) {
            .preview-table {
                font-size: 11px;
            }
            
            .preview-table th,
            .preview-table td {
                padding: 6px 2px;
            }
            
            .badge {
                font-size: 9px;
                padding: 3px 5px;
            }
            
            .editable-field {
                min-width: 60px;
                font-size: 11px;
                padding: 2px 4px;
            }
            
            .summary-section {
                padding: 10px;
            }
            
            .card-header h5 {
                font-size: 16px;
            }
        }
        
        /* Table responsive wrapper */
        .table-responsive-wrapper {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        /* Hide less important columns on mobile */
        @media (max-width: 768px) {
            .hide-mobile {
                display: none;
            }
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="ph-light ph-eye me-2" style="color: {{ config('colors.lnb_green') }};"></i>
                    Prévisualisation - Export vers la Comptabilité
                </h5>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('gestion_operation_caisse.comptability.index') }}" class="btn btn-outline-secondary">
                        <i class="fa-solid fa-arrow-left"></i> Retour
                    </a>
                    <button type="button" id="send-operations" class="btn" style="background-color: {{ config('colors.lnb_green') }}; color: white; border-color: {{ config('colors.lnb_green') }};">
                        <i class="fa-solid fa-paper-plane"></i> Envoyer vers la Comptabilité
                    </button>
                </div>
            </div>
            
            <!-- Note d'information -->
            <div class="summary-section">
                <div class="alert mb-0" style="background-color: rgba(0,117,84,0.1); border-color: {{ config('colors.lnb_green') }}; color: {{ config('colors.lnb_green') }};">
                    <i class="fa-solid fa-info-circle me-2"></i>
                    <strong>Informations SYCOHADA :</strong> Veuillez renseigner les champs suivants avant l'envoi vers la comptabilité :
                    <ul class="mb-0 mt-2">
                        <li><strong>Numéro Comptable :</strong> Code du compte comptable (ex: 411000 pour Clients)</li>
                        <li><strong>Libellé Comptable :</strong> Description du compte (pré-rempli avec le motif, modifiable si nécessaire)</li>
                        <li><strong>Code Journal :</strong> Code du journal comptable (ex: VT pour Ventes, AC pour Achats)</li>
                    </ul>
                </div>
            </div>
            
            <!-- Tableau de prévisualisation -->
            <div class="card-body p-0">
                <div class="table-responsive-wrapper">
                    <div class="preview-table">
                        <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Date Opération</th>
                                <th>Type</th>
                                <th>Montant</th>
                                <th>Numéro Comptable <span class="text-danger">*</span></th>
                                <th>Libellé Comptable <span class="text-danger">*</span></th>
                                <th>Code Journal <span class="text-danger">*</span></th>
                                <th>Pièce Justificative</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($operations as $operation)
                            <tr data-operation-id="{{ $operation->id }}">
                                <td>{{ $operation->operation_date ? $operation->operation_date->format('d/m/Y H:i') : 'N/A' }}</td>
                                <td>
                                    @if($operation->type === 'entree')
                                        <span class="badge badge-entree">
                                            <i class="fa-solid fa-arrow-up"></i> Entrée
                                        </span>
                                    @else
                                        <span class="badge badge-sortie">
                                            <i class="fa-solid fa-arrow-down"></i> Sortie
                                        </span>
                                    @endif
                                </td>
                                <td>{{ number_format($operation->amount, 0, ',', ' ') }} F</td>
                                <td>
                                    <input type="text" class="editable-field" 
                                           placeholder="Ex: 411000 (Clients)"
                                           data-field="numero_comptable"
                                           data-operation-id="{{ $operation->id }}"
                                           required>
                                </td>
                                <td>
                                    <input type="text" class="editable-field" 
                                           placeholder="Ex: Vente de marchandises"
                                           value="{{ $operation->reason ?? '' }}"
                                           data-field="libelle_comptable"
                                           data-operation-id="{{ $operation->id }}"
                                           required>
                                </td>
                                <td>
                                    <input type="text" class="editable-field" 
                                           placeholder="Ex: VT (Ventes)"
                                           data-field="code_journal"
                                           data-operation-id="{{ $operation->id }}"
                                           required>
                                </td>
                                <td>
                                    <span class="text-muted">{{ $operation->external_reference ?? 'Non spécifiée' }}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                </div>
            </div>
            

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

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Sauvegarder les modifications en temps réel et validation
    $(document).on('change', '.editable-field', function() {
        const operationId = $(this).data('operation-id');
        const field = $(this).data('field');
        const value = $(this).val().trim();
        
        // Validation en temps réel
        if (value === '') {
            $(this).addClass('required-error');
        } else {
            $(this).removeClass('required-error');
        }
        
        // Ici on pourrait sauvegarder en session ou en cache temporaire
        console.log(`Sauvegarde: Opération ${operationId}, Champ ${field}, Valeur ${value}`);
    });
    
    // Validation lors de la saisie
    $(document).on('input', '.editable-field', function() {
        const value = $(this).val().trim();
        if (value === '') {
            $(this).addClass('required-error');
        } else {
            $(this).removeClass('required-error');
        }
    });
    
    // Envoi vers la comptabilité
    $('#send-operations').on('click', function() {
        // Vérifier que tous les champs obligatoires sont remplis
        let missingFields = [];
        $('tr[data-operation-id]').each(function() {
            const operationId = $(this).data('operation-id');
            const numeroComptable = $(this).find('[data-field="numero_comptable"]').val().trim();
            const libelleComptable = $(this).find('[data-field="libelle_comptable"]').val().trim();
            const codeJournal = $(this).find('[data-field="code_journal"]').val().trim();
            
            if (!numeroComptable) {
                missingFields.push(`Opération ${operationId}: Numéro Comptable manquant`);
            }
            if (!libelleComptable) {
                missingFields.push(`Opération ${operationId}: Libellé Comptable manquant`);
            }
            if (!codeJournal) {
                missingFields.push(`Opération ${operationId}: Code Journal manquant`);
            }
        });
        
        if (missingFields.length > 0) {
            // Mettre en évidence les champs vides
            $('.editable-field').each(function() {
                const value = $(this).val().trim();
                if (value === '') {
                    $(this).addClass('required-error');
                }
            });
            
            Swal.fire({
                title: 'Champs obligatoires manquants',
                text: 'Veuillez remplir tous les champs obligatoires (Numéro Comptable, Libellé Comptable, Code Journal) avant de continuer.',
                icon: 'warning',
                confirmButtonColor: '{{ config("colors.lnb_green") }}',
                confirmButtonText: 'OK'
            });
            return;
        }
        
        Swal.fire({
            title: 'Confirmer l\'envoi',
            text: 'Êtes-vous sûr de vouloir envoyer ces opérations vers la comptabilité ?',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '{{ config("colors.lnb_green") }}',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Oui, envoyer',
            cancelButtonText: 'Annuler'
        }).then((result) => {
            if (result.isConfirmed) {
                // Collecter les données modifiées
                const operationsData = [];
                const comptabilityData = {};
                $('tr[data-operation-id]').each(function() {
                    const operationId = $(this).data('operation-id');
                                const numeroComptable = $(this).find('[data-field="numero_comptable"]').val().trim();
            const libelleComptable = $(this).find('[data-field="libelle_comptable"]').val().trim();
            const codeJournal = $(this).find('[data-field="code_journal"]').val().trim();
                    
                    operationsData.push(operationId);
                    comptabilityData[operationId] = {
                        numero_comptable: numeroComptable,
                        libelle_comptable: libelleComptable,
                        code_journal: codeJournal
                    };
                });
                
                // Envoyer les données
                // Afficher un indicateur de chargement
                Swal.fire({
                    title: 'Envoi en cours...',
                    text: 'Veuillez patienter',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    willOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                $.ajax({
                    url: '{{ route("gestion_operation_caisse.comptability.send") }}',
                    type: 'POST',
                    data: {
                        operation_ids: operationsData,
                        comptability_data: comptabilityData
                    },
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.close(); // Fermer l'indicateur de chargement
                        
                        if (response.success) {
                            Swal.fire({
                                title: 'Succès',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            }).then(() => {
                                const indexUrl = '{{ route("gestion_operation_caisse.comptability.index") }}';
                                if (window.opener && !window.opener.closed) {
                                    try {
                                        window.opener.location.href = indexUrl;
                                    } catch (e) {
                                        // fallback si cross-origin
                                        window.opener.location.reload();
                                    }
                                    window.close();
                                } else {
                                    // si pas d'opener, rediriger dans cet onglet
                                    window.location.href = indexUrl;
                                }
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        Swal.close(); // Fermer l'indicateur de chargement
                        
                        Swal.fire({
                            title: 'Erreur',
                            text: 'Erreur lors de l\'envoi des opérations: ' + error,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            }
        });
    });
});
</script>
@endsection