
<?php $__env->startSection('title', 'Laporan Servis'); ?>

<?php $__env->startSection('content'); ?>


<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-6">
    <div>
        <h1 class="text-xl font-bold text-gray-900">Laporan Servis</h1>
        <p class="text-sm text-gray-500 mt-0.5">Statistik & arsip data tiket servis</p>
    </div>

    
    <a href="<?php echo e(route('admin.reports.export', array_filter(['year' => $year, 'month' => $month ?: null]))); ?>"
       class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 active:bg-emerald-800
              text-white text-sm font-semibold rounded-xl px-4 py-2.5 transition shadow-sm self-start sm:self-auto">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
        </svg>
        Export Excel
    </a>
</div>


<form method="GET" action="<?php echo e(route('admin.reports.index')); ?>"
      class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 mb-6">
    <div class="flex flex-wrap items-end gap-3">

        
        <div class="flex-1 min-w-[110px]">
            <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wider">Tahun</label>
            <select name="year"
                    class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm bg-white
                           focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
                <?php $__currentLoopData = $availableYears; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $y): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($y); ?>" <?php echo e($year == $y ? 'selected' : ''); ?>><?php echo e($y); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </div>

        
        <div class="flex-1 min-w-[130px]">
            <label class="block text-xs font-semibold text-gray-500 mb-1.5 uppercase tracking-wider">Bulan</label>
            <select name="month"
                    class="w-full rounded-xl border border-gray-200 px-3 py-2.5 text-sm bg-white
                           focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
                <option value="0" <?php echo e($month == 0 ? 'selected' : ''); ?>>Semua Bulan</option>
                <?php $__currentLoopData = $months; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $i => $mn): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <option value="<?php echo e($i + 1); ?>" <?php echo e($month == ($i + 1) ? 'selected' : ''); ?>><?php echo e($mn); ?></option>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </select>
        </div>

        <button type="submit"
                class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white
                       text-sm font-semibold rounded-xl px-5 py-2.5 transition shadow-sm">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z"/>
            </svg>
            Filter
        </button>

        <?php if($month || $year != now()->year): ?>
        <a href="<?php echo e(route('admin.reports.index')); ?>"
           class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700
                  px-3 py-2.5 rounded-xl hover:bg-gray-100 transition">
            Reset
        </a>
        <?php endif; ?>

    </div>
</form>


