@extends('backend.layouts.app')

@section('title', __('Create Sale Order'))

@section('admin-content')
<div class="p-6 mx-auto max-w-7xl">
    @include('backend.layouts.partials.messages')

    <div class="mb-6 flex items-center justify-between gap-3">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white/90">
            {{ __('Create Sale Order') }}
        </h2>
        <a href="{{ route('admin.sale-orders.index') }}" 
           class="px-4 py-2 text-sm font-medium text-white bg-gray-600 rounded-lg hover:opacity-90">
            <i class="bi bi-arrow-left"></i> {{ __('Back') }}
        </a>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <form action="{{ route('admin.sale-orders.store') }}" method="POST">
            @csrf

            {{-- Customer Section --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div>
                    <label class="block mb-1 font-medium">Customer Code</label>
                    <input type="text" name="card_code" id="CardCode"
                           class="form-input w-full cursor-pointer bg-gray-50"
                           placeholder="Select Customer" readonly onclick="openCustomerModal()">
                </div>

                <div>
                    <label class="block mb-1 font-medium">Customer Name</label>
                    <input type="text" name="card_name" id="CardName" class="form-input w-full" readonly>
                </div>

                <div>
                    <label class="block mb-1 font-medium">Customer Address</label>
                    <input type="text" name="address" id="address" class="form-input w-full" readonly>
                </div>
<!-- Flatpickr CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- Flatpickr JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<div>
    <label class="block mb-1 font-medium">Due Date</label>
    <input type="text" id="doc_due_date" name="doc_due_date" class="form-input w-full" placeholder="MM/DD/YYYY" required readonly>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
flatpickr("#doc_due_date", {
    dateFormat: "Y-m-d",  // YYYY-MM-DD for MySQL
    allowInput: true,
    clickOpens: true
});

});
</script>

            </div>

            @include('components.popups.customer-modal')
            @include('components.popups.item-modal')

            <hr class="my-4 border-gray-300">

            {{-- Items Section --}}
            <div class="mb-4">
                <h3 class="font-semibold mb-2">Order Lines</h3>
                <table class="w-full text-sm border border-gray-300 rounded">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="p-2">Item Code</th>
                            <th class="p-2">Item Name</th>
                            <th class="p-2">Qty</th>
                            <th class="p-2">Unit Price</th>
                            <th class="p-2">Discount (%)</th>
                            <th class="p-2">Tax (%)</th>
                            <th class="p-2">Total</th>
                            <th class="p-2">Action</th>
                        </tr>
                    </thead>
                    <tbody id="items-table">
                        <tr>
                            <td><input type="text" name="items[0][item_code]" class="form-input w-full item-code cursor-pointer bg-gray-50" placeholder="Select Item" readonly onclick="openItemModal(this)"></td>
                            <td><input type="text" name="items[0][item_name]" class="form-input w-full item-name" readonly></td>
                            <td><input type="number" name="items[0][quantity]" class="form-input w-full item-qty" min="1" value="1" required></td>
                            <td><input type="number" name="items[0][unit_price]" class="form-input w-full item-price" min="0" value="0" required></td>
                            <td><input type="number" name="items[0][discount]" class="form-input w-full item-discount" min="0" value="0"></td>
                            <td><input type="number" name="items[0][tax_rate]" class="form-input w-full item-tax" min="0" value="0"></td>
                            <td class="text-center text-gray-600 item-line-total">0.00</td>
                            <td class="text-center">
                                <button type="button" class="text-red-600" onclick="removeRow(this)">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div class="mt-3">
                    <button type="button" onclick="addRow()" 
                        class="px-3 py-1 text-sm bg-primary text-white rounded hover:opacity-90">
                        + Add Item
                    </button>
                </div>

                {{-- Grand Total --}}
                <div class="mt-3 text-right">
                    <strong>Total: PKR <span id="order-total">0.00</span></strong>
                </div>
            </div>

            <div class="mb-4">
                <label class="block mb-1 font-medium">Comments</label>
                <textarea name="comments" class="form-textarea w-full"></textarea>
            </div>

            <div class="flex justify-end">
                <button type="submit" class="bg-primary text-white px-6 py-2 rounded hover:opacity-90">
                    {{ __('Save Order') }}
                </button>
            </div>
        </form>
    </div>
</div>

{{-- JS for dynamic rows and calculation --}}
<script>
let rowCount = 1;
let activeRow = null;

// Calculate total for a single row
function calculateRowTotal(row) {
    const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
    const price = parseFloat(row.querySelector('.item-price').value) || 0;
    const discount = parseFloat(row.querySelector('.item-discount').value) || 0;
    const tax = parseFloat(row.querySelector('.item-tax').value) || 0;

    const subtotal = qty * price;
    const discountAmount = subtotal * (discount / 100);
    const taxAmount = (subtotal - discountAmount) * (tax / 100);
    const total = subtotal - discountAmount + taxAmount;

    row.querySelector('.item-line-total').textContent = total.toFixed(2);
    return total;
}

// Calculate grand total
function calculateOrderTotal() {
    const rows = document.querySelectorAll('#items-table tr');
    let grandTotal = 0;
    rows.forEach(row => {
        grandTotal += calculateRowTotal(row);
    });
    document.getElementById('order-total').textContent = grandTotal.toFixed(2);
}

// Attach input events to recalc totals automatically
function attachInputEvents(row) {
    row.querySelectorAll('.item-qty, .item-price, .item-discount, .item-tax').forEach(input => {
        input.addEventListener('input', calculateOrderTotal);
    });
}

// Add new row
function addRow() {
    const table = document.getElementById('items-table');
    const newRow = table.insertRow();
    newRow.innerHTML = `
        <td><input type="text" name="items[${rowCount}][item_code]" class="form-input w-full item-code cursor-pointer bg-gray-50" placeholder="Select Item" readonly onclick="openItemModal(this)"></td>
        <td><input type="text" name="items[${rowCount}][item_name]" class="form-input w-full item-name" readonly></td>
        <td><input type="number" name="items[${rowCount}][quantity]" class="form-input w-full item-qty" min="1" value="1" required></td>
        <td><input type="number" name="items[${rowCount}][unit_price]" class="form-input w-full item-price" min="0" value="0" required></td>
        <td><input type="number" name="items[${rowCount}][discount]" class="form-input w-full item-discount" min="0" value="0"></td>
        <td><input type="number" name="items[${rowCount}][tax_rate]" class="form-input w-full item-tax" min="0" value="0"></td>
        <td class="text-center text-gray-600 item-line-total">0.00</td>
        <td class="text-center"><button type="button" class="text-red-600" onclick="removeRow(this)"><i class="bi bi-x-lg"></i></button></td>
    `;
    attachInputEvents(newRow);
    rowCount++;
    calculateOrderTotal();
}

// Remove row
function removeRow(btn) {
    btn.closest('tr').remove();
    calculateOrderTotal();
}

// Open/close item modal
function openItemModal(el) {
    activeRow = el.closest('tr');
    document.getElementById('itemModal').classList.remove('hidden');
}

function closeItemModal() {
    document.getElementById('itemModal').classList.add('hidden');
}

// Initialize first row events
document.querySelectorAll('#items-table tr').forEach(row => attachInputEvents(row));
calculateOrderTotal();
</script>
@endsection