@extends('admin.layout')
@section('title','Dernières transactions')
@section('content')
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Include SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <!-- CSRF Token setup for Laravel -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
       <!-- [ Main Content ] start -->
       <div class="col-6">


        <div class="card">
                    <div class="card-header">
                        <h5>Dernières transactions</h5>
                    </div>
                    <div class="card-body">
                <div class="col-md-12">
                        <form id="transactionForm">
                            @csrf
                            <div class="form-group">
                            <label for="alias">Alias:</label>
                            <input type="text" id="alias" name="alias" class="form-control" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Obtenir les dernières transactions</button>
                        </form>
                </div>
                <!-- [ Main Content ] end -->
            </div>
        </div>
    </div>

    <!-- Form to submit the alias -->


    <script>
        $(document).ready(function() {
            // Handle form submission using AJAX
            $('#transactionForm').submit(function(e) {
                e.preventDefault();

                // Get the alias value from the form
                var alias = $('#alias').val();

                // Make an AJAX POST request to the server
                $.ajax({
                    url: "{{asset('last-transactions')}}", // Route to handle the form submission
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'), // Send CSRF token
                        alias: alias
                    },
                    success: function(response) {
                        // If transactions are found
                        if (response.transactions.length > 0) {
                            // Create an HTML table for transactions
                            var table = '<table border="1" style="width:100%; text-align:left;">';
                            table += '<tr><th>Orange ID</th><th>Bank ID</th><th>Date/Time</th><th>Type</th><th>Amount</th></tr>';

                            // Loop through transactions to populate the table
                            response.transactions.forEach(function(transaction) {
                                table += '<tr>' +
                                    '<td>' + transaction.orangeID + '</td>' +
                                    '<td>' + transaction.bankID + '</td>' +
                                    '<td>' + transaction.dateTime + '</td>' +
                                    '<td>' + transaction.type + '</td>' +
                                    '<td>' + transaction.amount + '</td>' +
                                    '</tr>';
                            });

                            table += '</table>';

                            // Show the result in SweetAlert
                            Swal.fire({
                                title: 'Last Transactions',
                                html: table + '<br><button id="printButton" class="swal2-confirm swal2-styled"><i class="fas fa-print"><i/></button>',
                                showConfirmButton: false,
                                didOpen: () => {
                                    // Add event listener to the Print button
                                    document.getElementById('printButton').addEventListener('click', function() {
                                        var newWindow = window.open('', '', 'width=800,height=600');
                                        newWindow.document.write('<html><head><title>Print Transactions</title></head><body>');
                                        newWindow.document.write('<h1>Last Transactions</h1>');
                                        newWindow.document.write(table);
                                        newWindow.document.write('</body></html>');
                                        newWindow.document.close();
                                        newWindow.print();
                                    });
                                }
                            });
                        } else {
                            // No transactions found
                            Swal.fire({
                                title: 'Aucune transaction',
                                text: "Aucune transaction n'a été trouvée pour l'alias fourni.",
                                icon: 'info',
                                confirmButtonText: 'OK'
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Display an error message if the request fails
                        Swal.fire({
                            title: 'Error',
                            text: 'Impossible de récupérer les transactions. Veuillez réessayer ultérieurement.',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });
        });
    </script>

@endsection
