@extends('layouts.app')

@section('title', 'Add Old System Billing')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h2><i class="bi bi-clock-history"></i> Add Old System Billing</h2>
            <a href="{{ route('billings.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Back to Billings
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Carry Over an Unpaid Billing from the Previous System</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        Use this form for clients who still have a balance in the old system.
                        The billing is recorded without a meter reading and its amounts are
                        entered exactly as they appear in the old system — they will not be
                        recalculated from the rate tiers.
                    </div>

                    <form method="POST" action="{{ route('billings.store') }}">
                        @csrf

                        <div class="form-group mb-3 position-relative">
                            <label for="client_search" class="form-label">Client <span class="text-danger">*</span></label>
                            <input type="text" id="client_search" name="client_search" autocomplete="off"
                                class="form-control @error('client_id') is-invalid @enderror"
                                value="{{ old('client_search') }}"
                                placeholder="Type at least 2 characters of the name, account number, or meter number...">
                            <input type="hidden" name="client_id" id="client_id" value="{{ old('client_id') }}">
                            <div id="clientSearchResults" class="list-group position-absolute w-100 shadow"
                                style="display: none; z-index: 1050; max-height: 300px; overflow-y: auto;"></div>
                            <small class="text-muted">Search finds clients as you type — results are limited to the closest 10 matches.</small>
                            @error('client_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="billing_number" class="form-label">Old System Billing / Reference Number</label>
                            <input type="text" name="billing_number" id="billing_number"
                                class="form-control @error('billing_number') is-invalid @enderror"
                                value="{{ old('billing_number') }}" placeholder="Leave blank to auto-generate (OLD-...)">
                            <small class="text-muted">The billing number from the previous system, if you want to keep it for reference.</small>
                            @error('billing_number')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="billing_date" class="form-label">Billing Date <span class="text-danger">*</span></label>
                                    <input type="date" name="billing_date" id="billing_date"
                                        class="form-control @error('billing_date') is-invalid @enderror"
                                        value="{{ old('billing_date') }}" required>
                                    <small class="text-muted">The date the bill was issued in the old system.</small>
                                    @error('billing_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="due_date" class="form-label">Due Date <span class="text-danger">*</span></label>
                                    <input type="date" name="due_date" id="due_date"
                                        class="form-control @error('due_date') is-invalid @enderror"
                                        value="{{ old('due_date') }}" required>
                                    <small class="text-muted">If already past, the billing is marked overdue.</small>
                                    @error('due_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="subtotal" class="form-label">Water Charges <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">₱</span>
                                        <input type="number" step="0.01" min="0" name="subtotal" id="subtotal"
                                            class="form-control @error('subtotal') is-invalid @enderror"
                                            value="{{ old('subtotal') }}" required>
                                    </div>
                                    <small class="text-muted">The unpaid water consumption charges from the old system.</small>
                                    @error('subtotal')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="penalties" class="form-label">Late Payment / Penalties</label>
                                    <div class="input-group">
                                        <span class="input-group-text">₱</span>
                                        <input type="number" step="0.01" min="0" name="penalties" id="penalties"
                                            class="form-control @error('penalties') is-invalid @enderror"
                                            value="{{ old('penalties', '0.00') }}">
                                    </div>
                                    <small class="text-muted">Late payment fees already accrued in the old system.</small>
                                    @error('penalties')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="other_charges" class="form-label">Other Charges</label>
                                    <div class="input-group">
                                        <span class="input-group-text">₱</span>
                                        <input type="number" step="0.01" min="0" name="other_charges" id="other_charges"
                                            class="form-control @error('other_charges') is-invalid @enderror"
                                            value="{{ old('other_charges', '0.00') }}">
                                    </div>
                                    @error('other_charges')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="tax" class="form-label">Tax</label>
                                    <div class="input-group">
                                        <span class="input-group-text">₱</span>
                                        <input type="number" step="0.01" min="0" name="tax" id="tax"
                                            class="form-control @error('tax') is-invalid @enderror"
                                            value="{{ old('tax', '0.00') }}">
                                    </div>
                                    @error('tax')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="form-group mb-3">
                            <label for="amount_paid" class="form-label">Amount Already Paid</label>
                            <div class="input-group">
                                <span class="input-group-text">₱</span>
                                <input type="number" step="0.01" min="0" name="amount_paid" id="amount_paid"
                                    class="form-control @error('amount_paid') is-invalid @enderror"
                                    value="{{ old('amount_paid', '0.00') }}">
                            </div>
                            <small class="text-muted">Partial payments already made in the old system, if any. The remaining balance is carried over.</small>
                            @error('amount_paid')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="remarks" class="form-label">Remarks</label>
                            <textarea name="remarks" id="remarks" rows="3"
                                class="form-control @error('remarks') is-invalid @enderror"
                                placeholder="e.g. Carried over from old system, covers June 2026 consumption">{{ old('remarks') }}</textarea>
                            @error('remarks')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save"></i> Add Billing
                            </button>
                            <a href="{{ route('billings.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0"><i class="bi bi-question-circle"></i> How it works</h5>
                </div>
                <div class="card-body">
                    <ul class="mb-0 ps-3">
                        <li class="mb-2">The billing is tagged <span class="badge bg-secondary">Old System</span> and shows no meter reading or consumption.</li>
                        <li class="mb-2">Its balance counts toward the client's outstanding balance and can be paid through the normal payment flow.</li>
                        <li class="mb-2">If it stays unpaid, the regular late payment and disconnection processing applies to it like any other billing.</li>
                        <li>Amounts are recorded exactly as entered — the rate tiers are not applied.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const searchInput = document.getElementById('client_search');
    const hiddenId = document.getElementById('client_id');
    const resultsBox = document.getElementById('clientSearchResults');
    let searchTimeout;

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text ?? '';
        return div.innerHTML;
    }

    searchInput.addEventListener('input', function () {
        clearTimeout(searchTimeout);
        // Typing invalidates the previous selection
        hiddenId.value = '';

        const query = this.value.trim();
        if (query.length < 2) {
            resultsBox.style.display = 'none';
            return;
        }

        searchTimeout = setTimeout(() => {
            fetch(`{{ url('api/billings/search-clients') }}?q=${encodeURIComponent(query)}`)
                .then(r => r.json())
                .then(data => {
                    if (data.results && data.results.length > 0) {
                        resultsBox.innerHTML = data.results.map(client => `
                            <a href="#" class="list-group-item list-group-item-action text-decoration-none"
                               data-id="${client.id}" data-label="${escapeHtml(client.name)} (${escapeHtml(client.account_number)})">
                                <strong>${escapeHtml(client.name)}</strong>
                                ${client.company_name ? `<span class="badge bg-info">${escapeHtml(client.company_name)}</span>` : ''}
                                <small class="d-block text-muted">
                                    Account: ${escapeHtml(client.account_number)} | Meter: ${escapeHtml(client.meter_number || 'N/A')}
                                </small>
                            </a>
                        `).join('');
                    } else {
                        resultsBox.innerHTML = '<div class="list-group-item text-muted">No clients found</div>';
                    }
                    resultsBox.style.display = 'block';
                })
                .catch(() => {
                    resultsBox.innerHTML = '<div class="list-group-item text-danger">Error searching clients</div>';
                    resultsBox.style.display = 'block';
                });
        }, 300);
    });

    resultsBox.addEventListener('click', function (e) {
        const item = e.target.closest('a[data-id]');
        if (!item) return;
        e.preventDefault();
        hiddenId.value = item.dataset.id;
        searchInput.value = item.dataset.label;
        resultsBox.style.display = 'none';
    });

    document.addEventListener('click', function (e) {
        if (!searchInput.contains(e.target) && !resultsBox.contains(e.target)) {
            resultsBox.style.display = 'none';
        }
    });

    // Don't submit with a typed-but-unselected client
    searchInput.closest('form').addEventListener('submit', function (e) {
        if (!hiddenId.value) {
            e.preventDefault();
            searchInput.classList.add('is-invalid');
            searchInput.focus();
        }
    });
})();
</script>
@endsection