@extends('layout.app')
@section('title', 'Bills')
@section('page-title', 'Add Bill')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">Add new Bill</h6>
                </div>
                <div class="card-body px-4 pt-4 pb-4">
                    <form id="billForm" method="POST" action="{{ route('bills.store') }}">
                        @csrf

                        <!-- Shopkeeper Selection -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label for="shopkeeper" class="form-label fw-500">Select Shopkeeper <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="shopkeeper" name="shopkeeper_id" required
                                    onchange="updateShopkeeperInfo()">
                                    <option value="">-- Choose a Shop --</option>
                                    @foreach ($shopkeepers as $shopkeeper)
                                        <option value="{{ $shopkeeper->id }}" data-name="{{ $shopkeeper->name }}"
                                            data-pending="{{ $shopkeeper->pending_payment ?? 0 }}">
                                            {{ $shopkeeper->shop_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <input type="hidden" id="shopkeeperName" name="shop_name_snapshot">
                                <input type="hidden" id="prevBalance" name="prev_balance" value="0">
                                @error('shopkeeper_id')
                                    <span class="text-danger small">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-500">Previous Balance</label>
                                <input type="text" class="form-control" id="prevBalanceDisplay" readonly>
                            </div>
                        </div>

                        <!-- Items Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="mb-3 fw-500">Items</h6>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="min-width: 250px;">Item</th>
                                                <th style="width: 80px;">Item Code</th>
                                                <th style="width: 70px;">Unit</th>
                                                <th style="width: 80px;">Per Carton</th>
                                                <th style="width: 70px;">Stock</th>
                                                <th style="width: 70px;">Price <span class="text-danger">*</span></th>
                                                <th style="width: 90px;" class="qty-pieces-th">Qty Pieces <span
                                                        class="text-danger">*</span></th>
                                                <th style="width: 90px;" class="qty-cartons-th">Qty Cartons</th>
                                                <th style="width: 80px;">Total Qty</th>
                                                <th style="width: 100px;">Total Amount</th>
                                                <th style="width: 50px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="itemsTableBody">
                                            <!-- Items will be added here -->
                                        </tbody>
                                    </table>
                                </div>
                                <button type="button" class="btn btn-sm btn-primary" onclick="addItemRow()">
                                    <i class="fas fa-plus"></i> Add Item
                                </button>
                            </div>
                        </div>

                        <!-- Discount & Payment Section -->
                        <div class="row mb-4">
                            <div class="col-md-3">
                                <label for="discountPercent" class="form-label fw-500">Discount %</label>
                                <input type="number" class="form-control" id="discountPercent" name="discount_percent"
                                    step="0.01" min="0" max="100" value="0"
                                    onchange="calculateTotals()">
                            </div>
                            <div class="col-md-3">
                                <label for="discountAmount" class="form-label fw-500">Discount Amount</label>
                                <input type="number" class="form-control" id="discountAmount" name="discount_amount"
                                    step="0.01" min="0" value="0" onchange="calculateTotals()">
                            </div>
                            <div class="col-md-3">
                                <label for="cashReceived" class="form-label fw-500">Cash Received <span
                                        class="text-danger">*</span></label>
                                <input type="number" class="form-control" id="cashReceived" name="cash_received"
                                    step="0.01" min="0" value="0" onchange="calculateTotals()" required>
                            </div>
                        </div>

                        <!-- Summary Section -->
                        <div class="row mb-4">
                            <div class="col-md-6 ms-auto">
                                <div class="card bg-light">
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Total Items:</span>
                                            <strong id="totalItems">0</strong>
                                        </div>
                                        <hr class="my-2">
                                        <div class="d-flex justify-content-between mb-3">
                                            <span class="fw-500">Net Amount:</span>
                                            <strong id="netAmount" class="fs-5 text-primary">Rs. 0.00</strong>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Discount Amount:</span>
                                            <strong id="discountAmountDisplay">Rs. 0.00</strong>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Cash Received:</span>
                                            <strong id="cashReceivedDisplay">Rs. 0.00</strong>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Previous Balance:</span>
                                            <strong id="prevBalanceCalcDisplay">Rs. 0.00</strong>
                                        </div>
                                        <hr class="my-2">
                                        <div class="d-flex justify-content-between">
                                            <span class="fw-500">Total Amount (Due):</span>
                                            <strong id="totalAmount" class="fs-5 text-danger">Rs. 0.00</strong>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Hidden inputs for form submission -->
                        <input type="hidden" id="netAmountInput" name="net_amount" value="0">
                        <input type="hidden" id="totalAmountInput" name="total_amount" value="0">
                        <input type="hidden" id="totalItemsInput" name="total_items" value="0">

                        <!-- Form Actions -->
                        <div class="row">
                            <div class="col-12 d-flex gap-2">
                                <button type="submit" class="btn btn-success" id="submitBillBtn">
                                    <i class="fas fa-save"></i> Create Bill
                                </button>
                                <a href="{{ route('bills.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <!-- Items Data Storage -->
        <script>
            $(document).ready(function() {
                $('#shopkeeper').select2({
                    theme: 'bootstrap-5',
                    placeholder: '-- Choose a Shop --',
                    allowClear: true,
                    width: '100%'
                });

                $('#billForm').on('submit', function(e) {
                    e.preventDefault();

                    if (!validateForm()) {
                        return false;
                    }

                    const $form = $(this);
                    const $submitBtn = $('#submitBillBtn');
                    const originalBtnHtml = $submitBtn.html();

                    $submitBtn.prop('disabled', true).html(
                        '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Creating...'
                    );

                    $.ajax({
                        url: $form.attr('action'),
                        method: 'POST',
                        data: $form.serialize(),
                        dataType: 'json',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json',
                        },
                        success: function(response) {
                            if (response.success) {
                                showFlashMessage(response.message, 'success');
                                setTimeout(function() {
                                    window.location.reload();
                                }, 2000);
                            } else {
                                showFlashMessage(response.message || 'Something went wrong on our end!', 'error');
                                $submitBtn.prop('disabled', false).html(originalBtnHtml);
                            }
                        },
                        error: function(xhr) {
                            let message = 'Something went wrong on our end!';

                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                message = xhr.responseJSON.message;
                            }

                            showFlashMessage(message, 'error');
                            $submitBtn.prop('disabled', false).html(originalBtnHtml);
                        },
                    });
                });
            });

            const itemsData = @json($items);
            let itemRowCounter = 0;

            function addItemRow() {
                itemRowCounter++;
                const rowId = `item-row-${itemRowCounter}`;

                // Build options dynamically
                let optionsHtml = '<option value="">-- Select Item --</option>';

                if (itemsData && Array.isArray(itemsData) && itemsData.length > 0) {
                    itemsData.forEach(item => {
                        const unitName = item.unit ? item.unit.name : 'N/A';
                        optionsHtml +=
                            `<option value="${item.id}" data-item-code="${item.item_code}" data-name="${item.name}" data-unit="${unitName}" data-unit-id="${item.unit_id}" data-pieces-per-carton="${item.pieces_per_carton}" data-price="${item.price}" data-stock="${item.stock ?? 0}">${item.item_code} - ${item.name}</option>`;
                    });
                }

                const html = `
                <tr id="${rowId}">
                    <td>
                        <select class="form-select form-select-sm item-select" data-row-id="${rowId}" 
                                name="items[${itemRowCounter}][id]"
                                onchange="populateItemFields('${rowId}')" required>
                            ${optionsHtml}
                        </select>
                    </td>
                    <td><input type="text" class="form-control form-control-sm item-code" readonly></td>
                    <td><input type="text" class="form-control form-control-sm item-unit" readonly></td>
                    <td><input type="text" class="form-control form-control-sm item-pieces" readonly></td>
                    <td><input type="text" class="form-control form-control-sm item-stock bg-light" readonly></td>
                    <td>
                        <input type="number" class="form-control form-control-sm item-price" 
                               name="items[${itemRowCounter}][price]"
                               step="0.01" min="0" required onchange="calculateRowTotal('${rowId}')">
                    </td>
                    <td class="qty-pieces-td">
                        <input type="number" class="form-control form-control-sm item-quantity-pieces" 
                               name="items[${itemRowCounter}][quantity_pieces]"
                               step="0.01" min="0" onchange="calculateRowTotal('${rowId}')">
                    </td>
                    <td class="qty-cartons-td" style="display: none;">
                        <input type="number" class="form-control form-control-sm item-quantity-cartons" 
                               name="items[${itemRowCounter}][quantity_cartons]"
                               step="0.01" min="0" onchange="calculateRowTotal('${rowId}')">
                    </td>
                    <td><input type="text" class="form-control form-control-sm item-total-qty bg-light" readonly></td>
                    <td><input type="text" class="form-control form-control-sm item-total bg-light" readonly></td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm btn-danger" onclick="removeItemRow('${rowId}')">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </td>
                </tr>
            `;

                const tableBody = document.getElementById('itemsTableBody');
                if (tableBody) {
                    tableBody.insertAdjacentHTML('beforeend', html);
                    updateSummary();
                } else {
                    console.error('itemsTableBody not found');
                }

                $(`select[data-row-id="${rowId}"]`).select2({
                    theme: 'bootstrap-5',
                    placeholder: '-- Select Item --',
                    width: '100%'
                });
            }

            function populateItemFields(rowId) {
                const row = document.getElementById(rowId);
                const select = row.querySelector('.item-select');
                const selectedOption = select.options[select.selectedIndex];

                if (!selectedOption.value) {
                    row.querySelector('.item-code').value = '';
                    row.querySelector('.item-unit').value = '';
                    row.querySelector('.item-pieces').value = '';
                    row.querySelector('.item-stock').value = '';
                    row.querySelector('.item-price').value = '';
                    row.querySelector('.item-quantity-pieces').value = '';
                    row.querySelector('.item-quantity-cartons').value = '';
                    row.querySelector('.item-total-qty').value = '';
                    row.querySelector('.item-total').value = '';
                    updateSummary();
                    return;
                }

                const unitId = selectedOption.dataset.unitId;
                row.querySelector('.item-code').value = selectedOption.dataset.itemCode;
                row.querySelector('.item-unit').value = selectedOption.dataset.unit;
                row.querySelector('.item-pieces').value = selectedOption.dataset.piecesPerCarton;
                row.querySelector('.item-stock').value = selectedOption.dataset.stock ?? '';
                row.querySelector('.item-price').value = selectedOption.dataset.price;
                row.querySelector('.item-quantity-pieces').value = '';
                row.querySelector('.item-quantity-cartons').value = '';
                row.querySelector('.item-total-qty').value = '';
                row.querySelector('.item-total').value = '';

                // Show/hide quantity cartons column based on unit_id
                const qtyCartonsInput = row.querySelector('.item-quantity-cartons');
                const qtyPiecesInput = row.querySelector('.item-quantity-pieces');

                if (unitId == 2) {
                    qtyCartonsInput.parentElement.style.display = 'table-cell';
                    qtyPiecesInput.required = false;
                    qtyCartonsInput.required = true;
                } else {
                    qtyCartonsInput.parentElement.style.display = 'table-cell';
                    qtyCartonsInput.readOnly = true;
                    qtyCartonsInput.value = '0';
                    qtyPiecesInput.required = true;
                    qtyCartonsInput.required = false;
                }

                // Store unit_id in the row for later use
                row.dataset.unitId = unitId;

                calculateRowTotal(rowId);
            }

            function calculateRowTotal(rowId) {
                const row = document.getElementById(rowId);
                const price = parseFloat(row.querySelector('.item-price').value) || 0;
                const qtyPieces = parseFloat(row.querySelector('.item-quantity-pieces').value) || 0;
                const qtyCartons = parseFloat(row.querySelector('.item-quantity-cartons').value) || 0;
                const piecesPerCarton = parseFloat(row.querySelector('.item-pieces').value) || 0;
                const unitId = row.dataset.unitId;

                let totalQty = 0;

                if (unitId == 2) {
                    // For unit_id = 2: (pieces_per_carton * quantity_cartons) + quantity_pieces
                    totalQty = (piecesPerCarton * qtyCartons) + qtyPieces;
                } else {
                    // For unit_id = 1: only quantity_pieces
                    totalQty = qtyPieces;
                }

                const totalAmount = (price * totalQty).toFixed(2);

                row.querySelector('.item-total-qty').value = totalQty.toFixed(2);
                row.querySelector('.item-total').value = `Rs. ${totalAmount}`;
                updateSummary();
            }

            function removeItemRow(rowId) {
                document.getElementById(rowId).remove();
                updateSummary();
            }

            function updateSummary() {
                const rows = document.querySelectorAll('#itemsTableBody tr');
                let totalAmount = 0;
                let totalQuantity = 0;

                rows.forEach(row => {
                    const price = parseFloat(row.querySelector('.item-price').value) || 0;
                    const qtyPieces = parseFloat(row.querySelector('.item-quantity-pieces').value) || 0;
                    const qtyCartons = parseFloat(row.querySelector('.item-quantity-cartons').value) || 0;
                    const piecesPerCarton = parseFloat(row.querySelector('.item-pieces').value) || 0;
                    const unitId = row.dataset.unitId;

                    let itemTotalQty = 0;
                    if (unitId == 2) {
                        itemTotalQty = (piecesPerCarton * qtyCartons) + qtyPieces;
                    } else {
                        itemTotalQty = qtyPieces;
                    }

                    totalAmount += price * itemTotalQty;
                    totalQuantity += itemTotalQty;
                });

                document.getElementById('totalItems').textContent = rows.length;
                document.getElementById('netAmount').textContent = `Rs. ${totalAmount.toFixed(2)}`;
                document.getElementById('totalItemsInput').value = rows.length;

                // Recalculate total with discount and cash received
                calculateTotals();
            }

            function updateShopkeeperInfo() {
                const select = document.getElementById('shopkeeper');
                const selectedOption = select.options[select.selectedIndex];
                const shopkeeperName = selectedOption.dataset.name || '';
                const prevBalance = parseFloat(selectedOption.dataset.pending) || 0;

                document.getElementById('shopkeeperName').value = shopkeeperName;
                document.getElementById('prevBalance').value = prevBalance;
                document.getElementById('prevBalanceDisplay').value = `Rs. ${prevBalance.toFixed(2)}`;
                document.getElementById('prevBalanceCalcDisplay').textContent = `Rs. ${prevBalance.toFixed(2)}`;

                calculateTotals();
            }

            function calculateTotals() {
                const netAmount = parseFloat(document.getElementById('netAmount').textContent.replace('Rs. ', '')) || 0;
                const discountPercent = parseFloat(document.getElementById('discountPercent').value) || 0;
                const discountAmountInput = parseFloat(document.getElementById('discountAmount').value) || 0;
                const cashReceived = parseFloat(document.getElementById('cashReceived').value) || 0;
                const prevBalance = parseFloat(document.getElementById('prevBalance').value) || 0;

                // Calculate discount amount
                let discountAmount = discountAmountInput;
                if (discountPercent > 0) {
                    discountAmount = (netAmount * discountPercent) / 100;
                    document.getElementById('discountAmount').value = discountAmount.toFixed(2);
                }

                // Update display values
                document.getElementById('discountAmountDisplay').textContent = `Rs. ${discountAmount.toFixed(2)}`;
                document.getElementById('cashReceivedDisplay').textContent = `Rs. ${cashReceived.toFixed(2)}`;

                // Calculate total: net_amount - discount - cash_received + prev_balance
                const totalAmount = netAmount - discountAmount - cashReceived + prevBalance;

                document.getElementById('totalAmount').textContent = `Rs. ${totalAmount.toFixed(2)}`;
                document.getElementById('totalAmountInput').value = totalAmount.toFixed(2);
                document.getElementById('netAmountInput').value = netAmount.toFixed(2);
            }

            function validateForm() {
                const shopkeeperId = document.getElementById('shopkeeper').value;
                const rows = document.querySelectorAll('#itemsTableBody tr');
                const cashReceived = document.getElementById('cashReceived').value;

                if (!shopkeeperId) {
                    alert('Please select a shopkeeper');
                    return false;
                }

                if (rows.length === 0) {
                    alert('Please add at least one item');
                    return false;
                }

                if (!cashReceived || cashReceived < 0) {
                    alert('Please enter a valid cash received amount');
                    return false;
                }

                for (let row of rows) {
                    const itemSelect = row.querySelector('.item-select').value;
                    const price = parseFloat(row.querySelector('.item-price').value);
                    const qtyPieces = parseFloat(row.querySelector('.item-quantity-pieces').value) || 0;
                    const qtyCartons = parseFloat(row.querySelector('.item-quantity-cartons').value) || 0;
                    const unitId = row.dataset.unitId;

                    if (!itemSelect) {
                        alert('Please select an item in all rows');
                        return false;
                    }
                    if (!price || price <= 0) {
                        alert('Please enter a valid price for all items');
                        return false;
                    }

                    if (unitId == 2) {
                        if ((!qtyCartons && !qtyPieces) || (qtyCartons + qtyPieces) <= 0) {
                            alert('Please enter a valid quantity (cartons or pieces) for all items');
                            return false;
                        }
                    } else {
                        if (!qtyPieces || qtyPieces <= 0) {
                            alert('Please enter a valid quantity for all items');
                            return false;
                        }
                    }
                }

                return true;
            }

            // Add first row on page load
            document.addEventListener('DOMContentLoaded', function() {
                addItemRow();
            });
        </script>
    @endpush

    <style>
        .form-select,
        .form-control {
            border-color: #dee2e6;
            font-size: 0.875rem;
        }

        .form-select:focus,
        .form-control:focus {
            border-color: #80bdff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .table-responsive {
            border-radius: 0.25rem;
            overflow-x: auto;
        }

        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        .fw-500 {
            font-weight: 500;
        }

        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            font-size: 0.875rem;
        }

        /* Item select dropdown styling */
        .item-select {
            width: 100%;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-word;
            min-height: 38px;
        }

        .item-select option {
            white-space: normal;
            word-wrap: break-word;
            padding: 4px 8px;
        }

        #itemsTableBody td:first-child {
            white-space: normal;
            word-break: break-word;
            vertical-align: middle;
        }
    </style>
@endsection