@extends('layouts.admin')
@section('title', 'List Members')
@section('scss')
<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">
    <!-- DataTable with Buttons -->
    <div class="card">
        <div class="card-header pb-0 card-no-border position-relative">
            <h4 class="d-inline">Game Filter Category</h4>
            <button type="button" class="btn btn-primary btn-sm position-absolute top-50 end-0 translate-middle-y" data-bs-toggle="modal" data-bs-target="#CreateFilter" style="margin-top: 10px; margin-right: 15px;">
                <i class="ri-add-line ri-16px me-sm-2"></i> Add Filter
            </button>
        </div>

         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="filter_table">
         <thead>
           <tr>
             <th>Provider Name</th>
             <th>Provider Code</th>
             <th>Filter Name</th>
             <th>Create At</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>

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

   <div class="modal fade" id="CreateFilter" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Add Filter</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="add-filter" action="{{ route('admin.storeFilter') }}" method="POST">
                    @csrf
                    <label for="sender" class="form-label">Filter Name</label>
                    <input type="text" name="filter_name" class="form-control" id="filter_name" required>
                    <p class="text-small text-danger">*(contoh: slot, card, fishing)</p>
                    <select name="pro_id" id="pro_id" class="form-control" required>
                        <option value="">-- Pilih Provider --</option>
                        @foreach($providers as $provider)
                            <option value="{{ $provider->id }}">{{ $provider->provider_name }}</option>
                        @endforeach
                    </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" name="submit" class="btn btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('#filter_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.gamefilter') }}",
                type: "GET",
                dataType: "json",
            },
            columns: [
            { data: 'provider_name', name: 'provider_name' },
            { data: 'provider_code', name: 'provider_code' },
            { data: 'filter_name', name: 'filter_name' },
            { data: 'date', name: 'date' },
            { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#add-filter').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: $(this).serialize(),
                success: function(response) {
                    $('#CreateFilter').modal('hide');
                    Swal.fire({
                        title: response.status === 'success' ? 'Success!' : 'Error!',
                        text: response.message,
                        icon: response.status === 'success' ? 'success' : 'error',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary waves-effect waves-light'
                        },
                        buttonsStyling: false
                    }).then((result) => {
                        if (result.isConfirmed && response.status === 'success') {
                            $('#CreateFilter').modal('hide');
                            $('#filter_table').DataTable().ajax.reload();
                        }
                    });
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        title: 'Error!',
                        text: 'An unexpected error occurred.',
                        icon: 'error',
                        confirmButtonText: 'Ok',
                        customClass: {
                            confirmButton: 'btn btn-primary waves-effect waves-light'
                        },
                        buttonsStyling: false
                    });
                }
            });
        });
    });
</script>
<script>
function deleteFilter(filterId) {
    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) {
            // Make the DELETE request via AJAX
            $.ajax({
                url: '{{ route('admin.deleteFilter', ':id') }}'.replace(':id', filterId), // Dynamically replace ':id' with the actual filter ID
                method: 'DELETE',  // Send DELETE request
                data: {
                    _token: '{{ csrf_token() }}'  // Add CSRF token for security
                },
                success: function(response) {
                    Swal.fire(
                        'Deleted!',
                        'Your filter has been deleted.',
                        'success'
                    ).then(() => {
                        location.reload();  // Reload the page after successful deletion
                    });
                },
                error: function() {
                    Swal.fire(
                        'Error!',
                        'There was an issue deleting the filter.',
                        'error'
                    );
                }
            });
        }
    });
}
</script>
@endpush