@extends('layouts.app')
@section('title', 'New invoice')

@section('content')
    <div class="page-head">
        <div><h1>Raise an invoice</h1><p>Manual invoices for installation, hardware, penalties or ad-hoc charges.</p></div>
        <a href="{{ route('invoices.index') }}" class="btn secondary">&larr; Back to invoices</a>
    </div>

    <form method="POST" action="{{ route('invoices.store') }}">
        @csrf
        <div class="card">
            <div class="card-head"><h3>Invoice header</h3></div>
            <div class="card-body">
                <div class="form-grid">
                    <div class="field span-2">
                        <label>Customer <span class="req">*</span></label>
                        <select name="customer_id" required>
                            <option value="">Select a customer…</option>
                            @foreach ($customers as $customer)
                                <option value="{{ $customer->id }}" @selected(old('customer_id', request('customer')) == $customer->id)>
                                    {{ $customer->customer_number }} — {{ $customer->display_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Service (optional)</label>
                        <select name="service_id">
                            <option value="">Not linked to a service</option>
                            @foreach ($services as $service)
                                <option value="{{ $service->id }}" @selected(old('service_id') == $service->id)>
                                    {{ $service->service_number }} — {{ $service->plan?->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Invoice type <span class="req">*</span></label>
                        <select name="type" required>
                            @foreach (['subscription','installation','one_time','hardware','credit_note'] as $t)
                                <option value="{{ $t }}" @selected(old('type', 'one_time') === $t)>{{ title_case_words($t) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Issue date <span class="req">*</span></label>
                        <input type="date" name="issue_date" required value="{{ old('issue_date', now()->toDateString()) }}">
                    </div>
                    <div class="field">
                        <label>Due date <span class="req">*</span></label>
                        <input type="date" name="due_date" required value="{{ old('due_date', now()->addDays(7)->toDateString()) }}">
                    </div>
                    <div class="field">
                        <label>Tax</label>
                        <select name="tax_id" id="tax-rate">
                            <option value="" data-rate="0">No tax</option>
                            @foreach ($taxes as $tax)
                                <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}"
                                        @selected(old('tax_id', $taxes->firstWhere('is_default', true)?->id) == $tax->id)>
                                    {{ $tax->name }} ({{ rtrim(rtrim(number_format($tax->rate, 2), '0'), '.') }}%)
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Branch</label>
                        <select name="branch_id">
                            <option value="">Head office</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}" @selected(old('branch_id') == $branch->id)>{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>&nbsp;</label>
                        <label class="check"><input type="checkbox" name="auto_number" value="1" checked> Assign the next invoice number</label>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-head">
                <h3>Line items</h3>
                <button type="button" class="btn sm secondary" id="add-line">+ Add line</button>
            </div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead>
                        <tr><th style="width:45%">Description</th><th class="num">Qty</th><th class="num">Unit price</th><th class="num">Amount</th><th style="width:60px"></th></tr>
                        </thead>
                        <tbody id="invoice-lines">
                        <tr>
                            <td><input type="text" name="items[0][description]" required placeholder="e.g. Installation fee"></td>
                            <td><input type="number" name="items[0][quantity]" data-qty value="1" min="0.01" step="0.01" required></td>
                            <td><input type="number" name="items[0][unit_price]" data-price step="0.01" min="0" required></td>
                            <td class="num" data-amount>0.00</td>
                            <td><button type="button" class="btn ghost xs" data-remove-line>&times;</button></td>
                        </tr>
                        </tbody>
                        <tfoot>
                        <tr>
                            <td colspan="3" class="right">Subtotal</td>
                            <td class="num strong" id="line-subtotal">0.00</td><td></td>
                        </tr>
                        <tr>
                            <td colspan="3" class="right">Tax</td>
                            <td class="num strong" id="line-tax">0.00</td><td></td>
                        </tr>
                        <tr>
                            <td colspan="3" class="right">Total</td>
                            <td class="num strong" id="line-total">0.00</td><td></td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            <div class="card-foot flex-between">
                <div class="field full" style="max-width:520px;">
                    <label>Notes on invoice</label>
                    <textarea name="notes" rows="2" placeholder="Payment instructions, terms…"></textarea>
                </div>
                <div class="btn-group">
                    <a href="{{ route('invoices.index') }}" class="btn secondary">Cancel</a>
                    <button type="submit" class="btn">Create invoice</button>
                </div>
            </div>
        </div>
    </form>

    <template id="line-template">
        <tr>
            <td><input type="text" name="items[0][description]" required placeholder="Description"></td>
            <td><input type="number" name="items[0][quantity]" data-qty value="1" min="0.01" step="0.01" required></td>
            <td><input type="number" name="items[0][unit_price]" data-price step="0.01" min="0" required></td>
            <td class="num" data-amount>0.00</td>
            <td><button type="button" class="btn ghost xs" data-remove-line>&times;</button></td>
        </tr>
    </template>
@endsection