<?php
$kpiCards = [
    ['label' => 'Total Masuk',    'value' => $kpi->total,   'color' => 'blue',  'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
    ['label' => 'Berhasil',       'value' => $kpi->selesai, 'color' => 'green', 'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'],
    ['label' => 'Dibatalkan',     'value' => $kpi->batal,   'color' => 'red',   'icon' => 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'],
    ['label' => 'Masih Aktif',    'value' => $kpi->aktif,   'color' => 'amber', 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
];
$colorMap = [
    'blue'  => ['bg' => 'bg-blue-50',  'icon' => 'text-blue-500',  'val' => 'text-blue-700'],
    'green' => ['bg' => 'bg-green-50', 'icon' => 'text-green-500', 'val' => 'text-green-700'],
    'red'   => ['bg' => 'bg-red-50',   'icon' => 'text-red-500',   'val' => 'text-red-700'],
    'amber' => ['bg' => 'bg-amber-50', 'icon' => 'text-amber-500', 'val' => 'text-amber-700'],
];
$successRate = $kpi->total > 0
    ? round(($kpi->selesai / $kpi->total) * 100, 1)
    : 0;
?>

<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
    <?php $__currentLoopData = $kpiCards; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $card): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
    <?php $c = $colorMap[$card['color']]; ?>
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
        <div class="flex items-center justify-between mb-3">
            <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider"><?php echo e($card['label']); ?></p>
            <div class="w-8 h-8 rounded-xl <?php echo e($c['bg']); ?> flex items-center justify-center">
                <svg class="w-4 h-4 <?php echo e($c['icon']); ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="<?php echo e($card['icon']); ?>"/>
                </svg>
            </div>
        </div>
        <p class="text-3xl font-bold <?php echo e($c['val']); ?>"><?php echo e(number_format($card['value'])); ?></p>
        <p class="text-xs text-gray-400 mt-1">
            <?php echo e($month > 0 ? ($months[$month - 1] . ' ' . $year) : 'Tahun ' . $year); ?>

        </p>
    </div>
    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>


<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">

    
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 flex flex-col items-center justify-center">
        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Tingkat Keberhasilan</p>

        <?php
        $circumference = 2 * M_PI * 36;
        $offset = $circumference * (1 - $successRate / 100);
        ?>

        <div class="relative w-28 h-28">
            <svg class="w-28 h-28 -rotate-90" viewBox="0 0 80 80">
                <circle cx="40" cy="40" r="36" fill="none" stroke="#f3f4f6" stroke-width="8"/>
                <circle cx="40" cy="40" r="36" fill="none"
                        stroke="<?php echo e($successRate >= 70 ? '#22c55e' : ($successRate >= 40 ? '#f59e0b' : '#ef4444')); ?>"
                        stroke-width="8"
                        stroke-dasharray="<?php echo e($circumference); ?>"
                        stroke-dashoffset="<?php echo e($offset); ?>"
                        stroke-linecap="round"/>
            </svg>
            <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-2xl font-bold text-gray-800"><?php echo e($successRate); ?>%</span>
            </div>
        </div>

        <p class="text-sm text-gray-500 mt-3 text-center">
            <?php echo e(number_format($kpi->selesai)); ?> dari <?php echo e(number_format($kpi->total)); ?> tiket selesai
        </p>
    </div>

    
    <div class="lg:col-span-2 bg-white rounded-2xl border border-gray-100 shadow-sm p-5">
        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Per Jenis Perangkat</p>
        <?php if($byDevice->isEmpty()): ?>
            <p class="text-gray-400 text-sm">Tidak ada data.</p>
        <?php else: ?>
        <div class="space-y-3">
            <?php $__currentLoopData = $byDevice; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php $pct = $kpi->total > 0 ? round($row->total / $kpi->total * 100) : 0; ?>
            <div>
                <div class="flex items-center justify-between text-sm mb-1">
                    <span class="font-medium text-gray-700"><?php echo e($row->device_type); ?></span>
                    <span class="text-gray-500"><?php echo e($row->total); ?> (<?php echo e($pct); ?>%)</span>
                </div>
                <div class="w-full h-2.5 bg-gray-100 rounded-full overflow-hidden">
                    <div class="h-full rounded-full bg-brand-500 transition-all duration-500"
                         style="width: <?php echo e($pct); ?>%"></div>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
        <?php endif; ?>
    </div>

</div>


<div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 mb-6">
    <div class="flex items-center justify-between mb-4">
        <p class="text-sm font-semibold text-gray-700">Tren Bulanan <?php echo e($year); ?></p>
        <div class="flex items-center gap-4 text-xs text-gray-500">
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-sm bg-brand-500 inline-block"></span> Masuk
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-sm bg-green-500 inline-block"></span> Selesai
            </span>
            <span class="flex items-center gap-1.5">
                <span class="w-3 h-3 rounded-sm bg-red-400 inline-block"></span> Batal
            </span>
        </div>
    </div>
    <div class="relative h-56">
        <canvas id="monthlyChart"></canvas>
    </div>
</div>


<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">

    <div class="px-5 py-4 border-b border-gray-50 flex items-center justify-between flex-wrap gap-2">
        <p class="text-sm font-semibold text-gray-700">
            Detail Tiket
            <?php if($month > 0): ?> — <?php echo e($months[$month - 1]); ?> <?php endif; ?>
            <?php echo e($year); ?>

        </p>
        <span class="text-xs text-gray-400"><?php echo e($tickets->total()); ?> tiket</span>
    </div>

    <?php
    $statusBadge = [
        'Pending'   => 'bg-yellow-100 text-yellow-800',
        'Repairing' => 'bg-blue-100 text-blue-800',
        'Ready'     => 'bg-green-100 text-green-800',
        'Picked Up' => 'bg-gray-100 text-gray-700',
        'Cancelled' => 'bg-red-100 text-red-800',
            'Checking'  => 'bg-sky-100 text-sky-800',
    ];
    ?>

    
    <div class="md:hidden divide-y divide-gray-50">
        <?php $__empty_1 = true; $__currentLoopData = $tickets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ticket): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <?php $badge = $statusBadge[$ticket->status] ?? 'bg-gray-100 text-gray-700'; ?>
        <div class="p-4">
            <div class="flex items-start justify-between gap-2 mb-1.5">
                <span class="font-mono text-xs font-semibold text-brand-600"><?php echo e($ticket->ticket_code); ?></span>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold <?php echo e($badge); ?>">
                    <?php echo e($ticket->status); ?>

                </span>
            </div>
            <p class="text-sm font-medium text-gray-800"><?php echo e($ticket->customer->name); ?></p>
            <p class="text-xs text-gray-400"><?php echo e($ticket->brand); ?> <?php echo e($ticket->model); ?> · <?php echo e($ticket->created_at->format('d M Y')); ?></p>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <div class="py-12 text-center text-gray-400 text-sm">Tidak ada data tiket.</div>
        <?php endif; ?>
    </div>

    
    <div class="hidden md:block overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50 text-left border-b border-gray-100">
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">No. Tiket</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Pelanggan</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Perangkat</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Status</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Tanggal Masuk</th>
                    <th class="px-4 py-3 font-semibold text-gray-600 whitespace-nowrap">Selesai / Diambil</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                <?php $__empty_1 = true; $__currentLoopData = $tickets; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ticket): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <?php $badge = $statusBadge[$ticket->status] ?? 'bg-gray-100 text-gray-700'; ?>
                <tr class="hover:bg-gray-50/60 transition">
                    <td class="px-4 py-3 whitespace-nowrap">
                        <a href="<?php echo e(route('tickets.show', $ticket->id)); ?>"
                           class="font-mono text-xs font-semibold text-brand-600 hover:underline">
                            <?php echo e($ticket->ticket_code); ?>

                        </a>
                    </td>
                    <td class="px-4 py-3">
                        <p class="font-medium text-gray-800"><?php echo e($ticket->customer->name); ?></p>
                        <p class="text-xs text-gray-400"><?php echo e($ticket->customer->whatsapp); ?></p>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-800"><?php echo e($ticket->brand); ?> <?php echo e($ticket->model); ?></p>
                        <p class="text-xs text-gray-400"><?php echo e($ticket->device_type); ?></p>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold <?php echo e($badge); ?>">
                            <?php echo e($ticket->status); ?>

                        </span>
                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-xs text-gray-500">
                        <?php echo e($ticket->created_at->format('d M Y')); ?>

                    </td>
                    <td class="px-4 py-3 whitespace-nowrap text-xs text-gray-500">
                        <?php echo e($ticket->picked_up_at?->format('d M Y') ?? '—'); ?>

                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <tr>
                    <td colspan="6" class="px-4 py-12 text-center text-gray-400">Tidak ada data tiket.</td>
                </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    
    <?php if($tickets->hasPages()): ?>
    <div class="px-4 py-3 border-t border-gray-50 flex items-center justify-between text-sm flex-wrap gap-2">
        <p class="text-gray-500 text-xs">
            <?php echo e($tickets->firstItem()); ?>–<?php echo e($tickets->lastItem()); ?> dari <?php echo e($tickets->total()); ?>

        </p>
        <div class="flex gap-1 flex-wrap">
            <?php if($tickets->onFirstPage()): ?>
                <span class="px-3 py-1.5 rounded-lg text-gray-300 cursor-not-allowed">‹</span>
            <?php else: ?>
                <a href="<?php echo e($tickets->previousPageUrl()); ?>"
                   class="px-3 py-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition">‹</a>
            <?php endif; ?>
            <?php $__currentLoopData = $tickets->getUrlRange(1, $tickets->lastPage()); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="<?php echo e($url); ?>"
               class="px-3 py-1.5 rounded-lg text-xs font-medium transition
                      <?php echo e($page == $tickets->currentPage()
                          ? 'bg-brand-600 text-white shadow-sm'
                          : 'text-gray-600 hover:bg-gray-100'); ?>">
                <?php echo e($page); ?>

            </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php if($tickets->hasMorePages()): ?>
                <a href="<?php echo e($tickets->nextPageUrl()); ?>"
                   class="px-3 py-1.5 rounded-lg text-gray-600 hover:bg-gray-100 transition">›</a>
            <?php else: ?>
                <span class="px-3 py-1.5 rounded-lg text-gray-300 cursor-not-allowed">›</span>
            <?php endif; ?>
        </div>
    </div>
    <?php endif; ?>

