<?php $__env->startSection('title','Transaction Status Inquiry'); ?>
<?php $__env->startSection('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="<?php echo e(csrf_token()); ?>">
       <!-- [ Main Content ] start -->
       <div class="col-6">


        <div class="card">
                    <div class="card-header">
                        <h5>Demande de statut de transaction</h5>
                    </div>
                    <div class="card-body">
                <div class="col-md-12">
                        <form id="transactionStatusForm">
                            <?php echo csrf_field(); ?>
                            <div class="form-group">
                                <label for="alias">typeID:</label>
                                <select name="typeID" class="form-control" id="typeID">
                                    <option value="BANK_ID">BANK_ID</option>
                                    <option value="BANK_ID">ORANGE_ID</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="alias">ID:</label>
                                <input type="text" id="ID" name="ID" class="form-control" required>
                            </div>

                            <button type="submit" class="btn btn-primary">Check Status</button>
                        </form>
                </div>
                <!-- [ Main Content ] end -->
            </div>
        </div>
    </div>

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


    <!-- Hidden div to hold the printable content -->
    <div id="printableArea" style="display:none;"></div>

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

                // Get the typeID and ID values from the form
                var typeID = $('#typeID').val();
                var ID = $('#ID').val();

                // Make an AJAX POST request to the server
                $.ajax({
                    url: "<?php echo e(asset('transaction-status-inquiry')); ?>", // Route to handle the form submission
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'), // Send CSRF token
                        typeID: typeID,
                        ID: ID
                    },
                    success: function(response) {
                        // Create an HTML table for detailed statuses
                        var table = '<table border="1" style="width:100%; text-align:left;">';
                        table += '<tr><th>Step</th><th>Status</th></tr>';

                        // Loop through detailedStatuses to populate the table
                        response.detailedStatuses.forEach(function(status) {
                            table += '<tr>' +
                                '<td>' + status.step + '</td>' +
                                '<td>' + status.status + '</td>' +
                                '</tr>';
                        });

                        table += '</table>';

                        // Create the HTML content for printing
                        var printableContent = '<strong>Return Code:</strong> ' + response.returnCode +
                                               '<br><strong>Transaction:</strong>' +
                                               '<br>Orange ID: ' + response.transaction.orangeID +
                                               '<br>Bank ID: ' + response.transaction.bankID +
                                               '<br>Date/Time: ' + response.transaction.dateTime +
                                               '<br>Type: ' + response.transaction.type +
                                               '<br>Amount: ' + response.transaction.amount +
                                               '<br><br><strong>Status:</strong> ' + response.status +
                                               '<br><br><strong>Detailed Statuses:</strong><br>' + table;

                        // Place the printable content in a hidden div for printing
                        $('#printableArea').html(printableContent);

                        // Show the result in SweetAlert with a print button
                        Swal.fire({
                            title: 'Transaction Status',
                            html: printableContent +
                                  '<br><br><button id="printButton" class="swal2-confirm swal2-styled"><i class="fas fa-print"></i></button>',
                            showConfirmButton: false,
                        });

                        // Add event listener for the print button
                        $('#printButton').click(function() {
                            printDiv('printableArea');
                        });
                    },
                    error: function(xhr, status, error) {
                        // Display an error message if the request fails
                        Swal.fire({
                            title: 'Error',
                            text: "Impossible d'obtenir le statut de la transaction. Veuillez réessayer plus tard.",
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });
        });

        // Function to print the content of a specific div
        function printDiv(divId) {
            var content = document.getElementById(divId).innerHTML;
            var myWindow = window.open('', 'Print', 'height=600,width=800');
            myWindow.document.write('<html><head><title>Print Transaction Status</title>');
            myWindow.document.write('<style>table {border-collapse: collapse; width: 100%;} table, th, td {border: 1px solid black; padding: 8px;} </style>'); // Optional styling
            myWindow.document.write('</head><body>');
            myWindow.document.write(content);
            myWindow.document.write('</body></html>');
            myWindow.document.close();
            myWindow.focus();
            myWindow.print();
            myWindow.close();
        }
    </script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\api_web_orange_caece\resources\views/status/transaction_status.blade.php ENDPATH**/ ?>