

<?php $__env->startSection('content'); ?>
<div class="max-w-3xl mx-auto flex flex-col gap-6">

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

        <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
            <i data-lucide="file-text" class="h-5 w-5 text-primary-600"></i>
            <h3 class="text-base font-semibold text-primary-900"><?php echo app('translator')->get('Select Bill Category'); ?></h3>
        </div>

        <div class="p-5 grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3" id="categoryGrid">

            <?php
                $categories = [
                    ['label' => 'Electricity', 'icon' => 'zap',            'from' => 'from-yellow-500',  'to' => 'to-orange-500',  'value' => 'electricity'],
                    ['label' => 'Water',       'icon' => 'droplet',        'from' => 'from-blue-500',    'to' => 'to-cyan-500',    'value' => 'water'],
                    ['label' => 'Mobile',      'icon' => 'phone',          'from' => 'from-green-500',   'to' => 'to-emerald-500', 'value' => 'mobile'],
                    ['label' => 'Internet',    'icon' => 'wifi',           'from' => 'from-purple-500',  'to' => 'to-pink-500',    'value' => 'internet'],
                    ['label' => 'Rent',        'icon' => 'house',          'from' => 'from-indigo-500',  'to' => 'to-blue-500',    'value' => 'rent'],
                    ['label' => 'Credit Card', 'icon' => 'credit-card',    'from' => 'from-red-500',     'to' => 'to-pink-500',    'value' => 'credit_card'],
                    ['label' => 'Insurance',   'icon' => 'car',            'from' => 'from-teal-500',    'to' => 'to-cyan-500',    'value' => 'insurance'],
                    ['label' => 'Education',   'icon' => 'graduation-cap', 'from' => 'from-violet-500',  'to' => 'to-purple-500',  'value' => 'education'],
                    ['label' => 'Mortgage',    'icon' => 'building',       'from' => 'from-slate-500',   'to' => 'to-gray-600',    'value' => 'mortgage'],
                    ['label' => 'Healthcare',  'icon' => 'heart',          'from' => 'from-rose-500',    'to' => 'to-red-500',     'value' => 'healthcare'],
                ];
            ?>

            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <button type="button"
                        onclick="selectCategory(this, '<?php echo e($cat['value']); ?>', '<?php echo e($cat['label']); ?>')"
                        data-value="<?php echo e($cat['value']); ?>"
                        data-label="<?php echo e($cat['label']); ?>"
                        class="category-btn flex flex-col items-center gap-2 p-3 rounded-xl border border-transparent hover:border-primary-200 hover:bg-primary-50 transition-all duration-200 group
                            <?php echo e(old('category') == $cat['value'] ? 'border-primary-400 bg-primary-50 shadow-soft scale-105' : ''); ?>">
                    <div class="w-11 h-11 bg-gradient-to-br <?php echo e($cat['from']); ?> <?php echo e($cat['to']); ?> rounded-xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-200">
                        <i data-lucide="<?php echo e($cat['icon']); ?>" class="h-5 w-5 text-white"></i>
                    </div>
                    <span class="text-xs font-semibold text-center leading-tight
                        <?php echo e(old('category') == $cat['value'] ? 'text-primary-900' : 'text-primary-600'); ?>">
                        <?php echo e($cat['label']); ?>

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

        </div>
    </div>

    
    
    
    <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden" id="billFormCard">

        
        <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
            <i data-lucide="receipt" class="h-5 w-5 text-primary-600"></i>
            <h3 class="text-base font-semibold text-primary-900" id="formTitle"><?php echo app('translator')->get('Pay Bill'); ?></h3>
        </div>

        <form action="/bills/store" method="POST" class="p-6 flex flex-col gap-5">
            <?php echo csrf_field(); ?>
            <input type="hidden" name="category" id="categoryInput" value="<?php echo e(old('category')); ?>">

            
            <?php if($errors->any()): ?>
                <div class="flex items-start gap-3 p-4 bg-rose-50 border border-rose-200 rounded-xl">
                    <i data-lucide="circle-alert" class="h-4 w-4 text-rose-500 shrink-0 mt-0.5"></i>
                    <ul class="flex flex-col gap-1">
                        <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li class="text-xs text-rose-600 font-medium"><?php echo e($error); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            <?php endif; ?>

            
            <div class="flex flex-col gap-1">
                <label class="text-sm font-semibold text-primary-800" for="billerName"><?php echo app('translator')->get('Biller Name'); ?></label>
                <input
                    type="text"
                    id="billerName"
                    name="biller_name"
                    value="<?php echo e(old('biller_name')); ?>"
                    placeholder="<?php echo app('translator')->get('Enter biller name'); ?>"
                    required
                    class="w-full px-4 py-2.5 rounded-xl border <?php echo e($errors->has('biller_name') ? 'border-rose-400 bg-rose-50/40' : 'border-primary-200 bg-primary-50/40'); ?> text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
            </div>

            
            <div class="flex flex-col gap-1">
                <label class="text-sm font-semibold text-primary-800" for="accountNumber"><?php echo app('translator')->get('Account / Reference Number'); ?></label>
                <input
                    type="text"
                    id="accountNumber"
                    name="account_number"
                    value="<?php echo e(old('account_number')); ?>"
                    placeholder="<?php echo app('translator')->get('Enter account or reference number'); ?>"
                    required
                    class="w-full px-4 py-2.5 rounded-xl border <?php echo e($errors->has('account_number') ? 'border-rose-400 bg-rose-50/40' : 'border-primary-200 bg-primary-50/40'); ?> text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
            </div>

            
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

                
                <div class="flex flex-col gap-1">
                    <label class="text-sm font-semibold text-primary-800" for="amount"><?php echo app('translator')->get('Amount'); ?></label>
                    <div class="flex items-center rounded-xl border <?php echo e($errors->has('amount') ? 'border-rose-400' : 'border-primary-200'); ?> overflow-hidden focus-within:ring-2 focus-within:ring-primary-500 transition">
                        <input
                            type="number"
                            id="amount"
                            name="amount"
                            value="<?php echo e(old('amount')); ?>"
                            step="0.01"
                            min="0.01"
                            placeholder="0.00"
                            required
                            class="flex-1 px-4 py-2.5 bg-primary-50/40 text-primary-900 text-sm focus:outline-none placeholder-primary-300">
                        <span class="px-4 py-2.5 bg-primary-900 text-white text-sm font-semibold shrink-0">
                            <?php echo e(__($general->cur_text)); ?>

                        </span>
                    </div>
                </div>

                
                <div class="flex flex-col gap-1">
                    <label class="text-sm font-semibold text-primary-800 flex items-center gap-1.5" for="dueDate">
                        <i data-lucide="calendar" class="h-3.5 w-3.5 text-primary-500"></i> <?php echo app('translator')->get('Due Date'); ?>
                    </label>
                    <input
                        type="date"
                        id="dueDate"
                        name="due_date"
                        value="<?php echo e(old('due_date')); ?>"
                        class="w-full px-4 py-2.5 rounded-xl border <?php echo e($errors->has('due_date') ? 'border-rose-400 bg-rose-50/40' : 'border-primary-200 bg-primary-50/40'); ?> text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition">
                </div>

            </div>

            
            <div class="flex flex-col gap-1">
                <label class="text-sm font-semibold text-primary-800" for="note">
                    <?php echo app('translator')->get('Note'); ?> <span class="text-primary-400 font-normal">(<?php echo app('translator')->get('Optional'); ?>)</span>
                </label>
                <textarea
                    id="note"
                    name="note"
                    rows="3"
                    placeholder="<?php echo app('translator')->get('Add a note for this payment'); ?>"
                    class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300 resize-none"><?php echo e(old('note')); ?></textarea>
            </div>

            

            
            <div class="flex items-center gap-3 pt-1">
                <button type="button"
                        onclick="resetForm()"
                        class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 border border-primary-300 text-primary-700 text-sm font-semibold rounded-xl hover:bg-primary-100 transition-colors duration-150">
                    <i data-lucide="x" class="h-4 w-4"></i> <?php echo app('translator')->get('Cancel'); ?>
                </button>
                <button type="submit"
                        class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-primary-800 hover:bg-primary-700 active:bg-primary-900 text-white text-sm font-semibold rounded-xl shadow-soft transition-colors duration-200">
                    <i data-lucide="send" class="h-4 w-4"></i> <?php echo app('translator')->get('Pay Bill'); ?>
                </button>
            </div>

        </form>
    </div>

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

        <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center justify-between">
            <div class="flex items-center gap-2">
                <i data-lucide="clock" class="h-5 w-5 text-primary-600"></i>
                <h3 class="text-base font-semibold text-primary-900"><?php echo app('translator')->get('Recent Bill Payments'); ?></h3>
            </div>
            <?php if(isset($bills) && $bills->count()): ?>
                <a href="#"
                   class="text-sm font-medium text-primary-600 hover:text-primary-500 flex items-center gap-1 transition-colors duration-150">
                    <?php echo app('translator')->get('View all'); ?> <i data-lucide="chevron-right" class="h-4 w-4"></i>
                </a>
            <?php endif; ?>
        </div>

        <?php if(isset($bills) && $bills->count()): ?>

            
            
            
            <div class="hidden md:block overflow-x-auto">
                <table class="min-w-full text-sm text-left">
                    <thead>
                        <tr class="bg-primary-900 text-white text-xs uppercase tracking-wider">
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Bill No.'); ?></th>
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Category'); ?></th>
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Biller'); ?></th>
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Amount'); ?></th>
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Due Date'); ?></th>
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Status'); ?></th>
                            <th class="px-5 py-3 font-semibold"><?php echo app('translator')->get('Action'); ?></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-primary-100">
                        <?php $__currentLoopData = $bills; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr class="hover:bg-primary-50 transition-colors duration-150">

                                
                                <td class="px-5 py-3">
                                    <span class="font-mono text-xs tracking-wider text-primary-900 font-semibold"><?php echo e($bill->bill_number); ?></span>
                                    <span class="block text-xs text-primary-400 mt-0.5"><?php echo e(showDateTime($bill->created_at)); ?></span>
                                </td>

                                
                                <td class="px-5 py-3">
                                    <span class="text-sm font-medium text-primary-700"><?php echo e($bill->category_label); ?></span>
                                </td>

                                
                                <td class="px-5 py-3">
                                    <span class="block text-sm font-medium text-primary-900"><?php echo e($bill->biller_name); ?></span>
                                    <span class="block text-xs text-primary-400 font-mono mt-0.5"><?php echo e($bill->account_number); ?></span>
                                </td>

                                
                                <td class="px-5 py-3">
                                    <span class="block font-bold text-primary-900"><?php echo e($general->cur_sym . showAmount($bill->amount)); ?></span>
                                    <?php if($bill->charge > 0): ?>
                                        <span class="block text-xs text-rose-500 mt-0.5">+<?php echo e($general->cur_sym . showAmount($bill->charge)); ?> <?php echo app('translator')->get('charge'); ?></span>
                                    <?php endif; ?>
                                </td>

                                
                                <td class="px-5 py-3">
                                    <?php if($bill->due_date): ?>
                                        <span class="text-xs font-medium <?php echo e($bill->is_overdue ? 'text-rose-600' : 'text-primary-700'); ?>">
                                            <?php echo e($bill->due_date->format('d M, Y')); ?>

                                        </span>
                                        <?php if($bill->is_overdue): ?>
                                            <span class="block text-xs text-rose-400 mt-0.5"><?php echo app('translator')->get('Overdue'); ?></span>
                                        <?php endif; ?>
                                    <?php else: ?>
                                        <span class="text-primary-300 text-xs">—</span>
                                    <?php endif; ?>
                                </td>

                                
                                <td class="px-5 py-3">
                                    <?php echo $bill->status_badge; ?>
                                </td>

                                
                                <td class="px-5 py-3">
                                    <div class="flex items-center gap-2">
                                        <a href="#"
                                           class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg border border-primary-400 text-primary-700 hover:bg-primary-100 transition-colors duration-150">
                                            <i data-lucide="eye" class="h-3.5 w-3.5"></i> <?php echo app('translator')->get('Okay'); ?>
                                        </a>
                                        <?php if($bill->status == \App\Models\BillPayment::STATUS_PAID): ?>
                                            <a href="#"
                                               class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg border border-primary-400 text-primary-700 hover:bg-primary-100 transition-colors duration-150">
                                                <i data-lucide="file-down" class="h-3.5 w-3.5"></i> <?php echo app('translator')->get('Okay'); ?>
                                            </a>
                                        <?php endif; ?>
                                        <?php if($bill->status == \App\Models\BillPayment::STATUS_PENDING): ?>
                                            <form action="<?php echo e(route('user.bill.payment.cancel', $bill->bill_number)); ?>" method="POST" class="inline">
                                                <?php echo csrf_field(); ?>
                                                <button type="submit"
                                                        onclick="return confirm('<?php echo e(__('Are you sure you want to cancel this bill payment?')); ?>')"
                                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold rounded-lg border border-rose-300 text-rose-600 hover:bg-rose-50 transition-colors duration-150">
                                                    <i data-lucide="x" class="h-3.5 w-3.5"></i> <?php echo app('translator')->get('Cancel'); ?>
                                                </button>
                                            </form>
                                        <?php endif; ?>
                                    </div>
                                </td>

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

            
            
            
            <div class="flex flex-col divide-y divide-primary-100 md:hidden">
                <?php $__currentLoopData = $bills; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $bill): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="p-4 hover:bg-primary-50 transition-colors duration-150">

                        
                        <div class="flex items-start justify-between gap-2 mb-3">
                            <div>
                                <span class="font-mono text-xs tracking-widest text-primary-900 font-semibold"><?php echo e($bill->bill_number); ?></span>
                                <span class="block text-xs text-primary-400 mt-0.5"><?php echo e(showDateTime($bill->created_at)); ?></span>
                            </div>
                            <?php echo $bill->status_badge; ?>
                        </div>

                        
                        <div class="flex items-center gap-2 mb-3">
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-primary-100 text-primary-700">
                                <?php echo e($bill->category_label); ?>

                            </span>
                            <span class="text-sm font-medium text-primary-800"><?php echo e($bill->biller_name); ?></span>
                        </div>

                        
                        <div class="grid grid-cols-2 gap-3 mb-3">
                            <div class="bg-primary-50 rounded-xl px-3 py-2">
                                <p class="text-xs text-primary-400 mb-0.5"><?php echo app('translator')->get('Amount'); ?></p>
                                <p class="text-sm font-bold text-primary-900"><?php echo e($general->cur_sym . showAmount($bill->amount)); ?></p>
                                <?php if($bill->charge > 0): ?>
                                    <p class="text-xs text-rose-500 mt-0.5">+<?php echo e($general->cur_sym . showAmount($bill->charge)); ?> <?php echo app('translator')->get('charge'); ?></p>
                                <?php endif; ?>
                            </div>
                            <div class="bg-primary-50 rounded-xl px-3 py-2">
                                <p class="text-xs text-primary-400 mb-0.5"><?php echo app('translator')->get('Due Date'); ?></p>
                                <?php if($bill->due_date): ?>
                                    <p class="text-sm font-semibold <?php echo e($bill->is_overdue ? 'text-rose-600' : 'text-primary-800'); ?>">
                                        <?php echo e($bill->due_date->format('d M, Y')); ?>

                                    </p>
                                    <?php if($bill->is_overdue): ?>
                                        <p class="text-xs text-rose-400 mt-0.5"><?php echo app('translator')->get('Overdue'); ?></p>
                                    <?php endif; ?>
                                <?php else: ?>
                                    <p class="text-sm text-primary-400">—</p>
                                <?php endif; ?>
                            </div>
                        </div>

                        
                        <div class="flex items-center gap-2">
                            <a href="#"
                               class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-semibold rounded-xl border border-primary-400 text-primary-700 hover:bg-primary-100 transition-colors duration-150">
                                <i data-lucide="eye" class="h-3.5 w-3.5"></i> <?php echo app('translator')->get('Okay'); ?>
                            </a>
                            <?php if($bill->status == \App\Models\BillPayment::STATUS_PAID): ?>
                                <a href="#"
                                   class="flex-1 inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-semibold rounded-xl border border-primary-400 text-primary-700 hover:bg-primary-100 transition-colors duration-150">
                                    <i data-lucide="file-down" class="h-3.5 w-3.5"></i> <?php echo app('translator')->get('Okay'); ?>
                                </a>
                            <?php endif; ?>
                            <?php if($bill->status == \App\Models\BillPayment::STATUS_PENDING): ?>
                                <form action="<?php echo e(route('user.bill.payment.cancel', $bill->bill_number)); ?>" method="POST" class="flex-1">
                                    <?php echo csrf_field(); ?>
                                    <button type="submit"
                                            onclick="return confirm('<?php echo e(__('Cancel this bill payment?')); ?>')"
                                            class="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-semibold rounded-xl border border-rose-300 text-rose-600 hover:bg-rose-50 transition-colors duration-150">
                                        <i data-lucide="x" class="h-3.5 w-3.5"></i> <?php echo app('translator')->get('Cancel'); ?>
                                    </button>
                                </form>
                            <?php endif; ?>
                        </div>

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

            
            <?php if($bills->hasPages()): ?>
                <div class="px-5 py-3 border-t border-primary-100 bg-primary-50/40">
                    <?php echo e($bills->links()); ?>

                </div>
            <?php endif; ?>

        <?php else: ?>

            
            <div class="flex flex-col items-center justify-center px-6 py-14 text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-50 mb-4">
                    <i data-lucide="file-text" class="h-8 w-8 text-primary-300"></i>
                </div>
                <p class="text-sm font-medium text-primary-500"><?php echo app('translator')->get('No bill payments yet'); ?></p>
                <p class="text-xs text-primary-400 mt-1"><?php echo app('translator')->get('Your recent bill payments will appear here'); ?></p>
            </div>

        <?php endif; ?>

    </div>

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

