@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto space-y-6">

    <h2 class="text-2xl font-bold text-base-content">
        Create Invoice
    </h2>

    <!-- Client Info -->
    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <h3 class="font-semibold text-lg">Customer Information</h3>

            <div class="text-sm text-base-content/80 space-y-1">
                <p><strong>Name:</strong> {{ $client->name }}</p>
                <p><strong>Email:</strong> {{ $client->email }}</p>
                <p><strong>Phone:</strong> {{ $client->phone ?? 'N/A' }}</p>
                <p><strong>Brand:</strong> {{ $client->brand ?? 'N/A' }}</p>
            </div>
        </div>
    </div>

    <!-- Invoice Form -->
    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <form method="POST" action="{{ route('invoices.store') }}" class="space-y-4" id="invoice-form">
                @csrf
                <input type="hidden" name="client_id" value="{{ $client->id }}">

                <!-- Services -->
                <div>
                    <label class="label">
                        <span class="label-text">Services</span>
                    </label>

                    <div class="overflow-x-auto">
                        <table class="table table-zebra">
                            <thead>
                                <tr>
                                    <th>Description</th>
                                    <th class="w-24">Qty</th>
                                    <th class="w-32">Unit Price</th>
                                    <th class="w-32">Line Total</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="services-rows">
                                <tr>
                                    <td>
                                        <input
                                            type="text"
                                            name="service_descriptions[]"
                                            class="input input-bordered w-full"
                                            placeholder="Service description"
                                            required
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="number"
                                            name="service_quantities[]"
                                            class="input input-bordered w-full service-qty"
                                            value="1"
                                            min="1"
                                            step="1"
                                            required
                                        >
                                    </td>
                                    <td>
                                        <input
                                            type="number"
                                            name="service_prices[]"
                                            class="input input-bordered w-full service-price"
                                            value="0"
                                            min="0"
                                            step="0.01"
                                            required
                                        >
                                    </td>
                                    <td class="text-right align-middle">
                                        <span class="line-total">0.00</span>
                                    </td>
                                    <td class="text-right">
                                        <button type="button" class="btn btn-sm btn-ghost text-error remove-row" disabled>✕</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="flex justify-between items-center mt-3">
                        <button type="button" class="btn btn-sm btn-outline" id="add-service-row">
                            + Add Service
                        </button>

                        <div class="text-right">
                            <div class="text-sm text-gray-500">Subtotal</div>
                            <div class="text-lg font-semibold">
                                <span id="subtotal-amount">0.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="label">
                            <span class="label-text">VAT/Tax Rate (%)</span>
                        </label>
                        <input
                            type="number"
                            name="tax_rate"
                            id="tax-rate"
                            class="input input-bordered w-full"
                            value="0"
                            min="0"
                            max="100"
                            step="0.01"
                            placeholder="0.00"
                        >
                        <div class="text-sm text-gray-500 mt-1">Tax Amount: <span id="tax-amount">0.00</span></div>
                    </div>

                    <div>
                        <label class="label">
                            <span class="label-text">Balance Amount (Optional)</span>
                        </label>
                        <input
                            type="number"
                            name="balance_amount"
                            id="balance-amount"
                            class="input input-bordered w-full"
                            value=""
                            min="0"
                            step="0.01"
                            placeholder="0.00"
                        >
                        <div class="text-sm text-gray-500 mt-1">Leave blank if no balance</div>
                    </div>
                </div>

                <!-- Discount Section -->
                <div class="card bg-base-200 p-4">
                    <h4 class="font-semibold mb-3">Discount (Optional)</h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="label">
                                <span class="label-text">Discount Type</span>
                            </label>
                            <select name="discount_type" id="discount-type" class="select select-bordered w-full">
                                <option value="">No Discount</option>
                                <option value="flat">Flat Amount</option>
                                <option value="percent">Percentage (%)</option>
                            </select>
                        </div>

                        <div>
                            <label class="label">
                                <span class="label-text">Discount Value</span>
                            </label>
                            <input
                                type="number"
                                name="discount_value"
                                id="discount-value"
                                class="input input-bordered w-full"
                                value=""
                                min="0"
                                step="0.01"
                                placeholder="0.00"
                                disabled
                            >
                        </div>

                        <div class="flex items-end">
                            <div class="w-full">
                                <div class="text-sm text-gray-500">Discount Amount:</div>
                                <div class="text-lg font-semibold text-success">
                                    <span id="discount-amount">0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-base-200 p-4">
                    <div class="space-y-2">
                        <div class="flex justify-between items-center">
                            <div class="text-sm text-gray-500">Subtotal:</div>
                            <div class="text-sm font-semibold">
                                <span id="display-subtotal">0.00</span>
                            </div>
                        </div>
                        <div class="flex justify-between items-center" id="discount-row" style="display: none;">
                            <div class="text-sm text-gray-500">Discount:</div>
                            <div class="text-sm font-semibold text-success">
                                -<span id="display-discount">0.00</span>
                            </div>
                        </div>
                        <div class="flex justify-between items-center" id="tax-row" style="display: none;">
                            <div class="text-sm text-gray-500">Tax:</div>
                            <div class="text-sm font-semibold">
                                <span id="display-tax">0.00</span>
                            </div>
                        </div>
                        <div class="border-t pt-2 flex justify-between items-center">
                            <div class="text-lg font-semibold">Total Amount:</div>
                            <div class="text-2xl font-bold text-primary">
                                <span id="invoice-total">0.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <label class="label">
                        <span class="label-text">Currency</span>
                    </label>
                    <select name="currency" class="select select-bordered w-full">
                        <option value="usd">USD</option>
                        <option value="eur">EUR</option>
                        <option value="gbp">GBP</option>
                    </select>
                </div>

                <div class="pt-2">
                    <button class="btn btn-primary w-full">
                        Create Invoice
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const servicesBody = document.getElementById('services-rows');
        const addRowBtn = document.getElementById('add-service-row');
        const subtotalEl = document.getElementById('subtotal-amount');
        const taxRateEl = document.getElementById('tax-rate');
        const taxAmountEl = document.getElementById('tax-amount');
        const totalEl = document.getElementById('invoice-total');
        const discountTypeEl = document.getElementById('discount-type');
        const discountValueEl = document.getElementById('discount-value');
        const discountAmountEl = document.getElementById('discount-amount');
        const displaySubtotalEl = document.getElementById('display-subtotal');
        const displayDiscountEl = document.getElementById('display-discount');
        const displayTaxEl = document.getElementById('display-tax');
        const discountRowEl = document.getElementById('discount-row');
        const taxRowEl = document.getElementById('tax-row');

        if (!servicesBody || !addRowBtn || !subtotalEl || !taxRateEl || !taxAmountEl || !totalEl || 
            !discountTypeEl || !discountValueEl || !discountAmountEl) {
            console.error('Required elements not found');
            return;
        }

        function recalc() {
            let subtotal = 0;
            servicesBody.querySelectorAll('tr').forEach(row => {
                const qtyInput = row.querySelector('.service-qty');
                const priceInput = row.querySelector('.service-price');
                const lineTotalEl = row.querySelector('.line-total');

                if (!qtyInput || !priceInput || !lineTotalEl) {
                    return;
                }

                const qty = parseFloat(qtyInput.value) || 0;
                const price = parseFloat(priceInput.value) || 0;
                const lineTotal = qty * price;

                lineTotalEl.textContent = lineTotal.toFixed(2);
                subtotal += lineTotal;
            });

            // Calculate discount
            const discountType = discountTypeEl.value;
            const discountValue = parseFloat(discountValueEl.value) || 0;
            let discountAmount = 0;

            if (discountType === 'flat') {
                discountAmount = discountValue;
            } else if (discountType === 'percent') {
                discountAmount = (subtotal * discountValue) / 100;
            }

            // Apply discount to subtotal
            const subtotalAfterDiscount = subtotal - discountAmount;

            // Calculate tax on subtotal after discount
            const taxRate = parseFloat(taxRateEl.value) || 0;
            const taxAmount = (subtotalAfterDiscount * taxRate) / 100;
            const total = subtotalAfterDiscount + taxAmount;

            // Update display elements
            subtotalEl.textContent = subtotal.toFixed(2);
            if (displaySubtotalEl) displaySubtotalEl.textContent = subtotal.toFixed(2);
            
            discountAmountEl.textContent = discountAmount.toFixed(2);
            if (displayDiscountEl) displayDiscountEl.textContent = discountAmount.toFixed(2);
            
            taxAmountEl.textContent = taxAmount.toFixed(2);
            if (displayTaxEl) displayTaxEl.textContent = taxAmount.toFixed(2);
            
            totalEl.textContent = total.toFixed(2);

            // Show/hide discount and tax rows
            if (discountRowEl) {
                discountRowEl.style.display = discountAmount > 0 ? 'flex' : 'none';
            }
            if (taxRowEl) {
                taxRowEl.style.display = taxAmount > 0 ? 'flex' : 'none';
            }
        }

        // Enable/disable discount value input based on discount type
        discountTypeEl.addEventListener('change', function () {
            if (this.value) {
                discountValueEl.removeAttribute('disabled');
                discountValueEl.value = '';
            } else {
                discountValueEl.setAttribute('disabled', 'disabled');
                discountValueEl.value = '';
            }
            recalc();
        });

        discountValueEl.addEventListener('input', function () {
            recalc();
        });

        servicesBody.addEventListener('input', function (e) {
            if (e.target.classList.contains('service-qty') || e.target.classList.contains('service-price')) {
                recalc();
            }
        });

        taxRateEl.addEventListener('input', function () {
            recalc();
        });

        servicesBody.addEventListener('click', function (e) {
            if (e.target.classList.contains('remove-row') || e.target.closest('.remove-row')) {
                const removeBtn = e.target.classList.contains('remove-row') ? e.target : e.target.closest('.remove-row');
                const rows = servicesBody.querySelectorAll('tr');
                if (rows.length > 1) {
                    removeBtn.closest('tr').remove();
                    const remainingRows = servicesBody.querySelectorAll('tr');
                    if (remainingRows.length === 1) {
                        const firstRemoveBtn = remainingRows[0].querySelector('.remove-row');
                        if (firstRemoveBtn) {
                            firstRemoveBtn.setAttribute('disabled', 'disabled');
                        }
                    }
                    recalc();
                }
            }
        });

        addRowBtn.addEventListener('click', function () {
            const firstRow = servicesBody.querySelector('tr');
            if (!firstRow) {
                return;
            }

            const newRow = firstRow.cloneNode(true);
            
            // Reset input values
            newRow.querySelectorAll('input').forEach(input => {
                if (input.classList.contains('service-qty')) {
                    input.value = 1;
                } else if (input.classList.contains('service-price')) {
                    input.value = 0;
                } else {
                    input.value = '';
                }
            });
            
            // Reset line total
            const lineTotalEl = newRow.querySelector('.line-total');
            if (lineTotalEl) {
                lineTotalEl.textContent = '0.00';
            }
            
            // Enable remove button
            const removeBtn = newRow.querySelector('.remove-row');
            if (removeBtn) {
                removeBtn.removeAttribute('disabled');
            }
            
            servicesBody.appendChild(newRow);
            
            // Enable all remove buttons if more than one row
            const allRows = servicesBody.querySelectorAll('tr');
            if (allRows.length > 1) {
                servicesBody.querySelectorAll('.remove-row').forEach(btn => {
                    btn.removeAttribute('disabled');
                });
            }
            
            recalc();
        });

        // Initial calculation
        recalc();
    });
</script>
@endpush
@endsection