@extends('layouts.app')
@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-semibold capitalize">{{ $type }} Voucher</h1>
        <a href="{{ route('vouchers.index') }}" class="px-4 py-2 rounded-xl bg-gray-800 text-white">Back</a>
    </div>
    @if (session('error'))
        <div class="mb-4 px-4 py-3 rounded-xl bg-red-50 text-red-700 border border-red-200">{{ session('error') }}</div>
    @endif
    <form method="POST" action="{{ route('vouchers.store') }}" class="bg-white rounded-3xl border border-gray-100 shadow-lg p-6">
        @csrf
        <input type="hidden" name="type" value="{{ $type }}">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Date</label>
                <input type="date" name="entry_date" value="{{ old('entry_date', now()->format('Y-m-d')) }}" class="w-full border rounded px-3 py-2">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium mb-1">Description</label>
                <input type="text" name="description" value="{{ old('description') }}" class="w-full border rounded px-3 py-2" placeholder="Optional note">
            </div>
        </div>
        <div class="mt-6">
            <div class="flex items-center justify-between mb-3">
                <div class="font-semibold text-gray-800">Lines</div>
                <div class="flex items-center gap-2">
                    <button type="button" id="add-line" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-xl bg-gradient-to-r from-[var(--primary)] to-blue-600 text-white text-xs shadow hover:shadow-md hover:-translate-y-0.5 transition">
                        <svg class="h-3.5 w-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 12h14M12 5v14" stroke-width="2"/></svg>
                        <span>Add Row</span>
                    </button>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full text-sm rounded-2xl overflow-hidden" id="voucher-table">
                    <thead class="bg-gray-50 text-gray-600">
                        <tr>
                            <th class="text-left px-3 py-2">Account</th>
                            <th class="text-left px-3 py-2">Debit</th>
                            <th class="text-left px-3 py-2">Credit</th>
                            <th class="text-left px-3 py-2 w-20"></th>
                        </tr>
                    </thead>
                    <tbody id="voucher-rows" class="divide-y">
                        @for($i=0;$i<2;$i++)
                        <tr data-row>
                            <td class="px-3 py-2">
                                <select name="lines[{{ $i }}][account_type_id]" class="w-full border rounded-xl px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50">
                                    <option value="">Select account</option>
                                    @foreach($accounts as $a)
                                        <option value="{{ $a->id }}" @selected(old('lines.'.$i.'.account_type_id')==$a->id)>{{ $a->code }} — {{ $a->name }}</option>
                                    @endforeach
                                </select>
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="lines[{{ $i }}][debit]" value="{{ old('lines.'.$i.'.debit') }}" class="amount-debit w-full border rounded-xl px-2 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/40" placeholder="0.00" inputmode="decimal">
                            </td>
                            <td class="px-3 py-2">
                                <input type="text" name="lines[{{ $i }}][credit]" value="{{ old('lines.'.$i.'.credit') }}" class="amount-credit w-full border rounded-xl px-2 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40" placeholder="0.00" inputmode="decimal">
                            </td>
                            <td class="px-3 py-2">
                                <button type="button" class="delete-line px-2.5 py-1.5 rounded-lg bg-gradient-to-r from-rose-600 to-red-500 text-white text-xs shadow hover:shadow-md hover:-translate-y-0.5 transition">Delete</button>
                            </td>
                        </tr>
                        @endfor
                    </tbody>
                    <tfoot>
                        <tr class="bg-gray-50 text-gray-800">
                            <td class="px-3 py-3 text-right font-medium">
                                <span id="balance-badge" class="inline-block px-2.5 py-1 rounded-full text-xs bg-amber-100 text-amber-700">Unbalanced</span>
                            </td>
                            <td class="px-3 py-3 font-semibold" id="total-debit">0.00</td>
                            <td class="px-3 py-3 font-semibold" id="total-credit">0.00</td>
                            <td class="px-3 py-2"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="mt-6 text-right">
            <button id="post-btn" class="px-6 py-2.5 rounded-2xl bg-gradient-to-r from-gray-400 to-gray-500 text-white shadow opacity-60 cursor-not-allowed" disabled>Post Voucher</button>
        </div>
    </form>
    <div class="text-xs text-gray-500 mt-3">
        Tips:
        - Payment voucher: credit Cash/Bank, debit expense or payable.
        - Receipt voucher: debit Cash/Bank, credit receivable or income.
        - Journal voucher: any ledger adjustment.
        - Contra: move between Cash and Bank accounts.
    </div>
    <template id="row-template">
        <tr data-row>
            <td class="px-3 py-2">
                <select class="acct w-full border rounded-xl px-2 py-2 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]/50">
                    <option value="">Select account</option>
                    @foreach($accounts as $a)
                        <option value="{{ $a->id }}">{{ $a->code }} — {{ $a->name }}</option>
                    @endforeach
                </select>
            </td>
            <td class="px-3 py-2"><input type="text" class="amount-debit w-full border rounded-xl px-2 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/40" placeholder="0.00" inputmode="decimal"></td>
            <td class="px-3 py-2"><input type="text" class="amount-credit w-full border rounded-xl px-2 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/40" placeholder="0.00" inputmode="decimal"></td>
            <td class="px-3 py-2"><button type="button" class="delete-line px-2.5 py-1.5 rounded-lg bg-gradient-to-r from-rose-600 to-red-500 text-white text-xs shadow hover:shadow-md hover:-translate-y-0.5 transition">Delete</button></td>
        </tr>
    </template>
