@extends('layouts.admin')
@section('title', 'List Members')
@section('scss')
<link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
<style>
/* Your custom CSS styles */
.xray-badges {
    display: flex;
    flex-wrap: wrap;
}

.xray-badge {
    margin: 3px;
}

@media (max-width: 576px) {
    .xray-badge:nth-child(-n+3) {
        flex: 1 0 calc(33.3333% - 4px)
    }
}
</style>
@endsection
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header pb-0 card-no-border position-relative">
            @if ($providerName === 'chaos')
            <h4 class="d-inline">List Provider API Chaos</h4>
            @elseif ($providerName === 'silvergate')
            <h4 class="d-inline">List Provider API SilverGate</h4>
            @endif
        </div>
         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="provider_table">
         <thead>
           <tr>
             <th>Provider Slug</th>
             <th>Provider Code</th>
             <th>Provider Name</th>
             <th>Provider Type</th>
             <th>Provider Image</th>
             <th>Provider Status</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>

         </tbody>
        </table>
     </div>
   </div>
   </div>
@endsection
@push('scripts')
<script src="/assets/js/forms-selects.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
<script>
    $(document).ready(function() {
        $('#provider_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.providerlist') }}",
                type: "GET",
                dataType: "json",
            },
            columns: [
            { data: 'provider_slug', name: 'provider_slug' },
            { data: 'provider_code', name: 'provider_code' },
            { data: 'provider_name', name: 'provider_name' },
            { data: 'provider_type', name: 'provider_type' },
            { data: 'provider_image', name: 'provider_image' },
            { data: 'provider_status', name: 'provider_status' },
            { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            }
        });
    });
</script>
<script>
function providerdel(ProviderId) {
    Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route('admin.providerlist', ':id') }}'.replace(':id', ProviderId),
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    Swal.fire(
                        'Deleted!',
                        'Your filter has been deleted.',
                        'success'
                    ).then(() => {
                        location.reload();
                    });
                },
                error: function() {
                    Swal.fire(
                        'Error!',
                        'There was an issue deleting the filter.',
                        'error'
                    );
                }
            });
        }
    });
}
</script>
<script>
</script>
@endpush