@extends('layouts.admin')

@section('title', 'Buat Invoice Manual Baru')
@section('page_title', 'Buat Invoice Manual')

@section('admin_content')
<div>
    <div class="ax-page-head" style="margin-bottom:var(--ax-space-6);">
        <div class="ax-page-head__row">
            <div>
                <h1 class="ax-page-head__title font-heading" style="font-size:2rem;">Buat Invoice Manual (VIP)</h1>
                <p class="ax-page-head__subtitle">Pilih master produk atau isi item kustom, hubungkan ke klien/undangan, dan buat tagihan resmi.</p>
            </div>
            <div class="ax-page-head__actions">
                <a href="{{ route('admin.invoices') }}" class="ax-btn ax-btn--secondary ax-btn--sm">
                    <i data-lucide="arrow-left" style="width:14px;height:14px;"></i>
                    <span class="ax-btn__label">Kembali ke Daftar</span>
                </a>
            </div>
        </div>
    </div>

    @if(session('error'))
        <div style="padding:12px 16px; margin-bottom:var(--ax-space-4); background:rgba(220,38,38,0.12); border:1px solid #dc2626; border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); color:#dc2626; display:flex; align-items:center; gap:8px;">
            <i data-lucide="alert-circle" style="width:16px;height:16px;"></i>
            <span>{{ session('error') }}</span>
        </div>
    @endif

    <form action="{{ route('admin.invoices.store') }}" method="POST" id="invoiceForm">
        @csrf
        <div style="display:grid; grid-template-columns: 2fr 1fr; gap:var(--ax-space-6);">
            
            <!-- Kolom Kiri: Items Tagihan -->
            <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
                <section class="ax-card">
                    <div class="ax-card__header">
                        <div class="ax-card__titles">
                            <span class="ax-card__eyebrow">Rincian Layanan &amp; Produk</span>
                            <h3 class="ax-card__title">Item Tagihan (Line Items)</h3>
                        </div>
                        <div style="display:flex; gap:8px;">
                            <select id="productSelector" onchange="addProductItem(this)" style="padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:11px; background:var(--ax-surface);">
                                <option value="">+ Tambah dari Master Produk...</option>
                                @foreach($products as $prod)
                                    <option value="{{ $prod->id }}" data-sku="{{ $prod->sku }}" data-name="{{ $prod->name }}" data-price="{{ (int)$prod->price }}">
                                        {{ $prod->name }} — Rp {{ number_format($prod->price, 0, ',', '.') }}
                                    </option>
                                @endforeach
                            </select>
                            <button type="button" onclick="addCustomItem()" class="ax-btn ax-btn--secondary ax-btn--sm">
                                <i data-lucide="plus" style="width:12px;height:12px;"></i>
                                <span>Item Kustom</span>
                            </button>
                        </div>
                    </div>
                    <div class="ax-card__body" style="padding:0;">
                        <table style="width:100%; border-collapse:collapse; font-size:var(--ax-text-xs);" id="itemsTable">
                            <thead>
                                <tr style="border-bottom:1px solid var(--ax-border); background:var(--ax-surface-subtle); text-align:left;">
                                    <th style="padding:10px 14px;">Deskripsi Item</th>
                                    <th style="padding:10px 14px; width:90px;">Qty</th>
                                    <th style="padding:10px 14px; width:150px; text-align:right;">Harga Satuan (Rp)</th>
                                    <th style="padding:10px 14px; width:150px; text-align:right;">Subtotal (Rp)</th>
                                    <th style="padding:10px 14px; width:50px; text-align:center;"></th>
                                </tr>
                            </thead>
                            <tbody id="itemsBody">
                                <!-- Default item 1 -->
                                <tr class="item-row" style="border-bottom:1px solid var(--ax-border);">
                                    <td style="padding:10px 14px;">
                                        <input type="hidden" name="items[0][product_id]" value="{{ $products->first()->id ?? '' }}">
                                        <input type="text" name="items[0][description]" value="{{ $products->first()->name ?? 'Paket VIP (Full Service Custom)' }}" required placeholder="Deskripsi item..." style="width:100%; padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                                    </td>
                                    <td style="padding:10px 14px;">
                                        <input type="number" name="items[0][qty]" value="1" min="0.1" step="any" required oninput="calcTotals()" class="item-qty" style="width:100%; padding:6px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; text-align:center;">
                                    </td>
                                    <td style="padding:10px 14px;">
                                        <input type="number" name="items[0][unit_price]" value="{{ (int)($products->first()->price ?? 399000) }}" min="0" required oninput="calcTotals()" class="item-price" style="width:100%; padding:6px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; text-align:right;">
                                    </td>
                                    <td style="padding:10px 14px; text-align:right; font-weight:700; color:var(--jk-deepsage);" class="item-subtotal">
                                        Rp {{ number_format($products->first()->price ?? 399000, 0, ',', '.') }}
                                    </td>
                                    <td style="padding:10px 14px; text-align:center;">
                                        <button type="button" onclick="removeItem(this)" style="background:none; border:none; color:#dc2626; cursor:pointer;" title="Hapus baris">
                                            <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </section>

                <section class="ax-card">
                    <div class="ax-card__header">
                        <div class="ax-card__titles">
                            <span class="ax-card__eyebrow">Catatan Tagihan</span>
                            <h3 class="ax-card__title">Catatan Tambahan &amp; Ketentuan</h3>
                        </div>
                    </div>
                    <div class="ax-card__body">
                        <textarea name="notes" rows="3" placeholder="Contoh: Termasuk 3x revisi minor, domain aktif selama 1 tahun sejak pelunasan..." style="width:100%; padding:10px 12px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:var(--ax-text-xs); line-height:1.5;"></textarea>
                    </div>
                </section>
            </div>

            <!-- Kolom Kanan: Detail Pelanggan & Total -->
            <div style="display:flex; flex-direction:column; gap:var(--ax-space-6);">
                <section class="ax-card">
                    <div class="ax-card__header">
                        <div class="ax-card__titles">
                            <span class="ax-card__eyebrow">Penerima Tagihan</span>
                            <h3 class="ax-card__title">Informasi Klien</h3>
                        </div>
                    </div>
                    <div class="ax-card__body" style="display:flex; flex-direction:column; gap:12px;">
                        <div>
                            <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Pilih Klien Terdaftar (Opsional)</label>
                            <select id="userSelect" name="user_id" onchange="fillClientData(this)" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                                <option value="">-- Klien Baru / Belum Punya Akun --</option>
                                @foreach($users as $u)
                                    <option value="{{ $u->id }}" data-name="{{ $u->name }}" data-email="{{ $u->email }}" data-phone="{{ $u->phone }}">
                                        {{ $u->name }} ({{ $u->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Tautkan ke Undangan (Opsional)</label>
                            <select name="invitation_id" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                                <option value="">-- Belum ada / Buat nanti --</option>
                                @foreach($invitations as $inv)
                                    <option value="{{ $inv->id }}">
                                        {{ $inv->title }} ({{ $inv->user->name ?? 'Anon' }}) - {{ $inv->subdomain ? $inv->subdomain.'.janoerkoening.com' : '/u/'.$inv->slug }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Paket Terkait</label>
                            <select name="package_id" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                                @foreach($packages as $pkg)
                                    <option value="{{ $pkg->id }}" {{ $pkg->slug === 'premium' ? 'selected' : '' }}>
                                        Paket {{ $pkg->name }} {{ $pkg->is_managed ? '(VIP Managed)' : '' }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <hr style="border:none; border-top:1px solid var(--ax-border); margin:4px 0;">
                        <div>
                            <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Nama Lengkap Klien *</label>
                            <input type="text" name="customer_name" id="cust_name" required placeholder="Nama pemesan..." style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                        </div>
                        <div>
                            <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Email (Untuk Pengiriman Invoice)</label>
                            <input type="email" name="customer_email" id="cust_email" placeholder="klien@gmail.com" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                        </div>
                        <div>
                            <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">No. WhatsApp / Telepon</label>
                            <input type="text" name="customer_phone" id="cust_phone" placeholder="081234567890" style="width:100%; padding:7px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                        </div>
                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                            <div>
                                <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Tgl Terbit</label>
                                <input type="date" name="issue_date" value="{{ date('Y-m-d') }}" required style="width:100%; padding:7px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                            </div>
                            <div>
                                <label style="display:block; font-size:11px; font-weight:600; margin-bottom:4px;">Jatuh Tempo</label>
                                <input type="date" name="due_date" value="{{ date('Y-m-d', strtotime('+7 days')) }}" style="width:100%; padding:7px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Ringkasan Perhitungan -->
                <section class="ax-card">
                    <div class="ax-card__header">
                        <div class="ax-card__titles">
                            <span class="ax-card__eyebrow">Kalkulasi Tagihan</span>
                            <h3 class="ax-card__title">Total Pembayaran</h3>
                        </div>
                    </div>
                    <div class="ax-card__body" style="display:flex; flex-direction:column; gap:10px;">
                        <div style="display:flex; justify-content:space-between; font-size:12px;">
                            <span style="color:var(--ax-text-muted);">Subtotal:</span>
                            <strong id="displaySubtotal">Rp 0</strong>
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; font-size:12px;">
                            <span style="color:var(--ax-text-muted);">Potongan / Diskon (Rp):</span>
                            <input type="number" name="discount" id="discountInput" value="0" min="0" oninput="calcTotals()" style="width:110px; padding:4px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; text-align:right;">
                        </div>
                        <div style="display:flex; justify-content:space-between; align-items:center; font-size:12px;">
                            <span style="color:var(--ax-text-muted);">PPN (%):</span>
                            <input type="number" name="tax_percent" id="taxInput" value="0" min="0" max="100" step="any" oninput="calcTotals()" style="width:70px; padding:4px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; text-align:right;">
                        </div>
                        <hr style="border:none; border-top:1px solid var(--ax-border); margin:4px 0;">
                        <div style="display:flex; justify-content:space-between; align-items:center;">
                            <strong style="font-size:13px; color:var(--ax-text-strong);">Total Akhir:</strong>
                            <strong id="displayTotal" style="font-size:1.3rem; color:var(--jk-deepsage);">Rp 0</strong>
                        </div>

                        <button type="submit" class="ax-btn ax-btn--primary" style="width:100%; justify-content:center; padding:10px; margin-top:8px;">
                            <i data-lucide="check" style="width:14px;height:14px;"></i>
                            <span class="ax-btn__label">Simpan &amp; Terbitkan Invoice</span>
                        </button>
                    </div>
                </section>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
let itemIndex = 1;

function addProductItem(select) {
    if (!select.value) return;
    const opt = select.options[select.selectedIndex];
    const pid = opt.value;
    const name = opt.getAttribute('data-name');
    const price = parseInt(opt.getAttribute('data-price') || 0);

    createRow(pid, name, 1, price);
    select.value = '';
}

function addCustomItem() {
    createRow('', 'Layanan Tambahan Kustom', 1, 0);
}

function createRow(pid, desc, qty, price) {
    const tbody = document.getElementById('itemsBody');
    const tr = document.createElement('tr');
    tr.className = 'item-row';
    tr.style.borderBottom = '1px solid var(--ax-border)';
    tr.innerHTML = `
        <td style="padding:10px 14px;">
            <input type="hidden" name="items[${itemIndex}][product_id]" value="${pid}">
            <input type="text" name="items[${itemIndex}][description]" value="${desc}" required placeholder="Deskripsi item..." style="width:100%; padding:6px 10px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px;">
        </td>
        <td style="padding:10px 14px;">
            <input type="number" name="items[${itemIndex}][qty]" value="${qty}" min="0.1" step="any" required oninput="calcTotals()" class="item-qty" style="width:100%; padding:6px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; text-align:center;">
        </td>
        <td style="padding:10px 14px;">
            <input type="number" name="items[${itemIndex}][unit_price]" value="${price}" min="0" required oninput="calcTotals()" class="item-price" style="width:100%; padding:6px 8px; border:1px solid var(--ax-border); border-radius:var(--ax-radius-md); font-size:12px; text-align:right;">
        </td>
        <td style="padding:10px 14px; text-align:right; font-weight:700; color:var(--jk-deepsage);" class="item-subtotal">
            Rp ${formatNum(qty * price)}
        </td>
        <td style="padding:10px 14px; text-align:center;">
            <button type="button" onclick="removeItem(this)" style="background:none; border:none; color:#dc2626; cursor:pointer;" title="Hapus baris">
                <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
            </button>
        </td>
    `;
    tbody.appendChild(tr);
    itemIndex++;
    if (window.lucide) lucide.createIcons();
    calcTotals();
}

function removeItem(btn) {
    const rows = document.querySelectorAll('.item-row');
    if (rows.length <= 1) {
        alert('Minimal harus ada 1 item tagihan.');
        return;
    }
    btn.closest('tr').remove();
    calcTotals();
}

function calcTotals() {
    let subtotal = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
        const price = parseFloat(row.querySelector('.item-price').value) || 0;
        const lineTotal = qty * price;
        row.querySelector('.item-subtotal').textContent = 'Rp ' + formatNum(lineTotal);
        subtotal += lineTotal;
    });

    const discount = parseFloat(document.getElementById('discountInput').value) || 0;
    const taxPercent = parseFloat(document.getElementById('taxInput').value) || 0;

    const base = Math.max(0, subtotal - discount);
    const tax = Math.round(base * (taxPercent / 100));
    const total = base + tax;

    document.getElementById('displaySubtotal').textContent = 'Rp ' + formatNum(subtotal);
    document.getElementById('displayTotal').textContent = 'Rp ' + formatNum(total);
}

function formatNum(n) {
    return Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}

function fillClientData(select) {
    if (!select.value) return;
    const opt = select.options[select.selectedIndex];
    document.getElementById('cust_name').value = opt.getAttribute('data-name') || '';
    document.getElementById('cust_email').value = opt.getAttribute('data-email') || '';
    document.getElementById('cust_phone').value = opt.getAttribute('data-phone') || '';
}

document.addEventListener('DOMContentLoaded', calcTotals);
</script>
@endpush