</div>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
<script>
(function () {
    const labels  = <?php echo json_encode($months, 15, 512) ?>;
    const masuk   = <?php echo json_encode(array_column($monthly, 'total'), 512) ?>;
    const selesai = <?php echo json_encode(array_column($monthly, 'selesai'), 512) ?>;
    const batal   = <?php echo json_encode(array_column($monthly, 'batal'), 512) ?>;

    const ctx = document.getElementById('monthlyChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels,
            datasets: [
                {
                    label: 'Masuk',
                    data: masuk,
                    backgroundColor: 'rgba(37,99,235,0.8)',
                    borderRadius: 6,
                    barPercentage: 0.6,
                },
                {
                    label: 'Selesai',
                    data: selesai,
                    backgroundColor: 'rgba(34,197,94,0.8)',
                    borderRadius: 6,
                    barPercentage: 0.6,
                },
                {
                    label: 'Batal',
                    data: batal,
                    backgroundColor: 'rgba(239,68,68,0.7)',
                    borderRadius: 6,
                    barPercentage: 0.6,
                },
            ],
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: '#1e293b',
                    titleColor: '#94a3b8',
                    bodyColor: '#f1f5f9',
                    padding: 10,
                    cornerRadius: 8,
                },
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { color: '#94a3b8', font: { size: 11 } },
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1,
                        color: '#94a3b8',
                        font: { size: 11 },
                        callback: v => Number.isInteger(v) ? v : null,
                    },
                    grid: { color: '#f1f5f9' },
                },
            },
        },
    });
})();
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\Service-sistem\resources\views/admin/reports/index.blade.php ENDPATH**/ ?>