@extends('admin.layout')

@section('title', 'Manajemen Mitra')

@section('content')
<style>
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbc4d2;
        border-radius: 10px;
    }

    .active-tab {
        border-bottom: 2px solid #4f378a;
        color: #4f378a;
        font-weight: 600;
    }

    .status-pulse {
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .5;
        }
    }
</style>

<div class="flex flex-col xl:flex-row gap-6 relative">
    <!-- Main Content Area -->
    <!-- Main Content Area -->
    <div class="flex-grow w-full xl:w-[calc(100%-400px)]">
        <!-- Header Section -->
        <div class="mb-8">
            <h2 class="font-headline-lg text-3xl font-bold text-on-surface">Manajemen Mitra</h2>
            <p class="text-sm text-on-surface-variant mt-1">Kelola, verifikasi KYC, dan pantau seluruh aktivitas mitra.</p>
        </div>

        <!-- Stats Bar -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
                <div class="flex justify-between items-start mb-2">
                    <span class="text-sm font-bold text-on-surface-variant">Total Mitra</span>
                    <span class="material-symbols-outlined text-primary">groups</span>
                </div>
                <p class="text-3xl font-bold text-on-surface">{{ number_format($totalMitra, 0, ',', '.') }}</p>
                <p class="text-xs font-bold text-primary flex items-center gap-1 mt-2">
                    Keseluruhan Mitra
                </p>
            </div>

            <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
                <div class="flex justify-between items-start mb-2">
                    <span class="text-sm font-bold text-on-surface-variant">Aktif Online</span>
                    <span class="material-symbols-outlined text-green-600 status-pulse">sensors</span>
                </div>
                <p class="text-3xl font-bold text-on-surface">{{ number_format($aktifOnline, 0, ',', '.') }}</p>
                <p class="text-xs font-bold text-green-600 flex items-center gap-1 mt-2">
                    Siap menerima pesanan
                </p>
            </div>

            <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
                <div class="flex justify-between items-start mb-2">
                    <span class="text-sm font-bold text-on-surface-variant">Pending Review</span>
                    <span class="material-symbols-outlined text-[#E8A838]">pending_actions</span>
                </div>
                <p class="text-3xl font-bold text-on-surface">{{ number_format($pendingReview, 0, ',', '.') }}</p>
                <p class="text-xs font-bold text-[#E8A838] flex items-center gap-1 mt-2">
                    Verifikasi KYC dibutuhkan
                </p>
            </div>

            <div class="bg-surface-container-lowest p-6 rounded-2xl shadow-sm border border-outline-variant/30">
                <div class="flex justify-between items-start mb-2">
                    <span class="text-sm font-bold text-on-surface-variant">Suspended</span>
                    <span class="material-symbols-outlined text-error">block</span>
                </div>
                <p class="text-3xl font-bold text-on-surface">{{ number_format($suspended, 0, ',', '.') }}</p>
                <p class="text-xs font-bold text-error flex items-center gap-1 mt-2">
                    Pelanggaran kebijakan
                </p>
            </div>
        </div>

        <!-- Filter Form -->
        <form method="GET" action="{{ route('admin.manajemen-mitra') }}" id="mitra-filter-form" class="bg-surface-container-lowest rounded-2xl shadow-sm mb-6 border border-outline-variant/30 p-4 space-y-3">
            <!-- Search Input & Reset Button Row -->
            <div class="flex flex-col sm:flex-row items-center gap-3">
                <div class="relative flex-1 w-full">
                    <span class="material-symbols-outlined absolute left-3.5 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]">search</span>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama mitra, nomor WhatsApp, email, atau NIK..."
                        class="w-full pl-11 pr-4 py-2.5 bg-surface-container-low border border-outline-variant/30 rounded-xl text-sm font-medium focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all placeholder:text-on-surface-variant/60"
                        onkeydown="if(event.key === 'Enter') this.form.submit()">
                </div>

                <!-- Permanent Reset Button -->
                <a href="{{ route('admin.manajemen-mitra') }}" class="w-full sm:w-auto px-5 py-2.5 bg-surface-container-high hover:bg-error/10 hover:text-error hover:border-error/30 text-on-surface-variant rounded-xl border border-outline-variant/30 text-sm font-semibold flex items-center justify-center gap-1.5 transition-all shadow-sm shrink-0 whitespace-nowrap" title="Reset Semua Filter">
                    <span class="material-symbols-outlined text-[18px]">restart_alt</span>
                    <span>Reset Filter</span>
                </a>
            </div>

            <!-- Uniform 3-Column Dropdowns Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                <!-- Status Dropdown -->
                <div class="relative w-full">
                    <select name="status" onchange="this.form.submit()" class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl text-sm font-semibold px-4 py-2.5 pr-9 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none cursor-pointer">
                        <option value="semua" {{ request('status', 'semua') === 'semua' ? 'selected' : '' }}>Semua Status</option>
                        <option value="approved" {{ request('status') === 'approved' ? 'selected' : '' }}>Approved</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="suspended" {{ request('status') === 'suspended' ? 'selected' : '' }}>Suspended</option>
                    </select>
                    <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant text-[18px]">expand_more</span>
                </div>

                <!-- Area Dropdown -->
                <div class="relative w-full">
                    <select name="area" onchange="this.form.submit()" class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl text-sm font-semibold px-4 py-2.5 pr-9 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none cursor-pointer">
                        <option value="semua" {{ request('area', 'semua') === 'semua' ? 'selected' : '' }}>Semua Area</option>
                        @if(isset($availableAreas))
                        @foreach($availableAreas as $area)
                        <option value="{{ $area }}" {{ request('area') === $area ? 'selected' : '' }}>{{ $area }}</option>
                        @endforeach
                        @endif
                    </select>
                    <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant text-[18px]">expand_more</span>
                </div>

                <!-- Keahlian Dropdown -->
                <div class="relative w-full">
                    <select name="service_id" onchange="this.form.submit()" class="w-full bg-surface-container-low border border-outline-variant/30 rounded-xl text-sm font-semibold px-4 py-2.5 pr-9 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none appearance-none cursor-pointer">
                        <option value="semua" {{ request('service_id', 'semua') === 'semua' ? 'selected' : '' }}>Semua Keahlian</option>
                        @if(isset($allServices))
                        @foreach($allServices as $srv)
                        <option value="{{ $srv->id }}" {{ request('service_id') == $srv->id ? 'selected' : '' }}>{{ $srv->name }}</option>
                        @endforeach
                        @endif
                    </select>
                    <span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant text-[18px]">expand_more</span>
                </div>
            </div>
        </form>

        <!-- Table -->
        <div class="bg-surface-container-lowest rounded-2xl shadow-sm border border-outline-variant/30 overflow-hidden">
            <div class="overflow-x-auto custom-scrollbar">
                <table class="w-full text-left border-collapse min-w-[1000px]">
                    <thead class="bg-surface-container-low border-b border-outline-variant/30">
                        <tr>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap min-w-[280px]">Nama Mitra</th>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap min-w-[160px]">Area Layanan</th>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Status</th>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Kehadiran</th>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Performa</th>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant text-center whitespace-nowrap">Total Pesanan</th>
                            <th class="px-6 py-4 text-sm font-bold text-on-surface-variant whitespace-nowrap">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/20" id="mitra-tbody">
                        @forelse($mitraList as $mitra)
                        <tr class="hover:bg-primary/5 transition-colors cursor-pointer group mitra-row" data-mitra="{{ json_encode([
                            'id' => $mitra->id,
                            'name' => $mitra->name,
                            'phone' => $mitra->phone,
                            'city' => $mitra->city,
                            'province' => $mitra->province,
                            'status' => $mitra->approval_status,
                            'created_at' => $mitra->created_at->format('d F Y'),
                            'ktp_image' => $mitra->ktp_image ? asset('storage/' . $mitra->ktp_image) : null,
                            'selfie_image' => $mitra->selfie_image ? asset('storage/' . $mitra->selfie_image) : null,
                            'service_ids' => $mitra->skills->pluck('id')->toArray()
                        ]) }}">
                            <td class="px-6 py-4 min-w-[280px]">
                                <div class="flex items-center gap-3">
                                    <div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center font-bold text-lg shadow-sm group-hover:shadow-md transition-shadow shrink-0">
                                        {{ substr($mitra->name, 0, 1) }}
                                    </div>
                                    <div class="min-w-0">
                                        <p class="text-sm font-bold text-on-surface whitespace-nowrap">{{ $mitra->name }}</p>
                                        <p class="text-xs text-on-surface-variant whitespace-nowrap font-mono">{{ $mitra->phone }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 min-w-[160px]">
                                <span class="px-3 py-1 bg-secondary-container text-on-secondary-container rounded-full text-xs font-bold whitespace-nowrap">{{ $mitra->city ?: '-' }}</span>
                            </td>
                            <td class="px-6 py-4">
                                @if($mitra->approval_status === 'approved')
                                <span class="px-3 py-1 bg-green-100 text-green-700 rounded-lg text-xs font-bold whitespace-nowrap uppercase">APPROVED</span>
                                @elseif($mitra->approval_status === 'pending')
                                <span class="px-3 py-1 bg-amber-100 text-amber-700 rounded-lg text-xs font-bold whitespace-nowrap uppercase">PENDING</span>
                                @else
                                <span class="px-3 py-1 bg-red-100 text-red-700 rounded-lg text-xs font-bold whitespace-nowrap uppercase">{{ $mitra->approval_status }}</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    @if($mitra->is_active)
                                     <span class="w-2 h-2 bg-green-500 rounded-full status-pulse"></span>
                                    <span class="text-xs font-bold text-on-surface">Online</span>
                                    @else
                                    <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
                                    <span class="text-xs font-bold text-on-surface">Offline</span>
                                    @endif
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-1">
                                    <span class="material-symbols-outlined text-[#E8A838] text-sm" style="font-variation-settings: 'FILL' 1;">star</span>
                                    <span class="text-sm font-bold text-on-surface">{{ $mitra->average_rating }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="text-sm font-bold text-on-surface">{{ $mitra->ratings_count }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex gap-2">
                                    <button class="p-1.5 hover:bg-primary/10 text-primary rounded-lg transition-colors"><span class="material-symbols-outlined text-sm">visibility</span></button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-6 py-8 text-center text-on-surface-variant">
                                <div class="flex flex-col items-center justify-center">
                                    <span class="material-symbols-outlined text-4xl mb-2 opacity-50">inbox</span>
                                    <p>Belum ada data mitra.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="px-6 py-4 bg-surface-container-low">
                {{ $mitraList->appends(request()->query())->links() }}
            </div>
        </div>
    </div>

    <!-- Detail Side Panel (Sticky) -->
    <div class="hidden xl:block w-[400px] flex-shrink-0">
        <aside id="detail-panel" class="sticky top-[80px] bg-white border border-outline-variant/30 rounded-3xl z-30 flex flex-col p-6 custom-scrollbar max-h-[calc(100vh-100px)] overflow-y-auto shadow-lg transition-opacity duration-300">
            <div id="detail-placeholder" class="flex flex-col items-center justify-center h-full text-on-surface-variant opacity-60 mt-20">
                <span class="material-symbols-outlined text-6xl mb-4">touch_app</span>
                <p class="font-bold">Pilih mitra untuk melihat detail & keahlian</p>
            </div>

            <div id="detail-content" class="hidden">
                <div class="text-center mb-5">
                    <div class="relative inline-block">
                        <div id="detail-avatar" class="w-24 h-24 rounded-3xl object-cover border-4 border-white shadow-lg mx-auto bg-primary-container text-on-primary-container flex items-center justify-center font-bold text-4xl"></div>
                        <span id="detail-status-indicator" class="absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full"></span>
                    </div>
                    <h3 id="detail-name" class="font-headline-md text-xl font-bold mt-3 text-on-surface"></h3>
                    <p id="detail-role" class="text-xs font-bold text-on-surface-variant uppercase tracking-wider mt-1">Mitra • Umum</p>
                    <p class="text-xs text-on-surface-variant mt-0.5 italic font-medium">Bergabung sejak <span id="detail-joined"></span></p>
                </div>

                <!-- 1. Assessment Keahlian Layanan Card -->
                <div class="mb-5 p-4 bg-surface-container-low rounded-2xl border border-outline-variant/30">
                    <div class="flex items-center justify-between mb-2">
                        <h4 class="text-xs font-bold flex items-center gap-1.5 text-on-surface uppercase tracking-wider">
                            <span class="material-symbols-outlined text-[18px] text-primary">psychology</span>
                            <span>Assessment Keahlian</span>
                        </h4>
                        <span class="text-[10px] bg-primary/10 text-primary px-2 py-0.5 rounded-full font-bold">Matching Engine</span>
                    </div>

                    <div id="side-skills-summary" class="space-y-1.5 mb-3 text-xs">
                        <span class="text-xs text-outline italic">Memuat keahlian...</span>
                    </div>

                    <button type="button" onclick="openMitraAssessmentModal()" class="w-full py-2 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 active:scale-95 transition-all shadow-sm flex items-center justify-center gap-1.5">
                        <span class="material-symbols-outlined text-[16px]">rule</span>
                        <span>Kelola Assessment Keahlian</span>
                    </button>
                </div>

                <!-- 2. Status Uang Pendaftaran Card -->
                <div class="mb-5 p-4 bg-surface-container-low rounded-2xl border border-outline-variant/30">
                    <div class="flex items-center justify-between mb-2">
                        <h4 class="text-xs font-bold flex items-center gap-1.5 text-on-surface uppercase tracking-wider">
                            <span class="material-symbols-outlined text-[18px] text-emerald-600">payments</span>
                            <span>Uang Pendaftaran</span>
                        </h4>
                        <span id="side-reg-fee-badge" class="text-[10px] bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full font-bold uppercase">-</span>
                    </div>

                    <div class="space-y-1 text-xs mb-3">
                        <div class="flex justify-between">
                            <span class="text-on-surface-variant">Nominal Fee:</span>
                            <span id="side-reg-fee-nominal" class="font-bold text-on-surface">Rp 0</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-on-surface-variant">Sudah Dibayar:</span>
                            <span id="side-reg-fee-paid" class="font-bold text-emerald-700">Rp 0</span>
                        </div>
                        <div class="flex justify-between border-t border-outline-variant/20 pt-1 mt-1">
                            <span class="font-bold text-on-surface">Sisa Kekurangan:</span>
                            <span id="side-reg-fee-remaining" class="font-extrabold text-rose-600">Rp 0</span>
                        </div>
                        <div class="flex justify-between text-[11px] text-on-surface-variant/80 pt-1">
                            <span>Sumber Pembayaran:</span>
                            <span id="side-reg-fee-source" class="font-semibold text-on-surface">Cash / Transfer</span>
                        </div>
                    </div>

                    <button type="button" onclick="openMitraRegFeeModal()" class="w-full py-2 bg-emerald-700 text-white rounded-xl text-xs font-bold hover:bg-emerald-800 active:scale-95 transition-all shadow-sm flex items-center justify-center gap-1.5">
                        <span class="material-symbols-outlined text-[16px]">edit_note</span>
                        <span>Kelola Uang Pendaftaran</span>
                    </button>
                </div>

                <!-- KYC Docs -->
                <div class="mb-6">
                    <h4 class="text-sm font-bold mb-3 flex items-center gap-2 text-on-surface">
                        <span class="material-symbols-outlined text-[20px] text-secondary">verified_user</span> Dokumen KYC
                    </h4>
                    <div class="grid grid-cols-2 gap-3">
                        <div id="detail-ktp-card" onclick="viewKycDoc('ktp')" class="hidden group relative rounded-xl overflow-hidden cursor-pointer shadow-sm border border-outline-variant/30 bg-surface-variant h-24">
                            <img id="detail-ktp-img" src="" alt="KTP" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                                <span class="text-white text-xs font-bold flex items-center gap-1"><span class="material-symbols-outlined text-sm">visibility</span> Lihat KTP</span>
                            </div>
                        </div>
                        <div id="detail-selfie-card" onclick="viewKycDoc('selfie')" class="hidden group relative rounded-xl overflow-hidden cursor-pointer shadow-sm border border-outline-variant/30 bg-surface-variant h-24">
                            <img id="detail-selfie-img" src="" alt="Selfie" class="w-full h-full object-cover">
                            <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
                                <span class="text-white text-xs font-bold flex items-center gap-1"><span class="material-symbols-outlined text-sm">visibility</span> Lihat Selfie</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Quick Actions / Approval Actions -->
                <div class="mt-auto space-y-3">
                    <h4 class="text-sm font-bold mb-2 text-on-surface">Tindakan Cepat</h4>

                    <!-- Form actions for pending -->
                    <div id="action-approval" class="hidden flex-col gap-2">
                        <form id="form-approve" method="POST" action="" onsubmit="return confirmApproval(event)">
                            @csrf
                            <button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-green-100 text-green-700 rounded-xl font-bold hover:bg-green-200 transition-all text-sm shadow-sm active:scale-95">
                                <span class="material-symbols-outlined text-[20px]">check_circle</span>
                                <span>Approve Mitra</span>
                            </button>
                        </form>
                        <form id="form-reject" method="POST" action="" onsubmit="return confirmRejection(event)">
                            @csrf
                            <button type="submit" class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-red-100 text-red-700 rounded-xl font-bold hover:bg-red-200 transition-all text-sm shadow-sm active:scale-95">
                                <span class="material-symbols-outlined text-[20px]">cancel</span>
                                <span>Reject Mitra</span>
                            </button>
                        </form>
                    </div>

                    <!-- General actions -->
                    <div id="action-general" class="hidden flex-col gap-2">
                        <form id="form-toggle-suspend" method="POST" action="" onsubmit="return confirmToggleSuspendMitra(event)">
                            @csrf
                            <input type="hidden" name="suspend_reason" id="input-suspend-reason" value="">
                            <button type="submit" id="btn-toggle-suspend" class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-error/10 text-error rounded-xl font-bold hover:bg-error hover:text-white transition-all text-sm shadow-sm">
                                <span class="material-symbols-outlined text-[20px]" id="icon-toggle-suspend">block</span>
                                <span id="text-toggle-suspend">Suspend Mitra</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </aside>
    </div>
</div>

<!-- Modal KYC Image Preview -->
<div id="kyc-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm hidden items-center justify-center p-4">
    <div class="relative bg-white rounded-3xl p-5 max-w-lg w-full shadow-2xl border border-outline-variant/30 overflow-hidden">
        <div class="flex items-center justify-between pb-3 border-b border-outline-variant/20 mb-3">
            <h4 id="kyc-modal-title" class="font-bold text-sm text-on-surface flex items-center gap-2">
                <span class="material-symbols-outlined text-primary text-[20px]">badge</span>
                <span id="kyc-modal-title-text">Dokumen KYC</span>
            </h4>
            <button type="button" onclick="closeKycModal()" class="w-8 h-8 rounded-full bg-surface-container-high hover:bg-surface-variant flex items-center justify-center text-on-surface-variant transition-colors">
                <span class="material-symbols-outlined text-base">close</span>
            </button>
        </div>
        <div class="flex justify-center bg-black/5 rounded-2xl p-2 max-h-[70vh] overflow-hidden">
            <img id="kyc-modal-img" src="" class="max-h-[65vh] w-auto object-contain rounded-xl shadow-sm" alt="Preview Dokumen KYC">
        </div>
        <div class="mt-4 flex justify-end">
            <button type="button" onclick="closeKycModal()" class="px-5 py-2 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-colors shadow-sm">Tutup Preview</button>
        </div>
    </div>
</div>

<!-- Modal Assessment Keahlian Layanan -->
<div id="mitra-assessment-modal" class="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm hidden items-center justify-center p-4">
    <div class="relative bg-white rounded-3xl p-6 max-w-2xl w-full shadow-2xl border border-outline-variant/30 overflow-hidden max-h-[90vh] flex flex-col">
        <div class="flex items-center justify-between pb-4 border-b border-outline-variant/20 mb-4">
            <div class="flex items-center gap-3">
                <div class="p-2 bg-primary/10 text-primary rounded-xl">
                    <span class="material-symbols-outlined">psychology</span>
                </div>
                <div>
                    <h4 class="font-bold text-base text-on-surface">Assessment Keahlian Layanan</h4>
                    <p class="text-xs text-on-surface-variant" id="assessment-modal-subtitle">Tentukan status assessment (Pending / Lolos / Ditolak) & skor grade (A/B/C)</p>
                </div>
            </div>
            <button type="button" onclick="closeMitraAssessmentModal()" class="w-8 h-8 rounded-full bg-surface-container-high hover:bg-surface-variant flex items-center justify-center text-on-surface-variant transition-colors">
                <span class="material-symbols-outlined text-base">close</span>
            </button>
        </div>

        <form id="form-mitra-assessment" class="flex-1 overflow-y-auto pr-1 space-y-3 custom-scrollbar">
            <div class="space-y-3" id="assessment-services-list">
                <!-- Populated dynamically via JS -->
            </div>
        </form>

        <div class="pt-4 border-t border-outline-variant/20 mt-4 flex justify-end gap-3">
            <button type="button" onclick="closeMitraAssessmentModal()" class="px-5 py-2.5 bg-surface-container-high text-on-surface rounded-xl text-xs font-bold hover:bg-surface-variant transition-all">Batal</button>
            <button type="button" onclick="confirmSubmitMitraAssessment()" id="btn-save-assessment" class="px-6 py-2.5 bg-primary text-white rounded-xl text-xs font-bold hover:bg-primary/90 transition-all shadow-sm flex items-center gap-1.5">
                <span class="material-symbols-outlined text-[16px]">save</span>
                <span>Simpan Hasil Assessment</span>
            </button>
        </div>
    </div>
</div>

<!-- Modal Uang Pendaftaran Mitra Overhaul -->
<div id="mitra-registration-fee-modal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-50 hidden items-center justify-center p-4 overflow-y-auto">
    <div class="bg-surface-container-lowest rounded-3xl max-w-2xl w-full p-6 shadow-2xl border border-outline-variant/30 relative max-h-[90vh] flex flex-col my-auto">
        <div class="flex justify-between items-center pb-4 border-b border-outline-variant/20">
            <div>
                <h3 class="font-headline-sm text-lg font-bold text-on-surface">Uang Pendaftaran Mitra</h3>
                <p id="reg-fee-modal-subtitle" class="text-xs text-on-surface-variant">Kelola Skema & Riwayat Pembayaran</p>
            </div>
            <button type="button" onclick="closeMitraRegFeeModal()" class="w-8 h-8 rounded-full bg-surface-container-high text-on-surface-variant hover:bg-surface-variant flex items-center justify-center transition-all">
                <span class="material-symbols-outlined text-base">close</span>
            </button>
        </div>

        <div class="overflow-y-auto custom-scrollbar flex-1 py-4 space-y-6">
            <!-- SECTION 1: Pengaturan Skema Pembayaran -->
            <div id="container-reg-fee-section1" class="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/30 space-y-4 transition-all">
                <div class="flex items-center justify-between pb-2 border-b border-outline-variant/20">
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-xs font-bold">1</span>
                        <h4 class="font-bold text-xs text-on-surface uppercase tracking-wider">Pengaturan Skema Pembayaran</h4>
                    </div>
                    <span id="reg-fee-section1-lock-badge" class="hidden px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-200 flex items-center gap-1">
                        <span class="material-symbols-outlined text-[13px]">lock</span>
                        <span>Terkunci</span>
                    </span>
                </div>

                <div id="reg-fee-section1-lock-note" class="hidden text-[11px] text-amber-900 bg-amber-50 border border-amber-200 rounded-xl p-2.5 font-medium flex items-center gap-2">
                    <span class="material-symbols-outlined text-amber-700 text-base shrink-0">info</span>
                    <span>Skema pembayaran telah terkunci karena sudah terdapat riwayat pembayaran untuk mitra ini.</span>
                </div>

                <!-- Nominal Pendaftaran (Disabled by Default) -->
                <div>
                    <label class="block font-bold text-xs text-on-surface mb-1">Nominal Pendaftaran (Rp)</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant">Rp</span>
                        <input type="text" id="reg-fee-nominal" disabled oninput="format7DigitCurrencyInput(this); calcRegFeeRemaining();" placeholder="250.000" class="w-full pl-9 pr-3 py-2.5 bg-slate-100 border border-outline-variant/50 rounded-xl text-xs font-bold text-slate-700 cursor-not-allowed">
                    </div>
                    <p class="text-[10px] text-on-surface-variant mt-1">Standar biaya pendaftaran mitra (default Rp 250.000).</p>
                </div>

                <!-- Skema Pembayaran (Radio) -->
                <div>
                    <label class="block font-bold text-xs text-on-surface mb-1">Skema Pembayaran</label>
                    <div class="grid grid-cols-2 gap-3">
                        <label id="label-scheme-lunas" class="flex items-center gap-2 p-3 rounded-xl border border-outline-variant/30 cursor-pointer hover:bg-primary/5 bg-white transition-all">
                            <input type="radio" name="registration_fee_scheme" value="lunas" onchange="toggleRegFeeScheme()" class="text-primary focus:ring-primary">
                            <div>
                                <p class="text-xs font-bold text-on-surface">Lunas (Full)</p>
                                <p class="text-[10px] text-on-surface-variant">Bayar Lunas 100%</p>
                            </div>
                        </label>
                        <label id="label-scheme-kredit" class="flex items-center gap-2 p-3 rounded-xl border border-outline-variant/30 cursor-pointer hover:bg-primary/5 bg-white transition-all">
                            <input type="radio" name="registration_fee_scheme" value="kredit" onchange="toggleRegFeeScheme()" class="text-primary focus:ring-primary">
                            <div>
                                <p class="text-xs font-bold text-on-surface">Cicilan (Kredit)</p>
                                <p class="text-[10px] text-on-surface-variant">Angsuran Pendaftaran</p>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Metode / Sumber Pembayaran -->
                <div>
                    <label class="block font-bold text-xs text-on-surface mb-1">Sumber Pembayaran</label>
                    <div class="grid grid-cols-2 gap-3">
                        <label id="label-source-cash" class="flex items-center gap-2 p-3 rounded-xl border border-outline-variant/30 cursor-pointer hover:bg-primary/5 bg-white transition-all">
                            <input type="radio" name="registration_fee_payment_source" value="cash_transfer" onchange="toggleRegFeeScheme()" class="text-primary focus:ring-primary">
                            <div>
                                <p class="text-xs font-bold text-on-surface">Cash / Transfer Bank</p>
                                <p class="text-[10px] text-on-surface-variant">Bayar Tunai / Transfer</p>
                            </div>
                        </label>
                        <label id="label-source-potong" class="flex items-center gap-2 p-3 rounded-xl border border-outline-variant/30 cursor-pointer hover:bg-primary/5 bg-white transition-all">
                            <input type="radio" name="registration_fee_payment_source" value="potong_order" onchange="toggleRegFeeScheme()" class="text-primary focus:ring-primary">
                            <div>
                                <p class="text-xs font-bold text-on-surface">Potong Hasil Order</p>
                                <p class="text-[10px] text-on-surface-variant">Otomatis Per Pesanan</p>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Input Nominal Cicilan Per Order (Muncul jika potong_order) -->
                <div id="container-cut-per-order" class="hidden">
                    <label class="block font-bold text-xs text-on-surface mb-1">Nominal Pemotongan Per Order (Rp)</label>
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant">Rp</span>
                        <input type="text" id="reg-fee-cut-per-order" oninput="format7DigitCurrencyInput(this)" placeholder="20.000" class="w-full pl-9 pr-3 py-2.5 bg-white border border-outline-variant/50 rounded-xl text-xs font-bold text-on-surface focus:outline-none focus:border-primary">
                    </div>
                    <p class="text-[10px] text-on-surface-variant mt-1">Sistem akan memotong nominal ini dari dompet/penghasilan setiap kali mitra menyelesaikan order.</p>
                </div>
            </div>

            <!-- SECTION 2: Catat Pembayaran Baru & Riwayat Pembayaran -->
            <div class="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/30 space-y-4">
                <div class="flex items-center gap-2 pb-2 border-b border-outline-variant/20">
                    <span class="w-6 h-6 rounded-full bg-emerald-600 text-white flex items-center justify-center text-xs font-bold">2</span>
                    <h4 class="font-bold text-xs text-on-surface uppercase tracking-wider">Catat Pembayaran Baru & Riwayat</h4>
                </div>

                <!-- Live Summary Box -->
                <div class="p-3.5 rounded-xl bg-white border border-outline-variant/30 grid grid-cols-3 gap-2 text-center">
                    <div>
                        <span class="text-[10px] text-on-surface-variant block">Total Nominal</span>
                        <span id="reg-fee-summary-nominal" class="text-xs font-extrabold text-on-surface">Rp 0</span>
                    </div>
                    <div>
                        <span class="text-[10px] text-on-surface-variant block">Total Sudah Dibayar</span>
                        <span id="reg-fee-summary-paid" class="text-xs font-extrabold text-emerald-600">Rp 0</span>
                    </div>
                    <div>
                        <span class="text-[10px] text-on-surface-variant block">Sisa Kekurangan</span>
                        <span id="reg-fee-summary-remaining" class="text-xs font-extrabold text-rose-600">Rp 0</span>
                    </div>
                </div>

                <!-- Form Input Pembayaran Tunai Baru (Hanya jika Cash/Transfer) -->
                <div id="container-new-payment" class="p-3.5 rounded-xl bg-emerald-50/60 border border-emerald-200/60 space-y-3">
                    <h5 class="text-xs font-bold text-emerald-900 flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[16px] text-emerald-600">payments</span>
                        Input Pembayaran Tunai / Transfer Baru
                    </h5>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                        <div>
                            <label class="block font-bold text-[11px] text-on-surface mb-1 flex items-center gap-1">
                                <span>Nominal Dibayar (Rp)</span>
                                <span class="text-rose-600 font-bold text-xs">*</span>
                            </label>
                            <div class="relative">
                                <span class="absolute left-3 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant">Rp</span>
                                <input type="text" id="reg-fee-new-payment" oninput="format7DigitCurrencyInput(this)" placeholder="50.000" class="w-full pl-9 pr-3 py-2 bg-white border border-outline-variant/50 rounded-xl text-xs font-bold text-on-surface focus:outline-none focus:border-emerald-600 transition-all">
                            </div>
                            <p id="reg-fee-min-note" class="text-[10px] text-on-surface-variant mt-1">Wajib diisi, minimal pembayaran Rp 50.000 (atau sisa pelunasan).</p>
                        </div>
                        <div>
                            <label class="block font-bold text-[11px] text-on-surface mb-1">Catatan / Keterangan</label>
                            <input type="text" id="reg-fee-new-notes" placeholder="Misal: DP / Angsuran ke-1" class="w-full px-3 py-2 bg-white border border-outline-variant/50 rounded-xl text-xs font-semibold text-on-surface focus:outline-none focus:border-emerald-600">
                        </div>
                    </div>
                </div>

                <!-- Tabel Riwayat Pembayaran (Log) -->
                <div>
                    <h5 class="text-xs font-bold text-on-surface mb-2 flex items-center justify-between">
                        <span>Riwayat Pembayaran (Log)</span>
                        <span id="reg-fee-status-badge" class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-800 border border-green-200 uppercase">LUNAS</span>
                    </h5>
                    <div class="border border-outline-variant/30 rounded-xl overflow-hidden bg-white max-h-48 overflow-y-auto custom-scrollbar">
                        <table class="w-full text-left text-xs">
                            <thead class="bg-surface-container-low border-b border-outline-variant/30 text-on-surface-variant font-bold text-[11px]">
                                <tr>
                                    <th class="p-2.5">Tanggal</th>
                                    <th class="p-2.5">Nominal</th>
                                    <th class="p-2.5">Metode</th>
                                    <th class="p-2.5">Pencatat</th>
                                    <th class="p-2.5">Catatan</th>
                                </tr>
                            </thead>
                            <tbody id="reg-fee-history-tbody" class="divide-y divide-outline-variant/20">
                                <tr>
                                    <td colspan="5" class="p-4 text-center text-on-surface-variant opacity-70">Belum ada riwayat pembayaran.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="pt-4 border-t border-outline-variant/20 flex justify-end gap-3 shrink-0">
            <button type="button" onclick="closeMitraRegFeeModal()" class="px-5 py-2.5 bg-surface-container-high text-on-surface rounded-xl text-xs font-bold hover:bg-surface-variant transition-all">Batal</button>
            <button type="button" onclick="confirmSubmitMitraRegFee()" id="btn-save-reg-fee" class="px-6 py-2.5 bg-emerald-600 text-white rounded-xl text-xs font-bold hover:bg-emerald-700 transition-all shadow-sm flex items-center gap-1.5">
                <span class="material-symbols-outlined text-[16px]">save</span>
                <span>Simpan</span>
            </button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let currentSelectedMitraId = null;
    let currentMitraData = null;
    let currentMitraFullDetails = null;

    document.addEventListener('DOMContentLoaded', function() {
        const tableRows = document.querySelectorAll('.mitra-row');
        const detailPlaceholder = document.getElementById('detail-placeholder');
        const detailContent = document.getElementById('detail-content');

        tableRows.forEach(row => {
            row.addEventListener('click', () => {
                // Remove highlight from others
                tableRows.forEach(r => r.classList.remove('bg-primary/5'));
                // Highlight current
                row.classList.add('bg-primary/5');

                const data = JSON.parse(row.dataset.mitra);
                currentSelectedMitraId = data.id;
                currentMitraData = data;

                // Hide placeholder, show content
                detailPlaceholder.classList.add('hidden');
                detailContent.classList.remove('hidden');

                // Populate basic fields
                document.getElementById('detail-avatar').textContent = data.name.substring(0, 1).toUpperCase();
                document.getElementById('detail-name').textContent = data.name;
                document.getElementById('detail-role').textContent = `Mitra • ${data.city || 'Umum'}`;
                document.getElementById('detail-joined').textContent = data.created_at;

                // Status Indicator
                const statusInd = document.getElementById('detail-status-indicator');
                if (data.status === 'approved') {
                    statusInd.className = 'absolute bottom-0 right-0 w-6 h-6 bg-green-500 border-2 border-white rounded-full';
                } else if (data.status === 'pending') {
                    statusInd.className = 'absolute bottom-0 right-0 w-6 h-6 bg-amber-500 border-2 border-white rounded-full';
                } else {
                    statusInd.className = 'absolute bottom-0 right-0 w-6 h-6 bg-red-500 border-2 border-white rounded-full';
                }

                // Documents Thumbnail Preview
                const ktpCard = document.getElementById('detail-ktp-card');
                const ktpImg = document.getElementById('detail-ktp-img');
                if (data.ktp_image) {
                    ktpImg.src = data.ktp_image;
                    ktpCard.classList.remove('hidden');
                } else {
                    ktpCard.classList.add('hidden');
                }

                const selfieCard = document.getElementById('detail-selfie-card');
                const selfieImg = document.getElementById('detail-selfie-img');
                if (data.selfie_image) {
                    selfieImg.src = data.selfie_image;
                    selfieCard.classList.remove('hidden');
                } else {
                    selfieCard.classList.add('hidden');
                }

                // Fetch Full Details (Assessment & Registration Fee)
                fetchMitraDetails(data.id);

                // Actions
                const actionApproval = document.getElementById('action-approval');
                const actionGeneral = document.getElementById('action-general');

                if (data.status === 'pending') {
                    actionApproval.classList.remove('hidden');
                    actionApproval.classList.add('flex');
                    actionGeneral.classList.add('hidden');
                    actionGeneral.classList.remove('flex');

                    document.getElementById('form-approve').action = `/admin/mitra/${data.id}/approve`;
                    document.getElementById('form-reject').action = `/admin/mitra/${data.id}/reject`;
                } else {
                    actionApproval.classList.add('hidden');
                    actionApproval.classList.remove('flex');
                    actionGeneral.classList.remove('hidden');
                    actionGeneral.classList.add('flex');

                    const formSuspend = document.getElementById('form-toggle-suspend');
                    const btnSuspend = document.getElementById('btn-toggle-suspend');
                    const iconSuspend = document.getElementById('icon-toggle-suspend');
                    const textSuspend = document.getElementById('text-toggle-suspend');

                    if (data.status === 'suspended' || data.status === 'rejected') {
                        formSuspend.action = `/admin/mitra/${data.id}/unsuspend`;
                        btnSuspend.className = 'w-full flex items-center justify-center gap-2 px-4 py-3 bg-green-100 text-green-700 rounded-xl font-bold hover:bg-green-600 hover:text-white transition-all text-sm shadow-sm';
                        iconSuspend.textContent = 'check_circle';
                        textSuspend.textContent = 'Aktifkan Kembali Mitra';
                    } else {
                        formSuspend.action = `/admin/mitra/${data.id}/suspend`;
                        btnSuspend.className = 'w-full flex items-center justify-center gap-2 px-4 py-3 bg-error/10 text-error rounded-xl font-bold hover:bg-error hover:text-white transition-all text-sm shadow-sm';
                        iconSuspend.textContent = 'block';
                        textSuspend.textContent = 'Suspend Mitra';
                    }
                }

                // Animation
                if (detailContent) {
                    detailContent.style.opacity = '0.5';
                    detailContent.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        detailContent.style.opacity = '1';
                        detailContent.style.transform = 'scale(1)';
                    }, 150);
                }
            });
        });
    });

    function fetchMitraDetails(mitraId) {
        document.getElementById('side-skills-summary').innerHTML = '<span class="text-xs text-outline italic animate-pulse">Memuat keahlian & assessment...</span>';

        fetch(`/admin/mitra/${mitraId}/details`)
            .then(res => res.json())
            .then(res => {
                if (res.success) {
                    currentMitraFullDetails = res.mitra;
                    renderSidePanelDetails(res.mitra);
                }
            })
            .catch(err => {
                console.error(err);
                document.getElementById('side-skills-summary').innerHTML = '<span class="text-xs text-error">Gagal memuat detail assessment</span>';
            });
    }

    function renderSidePanelDetails(mitraData) {
        // 1. Render Skill Assessments Summary (Hanya yang Approve / Lolos)
        const skillsContainer = document.getElementById('side-skills-summary');
        const assessments = mitraData.assessments || [];
        const approvedList = assessments.filter(a => a.status === 'approved');

        if (approvedList.length > 0) {
            skillsContainer.innerHTML = approvedList.map(a => `
                <div class="flex items-center justify-between p-2 bg-white rounded-xl border border-outline-variant/20 shadow-2xs">
                    <span class="font-bold text-on-surface text-xs">${a.service_name}</span>
                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-800 border border-green-200">
                        LOLOS ${a.score ? '(Grade ' + a.score + ')' : ''}
                    </span>
                </div>
            `).join('');
        } else {
            skillsContainer.innerHTML = '<span class="text-xs text-outline italic">Belum ada keahlian yang disetujui</span>';
        }

        // 2. Render Registration Fee Summary
        const regFee = mitraData.registration_fee || {};
        const nominal = parseFloat(regFee.nominal || 0);
        const paid = parseFloat(regFee.paid || 0);
        const remaining = parseFloat(regFee.remaining || 0);
        const status = regFee.status || 'unpaid';
        const source = regFee.payment_source === 'potong_order' ? 'Potong Hasil Order' : 'Cash / Transfer';

        document.getElementById('side-reg-fee-nominal').textContent = formatRupiah(nominal);
        document.getElementById('side-reg-fee-paid').textContent = formatRupiah(paid);
        document.getElementById('side-reg-fee-remaining').textContent = formatRupiah(remaining);
        document.getElementById('side-reg-fee-source').textContent = source;

        const badge = document.getElementById('side-reg-fee-badge');
        if (status === 'lunas') {
            badge.className = 'text-[10px] bg-green-100 text-green-800 border border-green-200 px-2.5 py-0.5 rounded-full font-bold uppercase';
            badge.textContent = 'LUNAS';
        } else if (status === 'kredit') {
            badge.className = 'text-[10px] bg-amber-100 text-amber-800 border border-amber-200 px-2.5 py-0.5 rounded-full font-bold uppercase';
            badge.textContent = 'KREDIT';
        } else {
            badge.className = 'text-[10px] bg-rose-100 text-rose-800 border border-rose-200 px-2.5 py-0.5 rounded-full font-bold uppercase';
            badge.textContent = 'BELUM BAYAR';
        }
    }

    // Modal Assessment Logic
    function openMitraAssessmentModal() {
        if (!currentMitraFullDetails) return;

        const modal = document.getElementById('mitra-assessment-modal');
        const subtitle = document.getElementById('assessment-modal-subtitle');
        const listContainer = document.getElementById('assessment-services-list');

        subtitle.textContent = `Assessment Keahlian - ${currentMitraFullDetails.name}`;

        const rawAssessments = currentMitraFullDetails.assessments || [];
        const assessments = [...rawAssessments].sort((a, b) => {
            const aAssessed = (a.status === 'approved' || a.status === 'rejected' || !!a.score);
            const bAssessed = (b.status === 'approved' || b.status === 'rejected' || !!b.score);

            if (aAssessed !== bAssessed) return aAssessed ? -1 : 1;
            if (a.is_registered !== b.is_registered) return a.is_registered ? -1 : 1;
            return 0;
        });
        listContainer.innerHTML = assessments.map(a => `
            <div class="p-3.5 rounded-2xl bg-surface-container-low border border-outline-variant/30 space-y-2">
                <div class="flex justify-between items-center">
                    <div>
                        <h5 class="font-bold text-xs text-on-surface">${a.service_name}</h5>
                        <span class="text-[10px] text-primary font-semibold">${a.category_name}</span>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 pt-1">
                    <div>
                        <label class="block text-[10px] font-bold text-on-surface-variant mb-1">Status Assessment</label>
                        <select name="status_${a.service_id}" class="assessment-status-select w-full p-2 bg-white border border-outline-variant/40 rounded-xl text-xs font-bold text-on-surface focus:outline-none focus:border-primary" data-service-id="${a.service_id}" data-service-name="${a.service_name}" onchange="handleAssessmentStatusChange(this)">
                            <option value="pending" ${a.status === 'pending' ? 'selected' : ''}>⏳ Pending</option>
                            <option value="approved" ${a.status === 'approved' ? 'selected' : ''}>✅ Lolos (Approved)</option>
                            <option value="rejected" ${a.status === 'rejected' ? 'selected' : ''}>❌ Ditolak (Rejected)</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-on-surface-variant mb-1 flex items-center gap-1">
                            <span>Skor Grade</span>
                            <span id="score-required-star-${a.service_id}" class="${a.status === 'approved' ? 'text-rose-500 font-bold' : 'hidden'}">*</span>
                        </label>
                        <select name="score_${a.service_id}" class="assessment-score-select w-full p-2 bg-white border border-outline-variant/40 rounded-xl text-xs font-bold text-on-surface focus:outline-none focus:border-primary transition-all" data-service-id="${a.service_id}" data-service-name="${a.service_name}">
                            <option value="" ${!a.score ? 'selected' : ''}>- Pilih Grade -</option>
                            <option value="A" ${a.score === 'A' ? 'selected' : ''}>Grade A (Sangat Baik)</option>
                            <option value="B" ${a.score === 'B' ? 'selected' : ''}>Grade B (Baik)</option>
                            <option value="C" ${a.score === 'C' ? 'selected' : ''}>Grade C (Cukup)</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold text-on-surface-variant mb-1">Catatan Admin</label>
                        <input type="text" name="notes_${a.service_id}" value="${a.notes || ''}" placeholder="Catatan sertifikasi..." class="assessment-notes-input w-full p-2 bg-white border border-outline-variant/40 rounded-xl text-xs text-on-surface focus:outline-none focus:border-primary" data-service-id="${a.service_id}">
                    </div>
                </div>
            </div>
        `).join('');

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function handleAssessmentStatusChange(selectEl) {
        const sId = selectEl.dataset.serviceId;
        const star = document.getElementById(`score-required-star-${sId}`);
        const scoreSel = document.querySelector(`.assessment-score-select[data-service-id="${sId}"]`);
        const notesInput = document.querySelector(`.assessment-notes-input[data-service-id="${sId}"]`);

        if (selectEl.value === 'approved') {
            if (star) star.classList.remove('hidden');
            if (scoreSel && !scoreSel.value) {
                scoreSel.classList.add('border-primary', 'bg-primary/5');
            }
        } else if (selectEl.value === 'pending') {
            if (star) star.classList.add('hidden');
            if (scoreSel) {
                scoreSel.value = '';
                scoreSel.classList.remove('border-primary', 'bg-primary/5', '!border-rose-500', '!ring-2', '!ring-rose-200');
            }
            if (notesInput) {
                notesInput.value = '';
            }
        } else {
            // rejected
            if (star) star.classList.add('hidden');
            if (scoreSel) {
                scoreSel.classList.remove('border-primary', 'bg-primary/5', '!border-rose-500', '!ring-2', '!ring-rose-200');
            }
        }
    }

    function closeMitraAssessmentModal() {
        const modal = document.getElementById('mitra-assessment-modal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function confirmSubmitMitraAssessment() {
        if (!currentSelectedMitraId) return;

        const statusSelects = document.querySelectorAll('.assessment-status-select');
        const scoreSelects = document.querySelectorAll('.assessment-score-select');

        let hasInvalidScore = false;
        let invalidServiceName = '';
        let invalidScoreEl = null;

        let approvedCount = 0;
        let pendingCount = 0;
        let rejectedCount = 0;

        statusSelects.forEach(sel => {
            const sId = sel.dataset.serviceId;
            const sName = sel.dataset.serviceName || 'Layanan';
            const scoreSel = Array.from(scoreSelects).find(s => s.dataset.serviceId === sId);
            const scoreVal = scoreSel ? scoreSel.value : '';

            if (sel.value === 'approved') {
                approvedCount++;
                if (!scoreVal) {
                    hasInvalidScore = true;
                    if (!invalidServiceName) {
                        invalidServiceName = sName;
                        invalidScoreEl = scoreSel;
                    }
                }
            } else if (sel.value === 'pending') {
                pendingCount++;
            } else if (sel.value === 'rejected') {
                rejectedCount++;
            }
        });

        if (hasInvalidScore) {
            window.Toast.fire({
                icon: 'warning',
                title: 'Skor Grade Wajib Diisi',
                text: `Layanan "${invalidServiceName}" berstatus lolos tapi belum memiliki Skor Grade (A/B/C).`
            });
            if (invalidScoreEl) {
                invalidScoreEl.focus();
                invalidScoreEl.classList.add('!border-rose-500', '!ring-2', '!ring-rose-200');
                setTimeout(() => invalidScoreEl.classList.remove('!border-rose-500', '!ring-2', '!ring-rose-200'), 3000);
            }
            return;
        }

        const confirmHtml = `
            <div class="text-left text-xs space-y-2 text-on-surface">
                <p>Simpan hasil assessment keahlian untuk <strong>${currentMitraFullDetails ? currentMitraFullDetails.name : 'mitra'}</strong>?</p>
                <div class="p-2.5 bg-surface-container-low rounded-xl border border-outline-variant/30 space-y-1 font-semibold text-[11px]">
                    <p class="text-emerald-700 font-bold">✅ Lolos (Approved): ${approvedCount} Layanan</p>
                    <p class="text-amber-700">⏳ Pending: ${pendingCount} Layanan</p>
                    <p class="text-rose-700">❌ Ditolak: ${rejectedCount} Layanan</p>
                </div>
            </div>
        `;

        Swal.fire({
            title: 'Simpan Assessment?',
            html: confirmHtml,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#059669',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            customClass: {
                popup: '!rounded-2xl !p-5 !max-w-xs !w-full !shadow-xl !border !border-outline-variant/30',
                title: '!text-sm !font-bold !text-on-surface !mt-1',
                confirmButton: '!bg-primary hover:!bg-primary/90 !text-white !py-2 !px-4 !rounded-xl !text-xs !font-bold !shadow-xs transition-all',
                cancelButton: '!bg-surface-variant hover:!bg-outline-variant/30 !text-on-surface-variant !py-2 !px-4 !rounded-xl !text-xs !font-bold transition-all'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                submitMitraAssessment();
            }
        });
    }

    function submitMitraAssessment() {
        if (!currentSelectedMitraId) return;

        const btn = document.getElementById('btn-save-assessment');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="material-symbols-outlined text-[16px] animate-spin">sync</span> Menyimpan...';

        const statusSelects = document.querySelectorAll('.assessment-status-select');
        const scoreSelects = document.querySelectorAll('.assessment-score-select');
        const notesInputs = document.querySelectorAll('.assessment-notes-input');

        const assessments = {};
        statusSelects.forEach(sel => {
            const sId = sel.dataset.serviceId;
            const scoreSel = Array.from(scoreSelects).find(s => s.dataset.serviceId === sId);
            const notesIn = Array.from(notesInputs).find(n => n.dataset.serviceId === sId);

            assessments[sId] = {
                status: sel.value,
                score: scoreSel ? scoreSel.value : '',
                notes: notesIn ? notesIn.value : ''
            };
        });

        fetch(`/admin/mitra/${currentSelectedMitraId}/assessment`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    assessments
                })
            })
            .then(res => res.json())
            .then(res => {
                btn.disabled = false;
                btn.innerHTML = originalText;

                if (res.success) {
                    closeMitraAssessmentModal();
                    fetchMitraDetails(currentSelectedMitraId);

                    window.Toast.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Assessment keahlian layanan mitra berhasil disimpan.'
                    });
                } else {
                    window.Toast.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: res.message || 'Gagal menyimpan assessment keahlian.'
                    });
                }
            })
            .catch(err => {
                console.error(err);
                btn.disabled = false;
                btn.innerHTML = originalText;
                window.Toast.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Gagal menyimpan assessment keahlian.'
                });
            });
    }

    // Modal Registration Fee Overhaul Logic
    function format7DigitCurrencyInput(input) {
        let value = input.value.replace(/[^0-9]/g, '');
        if (value.length > 7) {
            value = value.substring(0, 7);
        }
        input.value = value ? parseInt(value, 10).toLocaleString('id-ID') : '';
    }

    function openMitraRegFeeModal() {
        if (!currentMitraFullDetails) return;

        const modal = document.getElementById('mitra-registration-fee-modal');
        const regFee = currentMitraFullDetails.registration_fee || {};
        const isLocked = (regFee.history && regFee.history.length > 0) || (regFee.paid > 0);

        document.getElementById('reg-fee-modal-subtitle').textContent = `Kelola Skema & Pembayaran - ${currentMitraFullDetails.name}`;
        document.getElementById('reg-fee-nominal').value = formatNumber(regFee.nominal || 250000);
        document.getElementById('reg-fee-cut-per-order').value = formatNumber(regFee.cut_per_order || 20000);
        document.getElementById('reg-fee-new-payment').value = '';
        document.getElementById('reg-fee-new-notes').value = '';

        const schemeRadios = document.querySelectorAll('input[name="registration_fee_scheme"]');
        schemeRadios.forEach(r => {
            r.checked = (r.value === (regFee.scheme || 'lunas'));
            r.disabled = isLocked;
            if (isLocked) {
                r.closest('label').classList.add('opacity-60', 'cursor-not-allowed', 'bg-slate-50');
            } else {
                r.closest('label').classList.remove('opacity-60', 'cursor-not-allowed', 'bg-slate-50');
            }
        });

        const sourceRadios = document.querySelectorAll('input[name="registration_fee_payment_source"]');
        sourceRadios.forEach(r => {
            r.checked = (r.value === (regFee.payment_source || 'cash_transfer'));
            r.disabled = isLocked;
            if (isLocked) {
                r.closest('label').classList.add('opacity-60', 'cursor-not-allowed', 'bg-slate-50');
            } else {
                r.closest('label').classList.remove('opacity-60', 'cursor-not-allowed', 'bg-slate-50');
            }
        });

        const lockBadge = document.getElementById('reg-fee-section1-lock-badge');
        const lockNote = document.getElementById('reg-fee-section1-lock-note');
        const cutInput = document.getElementById('reg-fee-cut-per-order');

        if (isLocked) {
            lockBadge.classList.remove('hidden');
            lockBadge.classList.add('flex');
            lockNote.classList.remove('hidden');
            cutInput.disabled = true;
            cutInput.classList.add('bg-slate-100', 'cursor-not-allowed');
        } else {
            lockBadge.classList.add('hidden');
            lockBadge.classList.remove('flex');
            lockNote.classList.add('hidden');
            cutInput.disabled = false;
            cutInput.classList.remove('bg-slate-100', 'cursor-not-allowed');
        }

        renderRegFeeHistoryTable(regFee.history || []);
        toggleRegFeeScheme();

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeMitraRegFeeModal() {
        const modal = document.getElementById('mitra-registration-fee-modal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function toggleRegFeeScheme() {
        const source = document.querySelector('input[name="registration_fee_payment_source"]:checked')?.value || 'cash_transfer';
        const scheme = document.querySelector('input[name="registration_fee_scheme"]:checked')?.value || 'lunas';
        const cutContainer = document.getElementById('container-cut-per-order');
        const newPaymentContainer = document.getElementById('container-new-payment');
        const newPaymentInput = document.getElementById('reg-fee-new-payment');
        const minNote = document.getElementById('reg-fee-min-note');

        const nominalStr = document.getElementById('reg-fee-nominal').value || '0';
        const regFee = currentMitraFullDetails ? (currentMitraFullDetails.registration_fee || {}) : {};
        const paid = regFee.paid || 0;
        const nominal = parseFloat(nominalStr.replace(/\./g, '')) || 0;
        const remaining = Math.max(0, nominal - paid);

        if (source === 'potong_order') {
            cutContainer.classList.remove('hidden');
            newPaymentContainer.classList.add('hidden');
        } else {
            cutContainer.classList.add('hidden');
            newPaymentContainer.classList.remove('hidden');

            if (scheme === 'lunas' && remaining > 0) {
                newPaymentInput.value = formatNumber(remaining);
                newPaymentInput.disabled = true;
                newPaymentInput.classList.add('bg-slate-100', 'cursor-not-allowed', 'text-slate-700');
                if (minNote) minNote.textContent = 'Pelunasan otomatis 100% nominal pendaftaran.';
            } else {
                newPaymentInput.disabled = false;
                newPaymentInput.classList.remove('bg-slate-100', 'cursor-not-allowed', 'text-slate-700');
                if (minNote) minNote.textContent = 'Wajib diisi, minimal pembayaran Rp 50.000 (atau sisa pelunasan).';
            }
        }

        calcRegFeeRemaining();
    }

    function calcRegFeeRemaining() {
        const nominalStr = document.getElementById('reg-fee-nominal').value || '0';
        const regFee = currentMitraFullDetails ? (currentMitraFullDetails.registration_fee || {}) : {};
        const paid = regFee.paid || 0;

        const nominal = parseFloat(nominalStr.replace(/\./g, '')) || 0;
        const remaining = Math.max(0, nominal - paid);

        document.getElementById('reg-fee-summary-nominal').textContent = formatRupiah(nominal);
        document.getElementById('reg-fee-summary-paid').textContent = formatRupiah(paid);
        document.getElementById('reg-fee-summary-remaining').textContent = formatRupiah(remaining);

        const isLunas = (paid >= nominal && nominal > 0);
        const badge = document.getElementById('reg-fee-status-badge');
        const saveBtn = document.getElementById('btn-save-reg-fee');
        const newPaymentInput = document.getElementById('reg-fee-new-payment');
        const newPaymentNotes = document.getElementById('reg-fee-new-notes');

        if (isLunas) {
            badge.className = 'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-800 border border-green-200 uppercase';
            badge.textContent = 'LUNAS';

            // Disable Save Button when already lunas
            if (saveBtn) {
                saveBtn.disabled = true;
                saveBtn.classList.add('opacity-50', 'cursor-not-allowed', 'bg-gray-400', 'pointer-events-none');
                saveBtn.classList.remove('bg-emerald-600', 'hover:bg-emerald-700');
                saveBtn.innerHTML = '<span class="material-symbols-outlined text-[16px]">check_circle</span><span>Sudah Lunas</span>';
            }

            // Disable new payment input & notes
            if (newPaymentInput) {
                newPaymentInput.value = '';
                newPaymentInput.disabled = true;
                newPaymentInput.classList.add('bg-slate-100', 'cursor-not-allowed');
            }
            if (newPaymentNotes) {
                newPaymentNotes.value = '';
                newPaymentNotes.disabled = true;
                newPaymentNotes.classList.add('bg-slate-100', 'cursor-not-allowed');
            }
        } else {
            if (paid > 0) {
                badge.className = 'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-200 uppercase';
                badge.textContent = 'KREDIT';
            } else {
                badge.className = 'px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-rose-100 text-rose-800 border border-rose-200 uppercase';
                badge.textContent = 'BELUM BAYAR';
            }

            // Enable Save Button
            if (saveBtn) {
                saveBtn.disabled = false;
                saveBtn.classList.remove('opacity-50', 'cursor-not-allowed', 'bg-gray-400', 'pointer-events-none');
                saveBtn.classList.add('bg-emerald-600', 'hover:bg-emerald-700');
                saveBtn.innerHTML = '<span class="material-symbols-outlined text-[16px]">save</span><span>Simpan</span>';
            }
            if (newPaymentNotes) {
                newPaymentNotes.disabled = false;
                newPaymentNotes.classList.remove('bg-slate-100', 'cursor-not-allowed');
            }
        }
    }

    function renderRegFeeHistoryTable(history) {
        const tbody = document.getElementById('reg-fee-history-tbody');
        if (!history || history.length === 0) {
            tbody.innerHTML = `<tr><td colspan="5" class="p-4 text-center text-on-surface-variant opacity-70">Belum ada riwayat pembayaran.</td></tr>`;
            return;
        }

        tbody.innerHTML = history.map(item => `
            <tr class="hover:bg-surface-container-low transition-colors">
                <td class="p-2.5 font-medium">${item.date}</td>
                <td class="p-2.5 font-bold text-emerald-700">Rp ${formatNumber(item.amount)}</td>
                <td class="p-2.5">
                    <span class="px-2 py-0.5 rounded-md text-[10px] font-bold ${item.payment_method === 'potong_order' ? 'bg-purple-100 text-purple-700' : 'bg-blue-100 text-blue-700'}">
                        ${item.payment_method === 'potong_order' ? 'Potong Order' : 'Cash/TF'}
                    </span>
                </td>
                <td class="p-2.5 text-on-surface-variant">${item.admin_name}</td>
                <td class="p-2.5 text-on-surface-variant truncate max-w-[120px]">${item.notes}</td>
            </tr>
        `).join('');
    }

    function confirmSubmitMitraRegFee() {
        if (!currentSelectedMitraId) return;

        const nominalStr = document.getElementById('reg-fee-nominal').value || '0';
        const scheme = document.querySelector('input[name="registration_fee_scheme"]:checked')?.value || 'lunas';
        const source = document.querySelector('input[name="registration_fee_payment_source"]:checked')?.value || 'cash_transfer';
        const newPaymentStr = document.getElementById('reg-fee-new-payment').value || '';
        const cutPerOrder = document.getElementById('reg-fee-cut-per-order').value || '0';

        const regFee = currentMitraFullDetails ? (currentMitraFullDetails.registration_fee || {}) : {};
        const paid = regFee.paid || 0;
        const nominal = parseFloat(nominalStr.replace(/\./g, '')) || 0;
        const remaining = Math.max(0, nominal - paid);
        const newPaymentVal = parseFloat(newPaymentStr.replace(/\./g, '')) || 0;

        if (remaining <= 0 && paid >= nominal && nominal > 0) {
            window.Toast.fire({
                icon: 'info',
                title: 'Sudah Lunas',
                text: 'Uang pendaftaran mitra ini sudah lunas 100%.'
            });
            return;
        }

        // Validation for Cash / Transfer
        if (source === 'cash_transfer' && remaining > 0) {
            if (newPaymentVal <= 0) {
                window.Toast.fire({
                    icon: 'warning',
                    title: 'Wajib Diisi',
                    text: 'Nominal pembayaran wajib diisi.'
                });
                document.getElementById('reg-fee-new-payment').focus();
                return;
            }

            const minAllowed = Math.min(50000, remaining);
            if (newPaymentVal < minAllowed) {
                window.Toast.fire({
                    icon: 'warning',
                    title: 'Minimal Rp 50.000',
                    text: `Nominal pembayaran minimal adalah ${formatRupiah(minAllowed)}.`
                });
                document.getElementById('reg-fee-new-payment').focus();
                return;
            }

            if (newPaymentVal > remaining) {
                window.Toast.fire({
                    icon: 'warning',
                    title: 'Melebihi Sisa',
                    text: `Nominal pembayaran tidak boleh melebihi sisa kekurangan (${formatRupiah(remaining)}).`
                });
                document.getElementById('reg-fee-new-payment').focus();
                return;
            }
        }

        let confirmHtml = `
            <div class="text-left text-xs space-y-1.5 text-on-surface">
                <p>Simpan perubahan pendaftaran mitra?</p>
                <div class="p-2.5 bg-surface-container-low rounded-xl border border-outline-variant/30 space-y-1 font-semibold text-[11px]">
                    <p><strong>Nominal:</strong> Rp ${nominalStr}</p>
                    <p><strong>Skema:</strong> ${scheme === 'lunas' ? 'Lunas Full' : 'Cicilan (Kredit)'}</p>
                    <p><strong>Metode:</strong> ${source === 'cash_transfer' ? 'Cash / Transfer' : 'Potong Dari Order'}</p>
                    ${source === 'potong_order' ? `<p class="text-purple-700 font-bold"><strong>Potong / Order:</strong> Rp ${cutPerOrder}</p>` : ''}
                    ${source === 'cash_transfer' && newPaymentVal > 0 ? `<p class="text-emerald-700 font-bold"><strong>Bayar Baru:</strong> Rp ${formatNumber(newPaymentVal)}</p>` : ''}
                </div>
            </div>
        `;

        Swal.fire({
            title: 'Konfirmasi Simpan',
            html: confirmHtml,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#059669',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, Simpan',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            customClass: {
                popup: '!rounded-2xl !p-5 !max-w-xs !w-full !shadow-xl !border !border-outline-variant/30',
                title: '!text-sm !font-bold !text-on-surface !mt-1',
                confirmButton: '!bg-emerald-600 hover:!bg-emerald-700 !text-white !py-2 !px-4 !rounded-xl !text-xs !font-bold !shadow-xs transition-all',
                cancelButton: '!bg-surface-variant hover:!bg-outline-variant/30 !text-on-surface-variant !py-2 !px-4 !rounded-xl !text-xs !font-bold transition-all'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                submitMitraRegFee();
            }
        });
    }

    function submitMitraRegFee() {
        if (!currentSelectedMitraId) return;

        const btn = document.getElementById('btn-save-reg-fee');
        const originalText = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="material-symbols-outlined text-[16px] animate-spin">sync</span> Menyimpan...';

        const nominal = document.getElementById('reg-fee-nominal').value;
        const scheme = document.querySelector('input[name="registration_fee_scheme"]:checked')?.value || 'lunas';
        const source = document.querySelector('input[name="registration_fee_payment_source"]:checked')?.value || 'cash_transfer';
        const cutPerOrder = document.getElementById('reg-fee-cut-per-order').value;
        const newPaymentAmount = document.getElementById('reg-fee-new-payment').value;
        const newPaymentNotes = document.getElementById('reg-fee-new-notes').value;

        fetch(`/admin/mitra/${currentSelectedMitraId}/registration-fee`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    registration_fee_nominal: nominal,
                    registration_fee_scheme: scheme,
                    registration_fee_payment_source: source,
                    registration_fee_cut_per_order: cutPerOrder,
                    new_payment_amount: newPaymentAmount,
                    new_payment_notes: newPaymentNotes
                })
            })
            .then(res => res.json())
            .then(res => {
                btn.disabled = false;
                btn.innerHTML = originalText;

                if (res.success) {
                    closeMitraRegFeeModal();
                    fetchMitraDetails(currentSelectedMitraId);

                    window.Toast.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: 'Status & riwayat uang pendaftaran mitra berhasil diperbarui.'
                    });
                } else {
                    window.Toast.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: res.message || 'Gagal memperbarui status uang pendaftaran'
                    });
                }
            })
            .catch(err => {
                btn.disabled = false;
                btn.innerHTML = originalText;
                console.error(err);
                window.Toast.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Gagal menyimpan pendaftaran mitra'
                });
            });
    }

    function viewKycDoc(type) {
        if (!currentMitraData) return;
        const modal = document.getElementById('kyc-modal');
        const modalImg = document.getElementById('kyc-modal-img');
        const titleText = document.getElementById('kyc-modal-title-text');

        if (type === 'ktp' && currentMitraData.ktp_image) {
            modalImg.src = currentMitraData.ktp_image;
            titleText.textContent = `Foto KTP - ${currentMitraData.name}`;
        } else if (type === 'selfie' && currentMitraData.selfie_image) {
            modalImg.src = currentMitraData.selfie_image;
            titleText.textContent = `Foto Selfie + KTP - ${currentMitraData.name}`;
        } else {
            return;
        }

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeKycModal() {
        const modal = document.getElementById('kyc-modal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    function confirmApproval(e) {
        e.preventDefault();
        const name = document.getElementById('detail-name')?.textContent || 'Mitra';

        Swal.fire({
            title: 'Setujui (Approve) Mitra?',
            html: `Apakah Anda yakin ingin menyetujui pendaftaran mitra <b>${name}</b>?<br><span class="text-xs text-on-surface-variant/80 mt-1 block">Akun mitra akan aktif dan dapat mulai menerima pesanan.</span>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Ya, Approve Mitra',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            buttonsStyling: false,
            customClass: {
                popup: '!rounded-2xl !p-6 !max-w-sm',
                title: '!text-lg !font-bold !text-on-surface !mt-2',
                htmlContainer: '!text-sm !text-on-surface-variant !mt-2 !mb-5',
                actions: '!gap-3 !w-full !mt-0 !px-2',
                confirmButton: '!flex-1 !bg-green-600 hover:!bg-green-700 !text-white !py-2.5 !rounded-xl !text-sm !font-bold shadow-md transition-all',
                cancelButton: '!flex-1 !bg-surface-variant !text-on-surface-variant !py-2.5 !rounded-xl !text-sm !font-bold hover:!bg-outline-variant/30 transition-all'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-approve').submit();
            }
        });
        return false;
    }

    function confirmRejection(e) {
        e.preventDefault();
        const name = document.getElementById('detail-name')?.textContent || 'Mitra';

        Swal.fire({
            title: 'Tolak (Reject) Mitra?',
            html: `Apakah Anda yakin ingin menolak pendaftaran mitra <b>${name}</b>?<br><span class="text-xs text-error/80 mt-1 block">Status pendaftaran mitra akan diubah menjadi Rejected.</span>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, Tolak Mitra',
            cancelButtonText: 'Batal',
            reverseButtons: true,
            buttonsStyling: false,
            customClass: {
                popup: '!rounded-2xl !p-6 !max-w-sm',
                title: '!text-lg !font-bold !text-on-surface !mt-2',
                htmlContainer: '!text-sm !text-on-surface-variant !mt-2 !mb-5',
                actions: '!gap-3 !w-full !mt-0 !px-2',
                confirmButton: '!flex-1 !bg-error hover:!opacity-90 !text-white !py-2.5 !rounded-xl !text-sm !font-bold shadow-md transition-all',
                cancelButton: '!flex-1 !bg-surface-variant !text-on-surface-variant !py-2.5 !rounded-xl !text-sm !font-bold hover:!bg-outline-variant/30 transition-all'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById('form-reject').submit();
            }
        });
        return false;
    }

    function confirmToggleSuspendMitra(e) {
        e.preventDefault();
        if (!currentMitraData) return false;

        const name = currentMitraData.name || 'Mitra';
        const isCurrentlySuspended = currentMitraData.status === 'suspended' || currentMitraData.status === 'rejected';

        if (isCurrentlySuspended) {
            Swal.fire({
                title: 'Aktifkan Kembali Mitra?',
                html: `Apakah Anda yakin ingin mengaktifkan kembali akun mitra <b>${name}</b>?<br><span class="text-xs text-on-surface-variant/80 mt-1 block">Mitra akan dapat login dan kembali menerima pesanan.</span>`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Aktifkan',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                buttonsStyling: false,
                customClass: {
                    popup: '!rounded-2xl !p-6 !max-w-sm',
                    title: '!text-lg !font-bold !text-on-surface !mt-2',
                    htmlContainer: '!text-sm !text-on-surface-variant !mt-2 !mb-5',
                    actions: '!gap-3 !w-full !mt-0 !px-2',
                    confirmButton: '!flex-1 !bg-green-600 hover:!bg-green-700 !text-white !py-2.5 !rounded-xl !text-sm !font-bold shadow-md transition-all',
                    cancelButton: '!flex-1 !bg-surface-variant !text-on-surface-variant !py-2.5 !rounded-xl !text-sm !font-bold hover:!bg-outline-variant/30 transition-all'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('form-toggle-suspend').submit();
                }
            });
        } else {
            Swal.fire({
                title: 'Suspend Akun Mitra?',
                html: `Anda akan menonaktifkan akun mitra <b>${name}</b>.<br><span class="text-xs text-error/80 mt-1 block">Mitra tidak akan dapat login atau menerima pesanan selama disuspend.</span>`,
                input: 'textarea',
                inputPlaceholder: 'Masukkan alasan suspend (opsional)...',
                inputAttributes: {
                    'class': 'w-full text-xs p-3 rounded-xl border border-outline-variant/50 focus:ring-2 focus:ring-error outline-none mt-2'
                },
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Suspend Akun',
                cancelButtonText: 'Batal',
                reverseButtons: true,
                buttonsStyling: false,
                customClass: {
                    popup: '!rounded-2xl !p-6 !max-w-sm',
                    title: '!text-lg !font-bold !text-on-surface !mt-2',
                    htmlContainer: '!text-sm !text-on-surface-variant !mt-2 !mb-3',
                    actions: '!gap-3 !w-full !mt-4 !px-2',
                    confirmButton: '!flex-1 !bg-error hover:!opacity-90 !text-white !py-2.5 !rounded-xl !text-sm !font-bold shadow-md transition-all',
                    cancelButton: '!flex-1 !bg-surface-variant !text-on-surface-variant !py-2.5 !rounded-xl !text-sm !font-bold hover:!bg-outline-variant/30 transition-all'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('input-suspend-reason').value = result.value || 'Penangguhan akun oleh Admin';
                    document.getElementById('form-toggle-suspend').submit();
                }
            });
        }

        return false;
    }

    function formatRupiah(number) {
        return 'Rp ' + new Intl.NumberFormat('id-ID').format(number);
    }

    function formatNumber(number) {
        return new Intl.NumberFormat('id-ID').format(number);
    }
</script>
@endsection