@extends('admin.layouts.default')
@section('title', 'Payment Gateway')
@section('content')
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('paymentgateway-create'))
                <div class="d-flex align-items-center">
                    <input type="text" id="pageSearchInput" class="form-control me-2" placeholder="Search Pages" style="max-width: 250px;">

                    <button type="button" id="pageFilterButton" class="btn btn-primary">Filter</button>
                    <button type="button" id="refreshFilterButton" class="btn btn-secondary ms-2">Reset</button>
                </div>
            @endif
            <h1 class="page-title mb-0 text-primary"></h1>
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
                <div class="page-rightheader">
                    <div>
                        @if(auth()->user()->hasRole('Superadmin') || auth()->user()->can('paymentgateway-create'))
                            <a href="{{ route('paymentgateway-create') }}" class="btn btn-outline-primary me-1">
                                <i class="fa fa-plus"></i>
                                Add Payment Gateway
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="card ">
            <div class="card-header justify-content-between">
                <h3 class="card-title">
                    Payment Gateways
                </h3>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="website_data_table" class="table text-nowrap table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">S.no</th>
                                <th scope="col">Name</th>
                                <th scope="col">Status</th>
                                <th scope="col">action</th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>

<script>
    var isSuperAdmin = @json(auth()->user()->hasRole('Superadmin'));
    var canEditPaymentgateway = @json(auth()->user()->can('paymentgateway-edit'));
    var candeletePaymentgateway = @json(auth()->user()->can('paymentgateway-delete'));
</script>

<script>
    var baseUrl = "{{ url('/') }}";
</script>


<script>
    $(document).ready(function() {
        var table = $('#website_data_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: base_url + '/paymentgateway-list',
                data: function(d) {
                    d.page_type = $('#pageSearchInput').val();  
                }
            },	
            columns: [
                {
                    data: null, // Use null to generate the row number
                    name: 'row_number',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1; // Calculate the row number
                    }
                }, 
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'status',
                    name: 'status',
                    render: function(data) {
                        return data == 1 ?
                            '<button type="button" class="btn btn-success-light btn-wave waves-effect waves-light">Active</button>' :
                            '<button type="button" class="btn btn-danger-light btn-wave waves-effect waves-light">Inactive</button>';
                    }
                },
                {
                    data: null,
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var editButton = '';
                        var deleteButton = '';
                        
                        if (isSuperAdmin || canEditPaymentgateway) {
                            editButton = '<a href="' + baseUrl + '/paymentgateway/' + row.id + '/edit" class="btn btn-primary btn-sm mx-2">' +
                                '<i class="ri-edit-line"></i>' +
                                '</a>';
                        }
                        if (isSuperAdmin || candeletePaymentgateway) {
                            var deleteButton = '<button type="button" class="btn btn-danger btn-sm delete-button" data-id="' + row.id + '">' +
                                '<i class="ri-delete-bin-5-line">' +
                                '</button>';
                        }

                        return (editButton + deleteButton) || '';

                    }
                }
            ]
        });
        $('#add-mod').on('click', function() {
            clearErrors();
            clearForm();
            $('#page_id').val('');
            $('#submit-button').text('Save Changes');
            $('#exampleModalScrollable3').modal('show');
        });

        function clearForm() {
            $('#RoleForm')[0].reset();
        }

        function clearErrors() {
            $('#error-title').text('');
            $('#error-amount').text('');
            $('#error-type').text('');
        }
        
    });

    $('#website_data_table').on('click', '.permissions-button', function() {
        var url = $(this).data('url'); // Get the URL from the button's data attribute
        window.location.href = url; // Redirect to the URL
    });
</script>
<script>
    $('#website_data_table').on('click', '.delete-button', function(e) {
        e.preventDefault();

        var id = $(this).data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'No, cancel!'
        }).then((result) => {
            if (result.isConfirmed) {
                var url = base_url + '/paymentgateway-delete/' + id;

                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.fire('Success!', response.message, 'success');
                        $('#website_data_table').DataTable().ajax.reload();
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', 'Error deleting item.', 'error');
                    }
                });
            }
        });
    });

    $('#pageFilterButton').on('click', function() {
        $('#website_data_table').DataTable().ajax.reload();
    });

    // Reset the search filter when clicking the Reset button
    $('#refreshFilterButton').on('click', function() {
        $('#paperSearchInput').val(''); // Clear the input field
        $('#website_data_table').DataTable().ajax.reload(); // Reload DataTable without filter
    });
</script>
@endsection