<?php
/**
 * Couple Portal - Wedding Gift Management
 */
?>
<div class="px-6 py-8 mx-auto w-full max-w-5xl">
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-slate-800">Wedding Gift</h1>
        <p class="text-sm text-slate-500 mt-1">Manage the gift and angpau section on your invitation.</p>
    </div>

    <!-- Main Settings -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6 mb-8">
        <h2 class="text-lg font-bold text-slate-800 mb-4">Section Settings</h2>
        
        <form action="<?= url('/app/couple/invitation/gift') ?>" method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
            
            <div class="flex items-center gap-3 pb-4 border-b border-slate-100">
                <input type="checkbox" id="is_enabled" name="is_enabled" value="1" <?= ($settings['is_enabled'] ?? 1) ? 'checked' : '' ?> class="w-4 h-4 text-amber-500 rounded border-slate-300 focus:ring-amber-500">
                <label for="is_enabled" class="text-sm font-medium text-slate-700">Enable Wedding Gift Section</label>
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-700 mb-1">Section Title</label>
                <input type="text" name="title" value="<?= escape_html($settings['title'] ?? 'Wedding Gift & Angpau') ?>" class="w-full text-sm border-slate-200 rounded-lg focus:border-amber-400 focus:ring-amber-400">
            </div>

            <div>
                <label class="block text-xs font-medium text-slate-700 mb-1">Subtitle / Description</label>
                <textarea name="subtitle" rows="3" class="w-full text-sm border-slate-200 rounded-lg focus:border-amber-400 focus:ring-amber-400"><?= escape_html($settings['subtitle'] ?? '') ?></textarea>
            </div>

            <div class="flex justify-end pt-2">
                <button type="submit" class="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold rounded-lg transition shadow-sm">
                    Save Settings
                </button>
            </div>
        </form>
    </div>

    <!-- Gift Accounts -->
    <div x-data="{ 
            isModalOpen: false, 
            editingAccount: { id: 0, provider_name: '', account_number: '', account_holder: '', sort_order: 0 },
            openModal(account) {
                if(account) {
                    this.editingAccount = { ...account };
                } else {
                    this.editingAccount = { id: 0, provider_name: '', account_number: '', account_holder: '', sort_order: 0 };
                }
                this.isModalOpen = true;
            }
        }">
        
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-bold text-slate-800">Gift Accounts</h2>
            <button @click="openModal(null)" type="button" class="px-4 py-2 bg-slate-800 hover:bg-slate-900 text-white text-sm font-semibold rounded-lg transition shadow-sm flex items-center gap-2">
                <i class="fa-solid fa-plus text-xs"></i> Add Account
            </button>
        </div>

        <?php if (empty($accounts)): ?>
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-8 text-center">
                <div class="text-3xl mb-3">🎁</div>
                <h3 class="text-slate-800 font-medium mb-1">No accounts added yet</h3>
                <p class="text-sm text-slate-500">Add bank accounts or e-wallets to receive gifts from your guests.</p>
            </div>
        <?php else: ?>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <?php foreach ($accounts as $acc): ?>
                    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 flex flex-col justify-between">
                        <div>
                            <div class="flex justify-between items-start mb-2">
                                <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Bank Transfer</span>
                                <span class="bg-slate-100 text-slate-600 text-[10px] px-2 py-0.5 rounded-full font-medium">
                                    Order: <?= $acc['sort_order'] ?>
                                </span>
                            </div>
                            <h3 class="text-lg font-bold text-slate-800"><?= escape_html($acc['provider_name']) ?></h3>
                            <div class="mt-3 space-y-1">
                                <p class="text-sm text-slate-600 font-medium font-mono"><?= escape_html($acc['account_number']) ?></p>
                                <p class="text-xs text-slate-500 uppercase tracking-wide">A.N. <?= escape_html($acc['account_holder']) ?></p>
                            </div>
                        </div>
                        <div class="mt-5 pt-4 border-t border-slate-100 flex justify-end gap-2">
                            <button @click="openModal({
                                id: <?= $acc['id'] ?>,
                                provider_name: '<?= escape_js($acc['provider_name']) ?>',
                                account_number: '<?= escape_js($acc['account_number']) ?>',
                                account_holder: '<?= escape_js($acc['account_holder']) ?>',
                                sort_order: <?= $acc['sort_order'] ?>
                            })" type="button" class="px-3 py-1.5 text-xs font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 rounded transition">
                                Edit
                            </button>
                            <form action="<?= url('/app/couple/invitation/gift/account/delete') ?>" method="POST" onsubmit="return confirm('Delete this account?');" class="inline">
                                <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
                                <input type="hidden" name="account_id" value="<?= $acc['id'] ?>">
                                <button type="submit" class="px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded transition">
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>

        <!-- Account Modal -->
        <div x-show="isModalOpen" style="display: none;" class="fixed inset-0 z-50 flex items-center justify-center p-4">
            <div class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" @click="isModalOpen = false" x-transition.opacity></div>
            <div class="bg-white rounded-xl shadow-xl w-full max-w-md relative z-10 overflow-hidden" 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">
                
                <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
                    <h3 class="text-lg font-bold text-slate-800" x-text="editingAccount.id ? 'Edit Account' : 'Add Account'"></h3>
                    <button @click="isModalOpen = false" class="text-slate-400 hover:text-slate-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>

                <form action="<?= url('/app/couple/invitation/gift/account') ?>" method="POST">
                    <input type="hidden" name="csrf_token" value="<?= csrf_token() ?>">
                    <input type="hidden" name="account_id" :value="editingAccount.id">
                    
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-xs font-medium text-slate-700 mb-1">Bank / E-Wallet Name <span class="text-red-500">*</span></label>
                            <input type="text" name="provider_name" x-model="editingAccount.provider_name" required placeholder="e.g. BCA, Mandiri, GoPay" class="w-full text-sm border-slate-200 rounded-lg focus:border-amber-400 focus:ring-amber-400">
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-slate-700 mb-1">Account Number <span class="text-red-500">*</span></label>
                            <input type="text" name="account_number" x-model="editingAccount.account_number" required placeholder="e.g. 1234567890" class="w-full text-sm font-mono border-slate-200 rounded-lg focus:border-amber-400 focus:ring-amber-400">
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-slate-700 mb-1">Account Holder Name <span class="text-red-500">*</span></label>
                            <input type="text" name="account_holder" x-model="editingAccount.account_holder" required placeholder="e.g. John Doe" class="w-full text-sm border-slate-200 rounded-lg focus:border-amber-400 focus:ring-amber-400">
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-slate-700 mb-1">Display Order</label>
                            <input type="number" name="sort_order" x-model="editingAccount.sort_order" min="0" class="w-full text-sm border-slate-200 rounded-lg focus:border-amber-400 focus:ring-amber-400">
                            <p class="text-[10px] text-slate-500 mt-1">Lower numbers appear first.</p>
                        </div>
                    </div>
                    
                    <div class="px-6 py-4 bg-slate-50 flex justify-end gap-3 border-t border-slate-100">
                        <button type="button" @click="isModalOpen = false" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-white text-sm font-semibold rounded-lg transition shadow-sm">
                            Save Account
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
