@extends('user.layouts.app', ['title' => 'Create Invoice'])

@push('head')
    <style>
        .invoice-badge {
            border: 1px solid rgba(15, 118, 110, 0.18);
            background:
                radial-gradient(circle at top right, rgba(45, 212, 191, 0.18), transparent 34%),
                linear-gradient(135deg, #f0fdfa 0%, #ddfbf4 100%);
            color: #115e59;
            box-shadow: 0 14px 28px rgba(15, 118, 110, 0.08);
        }

        .invoice-shell {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
            gap: 1.5rem;
            align-items: start;
        }

        .invoice-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1.5rem;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.88), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
            box-shadow: 0 22px 44px rgba(15, 23, 42, 0.06);
        }

        .invoice-card-header {
            padding: 1.15rem 1.4rem;
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
            color: #f8fbff;
        }

        .invoice-card-body {
            padding: 1.4rem;
        }

        .invoice-section-label {
            font-size: 0.76rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 0.9rem;
        }

        .invoice-input,
        .invoice-select,
        .invoice-textarea {
            border: 1px solid rgba(148, 163, 184, 0.2);
            border-radius: 1rem;
            background: rgba(248, 250, 252, 0.92);
            min-height: 52px;
            box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8);
        }

        .invoice-textarea {
            min-height: 110px;
            resize: vertical;
        }

        .invoice-line-table {
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1.2rem;
            overflow: hidden;
        }

        .invoice-line-table table {
            margin-bottom: 0;
        }

        .invoice-line-table thead th {
            background: #f8fafc;
            color: #64748b;
            font-size: 0.76rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border-bottom-width: 1px;
        }

        .invoice-line-input {
            min-width: 110px;
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 0.8rem;
            background: #fff;
        }

        .invoice-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.9rem 1rem;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1rem;
            background: rgba(248, 250, 252, 0.9);
        }

        .invoice-summary-row strong {
            font-size: 1.05rem;
        }

        .invoice-preview {
            position: sticky;
            top: 1rem;
        }

        .invoice-preview-meta {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .invoice-preview-block {
            padding: 1rem;
            border-radius: 1rem;
            background: rgba(248, 250, 252, 0.86);
            border: 1px solid rgba(148, 163, 184, 0.14);
        }

        .invoice-preview-items {
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1.2rem;
            overflow: hidden;
        }

        .invoice-preview-items th,
        .invoice-preview-items td {
            padding: 0.85rem 1rem;
            vertical-align: top;
        }

        .invoice-preview-items thead th {
            background: #f8fafc;
            font-size: 0.76rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #64748b;
        }

        .invoice-empty-row td {
            color: #94a3b8;
            text-align: center;
            padding: 1.35rem 1rem;
        }

        .invoice-actions {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        @media (max-width: 1199.98px) {
            .invoice-shell {
                grid-template-columns: 1fr;
            }

            .invoice-preview {
                position: static;
            }
        }

        @media (max-width: 767.98px) {
            .invoice-card-body {
                padding: 1rem;
            }

            .invoice-preview-meta {
                grid-template-columns: 1fr;
            }

            .invoice-actions {
                flex-direction: column;
            }

            .invoice-actions .btn {
                width: 100%;
            }

            .invoice-line-table {
                border: 0;
                overflow: visible;
            }

            .invoice-line-table thead {
                display: none;
            }

            .invoice-line-table table,
            .invoice-line-table tbody,
            .invoice-line-table tr,
            .invoice-line-table td {
                display: block;
                width: 100%;
            }

            .invoice-line-table tr {
                padding: 1rem;
                border: 1px solid rgba(148, 163, 184, 0.14);
                border-radius: 1rem;
                background: rgba(248, 250, 252, 0.82);
            }

            .invoice-line-table tr + tr {
                margin-top: 0.85rem;
            }

            .invoice-line-table td {
                padding: 0;
                border: 0;
            }

            .invoice-line-table td::before {
                content: attr(data-label);
                display: block;
                margin-bottom: 0.35rem;
                font-size: 0.72rem;
                font-weight: 700;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                color: #64748b;
            }

            .invoice-line-table td + td {
                margin-top: 0.85rem;
            }
        }
    </style>
@endpush

@section('content')
    <div class="d-grid gap-3">
        <section class="card admin-card border-0">
            <div class="card-body p-4 p-lg-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill small fw-bold text-uppercase text-nowrap invoice-badge">
                    <i class="bi bi-receipt-cutoff"></i>
                    <span>Invoice / Create Invoice</span>
                </div>

                <div class="mt-3">
                    <h1 class="h3 fw-bold mb-2 text-break">Create Invoice</h1>
                    <p class="text-muted mb-0">Build a clean invoice with line items, due date, payment notes, and a live summary before sending.</p>
                </div>
            </div>
        </section>

        <div class="invoice-shell" data-invoice-app>
            <section class="invoice-card">
                <div class="invoice-card-header">
                    <div class="fw-bold">Invoice Create</div>
                </div>
                <div class="invoice-card-body">
                    <form class="d-grid gap-4" data-invoice-form>
                        <div>
                            <div class="invoice-section-label">Billing Details</div>
                            <div class="row g-3">
                                <div class="col-12 col-lg-6">
                                    <label class="form-label small text-muted">Customer Email</label>
                                    <input type="email" class="form-control invoice-input" placeholder="customer@example.com" data-invoice-customer-email>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label small text-muted">Currency</label>
                                    <select class="form-select invoice-select" data-invoice-currency>
                                        @foreach ($currencies as $currency)
                                            <option value="{{ $currency }}">{{ $currency }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label small text-muted">Note</label>
                                    <textarea class="form-control invoice-textarea" placeholder="Add a note for this invoice" data-invoice-note></textarea>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label small text-muted">Payment Request Note (Optional)</label>
                                    <textarea class="form-control invoice-textarea" placeholder="Optional payment request message" data-invoice-payment-note></textarea>
                                </div>
                                <div class="col-12 col-lg-6">
                                    <label class="form-label small text-muted">Due Date</label>
                                    <input type="date" class="form-control invoice-input" data-invoice-due-date>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="d-flex align-items-center justify-content-between gap-3 mb-3 flex-wrap">
                                <div class="invoice-section-label mb-0">Invoice Items</div>
                                <button type="button" class="btn btn-dark rounded-pill px-4" data-add-item>
                                    <i class="bi bi-plus-lg me-2"></i>Add Service
                                </button>
                            </div>

                            <div class="invoice-line-table">
                                <table class="table align-middle">
                                    <thead>
                                        <tr>
                                            <th class="px-3 py-3">Title</th>
                                            <th class="px-3 py-3">Quantity</th>
                                            <th class="px-3 py-3">Price</th>
                                            <th class="px-3 py-3 text-end">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody data-item-list>
                                        <tr data-item-row>
                                            <td class="px-3 py-3" data-label="Title">
                                                <input type="text" class="form-control invoice-line-input" placeholder="Service title" data-item-title>
                                            </td>
                                            <td class="px-3 py-3" data-label="Quantity">
                                                <input type="number" min="1" value="1" class="form-control invoice-line-input" data-item-quantity>
                                            </td>
                                            <td class="px-3 py-3" data-label="Price">
                                                <input type="number" min="0" step="0.01" value="0" class="form-control invoice-line-input" data-item-price>
                                            </td>
                                            <td class="px-3 py-3 text-end" data-label="Action">
                                                <button type="button" class="btn btn-outline-danger rounded-pill px-3" data-remove-item>
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12 col-md-6">
                                <div class="invoice-summary-row">
                                    <span class="text-muted fw-semibold">Subtotal</span>
                                    <strong data-invoice-subtotal>PKR 0.00</strong>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="invoice-summary-row">
                                    <span class="text-muted fw-semibold">Grandtotal</span>
                                    <strong data-invoice-grandtotal>PKR 0.00</strong>
                                </div>
                            </div>
                        </div>

                        <div class="invoice-actions pt-2">
                            <button type="button" class="btn btn-outline-secondary btn-lg rounded-pill px-4">Save Draft</button>
                            <button type="button" class="btn btn-dark btn-lg rounded-pill px-4">Create Invoice</button>
                        </div>
                    </form>
                </div>
            </section>

            <aside class="invoice-card invoice-preview">
                <div class="invoice-card-header">
                    <div class="fw-bold">Preview</div>
                </div>
                <div class="invoice-card-body d-grid gap-4">
                    <div class="invoice-preview-meta">
                        <div class="invoice-preview-block">
                            <div class="small text-muted text-uppercase mb-2">Customer Email</div>
                            <div class="fw-semibold" data-preview-customer-email>customer@example.com</div>
                        </div>
                        <div class="invoice-preview-block">
                            <div class="small text-muted text-uppercase mb-2">Due Date</div>
                            <div class="fw-semibold" data-preview-due-date>Not selected</div>
                        </div>
                        <div class="invoice-preview-block">
                            <div class="small text-muted text-uppercase mb-2">Currency</div>
                            <div class="fw-semibold" data-preview-currency>PKR</div>
                        </div>
                        <div class="invoice-preview-block">
                            <div class="small text-muted text-uppercase mb-2">Payment Request Note</div>
                            <div class="fw-semibold" data-preview-payment-note>No payment request note</div>
                        </div>
                    </div>

                    <div class="invoice-preview-block">
                        <div class="small text-muted text-uppercase mb-2">Note</div>
                        <div class="fw-semibold" data-preview-note>No note added</div>
                    </div>

                    <div class="invoice-preview-items">
                        <table class="table align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th class="text-center">Quantity</th>
                                    <th class="text-end">Price</th>
                                </tr>
                            </thead>
                            <tbody data-preview-item-list>
                                <tr class="invoice-empty-row">
                                    <td colspan="3">Add invoice items to preview them here.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="invoice-preview-block d-grid gap-3">
                        <div class="d-flex justify-content-between gap-3">
                            <span class="text-muted fw-semibold">Subtotal</span>
                            <strong data-preview-subtotal>PKR 0.00</strong>
                        </div>
                        <div class="d-flex justify-content-between gap-3">
                            <span class="text-muted fw-semibold">Grandtotal</span>
                            <strong data-preview-grandtotal>PKR 0.00</strong>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const app = document.querySelector('[data-invoice-app]');

            if (!app) {
                return;
            }

            const customerEmailInput = app.querySelector('[data-invoice-customer-email]');
            const currencySelect = app.querySelector('[data-invoice-currency]');
            const noteInput = app.querySelector('[data-invoice-note]');
            const paymentNoteInput = app.querySelector('[data-invoice-payment-note]');
            const dueDateInput = app.querySelector('[data-invoice-due-date]');
            const itemList = app.querySelector('[data-item-list]');
            const previewItemList = app.querySelector('[data-preview-item-list]');
            const addItemButton = app.querySelector('[data-add-item]');
            const subtotalTargets = app.querySelectorAll('[data-invoice-subtotal], [data-preview-subtotal]');
            const grandtotalTargets = app.querySelectorAll('[data-invoice-grandtotal], [data-preview-grandtotal]');
            const rowTemplate = itemList.querySelector('[data-item-row]').cloneNode(true);

            const currencyFormatter = (amount) => {
                const currency = currencySelect.value || 'PKR';
                return `${currency} ${Number(amount).toFixed(2)}`;
            };

            const formatDate = (value) => {
                if (!value) {
                    return 'Not selected';
                }

                const date = new Date(value);
                if (Number.isNaN(date.getTime())) {
                    return value;
                }

                return date.toLocaleDateString(undefined, {
                    day: '2-digit',
                    month: 'short',
                    year: 'numeric',
                });
            };

            const readRows = () => Array.from(itemList.querySelectorAll('[data-item-row]'));

            const bindRow = (row) => {
                row.querySelectorAll('input').forEach((input) => {
                    input.addEventListener('input', updateInvoice);
                });

                row.querySelector('[data-remove-item]').addEventListener('click', () => {
                    const rows = readRows();
                    if (rows.length === 1) {
                        row.querySelector('[data-item-title]').value = '';
                        row.querySelector('[data-item-quantity]').value = '1';
                        row.querySelector('[data-item-price]').value = '0';
                    } else {
                        row.remove();
                    }

                    updateInvoice();
                });
            };

            const updateInvoice = () => {
                const rows = readRows();
                let subtotal = 0;

                previewItemList.innerHTML = '';

                rows.forEach((row) => {
                    const title = row.querySelector('[data-item-title]').value.trim();
                    const quantity = Number(row.querySelector('[data-item-quantity]').value || 0);
                    const price = Number(row.querySelector('[data-item-price]').value || 0);
                    const lineTotal = quantity * price;

                    subtotal += lineTotal;

                    if (!title && quantity <= 0 && price <= 0) {
                        return;
                    }

                    const previewRow = document.createElement('tr');
                    previewRow.innerHTML = `
                        <td>
                            <div class="fw-semibold">${title || 'Untitled Item'}</div>
                        </td>
                        <td class="text-center">${quantity || 0}</td>
                        <td class="text-end">${currencyFormatter(lineTotal)}</td>
                    `;
                    previewItemList.appendChild(previewRow);
                });

                if (!previewItemList.children.length) {
                    const emptyRow = document.createElement('tr');
                    emptyRow.className = 'invoice-empty-row';
                    emptyRow.innerHTML = '<td colspan="3">Add invoice items to preview them here.</td>';
                    previewItemList.appendChild(emptyRow);
                }

                subtotalTargets.forEach((target) => {
                    target.textContent = currencyFormatter(subtotal);
                });

                grandtotalTargets.forEach((target) => {
                    target.textContent = currencyFormatter(subtotal);
                });

                app.querySelector('[data-preview-customer-email]').textContent = customerEmailInput.value.trim() || 'customer@example.com';
                app.querySelector('[data-preview-currency]').textContent = currencySelect.value || 'PKR';
                app.querySelector('[data-preview-note]').textContent = noteInput.value.trim() || 'No note added';
                app.querySelector('[data-preview-payment-note]').textContent = paymentNoteInput.value.trim() || 'No payment request note';
                app.querySelector('[data-preview-due-date]').textContent = formatDate(dueDateInput.value);
            };

            [customerEmailInput, currencySelect, noteInput, paymentNoteInput, dueDateInput].forEach((field) => {
                field.addEventListener('input', updateInvoice);
                field.addEventListener('change', updateInvoice);
            });

            addItemButton.addEventListener('click', () => {
                const row = rowTemplate.cloneNode(true);
                row.querySelector('[data-item-title]').value = '';
                row.querySelector('[data-item-quantity]').value = '1';
                row.querySelector('[data-item-price]').value = '0';
                itemList.appendChild(row);
                bindRow(row);
                updateInvoice();
            });

            readRows().forEach(bindRow);
            updateInvoice();
        });
    </script>
@endpush