@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">
@endpush

@section('content')
    <div class="card mt-4">
        <div class="flex justify-between items-center gap-3 mb-5">
            <div>
                <h1>{{ $pageTitle }}</h1>
                <p class="text-gray-600 mb-0">{{ trans('payment::translate.Manage payment methods and gateways') }}</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('admin.payment-methods.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> {{ trans('payment::translate.Add Payment Method') }}
                </a>
                <button type="button" class="btn btn-primary btn-black" onclick="initModal('testPaymentModal').showModal()">
                    <i class="fas fa-test-tube"></i> {{ trans('payment::translate.Test Payment') }}
                </button>
                <button onclick="refreshTable()"
                    class="btn-primary justify-center bg-[#E3F1E9] border-[#E3F1E9] text-success">
                    <svg fill="#000000" height="20px" width="20px" version="1.1" id="Capa_1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                        viewBox="0 0 51.807 51.807" xml:space="preserve">
                        <g>
                            <g>
                                <path
                                    d="M48.881,24.904c-0.553,0-1,0.447-1,1c0,12.131-9.869,22-22,22c-8.611,0-16.304-4.944-19.919-12.677l5.194,2.312
       c0.506,0.229,1.097-0.002,1.319-0.507c0.225-0.504-0.002-1.095-0.507-1.319L4.66,32.458c-0.503-0.228-1.096,0.002-1.319,0.507
       l-3.254,7.309c-0.225,0.504,0.002,1.095,0.507,1.319c0.132,0.06,0.269,0.087,0.405,0.087c0.384,0,0.749-0.221,0.914-0.594
       l2.235-5.02c3.942,8.44,12.336,13.837,21.732,13.837c13.233,0,24-10.767,24-24C49.881,25.351,49.433,24.904,48.881,24.904z" />
                                <path d="M51.214,10.172c-0.503-0.227-1.096,0.002-1.319,0.507l-2.266,5.089C43.693,7.306,35.305,1.904,25.881,1.904
       c-13.233,0-24,10.767-24,24c0,0.553,0.447,1,1,1s1-0.447,1-1c0-12.131,9.869-22,22-22c8.6,0,16.26,4.906,19.888,12.601
       l-5.115-2.278c-0.507-0.229-1.097,0.002-1.32,0.506c-0.225,0.505,0.002,1.096,0.506,1.32l7.308,3.254
       c0.13,0.058,0.269,0.087,0.407,0.087c0.121,0,0.243-0.022,0.358-0.066c0.248-0.095,0.447-0.284,0.555-0.527l3.254-7.309
       C51.945,10.988,51.719,10.397,51.214,10.172z" />
                                <path d="M35.881,25.904c0-5.514-4.486-10-10-10s-10,4.486-10,10s4.486,10,10,10S35.881,31.417,35.881,25.904z M17.881,25.904
       c0-4.411,3.589-8,8-8s8,3.589,8,8s-3.589,8-8,8S17.881,30.315,17.881,25.904z" />
                                <path d="M26.591,32.614c0.19-0.19,0.29-0.44,0.29-0.71c0-0.13-0.03-0.26-0.08-0.38s-0.12-0.23-0.21-0.33
       c-0.24-0.23-0.58-0.34-0.91-0.271c-0.06,0.011-0.12,0.03-0.18,0.06c-0.06,0.02-0.12,0.05-0.181,0.09
       c-0.05,0.03-0.1,0.08-0.149,0.12c-0.09,0.1-0.16,0.21-0.21,0.33s-0.08,0.25-0.08,0.38c0,0.27,0.1,0.52,0.29,0.71
       c0.19,0.189,0.44,0.29,0.71,0.29C26.15,32.904,26.4,32.803,26.591,32.614z" />
                                <path
                                    d="M25.881,29.904c0.553,0,1-0.447,1-1v-8c0-0.553-0.447-1-1-1s-1,0.447-1,1v8C24.881,29.456,25.328,29.904,25.881,29.904z" />
                            </g>
                        </g>
                    </svg>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="payment-methods-table">
                <thead>
                    <tr>
                        <th>{{ trans('payment::translate.Name') }}</th>
                        <th>{{ trans('payment::translate.Driver') }}</th>
                        <th>{{ trans('payment::translate.Status') }}</th>
                        <th>{{ trans('payment::translate.Mode') }}</th>
                        <th>{{ trans('payment::translate.Description') }}</th>
                        <th>{{ trans('payment::translate.Actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    <!-- Test Payment Modal -->
    <div id="testPaymentModal"
        class="modal-overlay !hidden opacity-0 transition-opacity duration-300 w-screen h-screen bg-black/30 flex justify-center items-center fixed top-0 left-0 z-50">
        <div
            class="modal-content w-full max-w-[500px] h-fit max-h-[90vh] bg-white rounded-2xl px-9 py-16 overflow-y-auto relative">
            <!-- Close Button -->
            <button
                class="modal-close size-10 rounded-lg bg-gray hover:bg-error text-headline hover:text-white flex justify-center items-center absolute top-4 right-4 transition-all duration-300">
                <!-- SVG icon -->
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                    <path d="M16.9531 7.05029L7.05363 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                    <path d="M7.05078 7.05029L16.9503 16.9498" stroke="currentColor" stroke-width="1.5"
                        stroke-linecap="round" />
                </svg>
            </button>

            <form id="test-payment-form" action="{{ route('payment.purchase', ['test']) }}" method="POST">
                @csrf
                <div>
                    <h2>{{ trans('payment::translate.Test Payment') }}</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div>
                    <div id="payment-container">
                        <div class="mb-3 input-with-label">
                            <label for="payment_method"
                                class="form-label">{{ trans('payment::translate.Payment Method') }}</label>
                            <select class="form-select" name="method" id="payment_method" required>
                                <option value="">{{ trans('payment::translate.Select a payment method') }}
                                </option>
                                @foreach ($activePaymentMethods as $driver => $name)
                                    <option value="{{ $driver }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3 input-with-label">
                            <label for="payment_amount">{{ trans('payment::translate.Amount') }}</label>
                            <input type="number" name="amount" id="payment_amount" value="10" min="1"
                                step="0.01" required>
                        </div>

                        <div class="mb-3 input-with-label">
                            <label for="payment_currency">{{ trans('payment::translate.Currency') }}</label>
                            <select class="form-select" name="currency" id="payment_currency">
                                <option value="USD">USD</option>
                                <option value="EUR">EUR</option>
                                <option value="GBP">GBP</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between mt-8 gap-4">
                    <div
                        class="btn-primary modal-ok cursor-pointer bg-error/5 border-error/5 text-headline w-full max-w-[150px]">
                        {{ trans('payment::translate.Close') }}
                    </div>
                    <button type="submit"
                        class="btn btn-primary">{{ trans('payment::translate.Send Payment Request') }}</button>
                </div>
            </form>


        </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 enhanced options
            var table = $('#payment-methods-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: '{{ route('admin.payment-methods.index') }}',
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'driver_name',
                        name: 'driver'
                    },
                    {
                        data: 'status',
                        name: 'active',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'sandbox',
                        name: 'sandbox',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'asc']
                ],
                language: {
                    processing: '<div class="flex items-center"><div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 mr-2"></div>{{ trans('translate.Processing') }}...</div>',
                    search: '{{ trans('translate.Search') }}:',
                    lengthMenu: '{{ trans('translate.Show _MENU_ entries') }}',
                    info: '{{ trans('translate.Showing _START_ to _END_ of _TOTAL_ entries') }}',
                    infoEmpty: '{{ trans('translate.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 payment methods configured yet. Click Add Payment Method to get started.') }}',
                    paginate: {
                        first: '{{ trans('translate.First') }}',
                        previous: '{{ trans('translate.Previous') }}',
                        next: '{{ trans('translate.Next') }}',
                        last: '{{ trans('translate.Last') }}'
                    }
                }
            });

            // Store table reference globally
            window.paymentMethodsTable = table;

            // Handle delete button click
            $(document).on('click', '.delete-btn', function() {
                const id = $(this).data('id');

                Swal.fire({
                    title: "{{ trans('payment::translate.Are you sure to delete?') }}",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: `{{ route('admin.payment-methods.index') }}/${id}`,
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                } else {
                                    toastr.error(response.message ||
                                        "{{ trans('payment::translate.Something went wrong') }}"
                                    );
                                }
                                table.draw();
                            },
                            error: function(xhr) {
                                let message =
                                    "{{ trans('payment::translate.Something went wrong') }}";
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    message = xhr.responseJSON.message;
                                }
                                toastr.error(message);
                            }
                        });
                    }
                });
            });

            // Handle test payment form
            $('#test-payment-form').on('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(this);
                const submitBtn = $(this).find('button[type="submit"]');

                submitBtn.prop('disabled', true).text("{{ trans('payment::translate.Processing') }}...");

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (response.success) {
                            if (response.type === 'redirect') {
                                window.open(response.redirect, '_blank');
                            } else if (response.type === 'embed') {
                                window.open(response.embedUrl, '_blank');
                            }
                            toastr.success(response.message);
                            $('#testPaymentModal').modal('hide');
                        } else {
                            toastr.error(response.message ||
                                "{{ trans('payment::translate.Something went wrong') }}");
                        }
                    },
                    error: function(xhr) {
                        let message = "{{ trans('payment::translate.Something went wrong') }}";
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }
                        toastr.error(message);
                    },
                    complete: function() {
                        submitBtn.prop('disabled', false).text(
                            "{{ trans('payment::translate.Send Payment Request') }}");
                    }
                });
            });
        });

        function refreshTable() {
            if (window.paymentMethodsTable) {
                window.paymentMethodsTable.ajax.reload(function() {
                    toastr.success('{{ trans('translate.Table refreshed successfully') }}');
                });
            }
        }
    </script>
@endpush