@extends('admin.admin_dashboard')

@section('admin')
<div class="content-body default-height">
    <div class="container-fluid">
        <div class="row page-titles">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Accounting</a></li>
                <li class="breadcrumb-item"><a href="{{ route('admin.expense_bills.index') }}">Expense Bills</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Create</a></li>
            </ol>
        </div>

        <div class="row">
            <div class="col-xl-12">
                <div class="filter cm-content-box box-primary">
                    <div class="content-title SlideToolHeader">
                        <div class="cpa">
                            <i class="fa-solid fa-plus me-1"></i>Create Expense Bill
                        </div>
                        <div class="tools">
                            <a href="javascript:void(0);" class="expand handle"><i class="fal fa-angle-down"></i></a>
                        </div>
                    </div>

                    <div class="cm-content-body form excerpt">
                        <div class="card-body">

                            @if(session('error'))
                                <div class="alert alert-danger">{{ session('error') }}</div>
                            @endif

                            @if($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach($errors->all() as $e)
                                            <li>{{ $e }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form action="{{ route('admin.expense_bills.store') }}" method="POST" enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="col-xl-3 col-sm-6">
                                        <label class="form-label">Bill Date</label>
                                        <input type="date" name="bill_date" value="{{ old('bill_date') }}"
                                               class="form-control mb-3 @error('bill_date') is-invalid @enderror" required>
                                        @error('bill_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="col-xl-3 col-sm-6">
                                        <label class="form-label">Category</label>
                                        <select name="category_id" class="form-control mb-3 @error('category_id') is-invalid @enderror" required>
                                            <option value="">Select</option>
                                            @foreach($categories as $cat)
                                                <option value="{{ $cat->id }}" {{ old('category_id')==$cat->id?'selected':'' }}>
                                                    {{ $cat->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="col-xl-3 col-sm-6">
                                        <label class="form-label">Vendor (optional)</label>
                                        <select name="expense_vendor_id" class="form-control mb-3">
                                            <option value="">Select Expense Vendor</option>
                                            @foreach($expenseVendors as $vendor)
                                                @php
                                                    $vendorLabel = trim(($vendor->name ?? '') . ($vendor->company_name ? ' - ' . $vendor->company_name : ''));
                                                @endphp
                                                <option value="{{ $vendor->id }}" {{ (string) old('expense_vendor_id') === (string) $vendor->id ? 'selected' : '' }}>
                                                    {{ $vendorLabel }}{{ $vendor->primary_phone ? ' (' . $vendor->primary_phone . ')' : '' }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="col-xl-3 col-sm-6">
                                        <label class="form-label">Total Amount</label>
                                        <input type="number" step="0.01" name="total_amount" value="{{ old('total_amount') }}"
                                               class="form-control mb-3 @error('total_amount') is-invalid @enderror" required>
                                        @error('total_amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                    </div>

                                    <div class="col-xl-12">
                                        <label class="form-label">Remark</label>
                                        <textarea name="remark" class="form-control mb-3" rows="3">{{ old('remark') }}</textarea>
                                    </div>

                                    <div class="col-xl-12">
                                        <label class="form-label">Documents (optional)</label>
                                        <input type="file" name="documents[]" class="form-control mb-3" multiple>
                                    </div>

                                    <div class="col-xl-12">
                                        <hr>

                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="installment_mode" name="installment_mode" value="1"
                                                   {{ old('installment_mode') ? 'checked' : '' }}>
                                            <label class="form-check-label" for="installment_mode">
                                                Enable Installments (optional)
                                            </label>
                                        </div>

                                        <div id="installmentBox" style="display: {{ old('installment_mode') ? 'block' : 'none' }};">
                                            <p class="text-muted mb-2">If you enable installments, total of installments must equal total amount.</p>

                                            <div class="d-flex gap-2 mb-2">
                                                <button type="button" class="btn btn-secondary btn-sm" id="btnAddInst">+ Add Installment</button>
                                                <button type="button" class="btn btn-danger light btn-sm" id="btnClearInst">Clear</button>
                                            </div>

                                            <div class="table-responsive">
                                                <table class="table" id="installmentTable">
                                                    <thead>
                                                    <tr>
                                                        <th>#</th>
                                                        <th>Due Date</th>
                                                        <th>Amount Due</th>
                                                        <th>Remove</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @php $oldInst = old('installments', []); @endphp
                                                    @if(old('installment_mode') && is_array($oldInst) && count($oldInst) > 0)
                                                        @foreach($oldInst as $k => $row)
                                                            <tr>
                                                                <td class="inst-no"></td>
                                                                <td>
                                                                    <input type="date" name="installments[{{ $k }}][due_date]" class="form-control"
                                                                           value="{{ $row['due_date'] ?? '' }}">
                                                                </td>
                                                                <td>
                                                                    <input type="number" step="0.01" name="installments[{{ $k }}][amount_due]" class="form-control"
                                                                           value="{{ $row['amount_due'] ?? '' }}">
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger btn-sm btnRemoveRow">X</button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif
                                                    </tbody>
                                                </table>
                                            </div>

                                            @error('installments')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-xl-12">
                                        <button class="btn btn-primary" type="submit">Save Bill</button>
                                        <a href="{{ route('admin.expense_bills.index') }}" class="btn btn-danger light">Cancel</a>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('customjs')
<script>
    const chk = document.getElementById('installment_mode');
    const box = document.getElementById('installmentBox');
    const tbody = document.querySelector('#installmentTable tbody');
    const btnAdd = document.getElementById('btnAddInst');
    const btnClear = document.getElementById('btnClearInst');

    function renumber() {
        const rows = tbody.querySelectorAll('tr');
        rows.forEach((tr, idx) => {
            tr.querySelector('.inst-no').innerText = (idx + 1);
            const due = tr.querySelector('input[type="date"]');
            const amt = tr.querySelector('input[type="number"]');
            due.name = `installments[${idx}][due_date]`;
            amt.name = `installments[${idx}][amount_due]`;
        });
    }

    function setEnabled(enabled) {
        box.style.display = enabled ? 'block' : 'none';
        box.querySelectorAll('input,button').forEach(el => {
            if (el.id === 'installment_mode') return;
            el.disabled = !enabled;
        });
    }

    function addRow(dueVal = '', amtVal = '') {
        const tr = document.createElement('tr');
        tr.innerHTML = `
            <td class="inst-no"></td>
            <td><input type="date" class="form-control" value="${dueVal}"></td>
            <td><input type="number" step="0.01" class="form-control" value="${amtVal}"></td>
            <td><button type="button" class="btn btn-danger btn-sm btnRemoveRow">X</button></td>
        `;
        tbody.appendChild(tr);

        tr.querySelector('.btnRemoveRow').addEventListener('click', () => {
            tr.remove();
            renumber();
        });

        renumber();
    }

    btnAdd?.addEventListener('click', () => addRow());
    btnClear?.addEventListener('click', () => { tbody.innerHTML = ''; renumber(); });

    document.querySelectorAll('.btnRemoveRow').forEach(btn => {
        btn.addEventListener('click', function () {
            this.closest('tr').remove();
            renumber();
        });
    });

    chk?.addEventListener('change', () => setEnabled(chk.checked));

    setEnabled(chk?.checked);
    renumber();
</script>
@endsection