@extends('root')
@section('title', 'Dedicated Number Management')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Dedicated Number Management',
        'links' => [
            ['url' => route('dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Dedicated Numbers'
    ])

    <div class="card card-body mb-3">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2">
            <div>
                <h4 class="mb-1 d-flex align-items-center gap-2">
                    <i class="ti ti-phone-call text-primary"></i>
                    Dedicated Number Management
                </h4>
                <p class="mb-0 text-muted small">
                    Kelola nomor dedicated, approve/reject request, dan monitoring assignment.
                </p>
            </div>
            <div class="d-flex gap-2">
                <div class="card bg-primary text-white px-3 py-2 mb-0">
                    <small class="opacity-75">Total Numbers</small>
                    <span class="fs-5 fw-bold" id="statTotal">0</span>
                </div>
                <div class="card bg-success text-white px-3 py-2 mb-0">
                    <small class="opacity-75">Assigned</small>
                    <span class="fs-5 fw-bold" id="statAssigned">0</span>
                </div>
                <div class="card bg-warning text-dark px-3 py-2 mb-0">
                    <small class="opacity-75">Pending</small>
                    <span class="fs-5 fw-bold" id="statPending">0</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabs Navigation -->
    <ul class="nav nav-tabs mb-3" id="adminDedicatedTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab">
                <i class="ti ti-list me-1"></i> Semua Nomor
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="requests-tab" data-bs-toggle="tab" data-bs-target="#requests" type="button" role="tab">
                <i class="ti ti-clock me-1"></i> Request Assign
                <span class="badge bg-warning text-dark ms-1" id="requestCount">0</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="namechanges-tab" data-bs-toggle="tab" data-bs-target="#namechanges" type="button" role="tab">
                <i class="ti ti-edit me-1"></i> Request Ganti Nama
                <span class="badge bg-info ms-1" id="nameChangeCount">0</span>
            </button>
        </li>
    </ul>

    <div class="tab-content" id="adminDedicatedTabsContent">
        <!-- Tab: All Numbers -->
        <div class="tab-pane fade show active" id="all" role="tabpanel">
            <div class="card card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Daftar Semua Nomor</h5>
                    <div class="d-flex gap-2">
                        <select class="form-select form-select-sm" id="filterStatus" style="width: 150px;">
                            <option value="">Semua Status</option>
                            <option value="available">Available</option>
                            <option value="assigned">Assigned</option>
                            <option value="blocked">Blocked</option>
                        </select>
                        <input type="text" class="form-control form-control-sm" id="searchAll" placeholder="Cari..." style="width: 200px;">
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="tableAllNumbers">
                        <thead>
                            <tr>
                                <th>Nomor</th>
                                <th>Label</th>
                                <th>Status</th>
                                <th>Assigned To</th>
                                <th>Base Price</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Tab: Assign Requests -->
        <div class="tab-pane fade" id="requests" role="tabpanel">
            <div class="card card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Request Assign Pending</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="tableRequests">
                        <thead>
                            <tr>
                                <th>Client</th>
                                <th>Nomor</th>
                                <th>Label</th>
                                <th>Harga Final</th>
                                <th>Saldo Client</th>
                                <th>Reseller</th>
                                <th>Tanggal Request</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Tab: Name Change Requests -->
        <div class="tab-pane fade" id="namechanges" role="tabpanel">
            <div class="card card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Request Ganti Nama Pending</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="tableNameChanges">
                        <thead>
                            <tr>
                                <th>Client</th>
                                <th>Nomor</th>
                                <th>Label Saat Ini</th>
                                <th>Label Baru</th>
                                <th>Tanggal Request</th>
                                <th class="text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Direct Assign -->
<div class="modal fade" id="modalDirectAssign" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-user-plus me-2"></i>Assign ke Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label text-muted">Nomor</label>
                    <div class="fs-5 fw-bold" id="directAssignPhone">-</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Pilih Client <span class="text-danger">*</span></label>
                    <select class="form-select" id="directAssignClient">
                        <option value="">-- Pilih Client --</option>
                        <option value="1">PT Maju Jaya (client@example.com) - Saldo: Rp 5.000.000</option>
                        <option value="2">CV Sukses (sukses@mail.com) - Saldo: Rp 2.500.000</option>
                        <option value="3">Toko ABC (abc@shop.id) - Saldo: Rp 1.000.000</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Label</label>
                    <input type="text" class="form-control" id="directAssignLabel" placeholder="Label untuk nomor ini">
                </div>
                <div class="card bg-light p-3">
                    <div class="d-flex justify-content-between">
                        <span>Base Price</span>
                        <span id="directAssignPrice">Rp 0</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnDirectAssign">
                    <span class="btn-text">Assign</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Block/Unblock -->
<div class="modal fade" id="modalBlock" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBlockTitle">Block Nomor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label text-muted">Nomor</label>
                    <div class="fs-5 fw-bold" id="blockPhone">-</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Alasan</label>
                    <textarea class="form-control" id="blockReason" rows="3" placeholder="Alasan block/unblock..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="btnConfirmBlock">
                    <span class="btn-text">Block</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Edit Label -->
<div class="modal fade" id="modalEditLabel" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ti ti-edit me-2"></i>Edit Label</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label text-muted">Nomor</label>
                    <div class="fs-5 fw-bold" id="editLabelPhone">-</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Label Baru</label>
                    <input type="text" class="form-control" id="editLabelInput" placeholder="Masukkan label baru">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnSaveLabel">
                    <span class="btn-text">Simpan</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Approve Assign Request -->
<div class="modal fade" id="modalApproveAssign" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="ti ti-check me-2"></i>Approve Request</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="ti ti-info-circle me-2"></i>
                    Saldo client akan dipotong setelah approval.
                </div>
                <table class="table table-sm">
                    <tr><td>Client</td><td id="approveClient">-</td></tr>
                    <tr><td>Nomor</td><td id="approvePhone">-</td></tr>
                    <tr><td>Harga</td><td id="approvePrice">-</td></tr>
                    <tr><td>Saldo Client</td><td id="approveBalance">-</td></tr>
                    <tr><td>Sisa Saldo</td><td id="approveRemaining">-</td></tr>
                </table>
                <div class="alert alert-danger d-none" id="approveBalanceWarning">
                    <i class="ti ti-alert-circle me-2"></i>Saldo client tidak mencukupi!
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-success" id="btnApproveAssign">
                    <span class="btn-text">Approve</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Reject -->
<div class="modal fade" id="modalReject" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="ti ti-x me-2"></i>Reject Request</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="rejectRequestId">
                <input type="hidden" id="rejectType">
                <div class="mb-3">
                    <label class="form-label">Alasan Penolakan <span class="text-danger">*</span></label>
                    <textarea class="form-control" id="rejectReason" rows="3" placeholder="Jelaskan alasan penolakan..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="btnReject">
                    <span class="btn-text">Reject</span>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Approve Name Change -->
<div class="modal fade" id="modalApproveNameChange" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="ti ti-check me-2"></i>Approve Ganti Nama</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-sm">
                    <tr><td>Client</td><td id="approveNameClient">-</td></tr>
                    <tr><td>Nomor</td><td id="approveNamePhone">-</td></tr>
                    <tr><td>Label Lama</td><td id="approveNameOld">-</td></tr>
                    <tr><td>Label Baru</td><td class="fw-bold text-success" id="approveNameNew">-</td></tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-success" id="btnApproveNameChange">
                    <span class="btn-text">Approve</span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // ===== MOCK DATA =====
    var allNumbers = [
        { id: 1, phone: '628123456789', label: 'Business Line 1', status: 'available', assigned_to: null, base_price: 500000 },
        { id: 2, phone: '628234567890', label: 'CS Utama', status: 'assigned', assigned_to: { name: 'PT Maju Jaya', email: 'client@example.com' }, base_price: 750000 },
        { id: 3, phone: '628345678901', label: 'Premium Line', status: 'available', assigned_to: null, base_price: 1000000 },
        { id: 4, phone: '628456789012', label: 'Old Line', status: 'blocked', assigned_to: null, base_price: 350000 },
        { id: 5, phone: '628567890123', label: 'Support', status: 'assigned', assigned_to: { name: 'CV Sukses', email: 'sukses@mail.com' }, base_price: 600000 },
    ];
    
    var assignRequests = [
        { id: 1, client: { name: 'Toko ABC', email: 'abc@shop.id', balance: 2000000 }, phone: '628123456789', label: 'Hotline', final_price: 550000, reseller: 'Reseller A', requested_at: '2025-12-10 09:00:00' },
        { id: 2, client: { name: 'PT XYZ', email: 'xyz@corp.id', balance: 300000 }, phone: '628345678901', label: 'Customer Service', final_price: 1100000, reseller: null, requested_at: '2025-12-10 10:30:00' },
    ];
    
    var nameChangeRequests = [
        { id: 1, client: 'PT Maju Jaya', phone: '628234567890', current_label: 'CS Utama', new_label: 'Hotline 24 Jam', requested_at: '2025-12-09 15:00:00' },
        { id: 2, client: 'CV Sukses', phone: '628567890123', current_label: 'Support', new_label: 'Technical Support', requested_at: '2025-12-10 08:00:00' },
    ];
    
    var selectedNumber = null;
    var selectedRequest = null;

    // ===== INIT =====
    updateStats();
    initAllNumbersTable();
    initRequestsTable();
    initNameChangesTable();

    function formatPrice(price) {
        return 'Rp ' + parseInt(price).toLocaleString('id-ID');
    }

    function updateStats() {
        $('#statTotal').text(allNumbers.length);
        $('#statAssigned').text(allNumbers.filter(n => n.status === 'assigned').length);
        $('#statPending').text(assignRequests.length + nameChangeRequests.length);
        $('#requestCount').text(assignRequests.length);
        $('#nameChangeCount').text(nameChangeRequests.length);
    }

    function renderStatusBadge(status) {
        var config = {
            'available': { class: 'bg-success', text: 'Available' },
            'assigned': { class: 'bg-primary', text: 'Assigned' },
            'blocked': { class: 'bg-secondary', text: 'Blocked' },
            'error': { class: 'bg-danger', text: 'Error' }
        };
        var c = config[status] || config['available'];
        return `<span class="badge rounded-pill ${c.class}">${c.text}</span>`;
    }

    // ===== ALL NUMBERS TABLE =====
    function initAllNumbersTable() {
        var table = $('#tableAllNumbers').DataTable({
            data: allNumbers,
            columns: [
                { data: 'phone', render: d => '<span class="fw-medium">+' + d + '</span>' },
                { data: 'label', defaultContent: '-' },
                { data: 'status', render: d => renderStatusBadge(d) },
                { 
                    data: 'assigned_to',
                    render: function(d) {
                        return d ? `<span class="fw-medium">${d.name}</span><br><small class="text-muted">${d.email}</small>` : '<span class="text-muted">-</span>';
                    }
                },
                { data: 'base_price', render: d => formatPrice(d) },
                {
                    data: null,
                    orderable: false,
                    className: 'text-center',
                    render: function(data, type, row) {
                        var btns = `<div class="btn-group btn-group-sm">`;
                        if (row.status === 'available') {
                            btns += `<button class="btn btn-primary btn-assign" data-id="${row.id}" title="Assign"><i class="ti ti-user-plus"></i></button>`;
                        }
                        if (row.status !== 'blocked') {
                            btns += `<button class="btn btn-secondary btn-block" data-id="${row.id}" data-action="block" title="Block"><i class="ti ti-ban"></i></button>`;
                        } else {
                            btns += `<button class="btn btn-success btn-block" data-id="${row.id}" data-action="unblock" title="Unblock"><i class="ti ti-check"></i></button>`;
                        }
                        btns += `<button class="btn btn-warning btn-edit-label" data-id="${row.id}" title="Edit Label"><i class="ti ti-edit"></i></button>`;
                        btns += `</div>`;
                        return btns;
                    }
                }
            ],
            order: [[2, 'asc']]
        });

        $('#searchAll').on('keyup', function() { table.search(this.value).draw(); });
        $('#filterStatus').on('change', function() { table.search(this.value).draw(); });
    }

    // ===== REQUESTS TABLE =====
    function initRequestsTable() {
        $('#tableRequests').DataTable({
            data: assignRequests,
            columns: [
                { 
                    data: 'client',
                    render: d => `<span class="fw-medium">${d.name}</span><br><small class="text-muted">${d.email}</small>`
                },
                { data: 'phone', render: d => '+' + d },
                { data: 'label', defaultContent: '-' },
                { data: 'final_price', render: d => `<span class="fw-bold text-success">${formatPrice(d)}</span>` },
                { 
                    data: 'client.balance',
                    render: function(d, type, row) {
                        var cls = d >= row.final_price ? 'text-success' : 'text-danger';
                        return `<span class="${cls}">${formatPrice(d)}</span>`;
                    }
                },
                { data: 'reseller', defaultContent: '<span class="text-muted">Direct</span>' },
                { data: 'requested_at', render: d => moment(d).format('DD MMM YYYY HH:mm') },
                {
                    data: null,
                    orderable: false,
                    className: 'text-center',
                    render: function(d, t, row) {
                        return `
                            <button class="btn btn-success btn-sm btn-approve-assign" data-id="${row.id}"><i class="ti ti-check me-1"></i>Approve</button>
                            <button class="btn btn-danger btn-sm btn-reject" data-id="${row.id}" data-type="assign"><i class="ti ti-x me-1"></i>Reject</button>
                        `;
                    }
                }
            ]
        });
    }

    // ===== NAME CHANGES TABLE =====
    function initNameChangesTable() {
        $('#tableNameChanges').DataTable({
            data: nameChangeRequests,
            columns: [
                { data: 'client' },
                { data: 'phone', render: d => '+' + d },
                { data: 'current_label' },
                { data: 'new_label', render: d => `<span class="fw-bold text-info">${d}</span>` },
                { data: 'requested_at', render: d => moment(d).format('DD MMM YYYY HH:mm') },
                {
                    data: null,
                    orderable: false,
                    className: 'text-center',
                    render: function(d, t, row) {
                        return `
                            <button class="btn btn-success btn-sm btn-approve-name" data-id="${row.id}"><i class="ti ti-check me-1"></i>Approve</button>
                            <button class="btn btn-danger btn-sm btn-reject" data-id="${row.id}" data-type="name"><i class="ti ti-x me-1"></i>Reject</button>
                        `;
                    }
                }
            ]
        });
    }

    // ===== ACTIONS =====
    
    // Direct Assign
    $(document).on('click', '.btn-assign', function() {
        var id = $(this).data('id');
        selectedNumber = allNumbers.find(n => n.id === id);
        if (!selectedNumber) return;
        
        $('#directAssignPhone').text('+' + selectedNumber.phone);
        $('#directAssignPrice').text(formatPrice(selectedNumber.base_price));
        $('#directAssignClient').val('');
        $('#directAssignLabel').val(selectedNumber.label || '');
        $('#modalDirectAssign').modal('show');
    });

    $('#btnDirectAssign').on('click', function() {
        var client = $('#directAssignClient').val();
        if (!client) {
            $('#failedToast .msg-box').text('Pilih client terlebih dahulu!');
            $('#failedToast').toast('show');
            return;
        }
        
        var btn = $(this);
        btn.prop('disabled', true).find('.btn-text').text('Processing...');
        
        setTimeout(function() {
            $('#modalDirectAssign').modal('hide');
            btn.prop('disabled', false).find('.btn-text').text('Assign');
            $('#successToast .msg-box').text('Nomor berhasil di-assign ke client!');
            $('#successToast').toast('show');
        }, 1000);
    });

    // Block/Unblock
    $(document).on('click', '.btn-block', function() {
        var id = $(this).data('id');
        var action = $(this).data('action');
        selectedNumber = allNumbers.find(n => n.id === id);
        if (!selectedNumber) return;
        
        $('#modalBlockTitle').text(action === 'block' ? 'Block Nomor' : 'Unblock Nomor');
        $('#blockPhone').text('+' + selectedNumber.phone);
        $('#blockReason').val('');
        $('#btnConfirmBlock').text(action === 'block' ? 'Block' : 'Unblock')
            .removeClass('btn-success btn-danger').addClass(action === 'block' ? 'btn-danger' : 'btn-success');
        $('#btnConfirmBlock').data('action', action);
        $('#modalBlock').modal('show');
    });

    $('#btnConfirmBlock').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true);
        
        setTimeout(function() {
            $('#modalBlock').modal('hide');
            btn.prop('disabled', false);
            $('#successToast .msg-box').text('Status nomor berhasil diubah!');
            $('#successToast').toast('show');
        }, 1000);
    });

    // Edit Label
    $(document).on('click', '.btn-edit-label', function() {
        var id = $(this).data('id');
        selectedNumber = allNumbers.find(n => n.id === id);
        if (!selectedNumber) return;
        
        $('#editLabelPhone').text('+' + selectedNumber.phone);
        $('#editLabelInput').val(selectedNumber.label || '');
        $('#modalEditLabel').modal('show');
    });

    $('#btnSaveLabel').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).find('.btn-text').text('Saving...');
        
        setTimeout(function() {
            $('#modalEditLabel').modal('hide');
            btn.prop('disabled', false).find('.btn-text').text('Simpan');
            $('#successToast .msg-box').text('Label berhasil diubah!');
            $('#successToast').toast('show');
        }, 1000);
    });

    // Approve Assign
    $(document).on('click', '.btn-approve-assign', function() {
        var id = $(this).data('id');
        selectedRequest = assignRequests.find(r => r.id === id);
        if (!selectedRequest) return;
        
        var remaining = selectedRequest.client.balance - selectedRequest.final_price;
        
        $('#approveClient').text(selectedRequest.client.name);
        $('#approvePhone').text('+' + selectedRequest.phone);
        $('#approvePrice').text(formatPrice(selectedRequest.final_price));
        $('#approveBalance').text(formatPrice(selectedRequest.client.balance));
        $('#approveRemaining').text(formatPrice(remaining)).removeClass('text-success text-danger').addClass(remaining >= 0 ? 'text-success' : 'text-danger');
        
        if (remaining < 0) {
            $('#approveBalanceWarning').removeClass('d-none');
            $('#btnApproveAssign').prop('disabled', true);
        } else {
            $('#approveBalanceWarning').addClass('d-none');
            $('#btnApproveAssign').prop('disabled', false);
        }
        
        $('#modalApproveAssign').modal('show');
    });

    $('#btnApproveAssign').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).find('.btn-text').text('Processing...');
        
        setTimeout(function() {
            $('#modalApproveAssign').modal('hide');
            btn.prop('disabled', false).find('.btn-text').text('Approve');
            $('#successToast .msg-box').text('Request berhasil di-approve! Saldo client telah dipotong.');
            $('#successToast').toast('show');
        }, 1000);
    });

    // Reject
    $(document).on('click', '.btn-reject', function() {
        $('#rejectRequestId').val($(this).data('id'));
        $('#rejectType').val($(this).data('type'));
        $('#rejectReason').val('');
        $('#modalReject').modal('show');
    });

    $('#btnReject').on('click', function() {
        var reason = $('#rejectReason').val().trim();
        if (!reason) {
            $('#failedToast .msg-box').text('Alasan penolakan harus diisi!');
            $('#failedToast').toast('show');
            return;
        }
        
        var btn = $(this);
        btn.prop('disabled', true).find('.btn-text').text('Processing...');
        
        setTimeout(function() {
            $('#modalReject').modal('hide');
            btn.prop('disabled', false).find('.btn-text').text('Reject');
            $('#successToast .msg-box').text('Request berhasil di-reject!');
            $('#successToast').toast('show');
        }, 1000);
    });

    // Approve Name Change
    $(document).on('click', '.btn-approve-name', function() {
        var id = $(this).data('id');
        var req = nameChangeRequests.find(r => r.id === id);
        if (!req) return;
        
        $('#approveNameClient').text(req.client);
        $('#approveNamePhone').text('+' + req.phone);
        $('#approveNameOld').text(req.current_label);
        $('#approveNameNew').text(req.new_label);
        $('#modalApproveNameChange').modal('show');
    });

    $('#btnApproveNameChange').on('click', function() {
        var btn = $(this);
        btn.prop('disabled', true).find('.btn-text').text('Processing...');
        
        setTimeout(function() {
            $('#modalApproveNameChange').modal('hide');
            btn.prop('disabled', false).find('.btn-text').text('Approve');
            $('#successToast .msg-box').text('Request ganti nama berhasil di-approve!');
            $('#successToast').toast('show');
        }, 1000);
    });
});
</script>
@endpush