
<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
    <div class="mb-12">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 mb-8">
            <div class="relative">
                <div class="absolute -left-3 -top-3 w-20 h-20 bg-gradient-to-br from-green-500/10 to-emerald-600/10 rounded-full blur-xl"></div>
                <h1 class="text-4xl font-black tracking-tight dark:text-white relative z-10 mb-2">
                    <span class="bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                        Laporan Fee Telemarketing
                    </span>
                </h1>
                <p class="text-slate-500 dark:text-slate-400 text-sm pl-1">
                    <i data-lucide="phone-call" class="w-4 h-4 inline mr-2"></i>
                    Rekap fee telemarketing dari pendaftaran mahasiswa
                </p>
            </div>

            <div class="flex items-center gap-4">
                <a href="<?php echo e(route('laporan.fee-marketing')); ?>"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="trending-up" class="w-4 h-4"></i>
                    <span>Laporan Marketing</span>
                </a>
                <button onclick="window.print()"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="printer" class="w-4 h-4"></i>
                    <span>Print</span>
                </button>
                <a href="<?php echo e(route('laporan.fee-telemarketing')); ?>?export=1"
                    class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-700 transition-all flex items-center gap-2 shadow-sm">
                    <i data-lucide="download" class="w-4 h-4"></i>
                    <span>Export</span>
                </a>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Total Transaksi</p>
                        <p class="text-2xl font-bold text-emerald-600 dark:text-emerald-400 mt-1"><?php echo e(number_format($summary['jumlah_transaksi'])); ?></p>
                    </div>
                    <div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center">
                        <i data-lucide="receipt" class="w-5 h-5"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Pending</p>
                        <p class="text-2xl font-bold text-yellow-600 dark:text-yellow-400 mt-1">Rp <?php echo e(number_format($summary['total_pending'], 0, ',', '.')); ?></p>
                    </div>
                    <div class="w-10 h-10 rounded-xl bg-yellow-500/10 text-yellow-500 flex items-center justify-center">
                        <i data-lucide="clock" class="w-5 h-5"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Disetujui</p>
                        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400 mt-1">Rp <?php echo e(number_format($summary['total_disetujui'], 0, ',', '.')); ?></p>
                    </div>
                    <div class="w-10 h-10 rounded-xl bg-blue-500/10 text-blue-500 flex items-center justify-center">
                        <i data-lucide="check-circle" class="w-5 h-5"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Dibayar</p>
                        <p class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1">Rp <?php echo e(number_format($summary['total_dibayar'], 0, ',', '.')); ?></p>
                    </div>
                    <div class="w-10 h-10 rounded-xl bg-green-500/10 text-green-500 flex items-center justify-center">
                        <i data-lucide="credit-card" class="w-5 h-5"></i>
                    </div>
                </div>
            </div>
            <div class="bg-white dark:bg-[#1a1a2e] rounded-2xl border border-slate-200 dark:border-white/5 p-6 shadow-sm">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-500 dark:text-slate-400">Total Keseluruhan</p>
                        <p class="text-2xl font-bold text-purple-600 dark:text-purple-400 mt-1">Rp <?php echo e(number_format($summary['total_keseluruhan'], 0, ',', '.')); ?></p>
                    </div>
                    <div class="w-10 h-10 rounded-xl bg-purple-500/10 text-purple-500 flex items-center justify-center">
                        <i data-lucide="coins" class="w-5 h-5"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden mb-6">
            <div class="p-6 border-b border-slate-100 dark:border-white/5">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-green-500/10 to-emerald-600/10 text-green-500 flex items-center justify-center">
                        <i data-lucide="filter" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-gray-900 dark:text-white">Filter Data</h3>
                        <p class="text-xs text-slate-500">Filter berdasarkan telemarketing, status, dan tanggal</p>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <form method="GET" action="<?php echo e(route('laporan.fee-telemarketing')); ?>" class="space-y-4" id="filterForm">
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pilih Telemarketing</label>
                            <select name="telemarketing_id" class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-green-500">
                                <option value="">-- Semua Telemarketing --</option>
                                <?php $__currentLoopData = $telemarketingList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tele): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <option value="<?php echo e($tele->id); ?>" <?php echo e(request('telemarketing_id') == $tele->id ? 'selected' : ''); ?>>
                                        <?php echo e($tele->name); ?>

                                    </option>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Status</label>
                            <select name="status" class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-green-500">
                                <option value="">-- Semua Status --</option>
                                <option value="pending" <?php echo e(request('status') == 'pending' ? 'selected' : ''); ?>>Pending</option>
                                <option value="disetujui" <?php echo e(request('status') == 'disetujui' ? 'selected' : ''); ?>>Disetujui</option>
                                <option value="dibayar" <?php echo e(request('status') == 'dibayar' ? 'selected' : ''); ?>>Dibayar</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Awal</label>
                            <input type="date" name="tanggal_awal" value="<?php echo e(request('tanggal_awal')); ?>" class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-green-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tanggal Akhir</label>
                            <input type="date" name="tanggal_akhir" value="<?php echo e(request('tanggal_akhir')); ?>" class="w-full px-4 py-3 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl focus:ring-2 focus:ring-green-500">
                        </div>
                    </div>

                    <!-- Active Filters -->
                    <?php if(request()->hasAny(['telemarketing_id', 'status', 'tanggal_awal', 'tanggal_akhir'])): ?>
                    <div class="flex flex-wrap items-center gap-3 pt-2">
                        <span class="text-sm font-medium text-slate-500 dark:text-slate-400">Filter Aktif:</span>
                        <div class="flex flex-wrap gap-2">
                            <?php if(request('telemarketing_id')): ?>
                                <?php
                                    $selectedTele = $telemarketingList->firstWhere('id', request('telemarketing_id'));
                                ?>
                                <span class="inline-flex items-center gap-1 px-3 py-1 bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg text-xs font-medium">
                                    <i data-lucide="user" class="w-3 h-3"></i>
                                    <?php echo e($selectedTele->name ?? 'Telemarketing'); ?>

                                </span>
                            <?php endif; ?>
                            <?php if(request('status')): ?>
                                <span class="inline-flex items-center gap-1 px-3 py-1 bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg text-xs font-medium">
                                    <i data-lucide="tag" class="w-3 h-3"></i>
                                    <?php echo e(ucfirst(request('status'))); ?>

                                </span>
                            <?php endif; ?>
                            <?php if(request('tanggal_awal')): ?>
                                <span class="inline-flex items-center gap-1 px-3 py-1 bg-purple-500/10 text-purple-600 dark:text-purple-400 rounded-lg text-xs font-medium">
                                    <i data-lucide="calendar" class="w-3 h-3"></i>
                                    Dari: <?php echo e(request('tanggal_awal')); ?>

                                </span>
                            <?php endif; ?>
                            <?php if(request('tanggal_akhir')): ?>
                                <span class="inline-flex items-center gap-1 px-3 py-1 bg-purple-500/10 text-purple-600 dark:text-purple-400 rounded-lg text-xs font-medium">
                                    <i data-lucide="calendar" class="w-3 h-3"></i>
                                    Sampai: <?php echo e(request('tanggal_akhir')); ?>

                                </span>
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endif; ?>

                    <div class="flex justify-end gap-3 pt-4 border-t border-slate-100 dark:border-white/5">
                        <button type="submit" class="px-4 py-2.5 bg-gradient-to-r from-green-600 to-emerald-700 text-white rounded-xl text-sm font-medium hover:shadow-lg transition-all flex items-center gap-2">
                            <i data-lucide="search" class="w-4 h-4"></i> Filter
                        </button>
                        <a href="<?php echo e(route('laporan.fee-telemarketing')); ?>" class="px-4 py-2.5 bg-white dark:bg-gray-800 border border-slate-200 dark:border-gray-700 rounded-xl text-sm font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-50 transition-all flex items-center gap-2">
                            <i data-lucide="x" class="w-4 h-4"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Table Section -->
        <div class="bg-white dark:bg-[#1a1a2e] rounded-3xl border border-slate-200 dark:border-white/5 shadow-xl overflow-hidden">
            <div class="p-6 border-b border-slate-100 dark:border-white/5 flex justify-between items-center">
                <div>
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white">Data Fee Telemarketing</h3>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Daftar fee telemarketing dari pendaftaran mahasiswa</p>
                </div>
                <div class="text-sm text-slate-500 dark:text-slate-400">
                    Total: <span class="font-bold text-green-600 dark:text-green-400"><?php echo e($feeTrackings->total()); ?></span> data
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-slate-50/50 dark:bg-white/5">
                        <tr>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">No</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Telemarketing</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Mahasiswa</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">NIM</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Prodi</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Kampus</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Nominal Fee</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Status</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Tanggal Input</th>
                            <th class="text-left py-4 px-4 text-xs font-semibold text-slate-500 uppercase">Tgl Update</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                        <?php $__empty_1 = true; $__currentLoopData = $feeTrackings; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $fee): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-white/5 transition-colors">
                                <td class="py-4 px-4">
                                    <span class="inline-flex items-center justify-center w-8 h-8 bg-slate-100 dark:bg-gray-800 text-slate-600 rounded-lg text-xs font-bold">
                                        <?php echo e($feeTrackings->firstItem() + $index); ?>

                                    </span>
                                </td>
                                <td class="py-4 px-4">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-lg bg-green-500/10 text-green-500 flex items-center justify-center">
                                            <i data-lucide="phone" class="w-4 h-4"></i>
                                        </div>
                                        <span class="font-medium"><?php echo e($fee->user->name ?? '-'); ?></span>
                                    </div>
                                </td>
                                <td class="py-4 px-4">
                                    <div class="font-medium text-gray-900 dark:text-white"><?php echo e($fee->mahasiswa->nama ?? '-'); ?></div>
                                    <div class="text-xs text-slate-500"><?php echo e($fee->mahasiswa->nim ?? '-'); ?></div>
                                </td>
                                <td class="py-4 px-4 font-mono text-sm"><?php echo e($fee->mahasiswa->nim ?? '-'); ?></td>
                                <td class="py-4 px-4 text-sm"><?php echo e($fee->mahasiswa->prodi->nama ?? '-'); ?></td>
                                <td class="py-4 px-4 text-sm"><?php echo e($fee->mahasiswa->kampus->nama ?? '-'); ?></td>
                                <td class="py-4 px-4">
                                    <span class="font-semibold text-green-600 dark:text-green-400">
                                        Rp <?php echo e(number_format($fee->nominal_fee, 0, ',', '.')); ?>

                                    </span>
                                </td>
                                <td class="py-4 px-4">
                                    <?php if($fee->status == 'pending'): ?>
                                        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-yellow-100 text-yellow-700">
                                            <i data-lucide="clock" class="w-3 h-3"></i> Pending
                                        </span>
                                    <?php elseif($fee->status == 'disetujui'): ?>
                                        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-700">
                                            <i data-lucide="check-circle" class="w-3 h-3"></i> Disetujui
                                        </span>
                                    <?php else: ?>
                                        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs bg-green-100 text-green-700">
                                            <i data-lucide="credit-card" class="w-3 h-3"></i> Dibayar
                                        </span>
                                    <?php endif; ?>
                                </td>
                                <td class="py-4 px-4 text-sm">
                                    <?php echo e($fee->created_at ? $fee->created_at->format('d/m/Y H:i') : '-'); ?>

                                    <div class="text-xs text-slate-400"><?php echo e($fee->created_at ? $fee->created_at->diffForHumans() : '-'); ?></div>
                                </td>
                                <td class="py-4 px-4 text-sm">
                                    <?php if($fee->status != 'pending'): ?>
                                        <?php echo e($fee->updated_at ? $fee->updated_at->format('d/m/Y H:i') : '-'); ?>

                                    <?php else: ?>
                                        -
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                            <tr>
                                <td colspan="10" class="py-12 px-6 text-center">
                                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
                                        <i data-lucide="inbox" class="w-8 h-8 text-slate-400"></i>
                                    </div>
                                    <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-2">Tidak ada data fee telemarketing</h4>
                                    <p class="text-slate-500 dark:text-slate-400">
                                        <?php if(request()->hasAny(['telemarketing_id', 'status', 'tanggal_awal', 'tanggal_akhir'])): ?>
                                            Tidak ada data yang sesuai dengan filter yang dipilih
                                        <?php else: ?>
                                            Belum ada fee telemarketing dari pendaftaran mahasiswa
                                        <?php endif; ?>
                                    </p>
                                    <?php if(request()->hasAny(['telemarketing_id', 'status', 'tanggal_awal', 'tanggal_akhir'])): ?>
                                        <a href="<?php echo e(route('laporan.fee-telemarketing')); ?>" class="inline-flex items-center gap-2 mt-4 px-4 py-2 text-sm text-green-600 hover:text-green-700">
                                            <i data-lucide="x" class="w-4 h-4"></i> Reset Filter
                                        </a>
                                    <?php endif; ?>
                                </td>
                            </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <?php if($feeTrackings->hasPages()): ?>
                <div class="p-6 border-t border-slate-100 dark:border-white/5">
                    <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                        <div class="text-sm text-slate-500 dark:text-slate-400">
                            Menampilkan <?php echo e($feeTrackings->firstItem()); ?> - <?php echo e($feeTrackings->lastItem()); ?> dari <?php echo e($feeTrackings->total()); ?> data
                        </div>
                        <div class="flex items-center gap-2">
                            <?php echo e($feeTrackings->appends(request()->query())->links('vendor.pagination.tailwind')); ?>

                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            lucide.createIcons();
        });

        // Fungsi untuk print
        window.onbeforeprint = function() {
            lucide.createIcons();
        };
    </script>

    <style>
        @media print {
            .bg-white, .dark\:bg-\[\#1a1a2e\] {
                background-color: white !important;
            }
            .shadow-xl {
                box-shadow: none !important;
            }
            button, .flex.items-center.gap-4, .flex.justify-end.gap-3 {
                display: none !important;
            }
        }
    </style>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
<?php endif; ?>
<?php /**PATH C:\Users\User\Documents\K2-PROJECTS\k2-sipema\resources\views/laporan/fee-telemarketing.blade.php ENDPATH**/ ?>