<?php $__env->startSection('main-content'); ?>
<div x-data="{ 
    showCreateModal: false, 
    showEditModal: false, 
    editCurrency: { id: '', code: '', name: '', symbol: '', decimal_digits: 2, is_active: false }, 
    openEdit(item) {
        this.editCurrency = { ...item };
        this.showEditModal = true;
    } 
}" class="max-w-7xl mx-auto pb-20">

    <div class="flex justify-between items-end mb-8 border-b border-slate-900 pb-4">
        <div>
            <h1 class="text-3xl font-black text-slate-900">Currencies</h1>
            <p class="text-[10px] font-bold text-slate-400 mt-1 font-sans">Manage system currencies and exchange precision</p>
        </div>
        <button @click="showCreateModal = true" class="text-[10px] font-black text-white bg-slate-900 px-6 py-3 hover:bg-slate-800 shadow-md transition">
            <i class="fas fa-plus mr-2"></i> New Currency
        </button>
    </div>

    <div class="bg-white border border-slate-200 rounded-sm shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr class="text-[10px] font-black text-slate-500 text-left">
                    <th class="px-6 py-4">Code</th>
                    <th class="px-6 py-4">Currency Name</th>
                    <th class="px-6 py-4 text-center">Symbol</th>
                    <th class="px-6 py-4 text-center">Decimals</th>
                    <th class="px-6 py-4 text-center">Status</th>
                    <th class="px-6 py-4 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 text-sm">
                <?php $__currentLoopData = $currencies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $currency): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <tr class="hover:bg-slate-50 transition">
                    <td class="px-6 py-4 font-bold text-slate-900"><?php echo e($currency->code); ?></td>
                    <td class="px-6 py-4 text-slate-600 font-medium"><?php echo e($currency->name); ?></td>
                    <td class="px-6 py-4 text-center font-bold text-slate-900"><?php echo e($currency->symbol); ?></td>
                    <td class="px-6 py-4 text-center text-slate-500"><?php echo e($currency->decimal_digits); ?></td>
                    <td class="px-6 py-4 text-center">
                        <?php if($currency->is_active): ?>
                            <span class="px-2 py-1 bg-indigo-100 text-indigo-700 text-[9px] font-bold rounded-full">Active</span>
                        <?php else: ?>
                            <span class="px-2 py-1 bg-gray-100 text-gray-400 text-[9px] font-bold rounded-full">Inactive</span>
                        <?php endif; ?>
                    </td>
                    <td class="px-6 py-4 text-right">
                        <div class="flex justify-end items-center gap-4">
                            <button @click="openEdit(<?php echo e($currency->toJson()); ?>)" class="text-slate-400 hover:text-indigo-600 transition" title="Edit Currency">
                                <i class="fas fa-edit"></i>
                            </button>
                            
                            <form action="<?php echo e(route('currencies.destroy', $currency->id)); ?>" method="POST" class="inline" onsubmit="return confirm('Delete this currency?')">
                                <?php echo csrf_field(); ?> <?php echo method_field('DELETE'); ?>
                                <button type="submit" class="text-slate-300 hover:text-rose-600 transition" title="Delete Currency">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </tbody>
        </table>
    </div>

    <div x-show="showCreateModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-slate-900/40 transition-opacity" @click="showCreateModal = false"></div>
            <div class="bg-white rounded-sm shadow-2xl z-50 w-full max-w-lg p-8">
                <h2 class="text-xl font-black text-slate-900 mb-6">Create Currency</h2>
                <form action="<?php echo e(route('currencies.store')); ?>" method="POST">
                    <?php echo csrf_field(); ?>
                    <div class="space-y-5">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-black text-slate-500 mb-1">Code</label>
                                <input type="text" name="code" class="quickbooks-input" placeholder="ZMW" maxlength="3" required oninput="this.value = this.value.toUpperCase()">
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-slate-500 mb-1">Symbol</label>
                                <input type="text" name="symbol" class="quickbooks-input" placeholder="K" required>
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-slate-500 mb-1">Currency Name</label>
                            <input type="text" name="name" class="quickbooks-input" placeholder="Zambian Kwacha" required>
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-slate-500 mb-1">Decimal Digits</label>
                            <input type="number" name="decimal_digits" class="quickbooks-input" value="2" min="0" max="4" required>
                        </div>
                        <label class="flex items-center space-x-3 cursor-pointer group">
                            <input type="checkbox" name="is_active" value="1" class="w-4 h-4 accent-slate-900">
                            <span class="text-xs font-bold text-slate-700 group-hover:text-indigo-600 transition">Set as active</span>
                        </label>
                    </div>
                    <div class="mt-8 flex justify-end space-x-4 items-center">
                        <button type="button" @click="showCreateModal = false" class="text-[10px] font-black text-slate-400">Cancel</button>
                        <button type="submit" class="bg-slate-900 text-white px-8 py-2.5 text-[10px] font-black shadow-lg hover:bg-slate-800 transition">Save Currency</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div x-show="showEditModal" class="fixed inset-0 z-50 overflow-y-auto" x-cloak>
        <div class="flex items-center justify-center min-h-screen px-4">
            <div class="fixed inset-0 bg-slate-900/40 transition-opacity" @click="showEditModal = false"></div>
            <div class="bg-white rounded-sm shadow-2xl z-50 w-full max-w-lg p-8">
                <h2 class="text-xl font-black text-slate-900 mb-6">Edit Currency</h2>
                <form :action="'/currencies/' + editCurrency.id" method="POST">
                    <?php echo csrf_field(); ?> <?php echo method_field('PUT'); ?>
                    <div class="space-y-5">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-[10px] font-black text-slate-500 mb-1">Code</label>
                                <input type="text" name="code" x-model="editCurrency.code" class="quickbooks-input" maxlength="3" required oninput="this.value = this.value.toUpperCase()">
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-slate-500 mb-1">Symbol</label>
                                <input type="text" name="symbol" x-model="editCurrency.symbol" class="quickbooks-input" required>
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-slate-500 mb-1">Name</label>
                            <input type="text" name="name" x-model="editCurrency.name" class="quickbooks-input" required>
                        </div>
                        <label class="flex items-center space-x-3 cursor-pointer group">
                            <input type="checkbox" name="is_active" value="1" x-model="editCurrency.is_active" class="w-4 h-4 accent-slate-900">
                            <span class="text-xs font-bold text-slate-700 group-hover:text-indigo-600 transition">Active Status</span>
                        </label>
                    </div>
                    <div class="mt-8 flex justify-end space-x-4 items-center">
                        <button type="button" @click="showEditModal = false" class="text-[10px] font-black text-slate-400">Cancel</button>
                        <button type="submit" class="bg-slate-900 text-white px-8 py-2.5 text-[10px] font-black shadow-lg hover:bg-slate-800 transition">Update Currency</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .quickbooks-input { border: 1px solid #e2e8f0; border-radius: 2px; padding: 10px 12px; font-size: 13px; width: 100%; transition: all 0.2s; font-weight: 500; color: #1e293b; }
    .quickbooks-input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); }
    [x-cloak] { display: none !important; }
</style>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.aura-main', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/edugfqvw/auraaccountify.online/portal/resources/views/currencies/index.blade.php ENDPATH**/ ?>