@extends('layouts.admin')
@section('content')
<div class="card admin-card">
    <div class="card-body p-4">
        <div class="admin-toolbar">
            <div>
                <h1 class="h3 mb-1">{{ $invoice->exists ? 'Edit invoice' : 'Create invoice' }}</h1>
                <div class="small text-muted">Manage invoice records linked to orders.</div>
            </div>
            <div class="d-flex flex-wrap gap-2">
                @if($invoice->exists)
                    <form method="post" action="{{ route('admin.invoices.destroy', $invoice) }}" onsubmit="return confirm('Delete this invoice?');">
                        @csrf
                        @method('DELETE')
                        <button class="btn admin-btn admin-btn-danger"><i class="fa-solid fa-trash"></i><span>Delete invoice</span></button>
                    </form>
                @endif
                <a href="{{ route('admin.invoices.index') }}" class="btn admin-btn admin-btn-secondary"><i class="fa-solid fa-arrow-left"></i><span>Back</span></a>
            </div>
        </div>

        <form method="post" action="{{ $invoice->exists ? route('admin.invoices.update', $invoice) : route('admin.invoices.store') }}" class="row g-3 admin-form-grid">
            @csrf
            @if($invoice->exists)
                @method('PUT')
            @endif

            <div class="col-md-6">
                <label class="form-label" for="order_id">Order</label>
                <select id="order_id" name="order_id" class="form-select">
                    @foreach($orders as $order)
                        <option value="{{ $order->id }}" @selected((string) old('order_id', $invoice->order_id) === (string) $order->id)>{{ $order->order_number }} - {{ $order->user?->name ?? 'Guest' }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label" for="invoice_number">Invoice number</label>
                <input id="invoice_number" name="invoice_number" value="{{ old('invoice_number', $invoice->invoice_number) }}" class="form-control" data-autofill="{{ $invoice->exists ? 'false' : 'true' }}">
                <div class="form-text">Auto generates, but can be modified.</div>
            </div>
            <div class="col-md-6">
                <label class="form-label" for="issued_at">Issued at</label>
                <input id="issued_at" type="datetime-local" name="issued_at" value="{{ old('issued_at', $invoice->issued_at?->format('Y-m-d\\TH:i')) }}" class="form-control">
            </div>
            <div class="col-md-6">
                <label class="form-label" for="pdf_path">PDF path</label>
                <input id="pdf_path" name="pdf_path" value="{{ old('pdf_path', $invoice->pdf_path) }}" class="form-control">
            </div>

            <div class="col-12 d-flex gap-2">
                <button class="btn admin-btn admin-btn-primary"><i class="fa-solid fa-floppy-disk"></i><span>{{ $invoice->exists ? 'Save invoice' : 'Create invoice' }}</span></button>
                <a href="{{ route('admin.invoices.index') }}" class="btn admin-btn admin-btn-secondary"><i class="fa-solid fa-xmark"></i><span>Cancel</span></a>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const invoiceNumberInput = document.getElementById('invoice_number');

        if (!invoiceNumberInput) {
            return;
        }

        const isAutoFillEnabled = (input) => input.dataset.autofill !== 'false';
        const pad = (value) => value.toString().padStart(2, '0');
        const buildInvoiceNumber = () => {
            const now = new Date();
            const date = `${now.getFullYear()}${pad(now.getMonth() + 1)}${pad(now.getDate())}`;
            const time = `${pad(now.getHours())}${pad(now.getMinutes())}`;

            return `INV-${date}-${time}`;
        };

        if (isAutoFillEnabled(invoiceNumberInput) && !invoiceNumberInput.value.trim()) {
            invoiceNumberInput.value = buildInvoiceNumber();
        }

        invoiceNumberInput.addEventListener('input', () => {
            invoiceNumberInput.dataset.autofill = invoiceNumberInput.value.trim() === '' ? 'true' : 'false';
        });
    });
</script>
@endsection