@extends('adminlte::page')

@section('title', 'Create Memo')

@section('content_header')
    <h1>Create Invoice Memo</h1>
@endsection

@section('content')
    <div class="card">
        <div class="card-body">
            <form action="{{ route('invoices.store-memo') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Client</label>
                            <select name="client_id" id="memo_client_id" class="form-control" required>
                                <option value="">-- Select Client --</option>
                                @foreach($clients as $c)
                                    <option value="{{ $c->id }}">{{ $c->display_name ?? ($c->company_name ?: ($c->first_name.' '.$c->last_name)) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Case (optional)</label>
                            <select name="case_id" id="memo_case_id" class="form-control" disabled>
                                <option value="">-- None --</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Invoice Date</label>
                            <input type="date" name="invoice_date" class="form-control" value="{{ now()->format('Y-m-d') }}" required>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Due Date</label>
                            <input type="date" name="due_date" class="form-control" value="{{ now()->addDays(14)->format('Y-m-d') }}" required>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>Invoice Number (optional)</label>
                    <input type="text" name="invoice_number" class="form-control" placeholder="Leave blank to auto-generate">
                </div>
                <div class="form-group">
                    <label>Notes</label>
                    <textarea class="form-control" name="notes" rows="3"></textarea>
                </div>
                <div>
                    <button class="btn btn-primary" type="submit">Create Memo</button>
                    <a href="{{ route('invoices.index') }}" class="btn btn-secondary">Cancel</a>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('js')
<script>
(function(){
    const clientSel = document.getElementById('memo_client_id');
    const caseSel = document.getElementById('memo_case_id');
    function setCaseDisabled(disabled){ if (caseSel) caseSel.disabled = !!disabled; }
    function renderCaseOptions(items) {
        caseSel.innerHTML = '';
        const none = document.createElement('option');
        none.value = '';
        none.textContent = '-- None --';
        caseSel.appendChild(none);
        items.forEach(it => {
            const opt = document.createElement('option');
            opt.value = it.id;
            opt.textContent = it.text;
            caseSel.appendChild(opt);
        });
    }
    async function loadCasesForClient(clientId){
        if (!clientId) { renderCaseOptions([]); setCaseDisabled(true); return; }
        try {
            setCaseDisabled(true);
            caseSel.innerHTML = '<option>Loading…</option>';
            const url = `{{ route('invoices.casesByClient', ['client' => 'CLIENT_ID']) }}`.replace('CLIENT_ID', encodeURIComponent(clientId));
            const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
            const json = await res.json();
            renderCaseOptions((json && json.data) ? json.data : []);
            setCaseDisabled(false);
        } catch (e) {
            renderCaseOptions([]);
            setCaseDisabled(true);
        }
    }
    if (clientSel && caseSel) {
        clientSel.addEventListener('change', function(){
            caseSel.value = '';
            loadCasesForClient(this.value);
        });
    }
})();
</script>
@endsection