@extends('template.desktop.app')

@section('title', 'Platform Credentials')

@push('styles')
    <style>
        /* =====================================================
           PLATFORM CREDENTIALS - DESIGN SYSTEM
           ===================================================== */
        :root {
            --pc-primary: #696cff;
            --pc-primary-hover: #5f61e6;
            --pc-success: #71dd37;
            --pc-danger: #ff3e1d;
            --pc-warning: #ffab00;
            --pc-info: #03c3ec;
            --pc-bg-card: #fff;
            --pc-bg-body: #f5f5f9;
            --pc-border: #e7e7e8;
            --pc-text-primary: #566a7f;
            --pc-text-heading: #32475c;
            --pc-text-muted: #a1acb8;
            --pc-radius: 8px;
            --pc-radius-lg: 12px;
            --pc-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
            --pc-shadow-hover: 0 4px 18px 0 rgba(67, 89, 113, 0.16);
            --pc-transition: all 0.2s ease-in-out;
        }

        /* Page Header */
        .pc-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .pc-page-header h4 {
            color: var(--pc-text-heading);
            font-weight: 700;
            font-size: 1.35rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .pc-page-header h4 i {
            color: var(--pc-primary);
            font-size: 1.5rem;
        }

        .pc-page-header p {
            color: var(--pc-text-muted);
            font-size: 0.85rem;
            margin: 0.25rem 0 0;
        }

        /* Stats Cards */
        .pc-stats-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .pc-stat-card {
            background: var(--pc-bg-card);
            border-radius: var(--pc-radius-lg);
            padding: 1.25rem;
            box-shadow: var(--pc-shadow);
            border: 1px solid var(--pc-border);
            transition: var(--pc-transition);
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .pc-stat-card:hover {
            box-shadow: var(--pc-shadow-hover);
            transform: translateY(-2px);
        }

        .pc-stat-icon {
            width: 48px;
            height: 48px;
            border-radius: var(--pc-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .pc-stat-icon.total {
            background: rgba(105, 108, 255, 0.12);
            color: var(--pc-primary);
        }

        .pc-stat-icon.courier {
            background: rgba(3, 195, 236, 0.12);
            color: var(--pc-info);
        }

        .pc-stat-icon.marketplace {
            background: rgba(255, 171, 0, 0.12);
            color: var(--pc-warning);
        }

        .pc-stat-icon.active {
            background: rgba(113, 221, 55, 0.12);
            color: var(--pc-success);
        }

        .pc-stat-info h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--pc-text-heading);
            margin: 0;
            line-height: 1;
        }

        .pc-stat-info span {
            font-size: 0.8rem;
            color: var(--pc-text-muted);
        }

        /* Filter Bar */
        .pc-filter-bar {
            background: var(--pc-bg-card);
            border-radius: var(--pc-radius-lg);
            padding: 1rem 1.25rem;
            box-shadow: var(--pc-shadow);
            border: 1px solid var(--pc-border);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .pc-filter-bar .form-select,
        .pc-filter-bar .form-control {
            max-width: 220px;
            font-size: 0.85rem;
            border-radius: var(--pc-radius);
        }

        /* Table Card */
        .pc-table-card {
            background: var(--pc-bg-card);
            border-radius: var(--pc-radius-lg);
            box-shadow: var(--pc-shadow);
            border: 1px solid var(--pc-border);
            overflow: hidden;
        }

        .pc-table-card .table {
            margin: 0;
        }

        .pc-table-card .table thead th {
            background: #f8f8fa;
            color: var(--pc-text-heading);
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 0.85rem 1rem;
            border-bottom: 2px solid var(--pc-border);
            white-space: nowrap;
        }

        .pc-table-card .table tbody td {
            padding: 0.85rem 1rem;
            font-size: 0.875rem;
            color: var(--pc-text-primary);
            vertical-align: middle;
            border-bottom: 1px solid #f0f0f2;
        }

        .pc-table-card .table tbody tr:hover {
            background: #f9f9fb;
        }

        .pc-table-card .table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Platform Name Cell */
        .pc-platform-cell {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .pc-platform-avatar {
            width: 40px;
            height: 40px;
            border-radius: var(--pc-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            text-transform: uppercase;
            flex-shrink: 0;
        }

        .pc-platform-avatar.courier {
            background: rgba(3, 195, 236, 0.12);
            color: var(--pc-info);
        }

        .pc-platform-avatar.marketplace {
            background: rgba(255, 171, 0, 0.12);
            color: var(--pc-warning);
        }

        .pc-platform-avatar.other {
            background: rgba(105, 108, 255, 0.12);
            color: var(--pc-primary);
        }

        .pc-platform-name {
            font-weight: 600;
            color: var(--pc-text-heading);
            font-size: 0.9rem;
        }

        .pc-platform-prefix {
            font-size: 0.75rem;
            color: var(--pc-text-muted);
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
        }

        /* Badges */
        .pc-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.65rem;
            border-radius: 50px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .pc-badge.courier {
            background: rgba(3, 195, 236, 0.12);
            color: #03a5c9;
        }

        .pc-badge.marketplace {
            background: rgba(255, 171, 0, 0.12);
            color: #d99200;
        }

        .pc-badge.other {
            background: rgba(105, 108, 255, 0.12);
            color: var(--pc-primary);
        }

        .pc-badge-status {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.65rem;
            border-radius: 50px;
            font-size: 0.72rem;
            font-weight: 600;
        }

        .pc-badge-status.active {
            background: rgba(113, 221, 55, 0.12);
            color: #5cb32b;
        }

        .pc-badge-status.inactive {
            background: rgba(255, 62, 29, 0.12);
            color: #e0370f;
        }

        .pc-badge-status .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
        }

        .pc-badge-status.active .dot {
            background: var(--pc-success);
        }

        .pc-badge-status.inactive .dot {
            background: var(--pc-danger);
        }

        /* Cookies Preview */
        .pc-cookies-preview {
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 0.75rem;
            color: var(--pc-text-muted);
            cursor: pointer;
            transition: var(--pc-transition);
            padding: 0.25rem 0.5rem;
            background: #f5f5f9;
            border-radius: 4px;
        }

        .pc-cookies-preview:hover {
            color: var(--pc-primary);
            background: rgba(105, 108, 255, 0.08);
        }

        .pc-cookies-preview.empty {
            color: var(--pc-text-muted);
            font-style: italic;
            font-family: inherit;
            background: transparent;
            cursor: default;
        }

        /* Action Buttons */
        .pc-actions {
            display: flex;
            gap: 0.35rem;
        }

        .pc-btn-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--pc-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            transition: var(--pc-transition);
            font-size: 0.9rem;
        }

        .pc-btn-icon.edit {
            background: rgba(105, 108, 255, 0.12);
            color: var(--pc-primary);
        }

        .pc-btn-icon.edit:hover {
            background: var(--pc-primary);
            color: #fff;
        }

        .pc-btn-icon.toggle {
            background: rgba(255, 171, 0, 0.12);
            color: var(--pc-warning);
        }

        .pc-btn-icon.toggle:hover {
            background: var(--pc-warning);
            color: #fff;
        }

        .pc-btn-icon.delete {
            background: rgba(255, 62, 29, 0.12);
            color: var(--pc-danger);
        }

        .pc-btn-icon.delete:hover {
            background: var(--pc-danger);
            color: #fff;
        }

        /* Modal Styling */
        .pc-modal .modal-content {
            border-radius: var(--pc-radius-lg);
            border: none;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        }

        .pc-modal .modal-header {
            border-bottom: 1px solid var(--pc-border);
            padding: 1.25rem 1.5rem;
        }

        .pc-modal .modal-title {
            font-weight: 700;
            color: var(--pc-text-heading);
            font-size: 1.1rem;
        }

        .pc-modal .modal-body {
            padding: 1.5rem;
        }

        .pc-modal .modal-footer {
            border-top: 1px solid var(--pc-border);
            padding: 1rem 1.5rem;
        }

        .pc-modal .form-label {
            font-weight: 600;
            font-size: 0.82rem;
            color: var(--pc-text-heading);
            margin-bottom: 0.4rem;
        }

        .pc-modal .form-control,
        .pc-modal .form-select {
            border-radius: var(--pc-radius);
            font-size: 0.875rem;
            border: 1px solid var(--pc-border);
        }

        .pc-modal .form-control:focus,
        .pc-modal .form-select:focus {
            border-color: var(--pc-primary);
            box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.15);
        }

        .pc-modal textarea.form-control {
            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
            font-size: 0.8rem;
            line-height: 1.5;
        }

        .pc-hint {
            font-size: 0.72rem;
            color: var(--pc-text-muted);
            margin-top: 0.25rem;
        }

        /* Empty State */
        .pc-empty-state {
            padding: 3rem 1rem;
            text-align: center;
        }

        .pc-empty-state i {
            font-size: 3rem;
            color: var(--pc-text-muted);
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .pc-empty-state h5 {
            color: var(--pc-text-heading);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .pc-empty-state p {
            color: var(--pc-text-muted);
            font-size: 0.85rem;
        }

        /* Button Primary */
        .pc-btn-primary {
            background: var(--pc-primary);
            color: #fff;
            border: none;
            border-radius: var(--pc-radius);
            padding: 0.5rem 1.25rem;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: var(--pc-transition);
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
        }

        .pc-btn-primary:hover {
            background: var(--pc-primary-hover);
            box-shadow: 0 4px 12px rgba(105, 108, 255, 0.35);
            transform: translateY(-1px);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .pc-page-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .pc-filter-bar {
                flex-direction: column;
                align-items: stretch;
            }

            .pc-filter-bar .form-select,
            .pc-filter-bar .form-control {
                max-width: 100%;
            }

            .pc-stats-row {
                grid-template-columns: repeat(2, 1fr);
            }

            .pc-cookies-preview {
                max-width: 120px;
            }
        }
    </style>
@endpush

@section('content')
    <!-- Page Header -->
    <div class="pc-page-header">
        <div>
            <h4><i class="ti tabler-key"></i> Platform Credentials</h4>
            <p>Kelola cookies, user-agent, dan konfigurasi platform kurir & marketplace</p>
        </div>
        <button class="pc-btn-primary" onclick="openCreateModal()">
            <i class="ti tabler-plus"></i> Tambah Platform
        </button>
    </div>

    <!-- Stats Cards -->
    <div class="pc-stats-row">
        <div class="pc-stat-card">
            <div class="pc-stat-icon total"><i class="ti tabler-database"></i></div>
            <div class="pc-stat-info">
                <h3 id="stat-total">0</h3>
                <span>Total Platform</span>
            </div>
        </div>
        <div class="pc-stat-card">
            <div class="pc-stat-icon courier"><i class="ti tabler-truck"></i></div>
            <div class="pc-stat-info">
                <h3 id="stat-courier">0</h3>
                <span>Kurir</span>
            </div>
        </div>
        <div class="pc-stat-card">
            <div class="pc-stat-icon marketplace"><i class="ti tabler-shopping-cart"></i></div>
            <div class="pc-stat-info">
                <h3 id="stat-marketplace">0</h3>
                <span>Marketplace</span>
            </div>
        </div>
        <div class="pc-stat-card">
            <div class="pc-stat-icon active"><i class="ti tabler-circle-check"></i></div>
            <div class="pc-stat-info">
                <h3 id="stat-active">0</h3>
                <span>Aktif</span>
            </div>
        </div>
    </div>

    <!-- Filter Bar -->
    <div class="pc-filter-bar">
        <select class="form-select" id="filterType" onchange="loadData()">
            <option value="">Semua Tipe</option>
            <option value="courier">Kurir</option>
            <option value="marketplace">Marketplace</option>
            <option value="other">Lainnya</option>
        </select>
        <input type="text" class="form-control" id="filterSearch" placeholder="Cari platform..." oninput="loadData()">
    </div>

    <!-- Table Card -->
    <div class="pc-table-card">
        <div class="table-responsive">
            <table class="table" id="credentialsTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Platform</th>
                        <th>Tipe</th>
                        <th>Cookies</th>
                        <th>User Agent</th>
                        <th>Status</th>
                        <th>Terakhir Diubah</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody id="credentialsBody">
                    <!-- Data loaded via AJAX -->
                </tbody>
            </table>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <div class="modal fade pc-modal" id="credentialModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">Tambah Platform</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="credentialId">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Nama Platform <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="platformName" placeholder="e.g. SPX Express">
                            <div class="pc-hint">Nama lengkap platform</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Prefix <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="platformPrefix" placeholder="e.g. spx">
                            <div class="pc-hint">Kode unik (lowercase)</div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Tipe <span class="text-danger">*</span></label>
                            <select class="form-select" id="platformType">
                                <option value="courier">Kurir</option>
                                <option value="marketplace">Marketplace</option>
                                <option value="other">Lainnya</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Cookies</label>
                            <textarea class="form-control" id="platformCookies" rows="5" placeholder="Paste cookies disini..."></textarea>
                            <div class="pc-hint">Cookies akan digunakan untuk autentikasi request ke platform</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">User Agent</label>
                            <textarea class="form-control" id="platformUserAgent" rows="2"
                                placeholder="e.g. Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ..."></textarea>
                            <div class="pc-hint">User-Agent header yang digunakan saat request</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Catatan</label>
                            <textarea class="form-control" id="platformNotes" rows="2" placeholder="Catatan tambahan (opsional)"
                                style="font-family: inherit;"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="pc-btn-primary" onclick="saveCredential()">
                        <i class="ti tabler-device-floppy"></i> Simpan
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- View Cookies Modal -->
    <div class="modal fade pc-modal" id="viewCookiesModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="viewCookiesTitle">Cookies</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <textarea class="form-control" id="viewCookiesContent" rows="12" readonly
                        style="font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.8rem;"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="pc-btn-primary" onclick="copyCookies()">
                        <i class="ti tabler-copy"></i> Copy
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const BASE_URL = '{{ url('/platform-credentials') }}';
        let allData = [];

        document.addEventListener('DOMContentLoaded', function() {
            loadData();
        });

        function loadData() {
            const type = document.getElementById('filterType').value;
            const search = document.getElementById('filterSearch').value;

            let url = `${BASE_URL}/data?`;
            if (type) url += `platform_type=${type}&`;
            if (search) url += `search=${encodeURIComponent(search)}&`;

            fetch(url, {
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    }
                })
                .then(res => res.json())
                .then(res => {
                    if (res.success) {
                        allData = res.data;
                        renderTable(res.data);
                        updateStats(res.data);
                    }
                })
                .catch(err => {
                    console.error('Error loading data:', err);
                    Toastify({
                        text: 'Gagal memuat data',
                        backgroundColor: '#ff3e1d',
                        duration: 3000
                    }).showToast();
                });
        }

        function updateStats(data) {
            document.getElementById('stat-total').textContent = data.length;
            document.getElementById('stat-courier').textContent = data.filter(d => d.platform_type === 'courier').length;
            document.getElementById('stat-marketplace').textContent = data.filter(d => d.platform_type === 'marketplace')
                .length;
            document.getElementById('stat-active').textContent = data.filter(d => d.is_active).length;
        }

        function renderTable(data) {
            const body = document.getElementById('credentialsBody');

            if (data.length === 0) {
                body.innerHTML = `
                <tr>
                    <td colspan="8">
                        <div class="pc-empty-state">
                            <i class="ti tabler-database-off d-block"></i>
                            <h5>Belum ada platform</h5>
                            <p>Klik "Tambah Platform" untuk menambahkan konfigurasi baru</p>
                        </div>
                    </td>
                </tr>
            `;
                return;
            }

            body.innerHTML = data.map((item, i) => {
                const initials = item.platform_prefix.substring(0, 3).toUpperCase();
                const typeLabel = {
                    courier: 'Kurir',
                    marketplace: 'Marketplace',
                    other: 'Lainnya'
                } [item.platform_type];
                const cookiesPreview = item.cookies ?
                    `<div class="pc-cookies-preview" onclick="viewCookies(${item.id})" title="Klik untuk lihat">${escapeHtml(item.cookies.substring(0, 60))}...</div>` :
                    `<span class="pc-cookies-preview empty">Belum diisi</span>`;
                const uaPreview = item.user_agent ?
                    `<div class="pc-cookies-preview" title="${escapeHtml(item.user_agent)}">${escapeHtml(item.user_agent.substring(0, 40))}...</div>` :
                    `<span class="pc-cookies-preview empty">Belum diisi</span>`;
                const statusBadge = item.is_active ?
                    `<span class="pc-badge-status active"><span class="dot"></span> Aktif</span>` :
                    `<span class="pc-badge-status inactive"><span class="dot"></span> Nonaktif</span>`;
                const updatedAt = item.updated_at ? new Date(item.updated_at).toLocaleDateString('id-ID', {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                }) : '-';

                return `
                <tr>
                    <td>${i + 1}</td>
                    <td>
                        <div class="pc-platform-cell">
                            <div class="pc-platform-avatar ${item.platform_type}">${initials}</div>
                            <div>
                                <div class="pc-platform-name">${escapeHtml(item.platform_name)}</div>
                                <div class="pc-platform-prefix">${escapeHtml(item.platform_prefix)}</div>
                            </div>
                        </div>
                    </td>
                    <td><span class="pc-badge ${item.platform_type}">${typeLabel}</span></td>
                    <td>${cookiesPreview}</td>
                    <td>${uaPreview}</td>
                    <td>${statusBadge}</td>
                    <td><small class="text-muted">${updatedAt}</small></td>
                    <td>
                        <div class="pc-actions">
                            <button class="pc-btn-icon edit" onclick="editCredential(${item.id})" title="Edit">
                                <i class="ti tabler-edit"></i>
                            </button>
                            <button class="pc-btn-icon toggle" onclick="toggleStatus(${item.id})" title="Toggle Status">
                                <i class="ti tabler-toggle-${item.is_active ? 'right' : 'left'}"></i>
                            </button>
                            <button class="pc-btn-icon delete" onclick="deleteCredential(${item.id}, '${escapeHtml(item.platform_name)}')" title="Hapus">
                                <i class="ti tabler-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `;
            }).join('');
        }

        function openCreateModal() {
            document.getElementById('modalTitle').textContent = 'Tambah Platform';
            document.getElementById('credentialId').value = '';
            document.getElementById('platformName').value = '';
            document.getElementById('platformPrefix').value = '';
            document.getElementById('platformType').value = 'courier';
            document.getElementById('platformCookies').value = '';
            document.getElementById('platformUserAgent').value = '';
            document.getElementById('platformNotes').value = '';
            new bootstrap.Modal(document.getElementById('credentialModal')).show();
        }

        function editCredential(id) {
            const item = allData.find(d => d.id === id);
            if (!item) return;

            document.getElementById('modalTitle').textContent = 'Edit Platform - ' + item.platform_name;
            document.getElementById('credentialId').value = item.id;
            document.getElementById('platformName').value = item.platform_name;
            document.getElementById('platformPrefix').value = item.platform_prefix;
            document.getElementById('platformType').value = item.platform_type;
            document.getElementById('platformCookies').value = item.cookies || '';
            document.getElementById('platformUserAgent').value = item.user_agent || '';
            document.getElementById('platformNotes').value = item.notes || '';
            new bootstrap.Modal(document.getElementById('credentialModal')).show();
        }

        function saveCredential() {
            const id = document.getElementById('credentialId').value;
            const payload = {
                platform_name: document.getElementById('platformName').value,
                platform_prefix: document.getElementById('platformPrefix').value,
                platform_type: document.getElementById('platformType').value,
                cookies: document.getElementById('platformCookies').value,
                user_agent: document.getElementById('platformUserAgent').value,
                notes: document.getElementById('platformNotes').value,
            };

            const url = id ? `${BASE_URL}/${id}` : `${BASE_URL}`;
            const method = id ? 'PUT' : 'POST';

            fetch(url, {
                    method: method,
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify(payload),
                })
                .then(res => res.json())
                .then(res => {
                    if (res.success) {
                        bootstrap.Modal.getInstance(document.getElementById('credentialModal')).hide();
                        Toastify({
                            text: res.message,
                            backgroundColor: '#71dd37',
                            duration: 3000
                        }).showToast();
                        loadData();
                    } else {
                        const errors = res.errors || {};
                        const errorMsg = Object.values(errors).flat().join('\n') || res.message || 'Terjadi kesalahan';
                        Swal.fire('Error', errorMsg, 'error');
                    }
                })
                .catch(err => {
                    console.error('Save error:', err);
                    Swal.fire('Error', 'Gagal menyimpan data', 'error');
                });
        }

        function toggleStatus(id) {
            fetch(`${BASE_URL}/${id}/toggle`, {
                    method: 'PATCH',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    }
                })
                .then(res => res.json())
                .then(res => {
                    if (res.success) {
                        Toastify({
                            text: res.message,
                            backgroundColor: '#71dd37',
                            duration: 3000
                        }).showToast();
                        loadData();
                    }
                })
                .catch(err => {
                    console.error('Toggle error:', err);
                });
        }

        function deleteCredential(id, name) {
            Swal.fire({
                title: 'Hapus Platform?',
                html: `Platform <strong>${name}</strong> akan dihapus permanen.`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ff3e1d',
                cancelButtonText: 'Batal',
                confirmButtonText: 'Ya, Hapus',
            }).then(result => {
                if (result.isConfirmed) {
                    fetch(`${BASE_URL}/${id}`, {
                            method: 'DELETE',
                            headers: {
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                            }
                        })
                        .then(res => res.json())
                        .then(res => {
                            if (res.success) {
                                Toastify({
                                    text: res.message,
                                    backgroundColor: '#71dd37',
                                    duration: 3000
                                }).showToast();
                                loadData();
                            }
                        })
                        .catch(err => {
                            console.error('Delete error:', err);
                        });
                }
            });
        }

        function viewCookies(id) {
            const item = allData.find(d => d.id === id);
            if (!item) return;

            document.getElementById('viewCookiesTitle').textContent = 'Cookies - ' + item.platform_name;
            document.getElementById('viewCookiesContent').value = item.cookies || '';
            new bootstrap.Modal(document.getElementById('viewCookiesModal')).show();
        }

        function copyCookies() {
            const content = document.getElementById('viewCookiesContent');
            content.select();
            document.execCommand('copy');
            Toastify({
                text: 'Cookies berhasil disalin!',
                backgroundColor: '#696cff',
                duration: 2000
            }).showToast();
        }

        function escapeHtml(str) {
            if (!str) return '';
            const div = document.createElement('div');
            div.appendChild(document.createTextNode(str));
            return div.innerHTML;
        }
    </script>
@endpush