<?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([]); ?>
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
        <div>
            <h2 class="text-xl sm:text-2xl font-bold text-slate-800">Target Keuangan</h2>
            <p class="text-slate-500 mt-1 text-sm">Pantau progres menuju tujuan finansial</p>
        </div>
        <a href="<?php echo e(route('goals.create')); ?>" class="mt-3 sm:mt-0 inline-flex items-center justify-center w-full sm:w-auto px-5 py-2.5 bg-gradient-to-r from-teal-500 to-emerald-500 hover:from-teal-600 hover:to-emerald-600 text-white text-sm font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
            <i class="fas fa-plus mr-2"></i>
            Buat Target
        </a>
    </div>

    <!-- Active Goals -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
        <?php $__empty_1 = true; $__currentLoopData = $activeGoals ?? []; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $goal): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div class="bg-white border border-slate-100 rounded-xl sm:rounded-2xl overflow-hidden shadow-sm group hover:-translate-y-1 hover:shadow-lg transition-all">
                <!-- Header with color -->
                <div class="h-2" style="background-color: <?php echo e($goal->color ?? '#14b8a6'); ?>"></div>

                <div class="p-4 sm:p-5">
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center flex-shrink-0"
                                 style="background-color: <?php echo e($goal->color ?? '#14b8a6'); ?>15; color: <?php echo e($goal->color ?? '#14b8a6'); ?>;">
                                <i class="fas fa-<?php echo e($goal->icon ?? 'bullseye'); ?> text-lg sm:text-xl"></i>
                            </div>
                            <div class="ml-3 min-w-0">
                                <h4 class="font-semibold text-slate-800 group-hover:text-teal-600 transition text-sm sm:text-base truncate"><?php echo e($goal->name); ?></h4>
                                <?php if($goal->target_date): ?>
                                    <p class="text-xs text-slate-400">
                                        <i class="fas fa-calendar mr-1"></i>
                                        <?php echo e($goal->target_date->format('d M Y')); ?>

                                    </p>
                                <?php endif; ?>
                            </div>
                        </div>
                        <a href="<?php echo e(route('goals.edit', $goal)); ?>" class="text-slate-400 hover:text-teal-600 transition flex-shrink-0 ml-2">
                            <i class="fas fa-ellipsis-v"></i>
                        </a>
                    </div>

                    <!-- Progress -->
                    <div class="mb-4">
                        <div class="flex justify-between text-sm mb-2">
                            <span class="text-slate-500 text-xs sm:text-sm">Progres</span>
                            <span class="font-medium text-slate-800 text-xs sm:text-sm"><?php echo e(number_format($goal->progress_percentage ?? 0, 1)); ?>%</span>
                        </div>
                        <div class="w-full h-2 sm:h-3 bg-slate-100 rounded-full overflow-hidden">
                            <div class="h-full bg-gradient-to-r from-teal-500 to-emerald-500 rounded-full transition-all" style="width: <?php echo e(min($goal->progress_percentage ?? 0, 100)); ?>%"></div>
                        </div>
                    </div>

                    <!-- Amount -->
                    <div class="flex justify-between items-end">
                        <div>
                            <p class="text-lg sm:text-2xl font-bold text-slate-800">
                                Rp <?php echo e(number_format($goal->current_amount ?? 0, 0, ',', '.')); ?>

                            </p>
                            <p class="text-xs sm:text-sm text-slate-400">
                                dari Rp <?php echo e(number_format($goal->target_amount ?? 0, 0, ',', '.')); ?>

                            </p>
                        </div>

                        <button onclick="openContributeModal(<?php echo e($goal->id); ?>)"
                                class="px-3 py-2 bg-teal-500 hover:bg-teal-600 text-white text-sm font-medium rounded-xl transition">
                            <i class="fas fa-plus mr-1"></i> Tambah
                        </button>
                    </div>

                    <?php if($goal->target_date): ?>
                        <div class="mt-4 pt-4 border-t border-slate-100">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-slate-400">
                                    <?php echo e($goal->target_date->diffForHumans()); ?>

                                </span>
                                <?php
                                    $daysLeft = max(0, now()->diffInDays($goal->target_date));
                                    $amountLeft = ($goal->target_amount ?? 0) - ($goal->current_amount ?? 0);
                                    $dailyNeeded = $daysLeft > 0 ? $amountLeft / $daysLeft : $amountLeft;
                                ?>
                                <span class="text-slate-500">
                                    Rp <?php echo e(number_format($dailyNeeded, 0, ',', '.')); ?>/hari
                                </span>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div class="md:col-span-2 lg:col-span-3 bg-white border border-slate-100 rounded-2xl p-12 text-center shadow-sm">
                <div class="w-20 h-20 bg-slate-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-bullseye text-3xl text-slate-400"></i>
                </div>
                <h3 class="text-xl font-bold text-slate-800 mb-2">Belum Ada Target</h3>
                <p class="text-slate-500 mb-6">Tentukan target keuangan dan pantau progres Anda.</p>
                <a href="<?php echo e(route('goals.create')); ?>" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-teal-500 to-emerald-500 text-white font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                    <i class="fas fa-plus mr-2"></i>
                    Buat Target Pertama
                </a>
            </div>
        <?php endif; ?>
    </div>

    <!-- Achieved Goals -->
    <?php if(isset($achievedGoals) && $achievedGoals->count() > 0): ?>
        <div class="mt-8">
            <h3 class="text-lg font-semibold text-slate-800 mb-4">
                <i class="fas fa-trophy text-amber-500 mr-2"></i>Target Tercapai
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <?php $__currentLoopData = $achievedGoals; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $goal): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
                        <div class="flex items-center">
                            <div class="w-10 h-10 rounded-full bg-emerald-100 flex items-center justify-center">
                                <i class="fas fa-check text-emerald-600"></i>
                            </div>
                            <div class="ml-3">
                                <p class="font-medium text-slate-800"><?php echo e($goal->name); ?></p>
                                <p class="text-sm text-emerald-600">
                                    Rp <?php echo e(number_format($goal->target_amount, 0, ',', '.')); ?>

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

    <!-- Contribute Modal -->
    <div id="contributeModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-black/50" onclick="closeContributeModal()"></div>
            <div class="relative bg-white rounded-2xl shadow-xl max-w-md w-full p-6">
                <h3 class="text-lg font-bold text-slate-800 mb-4">Tambah ke Target</h3>
                <form id="contributeForm" method="POST">
                    <?php echo csrf_field(); ?>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Jumlah</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-500">Rp</span>
                            <input type="number" name="amount" id="contribution_amount" step="1" min="0"
                                   class="pl-12 w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500"
                                   required placeholder="0">
                        </div>
                    </div>
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Catatan (opsional)</label>
                        <input type="text" name="notes" id="contribution_notes"
                               class="w-full bg-slate-50 border-slate-200 text-slate-800 rounded-xl focus:border-teal-500 focus:ring-teal-500"
                               placeholder="Catatan...">
                    </div>
                    <div class="flex justify-end space-x-4">
                        <button type="button" onclick="closeContributeModal()" class="px-5 py-2.5 text-slate-600 hover:text-slate-800 font-medium transition">Batal</button>
                        <button type="submit" class="px-6 py-2.5 bg-gradient-to-r from-teal-500 to-emerald-500 text-white font-medium rounded-xl transition shadow-lg shadow-teal-500/30">
                            Tambah
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <?php $__env->startPush('scripts'); ?>
    <script>
        function openContributeModal(goalId) {
            document.getElementById('contributeForm').action = `/goals/${goalId}/contribute`;
            document.getElementById('contributeModal').classList.remove('hidden');
        }

        function closeContributeModal() {
            document.getElementById('contributeModal').classList.add('hidden');
        }
    </script>
    <?php $__env->stopPush(); ?>
 <?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:\xampp\htdocs\mymoney-app\resources\views\goals\index.blade.php ENDPATH**/ ?>