@extends('layouts.admin')
@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">
            <h4 class="d-inline">Setting API Game</h4>
        </div>
            <div class="card-header pb-2 card-no-border position-relative">
            <div class="d-flex flex-wrap justify-content-center justify-content-md-end gap-2 mt-3">
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addApiModal">
                    <span class="iconify me-1" data-icon="mdi:plus-circle-outline" data-inline="false"></span>
                      Add API Game
                </button>
            </div>

        </div>
         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="apigame">
         <thead>
           <tr>
             <th>Provider Name</th>
             <th>API URL</th>
             <th>Agent Code</th>
             <th>Secret Key</th>
             <th>Status</th>
             <th>Action</th>
           </tr>
         </thead>
            <tbody>
            </tbody>
        </table>
     </div>
   </div>
   </div>

<div class="modal fade" id="addApiModal" tabindex="-1" aria-labelledby="addApiModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('admin.apigamestore') }}" method="POST" class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title" id="addApiModalLabel">Add New API Game</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Provider Name</label>
                    <input type="text" name="provider_name" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">API URL</label>
                    <input type="text" name="api_url" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">Agent Code</label>
                    <input type="text" name="agent_code" class="form-control">
                </div>
                <div class="mb-3">
                    <label class="form-label">Secret Key</label>
                    <input type="text" name="secret_key" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Add API</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="modalEditGame" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <form id="editGameForm" method="POST">
        @csrf
        <input type="hidden" name="id" id="edit-id">
        <div class="modal-header">
          <h5 class="modal-title">Edit API Game</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="mb-3">
            <label>Provider Name</label>
            <input type="text" name="provider_name" id="edit-provider-name" class="form-control" readonly>
            <P class="text-danger mt-2">Name Tidak Dapat Di Edit Kembali Akan Error</P>
          </div>
          <div class="mb-3">
            <label>API URL</label>
            <input type="text" name="api_url" id="edit-api-url" class="form-control" required>
          </div>
          <div class="mb-3">
            <label>Agent Code</label>
            <input type="text" name="agent_code" id="edit-agent-code" class="form-control">
          </div>
          <div class="mb-3">
            <label>Secret Key</label>
            <input type="text" name="secret_key" id="edit-secret-key" class="form-control">
          </div>
        </div>

        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Update</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        </div>
      </form>
    </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).on('change', '.active-switch', function () {
        $('.active-switch').not(this).prop('checked', false);
    });
</script>
    <script>
    $(document).ready(function() {
        var table = $('#apigame').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('admin.apigame') }}",
                type: "GET",
                dataType: "json",
            },
            columns: [
                { data: 'provider_name', name: 'provider_name' },
                { data: 'api_url', name: 'api_url' },
                { data: 'agent_code', name: 'agent_code' },
                { data: 'secret_key', name: 'email' },
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            },
            order: [[0, 'desc']],
        });
    });
</script>
<script>
function GameEdit(id) {
    $.get(`/app/admin/settings/apigame/${id}/edit`, function (data) {
        $('#edit-id').val(data.id);
        $('#edit-provider-name').val(data.provider_name);
        $('#edit-api-url').val(data.api_url);
        $('#edit-agent-code').val(data.agent_code);
        $('#edit-secret-key').val(data.secret_key);
        $('#edit-status').prop('checked', data.status == 1);

        $('#modalEditGame').modal('show');
    });
}
</script>
<script>
$('#editGameForm').on('submit', function(e) {
    e.preventDefault();

    let id = $('#edit-id').val();
    let formData = $(this).serialize();

    $.ajax({
        url: `/app/admin/settings/apigame/${id}`,
        method: 'POST',
        data: formData,
        success: function(response) {
            $('#modalEditGame').modal('hide');
            $('#apigame').DataTable().ajax.reload(null, false);

            Swal.fire('Updated!', 'API Game updated successfully.', 'success');
        },
        error: function(xhr) {
            console.error(xhr.responseText);
            Swal.fire('Error', 'Failed to update API Game.', 'error');
        }
    });
});
</script>
<script>
$(document).on('change', '.toggle-status', function () {
    let id = $(this).data('id');
    let isChecked = $(this).is(':checked');
    let status = isChecked ? 'Active' : 'Disabled';

    $.ajax({
        url: '/app/admin/settings/apigame/' + id + '/status',
        method: 'POST',
        data: {
            status: status,
            _token: '{{ csrf_token() }}'
        },
        success: function (response) {
            Swal.fire({
                title: 'Success',
                text: response.message,
                icon: 'success',
                timer: 1000,
                showConfirmButton: false,
                timerProgressBar: true
            }).then(() => {
                location.reload();
            });
        },
        error: function () {
            Swal.fire({
                title: 'Error',
                text: 'Failed to update status',
                icon: 'error',
                timer: 2000,
                showConfirmButton: false,
                timerProgressBar: true
            });
        }
    });
});
</script>
@endpush