@extends('user::layouts.backend-master')

@section('breadcrumb_title', $breadcrumbTitle)

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="https://cdn.datatables.net/2.3.2/css/dataTables.tailwindcss.css" rel="stylesheet">
@endpush

@section('content')

    <!-- Page Header -->
    <div class="flex justify-between items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{{ $pageTitle }}</h1>
            <p class="text-muted mb-0">{{ trans('payment::translate.View all payment transactions and their details') }}</p>
        </div>
        <div class="header-actions">
            <a href="{{ route('admin.payment-methods.index') }}" class="btn btn-primary btn-black">
                <i class="fas fa-arrow-left me-1"></i>{{ trans('payment::translate.Back to Payment Methods') }}
            </a>
        </div>
    </div>

    <div class="card">

        <div class="grid grid-cols-3 mb-5">
            <div class="col-span-2">
                <div class="grid grid-cols-4 gap-4">
                    <div class="mb-3 input-with-label">
                        <label for="status-filter">{{ trans('payment::translate.Status') }}</label>
                        <select class="form-select" id="status-filter">
                            <option value="">{{ trans('payment::translate.All Statuses') }}</option>
                            <option value="success">{{ trans('payment::translate.Success') }}</option>
                            <option value="failed">{{ trans('payment::translate.Failed') }}</option>
                            <option value="pending">{{ trans('payment::translate.Pending') }}</option>
                            <option value="cancelled">{{ trans('payment::translate.Cancelled') }}</option>
                        </select>
                    </div>
                    <div class="mb-3 input-with-label">
                        <label for="method-filter">{{ trans('payment::translate.Payment Method') }}</label>
                        <select class="form-select" id="method-filter">
                            <option value="">{{ trans('payment::translate.All Methods') }}</option>
                            <option value="PayPal">PayPal</option>
                            <option value="Stripe">Stripe</option>
                            <option value="Mollie">Mollie</option>
                            <option value="Payos">Payos</option>
                        </select>
                    </div>
                    <div class="mb-3 input-with-label">
                        <label for="date-from">{{ trans('payment::translate.Date From') }}</label>
                        <input type="date" id="date-from" class="!p-2.5">
                    </div>
                    <div class="mb-3 input-with-label">
                        <label for="date-to">{{ trans('payment::translate.Date To') }}</label>
                        <input type="date" id="date-to" class="!p-2.5">
                    </div>
                </div>
            </div>
            <div class="col-span-1 flex items-center justify-end gap-3">
                <button type="button" class="btn btn-primary" onclick="applyFilters()">
                    <i class="fas fa-filter me-1"></i>{{ trans('payment::translate.Apply Filters') }}
                </button>
                <button type="button" class="btn btn-primary !px-3 bg-[#FFEBEB] border-[#FFEBEB] text-error"
                    onclick="resetFilters()">
                    <i class="fas fa-times me-1"></i>{{ trans('payment::translate.Reset') }}
                </button>
            </div>
        </div>

        <!-- Transactions Table -->
        <x-backend::table-wrapper>
            <table id="transactions-table" class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Transaction ID') }}</th>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Payment Method') }}</th>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Amount') }}</th>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Status') }}</th>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Customer') }}</th>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Date') }}</th>
                        <th class="text-left whitespace-nowrap">{{ trans('payment::translate.Actions') }}</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </x-backend::table-wrapper>

    </div>

    <!-- Transaction Details Modal -->
    <div class="modal fade" id="transactionDetailsModal" tabindex="-1" aria-labelledby="transactionDetailsModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="transactionDetailsModalLabel">
                        {{ trans('payment::translate.Transaction Details') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="transaction-details-body">
                    <!-- Transaction details will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ trans('payment::translate.Close') }}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <!-- Load jQuery -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

    <!-- Load DataTables JS -->
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            // Initialize DataTable with server-side processing
            var table = $('#transactions-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.payment.transactions') }}',
                    data: function(d) {
                        d.status = $('#status-filter').val();
                        d.method = $('#method-filter').val();
                        d.date_from = $('#date-from').val();
                        d.date_to = $('#date-to').val();
                    }
                },
                columns: [{
                        data: 'transaction_id',
                        name: 'transaction_id'
                    },
                    {
                        data: 'payment_method',
                        name: 'payment_method',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'customer',
                        name: 'customer',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'date',
                        name: 'created_at'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [5, 'desc']
                ], // Sort by date column
                pageLength: 25,
                responsive: true,
                language: {
                    processing: '{{ trans('translate.Processing...') }}',
                    search: '{{ trans('translate.Search') }}:',
                    lengthMenu: 'Show _MENU_ entries',
                    info: '{{ trans('translate.Showing _START_ to _END_ of _TOTAL_ entries') }}',
                    infoEmpty: 'Showing 0 to 0 of 0 entries',
                    infoFiltered: '{{ trans('translate.(filtered from _MAX_ total entries)') }}',
                    zeroRecords: '{{ trans('translate.No matching records found') }}',
                    emptyTable: '{{ trans('translate.No data available in table') }}',
                    paginate: {
                        first: '{{ trans('translate.First') }}',
                        previous: '{{ trans('translate.Previous') }}',
                        next: '{{ trans('translate.Next') }}',
                        last: '{{ trans('translate.Last') }}'
                    }
                }
            });

            // Store table reference for global access
            window.transactionsTable = table;

            // View details button click
            $(document).on('click', '.view-details-btn', function() {
                const transactionId = $(this).data('id');
                loadTransactionDetails(transactionId);
            });
        });

        function applyFilters() {
            if (window.transactionsTable) {
                window.transactionsTable.draw();
                showNotification('{{ trans('translate.Filters applied successfully') }}', 'info');
            }
        }

        function resetFilters() {
            $('#status-filter').val('');
            $('#method-filter').val('');
            $('#date-from').val('');
            $('#date-to').val('');

            if (window.transactionsTable) {
                window.transactionsTable.draw();
                showNotification('{{ trans('translate.Filters reset successfully') }}', 'info');
            }
        }

        function refreshTransactions() {
            if (window.transactionsTable) {
                window.transactionsTable.ajax.reload();
                showNotification('{{ trans('translate.Transactions refreshed') }}', 'success');
            }
        }

        function loadTransactionDetails(transactionId) {
            // Mock transaction details - in real implementation, this would fetch from server
            const mockDetails = {
                'id': transactionId,
                'amount': '$145.50',
                'currency': 'USD',
                'method': 'Stripe',
                'status': 'Success',
                'module': 'test',
                'created_at': '2025-01-15 10:30:00',
                'payment_id': 'pi_1234567890',
                'description': 'Test Payment Transaction',
                'gateway_response': {
                    'transaction_id': 'pi_1234567890',
                    'status': 'succeeded',
                    'amount_received': 14550,
                    'currency': 'usd'
                }
            };

            const detailsHtml = `
        <div class="row">
            <div class="col-md-6">
                <h6>{{ trans('payment::translate.Basic Information') }}</h6>
                <table class="table table-sm">
                    <tr>
                        <td><strong>{{ trans('payment::translate.Transaction ID') }}:</strong></td>
                        <td><code>${mockDetails.id}</code></td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Amount') }}:</strong></td>
                        <td>${mockDetails.amount}</td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Currency') }}:</strong></td>
                        <td>${mockDetails.currency}</td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Payment Method') }}:</strong></td>
                        <td>${mockDetails.method}</td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Status') }}:</strong></td>
                        <td><span class="badge bg-success">${mockDetails.status}</span></td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Module') }}:</strong></td>
                        <td>${mockDetails.module}</td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Date') }}:</strong></td>
                        <td>${mockDetails.created_at}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <h6>{{ trans('payment::translate.Gateway Information') }}</h6>
                <table class="table table-sm">
                    <tr>
                        <td><strong>{{ trans('payment::translate.Gateway Transaction ID') }}:</strong></td>
                        <td><code>${mockDetails.payment_id}</code></td>
                    </tr>
                    <tr>
                        <td><strong>{{ trans('payment::translate.Description') }}:</strong></td>
                        <td>${mockDetails.description}</td>
                    </tr>
                </table>

                <h6>{{ trans('payment::translate.Gateway Response') }}</h6>
                <pre class="bg-light p-2 rounded"><code>${JSON.stringify(mockDetails.gateway_response, null, 2)}</code></pre>
            </div>
        </div>
    `;

            $('#transaction-details-body').html(detailsHtml);
            $('#transactionDetailsModal').modal('show');
        }

        function showNotification(message, type) {
            const alertClass = type === 'success' ? 'alert-success' : (type === 'info' ? 'alert-info' : 'alert-danger');
            const alertDiv = $(`<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>`);

            $('.container-fluid').prepend(alertDiv);

            setTimeout(() => {
                alertDiv.alert('close');
            }, 3000);
        }
    </script>
@endpush