@extends('layouts.admin')
@section('title', 'List Promotor Management')
@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 p-3">
        <div class="card-header pb-2 card-no-border position-relative">
            <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="#addpromotor" style="margin-top: 10px; margin-right: 15px;">
                <i class="ri-user-add-line"></i> Add Promotor
            </button>
        </div>
        <h4 class="d-inline mb-0 ms-3">Data Promotor</h4>
         <div class="card-datatable table-responsive pt-0">
         <table class="table table-bordered" id="member_table">
         <thead>
           <tr>
             <th>Join Date</th>
             <th>Username</th>
             <th>User Email</th>
             <th>Phone</th>
             <th>Roles</th>
             <th>Status</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>

         </tbody>
        </table>
     </div>
    </div>
  </div>
  <!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Promotor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editUserId">
                    <div class="mb-3">
                        <label for="editUsername" class="form-label">Username</label>
                        <input type="text" class="form-control" id="editUsername">
                    </div>
                    <div class="mb-3">
                        <label for="editEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="editEmail">
                    </div>
                    <div class="mb-3">
                        <label for="editPhone" class="form-label">Mobile Phone</label>
                        <input type="text" class="form-control" id="editPhone">
                    </div>
                    <div class="mb-3">
                        <label for="editPassword" class="form-label">Password</label>
                        <input type="password" class="form-control" name="password" id="editPassword">
                        <p>*Kosongkan Password Jika Tidak Ingin Ganti.</p>
                    </div>
                    <div class="mb-3 d-none">
                        <label for="editLevel" class="form-label">Level</label>
                        <select class="form-control" id="editLevel">
                            <option value="new player">New Player</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="editStatus" class="form-label">Status</label>
                        <select class="form-control" id="editStatus">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                            <option value="suspended">Suspended</option>
                            <option value="banned">Banned</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="updateUser()">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal Add Promotor -->
<div class="modal fade" id="addpromotor" tabindex="-1" aria-labelledby="addpromotorLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form id="addPromotorForm" action="{{ route('promotor.add.store') }}" method="POST">
        @csrf
        <div class="modal-header">
          <h5 class="modal-title" id="addpromotorLabel"><i class="ri-user-add-line"></i> Tambah Promotor</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" name="username" id="username" required>
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email (Opsional)</label>
            <input type="email" class="form-control" name="email" id="email">
          </div>
          <div class="mb-3">
            <label for="mobile_no" class="form-label">Nomor HP</label>
            <input type="text" class="form-control" name="mobile_no" id="mobile_no" required>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password Default (12345678)</label>
            <input type="password" class="form-control" name="password" id="password" required value="12345678">
          </div>
          <div class="mb-3">
            <label for="role" class="form-label">Role</label>
            <select class="form-select" name="role" id="role" required>
              <option value="operator" selected>Promotor (CS)</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Simpan</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</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).ready(function() {
        var table = $('#member_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('promotor.index') }}",
                type: "GET",
                data: function(d) {
                    d.start_date = $('#start_date').val();
                    d.end_date = $('#end_date').val();
                    d.status = $('#status').val();
                },
                dataType: "json",
            },
            columns: [
                { data: 'joindate', name: 'joindate' },
                { data: 'username', name: 'username' },
                { data: 'email', name: 'email' },
                { data: 'phone', name: 'phone' },
                { data: 'role', name: 'role' },
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action' },
            ],
            language: {
                emptyTable: "No data available in table",
                loadingRecords: "Loading..."
            },
            order: [[0, 'desc']],
        });

        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            table.ajax.reload();
        });
    });
</script>
<script>
function showEditModal(id, username, email, phone, level, status) {
    $('#editUserId').val(id);
    $('#editUsername').val(username);
    $('#editEmail').val(email);
    $('#editPhone').val(phone);
    $('#editLevel').val(level.trim().toLowerCase()).change();
    $('#editStatus').val(status.trim().toLowerCase()).change();

    $('#editModal').modal('show');
}

function updateUser() {
    let userId = $('#editUserId').val();
    let username = $('#editUsername').val();
    let email = $('#editEmail').val();
    let phone = $('#editPhone').val();
    let password = $('#editPassword').val();
    let level_status = $('#editLevel').val().trim().toLowerCase();
    let status = $('#editStatus').val().trim().toLowerCase();

    $.ajax({
        url: "{{ route('member.update') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            id: userId,
            username: username,
            email: email,
            phone: phone,
            password: password,
            level: level_status,
            status: status
        },
        success: function(response) {
            $('#editModal').modal('hide');
            Swal.fire("Success", "User updated successfully!", "success");
            $('#member_table').DataTable().ajax.reload();
        },
        error: function(xhr) {
            Swal.fire("Error", "Failed to update user.", "error");
        }
    });
}
</script>
@endpush