@extends('layouts.theme1')

@section('title', 'Gestion des Portefeuilles')

@section('content')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h4 class="card-title mb-0">Liste des portefeuilles</h4>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger">
                            {{ session('error') }}
                        </div>
                    @endif

                    <div class="table-responsive">
                        <table id="wallets-table" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>Utilisateur</th>
                                    <th>Solde</th>
                                    <th>Dernière mise à jour</th>
                                    <th>Statut</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

         <!-- Modal d'ajout de fonds (Ajustement) -->
    <div class="modal fade" id="adjustmentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-plus-circle me-2"></i>Ajouter des fonds
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <form id="adjustmentForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="adjustWalletId" name="walletId">
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Utilisateur</label>
                            <div class="p-2 bg-light rounded" id="adjustUserName"></div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Type d'opération</label>
                            <select class="form-select" name="type" required>
                                <option value="deposit" selected>Dépôt (+)</option>
                                <option value="withdrawal">Retrait (-)</option>
                            </select>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Montant <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control" name="amount" min="100" step="100" required>
                                <span class="input-group-text">FCFA</span>
                            </div>
                            <small class="text-muted">Minimum 100 FCFA</small>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Référence (optionnel)</label>
                            <input type="text" class="form-control" name="reference" placeholder="Ex: OP-2024-001">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Motif</label>
                            <textarea class="form-control" name="reason" rows="2" placeholder="Raison de l'opération..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Annuler
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-check me-1"></i>Confirmer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal de remboursement -->
    <div class="modal fade" id="refundModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title">
                        <i class="fas fa-undo me-2"></i>Remboursement
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="refundForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="refundWalletId" name="walletId">
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Utilisateur</label>
                            <div class="p-2 bg-light rounded" id="refundUserName"></div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Montant à rembourser <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="number" class="form-control" name="amount" min="100" step="100" required>
                                <span class="input-group-text">FCFA</span>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Référence <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="reference" placeholder="Ex: TKT-2024-001" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-bold">Raison du remboursement <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="reason" rows="3" placeholder="Expliquez la raison du remboursement..." required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Annuler
                        </button>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-undo me-1"></i>Rembourser
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Scripts --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>


    <script>
        $(document).ready(function() {
            // Configuration CSRF pour toutes les requêtes AJAX
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialisation de DataTable
            var table = $('#wallets-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("wallets.index") }}',
                columns: [
                    { data: 'user_info', name: 'user_info' },
                    { data: 'balance', name: 'balance' },
                    { data: 'updatedAt', name: 'updatedAt', defaultContent: '-' },
                    { data: 'status', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/French.json"
                },
                order: [[1, 'desc']],
                drawCallback: function(settings) {
                    var api = this.api();
                    var total = api.rows().count();
                    $('#total-wallets').text(total);
                }
            });

            // Gestion de l'ajout de fonds / ajustement
            $('#adjustmentForm').submit(function(e) {
                e.preventDefault();
                
                var formData = $(this).serialize();
                var $submitBtn = $(this).find('button[type="submit"]');
                $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Traitement...');
                
                $.ajax({
                    url: '{{ route("wallets.adjust") }}',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#adjustmentModal').modal('hide');
                        table.ajax.reload(null, false);
                        showNotification('success', response.message || 'Opération effectuée avec succès');
                    },
                    error: function(xhr) {
                        var errorMsg = 'Erreur lors de l\'opération';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        showNotification('danger', errorMsg);
                    },
                    complete: function() {
                        $submitBtn.prop('disabled', false).html('<i class="fas fa-check me-1"></i>Confirmer');
                    }
                });
            });

            // Gestion du remboursement
            $('#refundForm').submit(function(e) {
                e.preventDefault();
                
                var formData = $(this).serialize();
                var $submitBtn = $(this).find('button[type="submit"]');
                $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Traitement...');
                
                $.ajax({
                    url: '{{ route("wallets.refund") }}',
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#refundModal').modal('hide');
                        table.ajax.reload(null, false);
                        showNotification('success', response.message || 'Remboursement effectué avec succès');
                    },
                    error: function(xhr) {
                        var errorMsg = 'Erreur lors du remboursement';
                        if (xhr.responseJSON && xhr.responseJSON.error) {
                            errorMsg = xhr.responseJSON.error;
                        }
                        showNotification('danger', errorMsg);
                    },
                    complete: function() {
                        $submitBtn.prop('disabled', false).html('<i class="fas fa-undo me-1"></i>Rembourser');
                    }
                });
            });

            // Fonction pour afficher les notifications
            function showNotification(type, message) {
                var alertHtml = '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    '<i class="fas fa-' + (type === 'success' ? 'check-circle' : 'exclamation-circle') + ' me-2"></i>' +
                    message +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>' +
                    '</div>';
                
                $('.card-body').prepend(alertHtml);
                
                setTimeout(function() {
                    $('.alert').fadeOut('slow', function() {
                        $(this).remove();
                    });
                }, 5000);
            }
        });

        // Fonctions pour ouvrir les modals
        function openAdjustmentModal(walletId, userName) {
            $('#adjustWalletId').val(walletId);
            $('#adjustUserName').text(userName);
            $('#adjustmentForm')[0].reset();
            $('#adjustmentModal').modal('show');
        }

        function openRefundModal(walletId, userName) {
            $('#refundWalletId').val(walletId);
            $('#refundUserName').text(userName);
            $('#refundForm')[0].reset();
            $('#refundModal').modal('show');
        }
    </script>
@endsection