@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 id="pending-list" style="display: none;">
        <h5>Pending Transactions:
            <span id="pending-badge" class="badge bg-danger d-none"></span>
        </h5>
        <!-- Tempat isi alert-alert transaksi -->
        <div id="pending-items"></div>
    </div>
    <div class="card p-3">
        <h4 class="d-inline mb-0 ms-3">Data Member</h4>

        <div class="card-header pb-2 card-no-border position-relative">
            <form id="filterForm" method="GET">
                <div class="row">
                    <div class="col-md-3">
                        <label for="status">Status</label>
                        <select id="status" name="status" class="form-control">
                            <option value="all">All</option>
                            <option value="active">Active</option>
                            <option value="suspended">Suspended</option>
                            <option value="banned">Banned</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="filter_button">&nbsp;</label>
                        <button type="submit" id="filter_button" class="btn btn-primary form-control">Filter</button>
                    </div>
                </div>
            </form>

            <!-- Button Inject dan Tarik disusun berdampingan -->
            <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="#injectSaldo">
                    <span class="iconify me-1" data-icon="mdi:plus-circle-outline" data-inline="false"></span>
                    Inject Saldo
                </button>
                <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tarikSaldo">
                    <span class="iconify me-1" data-icon="mdi:minus-circle-outline" data-inline="false"></span>
                    Tarik Saldo
                </button>
            </div>

        </div>


         <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>Balance</th>
             <th>User Email</th>
             <th>Phone</th>
             <th>L Status</th>
             <th>Reff Code</th>
             <th>Reff By</th>
             <th>R Utama</th>
             <th>Status</th>
             <th>Action</th>
           </tr>
         </thead>
         <tbody>

         </tbody>
        </table>
     </div>
    </div>
  </div>
  <!-- Modal -->
<div class="modal fade" id="bankModal" tabindex="-1" aria-labelledby="bankModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bankModalLabel">Bank Utama</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editBankForm">
                    @csrf
                    <input type="hidden" name="bank_id" id="bankId">
                    <div class="mb-3">
                        <label for="holderName" class="form-label">Nama Rekening</label>
                        <input type="text" name="account_holder" class="form-control" id="holderName">
                    </div>
                    <div class="mb-3">
                        <label for="accountNumber" class="form-label">No Rekening</label>
                        <input type="number" name="account_number" class="form-control" id="accountNumber">
                    </div>
                    <div class="mb-3">
                        <label for="bankName" class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control" id="bankName">
                    </div>
                    <button type="button" class="btn btn-primary" onclick="updateUserBank()">Save Changes</button>
                </form>
            </div>
        </div>
    </div>
</div>
<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 Member</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">
                        <label for="editLevel" class="form-label">Level</label>
                        <select class="form-control" id="editLevel">
                            <option value="new player">New Player</option>
                            <option value="silver">Silver</option>
                            <option value="gold">Gold</option>
                            <option value="platinum">Platinum</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>
<div class="modal fade" id="injectSaldo" tabindex="-1" aria-labelledby="injectSaldoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="injectSaldoLabel">Inject Saldo Member</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="injectSaldoForm" action="{{ route('admin.InjectSaldo') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="username" class="form-label">Username Member</label>
                        <select name="username" id="username" class="select2 form-select" data-allow-clear="true" required>
                            <option value="">-- Select User --</option>
                            @foreach($users as $user)
                                <option value="{{ $user->username }}">{{ $user->username }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="amount" class="form-label">Jumlah Saldo</label>
                        <input type="number" name="amount" class="form-control" id="amount" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="updateBankButton">Update</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="tarikSaldo" tabindex="-1" aria-labelledby="tarikSaldoLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="tarikSaldoLabel">Tarik Saldo Member</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="tarikSaldoForm" action="{{ route('admin.TarikSaldo') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label for="username" class="form-label">Username Member</label>
                        <select name="username" id="usernameTarik" class="select2 form-select" data-allow-clear="true" required>
                            <option value="">-- Select User --</option>
                            @foreach($users as $user)
                                <option value="{{ $user->username }}">{{ $user->username }} - (Rp.{{ number_format($user->balance->balance, 0, ',', '.') }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="amount" class="form-label">Jumlah Saldo Ditarik</label>
                        <input type="number" name="amount" class="form-control" id="amount" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Tarik</button>
                    </div>
                </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() {
        var table = $('#member_table').DataTable({
            responsive: true,
            ajax: {
                url: "{{ route('member.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: 'balance', name: 'balance' },
                { data: 'email', name: 'email' },
                { data: 'phone', name: 'phone' },
                { data: 'level_status', name: 'level_status' },
                { data: 'reff_code', name: 'reff_code' },
                { data: 'reff_by', name: 'reff_by' },
                { data: 'rekening_utama', name: 'rekening_utama' },
                { 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>
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    function showbankModal(bankId, bankName, accountNumber, holderName) {
        document.getElementById('bankId').value = bankId;
        document.getElementById('holderName').value = holderName;
        document.getElementById('accountNumber').value = accountNumber;
        document.getElementById('bankName').value = bankName;
        $('#bankModal').modal('show');
    }
    function updateUserBank() {
        var formData = $('#editBankForm').serialize();

        $.ajax({
            url: "{{ route('admin.updateBank') }}",
            method: 'POST',
            data: formData,
            success: function(response) {
                if (response.status === 'success') {
                    $('#bankModal').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'Bank details updated successfully!',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload();
                        }
                    });
                } else {
                    $('#bankModal').modal('hide');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'An error occurred while updating bank details.',
                    });
                }
            },
            error: function(xhr, status, error) {
                $('#bankModal').modal('hide');
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'An unexpected error occurred. Please try again.',
                });
            }
        });
    }
</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>
<script>
    $('#injectSaldoForm').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            url: "{{ route('admin.InjectSaldo') }}",
            method: 'POST',
            data: formData,
            success: function(response) {
                $('#injectSaldo').modal('hide');
                if (response.status == 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: response.message,
                        showConfirmButton: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload();
                        }
                    });
                } else {
                    $('#injectSaldo').modal('hide');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Something went wrong. Please try again.',
                        showConfirmButton: true
                    });
                }
            },
            error: function(xhr, status, error) {
                $('#injectSaldo').modal('hide');
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'An error occurred. Please try again.',
                    showConfirmButton: true
                });
            }
        });
    });
</script>
<script>
    $('#tarikSaldoForm').on('submit', function(e) {
        e.preventDefault();
        var formData = $(this).serialize();

        $.ajax({
            url: "{{ route('admin.TarikSaldo') }}",
            method: 'POST',
            data: formData,
            success: function(response) {
                $('#tarikSaldo').modal('hide');

                if (response.status === 'success') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message,
                        showConfirmButton: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload();
                        }
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: response.error || 'Terjadi kesalahan.',
                        showConfirmButton: true
                    });
                }
            },
            error: function(xhr) {
                $('#tarikSaldo').modal('hide');

                let errorMsg = 'Terjadi kesalahan.';

                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    let errors = xhr.responseJSON.errors;
                    errorMsg = Object.values(errors)[0][0];
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: errorMsg,
                    showConfirmButton: true
                });
            }
        });
    });
</script>
@endpush