<?php $__env->startPush('script'); ?>
<script>
    // Re-select category on validation failure (old input)
    (function () {
        const oldCategory = document.getElementById('categoryInput').value;
        if (oldCategory) {
            const btn = document.querySelector(`.category-btn[data-value="${oldCategory}"]`);
            if (btn) {
                const label = btn.dataset.label;
                document.getElementById('formTitle').textContent = `Pay ${label} Bill`;
            }
        }
    })();

    function selectCategory(el, value, label) {
        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.classList.remove('border-primary-400', 'bg-primary-50', 'shadow-soft', 'scale-105');
            btn.classList.add('border-transparent');
            btn.querySelector('span').classList.remove('text-primary-900');
            btn.querySelector('span').classList.add('text-primary-600');
        });

        el.classList.add('border-primary-400', 'bg-primary-50', 'shadow-soft', 'scale-105');
        el.classList.remove('border-transparent');
        el.querySelector('span').classList.add('text-primary-900');
        el.querySelector('span').classList.remove('text-primary-600');

        document.getElementById('categoryInput').value = value;
        document.getElementById('formTitle').textContent = `Pay ${label} Bill`;

        document.getElementById('billFormCard').scrollIntoView({ behavior: 'smooth', block: 'start' });

        lucide.createIcons();
    }

    function resetForm() {
        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.classList.remove('border-primary-400', 'bg-primary-50', 'shadow-soft', 'scale-105');
            btn.classList.add('border-transparent');
            btn.querySelector('span').classList.remove('text-primary-900');
            btn.querySelector('span').classList.add('text-primary-600');
        });
        document.getElementById('categoryInput').value = '';
        document.getElementById('formTitle').textContent = 'Pay Bill';
        document.querySelector('#billFormCard form').reset();
    }
</script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make($activeTemplate . 'layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\laragon\www\itrevosbank\core\resources\views/templates/crystal_sky/user/bills/index.blade.php ENDPATH**/ ?>