@extends('layouts.app')
@section('title', 'New Voucher')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('finance.vouchers.index') }}">Vouchers</a></li><li class="breadcrumb-item active">New Voucher</li></ol></nav>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">New Voucher</h1><p class="text-muted mb-0">Create a new accounting voucher</p></div>
    <a href="{{ route('finance.vouchers.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back</a>
</div>
<form action="{{ route('finance.vouchers.store') }}" method="POST" id="voucherForm">
    @csrf
    @if ($errors->any())<div class="alert alert-danger alert-dismissible fade show"><i class="bi bi-exclamation-triangle me-2"></i><ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>@endif
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-medium">Voucher Type <span class="text-danger">*</span></label>
                    <div class="btn-group w-100" role="group">
                        <input type="radio" class="btn-check" name="type" id="typeJournal" value="journal" checked><label class="btn btn-outline-primary btn-sm" for="typeJournal">Journal</label>
                        <input type="radio" class="btn-check" name="type" id="typePayment" value="payment"><label class="btn btn-outline-danger btn-sm" for="typePayment">Payment</label>
                        <input type="radio" class="btn-check" name="type" id="typeReceipt" value="receipt"><label class="btn btn-outline-success btn-sm" for="typeReceipt">Receipt</label>
                        <input type="radio" class="btn-check" name="type" id="typeContra" value="contra"><label class="btn btn-outline-info btn-sm" for="typeContra">Contra</label>
                    </div>
                </div>
                <div class="col-md-3"><label class="form-label fw-medium">Date <span class="text-danger">*</span></label><input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required></div>
                <div class="col-md-3"><label class="form-label fw-medium">Reference #</label><input type="text" name="reference" class="form-control" placeholder="Optional ref"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Narration</label><input type="text" name="narration" class="form-control" placeholder="Brief description"></div>
            </div>
        </div>
    </div>
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-semibold"><i class="bi bi-list-ul me-2 text-primary"></i>Ledger Entries</h5>
            <button type="button" class="btn btn-sm btn-outline-primary" id="addEntryBtn"><i class="bi bi-plus-lg me-1"></i>Add Line</button>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered mb-0" id="entriesTable">
                    <thead class="bg-light">
                        <tr><th class="px-3" style="width:35%">Ledger Account <span class="text-danger">*</span></th><th class="px-3 text-end" style="width:15%">Debit</th><th class="px-3 text-end" style="width:15%">Credit</th><th class="px-3" style="width:25%">Narration</th><th class="px-3 text-center" style="width:50px;"></th></tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="px-3"><select name="entries[0][ledger_account_id]" class="form-select form-select-sm select2-search entry-account" required><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"><input type="number" step="0.01" name="entries[0][debit]" class="form-control form-control-sm text-end entry-debit" value="" min="0" placeholder="0.00"></td>
                            <td class="px-3"><input type="number" step="0.01" name="entries[0][credit]" class="form-control form-control-sm text-end entry-credit" value="" min="0" placeholder="0.00"></td>
                            <td class="px-3"><input type="text" name="entries[0][description]" class="form-control form-control-sm" placeholder="Description"></td>
                            <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-entry"><i class="bi bi-trash"></i></button></td>
                        </tr>
                        <tr>
                            <td class="px-3"><select name="entries[1][ledger_account_id]" class="form-select form-select-sm select2-search entry-account" required><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"><input type="number" step="0.01" name="entries[1][debit]" class="form-control form-control-sm text-end entry-debit" value="" min="0" placeholder="0.00"></td>
                            <td class="px-3"><input type="number" step="0.01" name="entries[1][credit]" class="form-control form-control-sm text-end entry-credit" value="" min="0" placeholder="0.00"></td>
                            <td class="px-3"><input type="text" name="entries[1][description]" class="form-control form-control-sm" placeholder="Description"></td>
                            <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-entry"><i class="bi bi-trash"></i></button></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="bg-light">
                            <td class="px-3 fw-bold">Totals</td>
                            <td class="px-3 text-end fw-bold"><span id="totalDebit">0.00</span></td>
                            <td class="px-3 text-end fw-bold"><span id="totalCredit">0.00</span></td>
                            <td class="px-3"><span id="balanceIndicator" class="badge bg-success-subtle text-success"><i class="bi bi-check-circle me-1"></i>Balanced</span></td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-end gap-2 mb-5">
        <button type="submit" name="action" value="draft" class="btn btn-outline-secondary px-4">Save as Draft</button>
        <button type="submit" name="action" value="post" class="btn btn-primary px-4"><i class="bi bi-check-lg me-1"></i>Save & Post</button>
    </div>
</form>
@endsection
@push('scripts')
<script>
$(document).ready(function(){
    $('.select2-search').select2({theme:'bootstrap-5',width:'100%'});
    var idx=2;
    $('#addEntryBtn').on('click',function(){
        var opts='';@foreach($accounts ?? [] as $a)opts+='<option value="{{ $a->id }}">{{ $a->code }} - {{ $a->name }}</option>';@endforeach
        var row='<tr><td class="px-3"><select name="entries['+idx+'][ledger_account_id]" class="form-select form-select-sm select2-search entry-account" required><option value="">Select account...</option>'+opts+'</select></td><td class="px-3"><input type="number" step="0.01" name="entries['+idx+'][debit]" class="form-control form-control-sm text-end entry-debit" min="0" placeholder="0.00"></td><td class="px-3"><input type="number" step="0.01" name="entries['+idx+'][credit]" class="form-control form-control-sm text-end entry-credit" min="0" placeholder="0.00"></td><td class="px-3"><input type="text" name="entries['+idx+'][description]" class="form-control form-control-sm"></td><td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-entry"><i class="bi bi-trash"></i></button></td></tr>';
        $('#entriesTable tbody').append(row);
        $('#entriesTable tbody tr:last .select2-search').select2({theme:'bootstrap-5',width:'100%'});
        idx++;
    });
    $(document).on('click','.remove-entry',function(){ if($('#entriesTable tbody tr').length>2){ $(this).closest('tr').remove(); recalculate(); }else{ Swal.fire('Minimum','At least two entries required','warning'); } });
    $(document).on('input','.entry-debit,.entry-credit',function(){ recalculate(); });
    function recalculate(){
        var totalD=0,totalC=0;
        $('.entry-debit').each(function(){ totalD+=parseFloat($(this).val())||0; });
        $('.entry-credit').each(function(){ totalC+=parseFloat($(this).val())||0; });
        $('#totalDebit').text(totalD.toFixed(2));
        $('#totalCredit').text(totalC.toFixed(2));
        if(Math.abs(totalD-totalC)<0.01&&totalD>0){ $('#balanceIndicator').removeClass('bg-danger-subtle text-danger').addClass('bg-success-subtle text-success').html('<i class="bi bi-check-circle me-1"></i>Balanced'); }
        else{ $('#balanceIndicator').removeClass('bg-success-subtle text-success').addClass('bg-danger-subtle text-danger').html('<i class="bi bi-x-circle me-1"></i>Unbalanced ('+Math.abs(totalD-totalC).toFixed(2)+')'); }
    }
});
</script>
@endpush