@extends('layouts.main')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header Card -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4">
                <h4 class="text-white text-xl font-bold flex items-center">
                    <i class="fas fa-sliders-h mr-2"></i>Aturan Keuangan
                </h4>
            </div>
            <div class="p-6">
                @if(session('success'))
                    <div class="mb-4 px-4 py-3 rounded border bg-green-50 text-green-700 border-green-200">
                        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
                    </div>
                @endif
                <!-- Toggle Row (konsisten dengan Manajemen Pembayaran) -->
                <div class="mb-4 flex flex-row flex-wrap gap-2">
                    <a href="{{ route('payments.manage') }}"
                       class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.manage') ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700' : 'bg-blue-100 text-blue-700 border-blue-300 hover:bg-blue-200' }}">
                        <i class="fas fa-clipboard-list mr-2"></i>
                        Pembayaran Kegiatan
                    </a>
                    @php($user = auth()->user())
                    <a href="{{ route('payments.withdraw.history') }}"
                       class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.withdraw.history') ? 'bg-orange-600 text-white border-orange-600 hover:bg-orange-700' : 'bg-orange-100 text-orange-700 border-orange-300 hover:bg-orange-200' }}">
                        <i class="fas fa-history mr-2"></i>
                        Permintaan Penarikan
                    </a>
                    <a href="{{ route('payments.ledger') }}"
                       class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.ledger') ? 'bg-teal-600 text-white border-teal-600 hover:bg-teal-700' : 'bg-teal-100 text-teal-700 border-teal-300 hover:bg-teal-200' }}">
                        <i class="fas fa-balance-scale mr-2"></i>
                        Neraca Keuangan
                    </a>
                    <a href="{{ route('payments.rules') }}"
                       class="inline-flex items-center px-4 py-2 rounded-lg transition-all duration-200 shadow-sm text-sm font-medium border {{ request()->routeIs('payments.rules') ? 'bg-pink-600 text-white border-pink-600 hover:bg-pink-700' : 'bg-pink-100 text-pink-700 border-pink-300 hover:bg-pink-200' }}">
                        <i class="fas fa-sliders-h mr-2"></i>
                        Aturan Keuangan
                    </a>
                </div>

                <!-- Grid Settings -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

                    <!-- Diskon Kegiatan -->
                    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                        <div class="px-6 py-4 border-b">
                            <h5 class="text-gray-900 font-semibold flex items-center">
                                <i class="fas fa-tags mr-2 text-green-600"></i> Diskon Kegiatan
                            </h5>
                            <p class="text-sm text-gray-500 mt-1">Atur diskon berdasarkan kategori atau periode promosi.</p>
                        </div>
                        <div class="p-6">
                            <div class="text-sm text-gray-600">Jumlah aturan diskon aktif</div>
                            <div class="text-base font-semibold text-gray-900">{{ $settings['discount_rules_count'] ?? 0 }}</div>
                            <div class="mt-4">
                                <button type="button" class="inline-flex items-center px-4 py-2 rounded-md bg-green-600 text-white hover:bg-green-700" disabled>
                                    <i class="fas fa-plus mr-2"></i>Tambah Aturan Diskon
                                </button>
                                <p class="text-xs text-gray-500 mt-2">Form konfigurasi akan ditambahkan pada pengembangan berikutnya.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Voucher Diskon -->
                    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                        <div class="px-6 py-4 border-b">
                            <h5 class="text-gray-900 font-semibold flex items-center">
                                <i class="fas fa-ticket-alt mr-2 text-pink-600"></i> Voucher Diskon
                            </h5>
                            <p class="text-sm text-gray-500 mt-1">Kelola kode voucher untuk promosi khusus.</p>
                        </div>
                        <div class="p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-sm text-gray-600">Voucher aktif</div>
                                    <div class="text-base font-semibold text-gray-900">{{ $settings['voucher_active_count'] ?? 0 }}</div>
                                </div>
                                <button type="button" id="openVoucherModal" class="inline-flex items-center px-4 py-2 rounded-md bg-pink-600 text-white hover:bg-pink-700">
                                    <i class="fas fa-plus mr-2"></i>Buat Voucher Baru
                                </button>
                            </div>

                            <!-- Daftar Voucher -->
                            <div class="mt-6 overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead>
                                        <tr>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Kode</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Tipe</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Nilai</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Berlaku Untuk</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Periode</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Maks. Penggunaan</th>
                                            <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @php($now = \Carbon\Carbon::now())
                                        @forelse($vouchers ?? [] as $v)
                                            @php(
                                                $start = $v->start_date ? \Carbon\Carbon::parse($v->start_date) : null
                                            )
                                            @php(
                                                $end = $v->end_date ? \Carbon\Carbon::parse($v->end_date) : null
                                            )
                                            @php(
                                                $statusLabel = !$v->is_active ? 'Nonaktif' : (($end && $end->lt($now)) ? 'Kedaluwarsa' : (($start && $start->gt($now)) ? 'Belum berlaku' : 'Aktif'))
                                            )
                                            @php(
                                                $statusClass = !$v->is_active ? 'bg-gray-100 text-gray-800' : (($end && $end->lt($now)) ? 'bg-red-100 text-red-800' : (($start && $start->gt($now)) ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800'))
                                            )
                                            <tr>
                                                <td class="px-4 py-2 whitespace-nowrap font-semibold">{{ $v->code }}</td>
                                                <td class="px-4 py-2 whitespace-nowrap text-sm">
                                                    {{ $v->type === 'percent' ? 'Persentase (%)' : 'Nominal (Rp)' }}
                                                </td>
                                                <td class="px-4 py-2 whitespace-nowrap text-sm">
                                                    {{ $v->type === 'percent' ? ($v->amount . '%') : ('Rp ' . number_format((int)$v->amount, 0, ',', '.')) }}
                                                </td>
                                                <td class="px-4 py-2 whitespace-nowrap text-sm">
                                                    Kegiatan
                                                </td>
                                                <td class="px-4 py-2 whitespace-nowrap text-sm">
                                                    @if($v->start_date || $v->end_date)
                                                        {{ $v->start_date ? \Carbon\Carbon::parse($v->start_date)->format('d/m/Y') : '—' }}
                                                        —
                                                        {{ $v->end_date ? \Carbon\Carbon::parse($v->end_date)->format('d/m/Y') : '—' }}
                                                    @else
                                                        —
                                                    @endif
                                                </td>
                                                <td class="px-4 py-2 whitespace-nowrap text-sm">{{ $v->max_uses ?? '—' }}</td>
                                                <td class="px-4 py-2 whitespace-nowrap">
                                                    <span class="inline-flex px-2 py-1 rounded {{ $statusClass }} text-xs font-semibold">{{ $statusLabel }}</span>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7" class="px-4 py-6 text-center text-sm text-gray-500">Belum ada voucher yang dibuat.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <!-- Modal Buat Voucher Baru -->
                            <div id="voucherModal" class="fixed inset-0 bg-black bg-opacity-40 hidden items-center justify-center z-50">
                                <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4">
                                    <div class="px-6 py-4 border-b flex items-center justify-between">
                                        <h5 class="text-gray-900 font-semibold flex items-center"><i class="fas fa-ticket-alt mr-2 text-pink-600"></i> Buat Voucher Baru</h5>
                                        <button type="button" id="closeVoucherModal" class="text-gray-500 hover:text-gray-700"><i class="fas fa-times"></i></button>
                                    </div>
                                    <div class="p-6">
                                        <form action="{{ route('payments.rules.vouchers.create') }}" method="POST" class="space-y-4">
                                            @csrf
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <div>
                                                    <label class="block text-sm text-gray-700">Kode Voucher</label>
                                                    <input type="text" name="code" class="mt-1 w-full border rounded-md px-3 py-2" placeholder="contoh: PROMO2025" required>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-700">Tipe Diskon</label>
                                                    <select name="type" class="mt-1 w-full border rounded-md px-3 py-2" required>
                                                        <option value="fixed">Nominal (Rp)</option>
                                                        <option value="percent">Persentase (%)</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-700">Nilai Diskon</label>
                                                    <input type="number" name="amount" class="mt-1 w-full border rounded-md px-3 py-2" placeholder="misal 50000 atau 10" min="1" required>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-700">Berlaku Untuk</label>
                                                    <select name="applicable" class="mt-1 w-full border rounded-md px-3 py-2" required>
                                                        <option value="activity">Kegiatan</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-sm text-gray-700">Maks. Penggunaan (opsional)</label>
                                                    <input type="number" name="max_uses" class="mt-1 w-full border rounded-md px-3 py-2" min="1" placeholder="misal 100">
                                                </div>
                                                <div class="grid grid-cols-2 gap-2">
                                                    <div>
                                                        <label class="block text-sm text-gray-700">Mulai</label>
                                                        <input type="date" name="start_date" class="mt-1 w-full border rounded-md px-3 py-2">
                                                    </div>
                                                    <div>
                                                        <label class="block text-sm text-gray-700">Berakhir</label>
                                                        <input type="date" name="end_date" class="mt-1 w-full border rounded-md px-3 py-2">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center justify-between">
                                                <label class="inline-flex items-center space-x-2">
                                                    <input type="checkbox" name="is_active" value="1" checked class="rounded">
                                                    <span class="text-sm text-gray-700">Aktif</span>
                                                </label>
                                                <div class="space-x-2">
                                                    <button type="button" id="cancelVoucherModal" class="inline-flex items-center px-4 py-2 rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50">
                                                        Batal
                                                    </button>
                                                    <button type="submit" class="inline-flex items-center px-4 py-2 rounded-md bg-pink-600 text-white hover:bg-pink-700">
                                                        <i class="fas fa-save mr-2"></i>Simpan Voucher
                                                    </button>
                                                </div>
                                            </div>
                                            <p class="text-xs text-gray-500">Setelah dibuat, siapa pun yang memiliki kode dapat menggunakannya saat pembayaran.</p>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <script>
                                (function(){
                                    const openBtn = document.getElementById('openVoucherModal');
                                    const modal = document.getElementById('voucherModal');
                                    const closeBtn = document.getElementById('closeVoucherModal');
                                    const cancelBtn = document.getElementById('cancelVoucherModal');
                                    function open(){ modal.classList.remove('hidden'); modal.classList.add('flex'); }
                                    function close(){ modal.classList.add('hidden'); modal.classList.remove('flex'); }
                                    if(openBtn){ openBtn.addEventListener('click', open); }
                                    if(closeBtn){ closeBtn.addEventListener('click', close); }
                                    if(cancelBtn){ cancelBtn.addEventListener('click', close); }
                                })();
                            </script>
                        </div>
                    </div>

                    <!-- Biaya Admin -->
                    <div class="bg-white rounded-lg border border-gray-200 shadow-sm">
                        <div class="px-6 py-4 border-b">
                            <h5 class="text-gray-900 font-semibold flex items-center">
                                <i class="fas fa-percentage mr-2 text-orange-600"></i> Biaya Admin Transaksi
                            </h5>
                            <p class="text-sm text-gray-500 mt-1">Tetapkan persentase biaya admin.</p>
                        </div>
                        <div class="p-6">
                            <form method="POST" action="{{ route('payments.rules.save') }}" class="space-y-4">
                                @csrf
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Minimal Harga Kegiatan Otomatis (Midtrans)</label>
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-gray-600">Rp</span>
                                        <input id="min_auto_price" name="min_auto_price" type="number" min="0" step="100" class="px-3 py-2 border rounded-md w-56 focus:ring-2 focus:ring-orange-500 focus:border-orange-500" value="{{ old('min_auto_price', $financial->min_auto_price ?? 15000) }}">
                                    </div>
                                    @error('min_auto_price')
                                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Biaya Admin (Persen)</label>
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-gray-600">%</span>
                                        <input id="admin_fee_percent" name="admin_fee_percent" type="number" min="0" max="100" step="0.01" class="px-3 py-2 border rounded-md w-48 focus:ring-2 focus:ring-orange-500 focus:border-orange-500" value="{{ old('admin_fee_percent', $financial->admin_fee_percent ?? 0) }}">
                                    </div>
                                    @error('admin_fee_percent')
                                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="mt-2">
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Potongan Tetap (khusus Transaksi Otomatis/Midtrans)</label>
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-gray-600">Rp</span>
                                        <input id="auto_fixed_deduction" name="auto_fixed_deduction" type="number" min="0" step="100" class="px-3 py-2 border rounded-md w-48 focus:ring-2 focus:ring-orange-500 focus:border-orange-500" value="{{ old('auto_fixed_deduction', ($financial->auto_fixed_deduction ?? 0) ?: 5000) }}">
                                    </div>
                                    @error('auto_fixed_deduction')
                                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Simulasi Potongan untuk Transaksi Otomatis & Manual -->
                                <div class="mt-4 p-4 rounded-md bg-orange-50 border border-orange-200">
                                    <h6 class="text-sm font-semibold text-orange-700 flex items-center mb-3">
                                        <i class="fas fa-calculator mr-2"></i>
                                        Simulasi Potongan Biaya Admin
                                    </h6>
                                    <div class="flex items-center gap-2 mb-3">
                                        <label for="sim_amount" class="text-sm text-gray-700">Jumlah Transaksi</label>
                                        <span class="text-sm text-gray-600">Rp</span>
                                        <input id="sim_amount" type="number" min="0" step="1000" class="px-3 py-2 border rounded-md w-48 focus:ring-2 focus:ring-orange-500 focus:border-orange-500" value="{{ number_format(100000, 0, '', '') }}">
                                    </div>
                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                        <div class="p-3 rounded-md bg-white border">
                                            <p class="text-sm font-medium text-gray-700 mb-1">
                                                Transaksi Otomatis (Midtrans)
                                            </p>
                                            <p class="text-sm text-gray-600">
                                                Potongan: <span id="auto_fee" class="font-semibold text-orange-700">Rp 0</span>
                                            </p>
                                            <p class="text-sm text-gray-600">
                                                Diterima Bersih: <span id="auto_net" class="font-semibold text-green-700">Rp 0</span>
                                            </p>
                                        </div>
                                        <div class="p-3 rounded-md bg-white border">
                                            <p class="text-sm font-medium text-gray-700 mb-1">
                                                Transaksi Manual
                                            </p>
                                            <p class="text-sm text-gray-600">
                                                Potongan: <span id="manual_fee" class="font-semibold text-orange-700">Rp 0</span>
                                            </p>
                                            <p class="text-sm text-gray-600">
                                                Diterima Bersih: <span id="manual_net" class="font-semibold text-green-700">Rp 0</span>
                                            </p>
                                        </div>
                                    </div>
                                    <p class="text-xs text-gray-500 mt-2">Perhitungan: Potongan Manual = Persentase dari jumlah; Potongan Otomatis = Persentase + Potongan Otomatis.</p>
                                </div>

                                <div class="pt-2">
                                    <button type="submit" class="inline-flex items-center px-4 py-2 rounded-md bg-orange-600 text-white hover:bg-orange-700">
                                        <i class="fas fa-save mr-2"></i>Simpan Pengaturan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Bagian layanan langganan dihapus -->
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
        const percentInput = document.getElementById('admin_fee_percent');
        const autoFixedInput = document.getElementById('auto_fixed_deduction');
        const amountInput = document.getElementById('sim_amount');

        const autoFeeEl = document.getElementById('auto_fee');
        const autoNetEl = document.getElementById('auto_net');
        const manualFeeEl = document.getElementById('manual_fee');
        const manualNetEl = document.getElementById('manual_net');

        function fmtIDR(n) {
            n = Math.max(0, Math.floor(n || 0));
            return 'Rp ' + n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }

        function computeManual(amount, percent) {
            const p = Math.max(0, parseFloat(percent || 0));
            return Math.max(0, amount * (p / 100.0));
        }

        function computeAutomatic(amount, percent, autoFixed) {
            const feePercent = computeManual(amount, percent);
            const a = Math.max(0, parseFloat(autoFixed || 0));
            return feePercent + a;
        }

        function updateSim() {
            const amount = Math.max(0, parseFloat(amountInput.value || 0));
            const percent = parseFloat(percentInput.value || 0);
            const autoFixed = parseFloat(autoFixedInput.value || 0);

            const feeManual = computeManual(amount, percent);
            const feeAuto = computeAutomatic(amount, percent, autoFixed);
            const netAuto = Math.max(0, amount - feeAuto);
            const netManual = Math.max(0, amount - feeManual);

            autoFeeEl.textContent = fmtIDR(feeAuto);
            manualFeeEl.textContent = fmtIDR(feeManual);
            autoNetEl.textContent = fmtIDR(netAuto);
            manualNetEl.textContent = fmtIDR(netManual);
        }

        ['input', 'change'].forEach(ev => {
            percentInput.addEventListener(ev, updateSim);
            autoFixedInput.addEventListener(ev, updateSim);
            amountInput.addEventListener(ev, updateSim);
        });
        updateSim();
    })();
