@extends('admin.layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header bg-warning text-white">
                    <h3 class="mb-0">Create New Jinsi Form (With Per-Product Tax & Expenses)</h3>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('panel.jinsi-forms.store') }}" id="jinsiForm">
                        @csrf

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label>Kharid Form <span class="text-danger">*</span></label>
                                <select name="kharid_form_id" id="kharid_form_id" class="form-control select2" required>
                                    <option value="">Select Kharid Form</option>
                                    @foreach($kharidForms as $kharidForm)
                                        <option value="{{ $kharidForm->id }}">{{ $kharidForm->id_no }} - {{ $kharidForm->shop_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label>Entry Date <span class="text-danger">*</span></label>
                                <input type="text" name="date_in_nepali" id="pickernepalidate" class="form-control"  required>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>Global Other Expenses (Rs.) - <small>Applies to all products if not specified per product</small></label>
                                <input type="number" name="other_exp" id="other_exp" step="0.01" class="form-control" value="0">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Ward <span class="text-danger">*</span></label>
                                <select name="ward_id" class="form-control @error('ward_id') is-invalid @enderror" required>
                                    <option value="">Select Ward</option>
                                    @foreach($wards as $ward)
                                        <option value="{{ $ward->id }}" {{ old('ward_id') == $ward->id ? 'selected' : '' }}>{{ $ward->name }}</option>
                                    @endforeach
                                </select>
                                @error('ward_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Municipality <span class="text-danger">*</span></label>
                                <select name="municipality_id" class="form-control @error('municipality_id') is-invalid @enderror" required>
                                    <option value="">Select Municipality</option>
                                    @foreach($municipalities as $municipality)
                                        <option value="{{ $municipality->id }}" {{ old('municipality_id') == $municipality->id ? 'selected' : '' }}>{{ $municipality->name }}</option>
                                    @endforeach
                                </select>
                                @error('municipality_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Ward Chairman <span class="text-danger">*</span></label>
                                <select name="wardchairman_id" class="form-control @error('wardchairman_id') is-invalid @enderror" required>
                                    <option value="">Select Ward Chairman</option>
                                    @foreach($chairmen as $chairman)
                                        <option value="{{ $chairman->id }}" {{ old('wardchairman_id') == $chairman->id ? 'selected' : '' }}>{{ $chairman->name }}</option>
                                    @endforeach
                                </select>
                                @error('wardchairman_id')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label>Requested By <span class="text-danger">*</span></label>
                                <select name="requested_by" class="form-control @error('requested_by') is-invalid @enderror" required>
                                    <option value="">Select User</option>
                                    @foreach($users as $user)
                                        <option value="{{ $user->id }}" {{ old('requested_by') == $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                                    @endforeach
                                </select>
                                @error('requested_by')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Recommended By</label>
                                <input type="text" name="recommended_by" class="form-control @error('recommended_by') is-invalid @enderror" value="{{ old('recommended_by') }}">
                                @error('recommended_by')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label>Recommended Position</label>
                                <input type="text" name="recommended_position" class="form-control @error('recommended_position') is-invalid @enderror" value="{{ old('recommended_position') }}">
                                @error('recommended_position')
                                    <span class="invalid-feedback">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label>Remarks</label>
                                <textarea name="remarks" class="form-control" rows="2"></textarea>
                            </div>
                        </div>

                        <div class="card mt-4" id="productsCard" style="display: none;">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">Products (Each product can have its own tax type and expenses)</h5>
                            </div>
                            <div class="card-body">
                                <div id="productsContainer"></div>
                            </div>
                            <div class="card-footer bg-light" id="totalFooter" style="display: none;">
                                <div class="row">
                                    <div class="col-md-6 offset-md-6">
                                        <table class="table table-bordered">
                                            <tr class="table-info">
                                                <td width="60%"><strong>Subtotal (Products Total):</strong></td>
                                                <td class="text-end"><strong id="subtotal">0.00</strong></td>
                                            </tr>
                                            <tr class="table-warning">
                                                <td><strong>Total Tax:</strong></td>
                                                <td class="text-end"><strong id="totalTax">0.00</strong></td>
                                            </tr>
                                            <tr class="table-secondary">
                                                <td><strong>Total Other Expenses:</strong></td>
                                                <td class="text-end"><strong id="totalOtherExp">0.00</strong></td>
                                            </tr>
                                            <tr class="table-success">
                                                <td><strong class="h5">Grand Total:</strong></td>
                                                <td class="text-end"><strong class="h5 text-danger" id="grandTotal">0.00</strong></td>
                                             </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <button type="submit" class="btn btn-primary btn-lg" id="submitBtn" style="display: none;">Create Jinsi Form</button>
                            <a href="{{ route('panel.jinsi-forms.index') }}" class="btn btn-secondary btn-lg">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let productIndex = 0;

function calculateAllTotals() {
    let subtotal = 0;
    let totalTax = 0;
    let totalOtherExp = 0;

    $('.product-row').each(function() {
        const total = parseFloat($(this).find('.product-total').val()) || 0;
        const taxAmount = parseFloat($(this).find('.product-tax-amount').val()) || 0;
        const productOtherExp = parseFloat($(this).find('.product-other-exp').val()) || 0;

        subtotal += total;
        totalTax += taxAmount;
        totalOtherExp += productOtherExp;
    });

    const globalOtherExp = parseFloat($('#other_exp').val()) || 0;
    const grandTotal = subtotal + totalTax + totalOtherExp + globalOtherExp;

    $('#subtotal').text(subtotal.toFixed(2));
    $('#totalTax').text(totalTax.toFixed(2));
    $('#totalOtherExp').text((totalOtherExp + globalOtherExp).toFixed(2));
    $('#grandTotal').text(grandTotal.toFixed(2));
}

function calculateProductTax(productRow) {
    const total = parseFloat(productRow.find('.product-total').val()) || 0;
    const taxType = productRow.find('.tax-type-select').val();
    let taxPercentage = 0;
    let taxAmount = 0;

    if (taxType === 'vat') {
        taxPercentage = 13;
        taxAmount = total * 0.13;
        productRow.find('.custom-tax-section').hide();
        productRow.find('.tax-percentage-input').val(13);
    } else if (taxType === 'custom') {
        productRow.find('.custom-tax-section').show();
        taxPercentage = parseFloat(productRow.find('.tax-percentage-input').val()) || 0;
        taxAmount = total * (taxPercentage / 100);
    } else {
        taxPercentage = 0;
        taxAmount = 0;
        productRow.find('.custom-tax-section').hide();
        productRow.find('.tax-percentage-input').val(0);
    }

    productRow.find('.tax-percentage-display').text(taxPercentage);
    productRow.find('.product-tax-amount').val(taxAmount.toFixed(2));
    productRow.find('.tax-amount-display').text(taxAmount.toFixed(2));

    const totalWithTax = total + taxAmount;
    productRow.find('.total-with-tax-display').text(totalWithTax.toFixed(2));
    productRow.find('.product-total-with-tax').val(totalWithTax.toFixed(2));

    calculateAllTotals();
}

function calculateProductTotal(productRow) {
    const amount = parseFloat(productRow.find('.product-amount').val()) || 0;
    const requestedQty = parseFloat(productRow.find('.product-qty').val()) || 0;
    const total = amount * requestedQty;

    // Get available quantity from data attribute
    const availableQty = parseFloat(productRow.data('available-qty')) || 0;

    // Calculate remaining quantity: Available Qty - Requested Qty
    const remainingQty = availableQty - requestedQty;

    // Validate requested quantity doesn't exceed available quantity
    if (requestedQty > availableQty) {
        alert(`Requested quantity (${requestedQty}) cannot exceed available quantity (${availableQty})`);
        productRow.find('.product-qty').val(availableQty);
        return calculateProductTotal(productRow); // Recursive call with corrected value
    }

    // Validate requested quantity is positive
    if (requestedQty < 0) {
        alert('Requested quantity cannot be negative');
        productRow.find('.product-qty').val(0);
        return calculateProductTotal(productRow);
    }

    // Update form fields
    productRow.find('.product-total').val(total.toFixed(2));
    productRow.find('.product-remaining-qty').val(remainingQty.toFixed(2));

    // Update display of remaining quantity
    let remainingDisplay = productRow.find('.remaining-qty-display');
    if (remainingDisplay.length === 0) {
        // Create display element if it doesn't exist
        productRow.find('.col-md-2:has(.product-qty)').append(`
            <div class="remaining-qty-display text-info mt-1 small">
                <strong>Remaining after this: ${remainingQty.toFixed(2)}</strong>
            </div>
        `);
    } else {
        remainingDisplay.html(`<strong>Remaining after this: ${remainingQty.toFixed(2)}</strong>`);

        // Change color based on remaining quantity
        if (remainingQty <= 0) {
            remainingDisplay.css('color', 'red');
        } else if (remainingQty < availableQty * 0.2) {
            remainingDisplay.css('color', 'orange');
        } else {
            remainingDisplay.css('color', 'green');
        }
    }

    calculateProductTax(productRow);
}

$('#kharid_form_id').change(function() {
    const kharidFormId = $(this).val();
    if (!kharidFormId) {
        $('#productsCard, #submitBtn, #totalFooter').hide();
        return;
    }

    // Show loading indicator
    $('#productsContainer').html('<div class="text-center p-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div><p>Loading products...</p></div>');
    $('#productsCard, #submitBtn, #totalFooter').show();

    $.ajax({
        url: '{{ route("panel.jinsi-forms.get-products") }}',
        method: 'POST',
        data: {
            kharid_form_id: kharidFormId,
            _token: '{{ csrf_token() }}'
        },
        success: function(response) {
            if (response.success) {
                if (response.products.length === 0) {
                    alert('No products available with remaining quantity');
                    $('#productsCard, #submitBtn, #totalFooter').hide();
                    return;
                }

                $('#productsContainer').empty();

                response.products.forEach(function(product, index) {
                    const productHtml = `
                        <div class="product-row mb-4 row border-bottom pb-3" data-product-id="${product.id}" data-available-qty="${product.available_qty}">
                            <div class="col-md-12 mb-2">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <strong>${product.product_name}</strong><br>
                                        <small>${product.specification || 'No specification'}</small><br>
                                        <small>Unit: ${product.unit}</small><br>
                                        <small class="text-info">Original: ${product.original_qty} | Used: ${product.used_qty} | Available: ${product.available_qty}</small>
                                    </div>
                                    <div class="form-check">
                                        <input type="checkbox" name="products[${index}][is_long_term]" class="form-check-input long-term-checkbox" value="1" id="long_term_${index}">
                                        <label class="form-check-label" for="long_term_${index}">
                                            <strong class="text-primary">Long Term Product</strong>
                                        </label>
                                    </div>
                                </div>
                                <input type="hidden" name="products[${index}][kharid_form_product_id]" value="${product.id}">
                                <input type="hidden" name="products[${index}][remaining_qty]" class="product-remaining-qty" value="${product.available_qty}">
                            </div>
                            <div class="col-md-2">
                                <label>Unit Price (Rs.)</label>
                                <input type="number" name="products[${index}][amount]" step="0.01" class="form-control product-amount" value="${product.purchased_amount}" readonly>
                            </div>
                            <div class="col-md-2">
                                <label>Requested Quantity <span class="text-danger">*</span></label>
                                <input type="number" name="products[${index}][qty]" step="0.01" class="form-control product-qty" max="${product.max_qty}" required>
                                <small class="text-muted">Available: ${product.available_qty}</small>
                                <div class="remaining-qty-display text-info mt-1"></div>
                            </div>
                            <div class="col-md-2">
                                <label>Total (Rs.)</label>
                                <input type="number" name="products[${index}][total]" step="0.01" class="form-control product-total" readonly>
                            </div>
                            <div class="col-md-3">
                                <label>Tax Type <span class="text-danger">*</span></label>
                                <select name="products[${index}][tax_type]" class="form-control tax-type-select" required>
                                    <option value="none">No Tax</option>
                                    <option value="vat">VAT (13%)</option>
                                    <option value="custom">Custom Tax</option>
                                </select>
                            </div>
                            <div class="col-md-3 custom-tax-section" style="display: none;">
                                <label>Tax Percentage (%)</label>
                                <input type="number" name="products[${index}][tax_percentage]" step="0.01" class="form-control tax-percentage-input" value="0">
                            </div>
                            <div class="col-md-12 mt-2">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label>Other Expenses (Rs.)</label>
                                        <input type="number" name="products[${index}][other_exp]" step="0.01" class="form-control product-other-exp" value="0">
                                    </div>
                                    <div class="col-md-3">
                                        <small>Tax: <span class="tax-percentage-display">0</span>% = Rs. <span class="tax-amount-display">0.00</span></small>
                                        <input type="hidden" name="products[${index}][tax_amount]" class="product-tax-amount" value="0">
                                    </div>
                                    <div class="col-md-3">
                                        <small>Total with Tax: Rs. <span class="total-with-tax-display">0.00</span></small>
                                        <input type="hidden" name="products[${index}][total_with_tax]" class="product-total-with-tax" value="0">
                                    </div>
                                    <div class="col-md-3">
                                        <label>Remarks</label>
                                        <input type="text" name="products[${index}][remarks]" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                    $('#productsContainer').append(productHtml);
                });

                // Bind events after products are loaded
                bindProductEvents();
            } else {
                alert('Error loading products');
            }
        },
        error: function(xhr) {
            alert('Error loading products: ' + (xhr.responseJSON?.message || 'Unknown error'));
            $('#productsCard, #submitBtn, #totalFooter').hide();
        }
    });
});

function bindProductEvents() {
    // Quantity change event
    $(document).off('input', '.product-qty');
    $(document).on('input', '.product-qty', function() {
        const row = $(this).closest('.product-row');
        const requestedQty = parseFloat($(this).val()) || 0;
        const maxQty = parseFloat($(this).attr('max')) || 0;

        if (requestedQty > maxQty) {
            alert(`Requested quantity cannot exceed ${maxQty}`);
            $(this).val(maxQty);
            calculateProductTotal(row);
        } else if (requestedQty < 0) {
            alert('Requested quantity cannot be negative');
            $(this).val(0);
            calculateProductTotal(row);
        } else {
            calculateProductTotal(row);
        }
    });

    // Tax type change event
    $(document).off('change', '.tax-type-select');
    $(document).on('change', '.tax-type-select', function() {
        const row = $(this).closest('.product-row');
        calculateProductTax(row);
    });

    // Tax percentage input event
    $(document).off('input', '.tax-percentage-input');
    $(document).on('input', '.tax-percentage-input', function() {
        const row = $(this).closest('.product-row');
        calculateProductTax(row);
    });

    // Other expenses input event
    $(document).off('input', '.product-other-exp');
    $(document).on('input', '.product-other-exp', function() {
        calculateAllTotals();
    });

    // Long term checkbox change event
    $(document).off('change', '.long-term-checkbox');
    $(document).on('change', '.long-term-checkbox', function() {
        const row = $(this).closest('.product-row');
        const isChecked = $(this).is(':checked');
        if (isChecked) {
            row.css('background-color', '#f0f8ff');
            row.find('.product-amount').css('background-color', '#e8f4f8');
        } else {
            row.css('background-color', '');
            row.find('.product-amount').css('background-color', '');
        }
    });
}

$('#other_exp').on('input', function() {
    calculateAllTotals();
});

// Form submission validation
$('#jinsiForm').on('submit', function(e) {
    let hasErrors = false;

    $('.product-row').each(function(index) {
        const requestedQty = parseFloat($(this).find('.product-qty').val()) || 0;
        const availableQty = parseFloat($(this).data('available-qty')) || 0;

        if (requestedQty <= 0) {
            alert(`Please enter requested quantity for product ${index + 1}`);
            hasErrors = true;
            return false;
        }

        if (requestedQty > availableQty) {
            alert(`Requested quantity (${requestedQty}) exceeds available quantity (${availableQty}) for product ${index + 1}`);
            hasErrors = true;
            return false;
        }
    });

    if (hasErrors) {
        e.preventDefault();
        return false;
    }
});
</script>
@endpush
@endsection