@extends('layouts.admin')

@section('content')
<div class="space-y-6">
    <div class="bg-white p-6 rounded-3xl shadow-sm border border-gray-100 flex flex-wrap justify-between items-center gap-4">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-2xl flex items-center justify-center text-2xl">
                💸
            </div>
            <div>
                <h3 class="font-black text-xl text-gray-800">লেনদেন সমূহ</h3>
                <p class="text-xs text-gray-400 font-bold uppercase tracking-widest">Transaction Management</p>
            </div>
        </div>

        <div class="flex flex-wrap items-center gap-3">
            <form id="filterForm" class="flex items-center gap-2 bg-gray-50 p-2 rounded-2xl border border-gray-100">
                <input type="date" name="from_date" id="from_date" class="bg-transparent border-none text-sm outline-none focus:ring-0 p-1">
                <span class="text-gray-300">|</span>
                <input type="date" name="to_date" id="to_date" class="bg-transparent border-none text-sm outline-none focus:ring-0 p-1">
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-xl text-xs font-bold hover:bg-blue-700 transition-all">
                    ফিল্টার
                </button>
            </form>
            
            <button onclick="openModal('create')" class="bg-gray-800 text-white px-6 py-3 rounded-2xl font-bold hover:bg-black shadow-lg shadow-gray-200 transition-all flex items-center gap-2">
                <i class="fas fa-plus text-xs"></i> নতুন লেনদেন
            </button>
        </div>
    </div>

    <div class="bg-white rounded-3xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 text-gray-400 text-[10px] uppercase tracking-widest border-b border-gray-100">
                        <th class="px-8 py-5">তারিখ</th>
                        <th class="py-5">খাত (Account Head)</th>
                        <th class="py-5 text-center">টাইপ</th>
                        <th class="py-5 text-right">পরিমাণ</th>
                        <th class="px-8 py-5 text-right">অ্যাকশন</th>
                    </tr>
                </thead>
                <tbody id="transactionTableBody" class="divide-y divide-gray-50">
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="transactionModal" class="fixed inset-0 bg-gray-900/60 backdrop-blur-sm hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-300">
        <div class="p-8 bg-blue-600 text-white flex justify-between items-center">
            <div>
                <h3 id="modalTitle" class="font-black text-xl">নতুন লেনদেন</h3>
                <p class="text-xs opacity-70 uppercase font-bold tracking-tighter">Transaction Details</p>
            </div>
            <button onclick="closeModal()" class="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 hover:bg-white/30 transition-all">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <form id="transactionForm" class="p-8 space-y-5">
            @csrf
            <input type="hidden" id="transaction_id" name="id">
            
            <div class="grid grid-cols-2 gap-4">
                <div class="col-span-2">
                    <label class="block text-[11px] font-black uppercase text-gray-400 mb-2 ml-1">লেনদেনের তারিখ</label>
                    <input type="date" name="transaction_date" id="t_date" class="w-full p-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all" required>
                </div>
                
                <div class="col-span-2">
                    <label class="block text-[11px] font-black uppercase text-gray-400 mb-2 ml-1">হিসাবের খাত (Head)</label>
                    <select name="account_head_id" id="t_head" class="w-full p-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all" required>
                        <option value="">খাত নির্বাচন করুন</option>
                        @foreach($heads as $head)
                            <option value="{{ $head->id }}">{{ $head->head_name }} ({{ $head->head_type }})</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-span-2">
                    <label class="block text-[11px] font-black uppercase text-gray-400 mb-2 ml-1">টাকার পরিমাণ</label>
                    <div class="relative">
                        <span class="absolute left-4 top-1/2 -translate-y-1/2 font-bold text-gray-400">৳</span>
                        <input type="number" step="0.01" name="amount" id="t_amount" class="w-full p-4 pl-10 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all font-black text-lg" placeholder="0.00" required>
                    </div>
                </div>

                <div class="col-span-2">
                    <label class="block text-[11px] font-black uppercase text-gray-400 mb-2 ml-1">সংক্ষিপ্ত বিবরণ</label>
                    <textarea name="description" id="t_desc" class="w-full p-4 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500 outline-none transition-all" rows="2" placeholder="ঐচ্ছিক..."></textarea>
                </div>
            </div>

            <div class="pt-4 flex gap-3">
                <button type="button" onclick="closeModal()" class="flex-1 px-6 py-4 bg-gray-100 text-gray-600 rounded-2xl font-black hover:bg-gray-200 transition-all uppercase text-xs">বাতিল</button>
                <button type="submit" class="flex-1 px-6 py-4 bg-blue-600 text-white rounded-2xl font-black hover:bg-blue-700 shadow-lg shadow-blue-100 transition-all uppercase text-xs">সংরক্ষণ করুন</button>
            </div>
        </form>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        // ১. শুরুতে ডাটা লোড
        loadTransactions();

        // ২. ফিল্টার সাবমিট
        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            loadTransactions();
        });

        // ৩. ক্রিয়েট বা আপডেট সাবমিট
        $('#transactionForm').on('submit', function(e) {
            e.preventDefault();
            const id = $('#transaction_id').val();
            // id থাকলে আপডেট ইউআরএল, না থাকলে স্টোর ইউআরএল
            const url = id ? `{{ url('admin/transactions/update') }}/${id}` : `{{ url('admin/transactions') }}`;
            
            $.ajax({
                url: url,
                method: "POST",
                data: $(this).serialize(),
                success: function(res) {
                    Swal.fire({ icon: 'success', title: res.message, showConfirmButton: false, timer: 1500 });
                    closeModal();
                    loadTransactions();
                },
                error: function(err) {
                    const errorMsg = err.responseJSON ? err.responseJSON.message : 'সঠিকভাবে তথ্য দিন';
                    Swal.fire('এরর!', errorMsg, 'error');
                }
            });
        });
    });

    // ডাটা লোড করার মেইন ফাংশন
    function loadTransactions() {
        const formData = $('#filterForm').serialize();
        $.get("{{ url('admin/transactions') }}", formData, function(res) {
            let html = '';
            if(res.data && res.data.length > 0) {
                res.data.forEach(tr => {
                    const typeClass = tr.transaction_type === 'Income' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700';
                    html += `
                    <tr class="hover:bg-gray-50 transition-all group">
                        <td class="px-8 py-5 text-sm font-bold text-gray-500">${tr.transaction_date}</td>
                        <td class="py-5 font-black text-gray-800">${tr.head_name} <br> <span class="text-[10px] font-normal text-gray-400">${tr.description || ''}</span></td>
                        <td class="py-5 text-center"><span class="px-3 py-1 rounded-full text-[9px] font-black uppercase ${typeClass}">${tr.transaction_type}</span></td>
                        <td class="py-5 text-right font-black text-gray-900">${Number(tr.amount).toLocaleString('bn-BD')} ৳</td>
                        <td class="px-8 py-5 text-right">
                            <button onclick="openModal('edit', ${tr.id})" class="w-9 h-9 inline-flex items-center justify-center rounded-xl bg-blue-50 text-blue-600 hover:bg-blue-600 hover:text-white transition-all shadow-sm">
                                <i class="fas fa-edit text-xs"></i>
                            </button>
                        </td>
                    </tr>`;
                });
            } else {
                html = '<tr><td colspan="5" class="text-center py-20 text-gray-400 font-bold italic">কোনো লেনদেন খুঁজে পাওয়া যায়নি!</td></tr>';
            }
            $('#transactionTableBody').html(html);
        });
    }

    // মোডাল কন্ট্রোল
    function openModal(mode, id = null) {
        $('#transactionForm')[0].reset();
        $('#transaction_id').val('');
        $('#modalTitle').text(mode === 'edit' ? 'লেনদেন এডিট করুন' : 'নতুন লেনদেন');
        
        if (mode === 'edit') {
            $.get(`{{ url('admin/transactions') }}/${id}`, function(res) {
                const tr = res.data;
                $('#transaction_id').val(tr.id);
                $('#t_date').val(tr.transaction_date);
                $('#t_head').val(tr.account_head_id);
                $('#t_amount').val(tr.amount);
                $('#t_desc').val(tr.description);
            });
        }
        $('#transactionModal').removeClass('hidden');
    }

    function closeModal() {
        $('#transactionModal').addClass('hidden');
    }
</script>
@endsection