</div>
<script>
    const rows=document.getElementById('voucher-rows');const addBtn=document.getElementById('add-line');const postBtn=document.getElementById('post-btn');const tDebit=document.getElementById('total-debit');const tCredit=document.getElementById('total-credit');const tpl=document.getElementById('row-template');const badge=document.getElementById('balance-badge');
    function renumber(){Array.from(rows.querySelectorAll('tr[data-row]')).forEach((tr,idx)=>{const sel=tr.querySelector('select');const d=tr.querySelector('.amount-debit');const c=tr.querySelector('.amount-credit');sel.name=`lines[${idx}][account_type_id]`;d.name=`lines[${idx}][debit]`;c.name=`lines[${idx}][credit]`})}
    function val(n){n=(n||'').toString().replace(/,/g,'');const x=parseFloat(n);return isNaN(x)?0:x}
    function recalc(){let db=0,cr=0;rows.querySelectorAll('.amount-debit').forEach(i=>db+=val(i.value));rows.querySelectorAll('.amount-credit').forEach(i=>cr+=val(i.value));tDebit.textContent=db.toFixed(2);tCredit.textContent=cr.toFixed(2);const ok=db>0&&db===cr;postBtn.disabled=!ok;postBtn.classList.toggle('opacity-60',!ok);postBtn.classList.toggle('cursor-not-allowed',!ok);if(ok){postBtn.className='px-6 py-2.5 rounded-2xl bg-gradient-to-r from-emerald-600 to-green-500 text-white shadow hover:shadow-md hover:-translate-y-0.5 transition';badge.textContent='Balanced';badge.className='inline-block px-2.5 py-1 rounded-full text-xs bg-emerald-100 text-emerald-700'}else{postBtn.className='px-6 py-2.5 rounded-2xl bg-gradient-to-r from-gray-400 to-gray-500 text-white shadow opacity-60 cursor-not-allowed';const diff=(db-cr).toFixed(2);badge.textContent='Unbalanced ('+diff+')';badge.className='inline-block px-2.5 py-1 rounded-full text-xs bg-amber-100 text-amber-700'}}
    function bindRow(tr){tr.querySelectorAll('input').forEach(i=>i.addEventListener('input',recalc));tr.querySelector('.delete-line').addEventListener('click',()=>{if(rows.children.length>2){tr.remove();renumber();recalc()}})}
    rows.querySelectorAll('tr[data-row]').forEach(bindRow);recalc();
    addBtn.addEventListener('click',()=>{const node=tpl.content.firstElementChild.cloneNode(true);rows.appendChild(node);const sel=node.querySelector('select');sel.name='';const d=node.querySelector('.amount-debit');const c=node.querySelector('.amount-credit');d.name='';c.name='';bindRow(node);renumber();recalc()});
</script>
@endsection