</script>
<script>
    (function(){
        function applyState(input, hidden){
            var unlimited = hidden.value === '1';
            if(unlimited){ input.value = ''; input.placeholder = 'Unlimited'; input.classList.add('bg-gray-50'); }
            else { input.classList.remove('bg-gray-50'); }
        }
        function bindAutoUnlimited(input, hidden){
            ['input','change'].forEach(function(ev){
                input.addEventListener(ev, function(){
                    var hasVal = String(input.value || '').trim() !== '';
                    hidden.value = hasVal ? '0' : '1';
                    applyState(input, hidden);
                });
            });
        }
        document.querySelectorAll('[data-toggle-unlimited]').forEach(function(btn){
            btn.addEventListener('click', function(){
                var plan = btn.getAttribute('data-plan');
                var field = btn.getAttribute('data-field');
                var input;
                var hidden;
                if(plan === 'creator_free'){
                    if(field === 'creator_free_max_participants'){
                        input = document.querySelector('input[data-field="creator_free_max_participants"]');
                        hidden = document.getElementById('creator_free_participants_unlimited');
                    } else {
                        input = document.querySelector('input[data-field="creator_free_manual_activities_limit"]');
                        hidden = document.getElementById('creator_free_manual_unlimited');
                    }
                } else {
                    input = document.querySelector('input[data-field="'+field+'"][data-plan="'+plan+'"][name^="plans["]');
                    hidden = document.getElementById('plans_'+plan+'_'+(field==='manual_activities_limit'?'manual_unlimited':'participants_unlimited'));
                }
                if(!input || !hidden) return;
                hidden.value = hidden.value === '1' ? '0' : '1';
                applyState(input, hidden);
            });
        });
        // init + auto-bind
        document.querySelectorAll('input[type="hidden"][id$="_unlimited"]').forEach(function(h){
            var input;
            if(h.id.startsWith('creator_free_manual')){
                input = document.querySelector('input[data-field="creator_free_manual_activities_limit"]');
            } else if(h.id.startsWith('creator_free')){
                input = document.querySelector('input[data-field="creator_free_max_participants"]');
            } else {
                var tokens = h.id.split('_');
                var plan = tokens[1];
                var field = tokens[2] === 'manual' ? 'manual_activities_limit' : 'max_participants_per_activity';
                input = document.querySelector('input[data-plan="'+plan+'"][data-field="'+field+'"]');
            }
            if(input){
                applyState(input, h);
                bindAutoUnlimited(input, h);
            }
        });
    })();
</script>
@endsection