@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">
    <!-- DataTable with Buttons -->
    <div class="card">
        <div class="card-header pb-0 card-no-border position-relative">
            <h4 class="d-inline">Game Arcade 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="#create_arcade" style="margin-top: 10px; margin-right: 15px;">
                <i class="ri-add-line ri-16px me-sm-2"></i> Add Category
            </button>
        </div>

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

         </tbody>
        </table>
     </div>
   </div>
   </div>
   <div class="modal fade" id="create_arcade" 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 Arcade</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="add-class" action="{{ route('admin.storeArcade') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                     <label for="Class" class="form-label">Provider</label>
                    <select name="provider_code" id="provider_code" class="form-control" required>
                        <option value="">-- Pilih Provider --</option>
                        @foreach($providers as $provider)
                            <option value="{{ $provider->provider_code }}">{{ $provider->provider_name }}</option>
                        @endforeach
                    </select>
                    </div>
                    <div class="mb-3">
                        <label for="game_id" class="form-label">Games</label>
                        <select id="game_id" name="game_id" class="select2 form-select" data-allow-clear="true">
                            <option value="">-- Pilih Game --</option>
                            @foreach($games as $game)
                                <option value="{{ $game->id }}">{{ $game->game_name }} ({{ $game->provider->provider_code ?? 'No Provider' }})</option>
                            @endforeach
                        </select>
                    </div>
            </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 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() {
        $('#category_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.gamearcade') }}",
                type: "GET",
                dataType: "json",
            },
            columns: [
            { data: 'game_name', name: 'game_name' },
            { data: 'provider_name', name: 'provider_name' },
            { data: 'date', name: 'date' },
            { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        $('#add-class').on('submit', function(e) {
            e.preventDefault();

            $.ajax({
                url: $(this).attr('action'),
                type: $(this).attr('method'),
                data: $(this).serialize(),
                success: function(response) {
                    $('#create_arcade').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') {
                            $('#create_arcade').modal('hide');
                            $('#category_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 deleteArcade(ArcadeId) {
    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.deleteArcade', ':id') }}'.replace(':id', ArcadeId), // 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>
<script>

</script>
@endpush