@extends('layouts.app')
@section('title', 'Add Account')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('coa.index') }}">Chart of Accounts</a></li>
    <li class="breadcrumb-item active">Add Account</li>
@endsection

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Add Account</h1>
        <p class="page-subtitle">Create a new account in the chart of accounts</p>
    </div>
    <a href="{{ route('coa.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>Back
    </a>
</div>

<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card">
    <div class="card-header fw-semibold">
        <i class="bi bi-journal-plus me-2 text-primary"></i>Account Details
    </div>
    <div class="card-body">
    <form method="POST" action="{{ route('coa.store') }}" id="coaForm">
    @csrf
    <input type="hidden" name="account_section" id="accountSection" value="{{ old('account_section') }}">
    <input type="hidden" name="type" id="typeHidden" value="{{ old('type') }}">
    <input type="hidden" name="sub_type" id="subTypeHidden" value="{{ old('sub_type') }}">
    <div class="row g-3">

        <div class="col-12">
            <label class="form-label fw-semibold">Account Name <span class="text-danger">*</span></label>
            <input type="text" name="name" autofocus required
                   class="form-control form-control-lg @error('name') is-invalid @enderror"
                   value="{{ old('name') }}" placeholder="e.g. Cash in Hand">
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-sm-5">
            <label class="form-label fw-semibold">Account Code</label>
            <input type="text" name="code"
                   class="form-control @error('code') is-invalid @enderror"
                   value="{{ old('code') }}" placeholder="e.g. 1110">
            <div class="form-text">Optional account number</div>
            @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="col-12 col-sm-7">
            <label class="form-label fw-semibold">Account Type <span class="text-danger">*</span></label>
            <select id="sectionSelect" required class="form-select @error('account_section') is-invalid @enderror">
                <option value="">— Select Account Type —</option>
                <option value="bank">Bank</option>
                <option value="accounts_receivable">Accounts Receivable (A/R)</option>
                <option value="other_current_assets">Other Current Assets</option>
                <option value="fixed_assets">Fixed Assets</option>
                <option value="other_assets">Other Assets</option>
                <option value="accounts_payable">Accounts Payable (A/P)</option>
                <option value="credit_card">Credit Card</option>
                <option value="other_current_liabilities">Other Current Liabilities</option>
                <option value="long_term_liabilities">Long-Term Liabilities</option>
                <option value="equity">Equity</option>
                <option value="income">Income</option>
                <option value="other_income">Other Income</option>
                <option value="cost_of_goods_sold">Cost of Goods Sold</option>
                <option value="expenses">Expenses</option>
                <option value="other_expense">Other Expense</option>
            </select>
            @error('account_section')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
        </div>

        <div class="col-12">
            <label class="form-label fw-semibold">Parent Account</label>
            <select name="parent_id" id="parentSelect" class="form-select select2">
                <option value="">— No Parent (Top Level) —</option>
                @foreach($parents as $parent)
                    <option value="{{ $parent->id }}" data-type="{{ $parent->type }}"
                        {{ old('parent_id', $selectedParent?->id) == $parent->id ? 'selected':'' }}>
                        {{ str_repeat('›  ', $parent->depth) }}{{ $parent->code ? "[{$parent->code}] " : "" }}{{ $parent->name }}
                    </option>
                @endforeach
            </select>
            <div class="form-text">Select a parent to create a sub-account</div>
        </div>

        <div class="col-12" id="bankCashRow" style="display:none">
            <label class="form-label fw-semibold d-block mb-2">Account Flags</label>
            <div class="row g-2">
                <div class="col-12 col-sm-6">
                    <div class="form-check p-3 rounded-2 border h-100" style="background:#f8f9fa">
                        <input class="form-check-input" type="checkbox" name="is_bank" value="1"
                               id="isBank" {{ old('is_bank') ? 'checked':'' }}>
                        <label class="form-check-label ms-1" for="isBank">
                            <i class="bi bi-bank text-info me-1"></i>
                            <strong>Bank Account</strong>
                            <div class="text-muted" style="font-size:11.5px;margin-top:2px">Available for bank reconciliation</div>
                        </label>
                    </div>
                </div>
                <div class="col-12 col-sm-6">
                    <div class="form-check p-3 rounded-2 border h-100" style="background:#f8f9fa">
                        <input class="form-check-input" type="checkbox" name="is_cash" value="1"
                               id="isCash" {{ old('is_cash') ? 'checked':'' }}>
                        <label class="form-check-label ms-1" for="isCash">
                            <i class="bi bi-cash text-success me-1"></i>
                            <strong>Cash Account</strong>
                            <div class="text-muted" style="font-size:11.5px;margin-top:2px">Cash payment and receipt</div>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <label class="form-label fw-semibold">Description</label>
            <textarea name="description" class="form-control" rows="2"
                      placeholder="Optional description or notes">{{ old('description') }}</textarea>
        </div>

        <div class="col-12 d-flex gap-2 justify-content-end pt-2">
            <a href="{{ route('coa.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
            <button type="submit" class="btn btn-primary px-4" id="saveBtn">
                <i class="bi bi-check-circle me-1"></i>Create Account
            </button>
        </div>
    </div>
    </form>
    </div>
</div>
</div>
</div>
@endsection

@push('scripts')
<script>
const sectionMeta = @json($sectionMeta);

function syncBankCashRow(sectionKey) {
    const row = document.getElementById('bankCashRow');
    const isBankSection = sectionKey === 'bank';
    if (row) row.style.display = isBankSection ? '' : 'none';
    if (!isBankSection) {
        const bank = document.getElementById('isBank');
        const cash = document.getElementById('isCash');
        if (bank) bank.checked = false;
        if (cash) cash.checked = false;
    }
}

function applySection(key) {
    const section = sectionMeta[key] || null;
    document.getElementById('accountSection').value = key;
    document.getElementById('typeHidden').value = section?.type || '';
    document.getElementById('subTypeHidden').value = section?.sub_type || '';
    filterParents(section?.type || '');
    syncBankCashRow(key);
}

function filterParents(type) {
    const parentSelect = document.getElementById('parentSelect');
    if (!parentSelect) return;
    Array.from(parentSelect.options).forEach(option => {
        if (!option.value) return;
        const matches = !type || option.dataset.type === type;
        option.hidden = !matches;
        option.disabled = !matches;
    });
    if (parentSelect.value) {
        const selected = parentSelect.options[parentSelect.selectedIndex];
        if (selected?.disabled) parentSelect.value = '';
    }
}

document.getElementById('sectionSelect').addEventListener('change', function() {
    applySection(this.value);
});

const savedSection = @json(old('account_section', ''));
if (savedSection) {
    document.getElementById('sectionSelect').value = savedSection;
    applySection(savedSection);
}

(function () {
    const bankInput = document.getElementById('isBank');
    const cashInput = document.getElementById('isCash');
    if (!bankInput || !cashInput) return;
    bankInput.addEventListener('change', function () {
        if (this.checked) cashInput.checked = false;
    });
    cashInput.addEventListener('change', function () {
        if (this.checked) bankInput.checked = false;
    });
})();

document.getElementById('coaForm').addEventListener('submit', function() {
    const b = document.getElementById('saveBtn');
    b.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Creating...';
    b.disabled = true;
});
</script>
@endpush