@extends('backend.layouts.app')
@section('content')
    <style>
        .container-xl {
            max-width: inherit !important;
        }
        * {
            scrollbar-width: none !important;
        }
        .alert-license {
            display: none !important;
        }
        .select2-selection {
            text-align: left;
        }
        .fw-bold {
            font-weight: 600;
            border: none;
            background: none;
            text-align: right;
            font-size: 16px;
        }
    </style>

    <div class="row">
        <div class="col-lg-12 mx-auto">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3 p-2 align-items-start">
                        <div class="col-12 col-sm-3">
                            <label for="opening_stock_no" class="form-label form-label required mb-1">
                                Opening Stock No
                            </label>
                            <input type="text" name="opening_stock_no" id="opening_stock_no"
                                class="form-control form-control-customr" placeholder="Enter Opening Stock Number"
                                readonly="" value="{{ $stockNumber }}">
                            @if(isset($stock))
                                <input type="hidden" name="stock_id" value="{{ $stock->id }}">
                            @endif
                        </div>

                        <div class="col-12 col-sm-3">
                            <label for="stock_date" class="form-label form-label required mb-1">
                                Date
                            </label>
                            <input type="text" name="stock_date" id="stock_date"
                                class="form-control form-control-customr" placeholder="Enter Date"
                                readonly="" value="{{ $stockDate }}">
                        </div>
                    </div>
                </div>

                <div class="card-header bg-light-title"
                    style="justify-content: center; background-color: #f2f3f8 !important;">
                    <h2 class="mb-0 title-row">Stock Items</h2>
                </div>
                <div class="card-body">
                    <div id="product-list">
                        <div class="row font-weight-bold text-center border-bottom pt-2 pb-2"
                            style="background-color: #f2f3f8; border-radius: 10px 10px 0px 0px;">
                            <div class="col-md-3 form-label form-label mb-0">Product</div>
                            <div class="col-md-4 form-label form-label mb-0">Product Details</div>
                            <div class="col-md-1 form-label form-label mb-0">Quantity</div>
                            <div class="col-md-2 form-label form-label mb-0">Price</div>
                            <div class="col-md-2 form-label form-label mb-0">Amount</div>
                        </div>

                        <div class="row product-row pt-2 text-center align-items-center">
                            <div class="col-md-3 mb-2">
                                <select class="form-control product-select" name="products[]" data-row="0"
                                    style="width: 100%;">
                                    <option value="">Select Product</option>
                                </select>
                            </div>

                            <div class="col-md-4 mb-2">
                                <div class="product-details" style="padding-bottom: 0px;">
                                    -
                                </div>
                            </div>

                            <div class="col-md-1 mb-2">
                                <input type="number" class="form-control form-control-customr product-quantity"
                                    name="quantity[]" value="0" min="1" required>
                            </div>

                            <div class="col-md-2 mb-2">
                                <input type="number" class="form-control form-control-customr product-price"
                                    name="price[]" value="0.00" min="0">
                            </div>

                            <div class="col-md-2 mb-2">
                                <div class="row">
                                    <div class="col-10 pe-3">
                                        <input type="number" class="form-control form-control-customr product-amount"
                                            name="amount[]" readonly value="0.00" min="0">
                                    </div>
                                    <div class="col-1 ps-1 d-flex justify-content-end close-md-products">
                                        <button type="button" class="btn-close remove-row p-0 d-none">
                                            <i class="fa-regular fa-circle-xmark"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row" style="text-align: right;">
                        <div class="col text-end p-3">
                            <a href="javascript:void(0);" class="btn btn-circle btn-primary custom-btn" id="add-product">
                                <span>+ Add Product</span>
                            </a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-7">
                            <div class="card pb-3 pl-3 pr-3">
                                <h5 class="section-title mb-0 p-2 pl-3 addc-section" style="font-weight: 600;">
                                    Additional Information
                                </h5>
                                <div class="p-4">
                                    <div class="mb-3">
                                        <div class="">
                                            <label for="remark" class="form-label form-label form-label">Opening Stock Notes</label>
                                            <textarea name="remark" id="remark" cols="6" rows="5"
                                                class="form-control form-control-customr" placeholder="Enter any notes (optional)">{{ isset($stock) ? $stock->remark : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="p-4 rounded" style="background: #f8f9fc; border: 1px solid #e4e5eb;">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="mb-0 fw-semibolds form-label form-label">Total Items</label>
                                    <input type="text" class="fw-bold" id="total_items" value="0" readonly>
                                </div>

                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <label class="mb-0 fw-semibolds form-label form-label">Total Price</label>
                                    <input type="text" class="fw-bold" id="total_price" value="0.00" readonly>
                                </div>

                                <div class="text-end" style="text-align: right;">
                                    <button type="button" class="btn btn-circle btn-primary custom-btn px-4"
                                        onclick="showPreview()">
                                        {{ isset($stock) ? 'Update Opening Stock' : 'Create Opening Stock' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Opening Stock Preview Modal -->
    <div class="modal fade" id="stockPreviewModal" tabindex="-1" role="dialog"
        aria-labelledby="stockPreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document" style="max-width: 210mm; width: 100%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="stockPreviewModalLabel">Opening Stock Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="previewContent">
                    <!-- Preview content will be loaded here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="confirmStock()">Confirm Opening Stock</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <script>
        var productsearch = '{{ route('get.all.products') }}';

        function formatProduct(product) {
            if (!product.product) return product.text;
            let p = product.product;
            return $(`
                <div class="d-flex align-items-center">
                    <img src="${p.image_url || '/images/no-image.png'}" width="40" height="40" class="me-2 rounded"/>
                    <div>
                        <div><strong>${p.name}</strong></div>
                        <small>SKU: ${p.sku || '-'} | Price: $${p.sale_price || p.price} </small>
                    </div>
                </div>
            `);
        }

        function formatProductSelection(product) {
            return product.text || product.name;
        }

        $(document).ready(function() {
            $('.product-select').select2({
                placeholder: 'Search and select product',
                allowClear: true,
                ajax: {
                    url: productsearch,
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.data.map(function(product) {
                                return {
                                    id: product.id,
                                    text: product.name + ' - ' + (product.sale_price || product.price),
                                    product: product
                                };
                            })
                        };
                    },
                    cache: true
                },
                templateResult: formatProduct,
                templateSelection: formatProductSelection
            });

            // Handle product selection
            $(document).on('select2:select', '.product-select', function(e) {
                var product = e.params.data.product;
                var $row = $(this).closest('.product-row');

                $row.find('.product-price').val(product.price);

                var detailsHtml =
                    '<div style="display: flex;text-align: left; font-size: 12px;">';
                detailsHtml += '<img src="' + (product.image_url || '/images/no-image.png') +
                    '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
                detailsHtml += '<div><strong>' + product.name + '</strong><br>';
                detailsHtml += 'Category: ' + (product.category_name || '-') + ' | SKU: ' + (product.sku || '-')  +
                    ' | Price: $' + (product.sale_price || product.price) + '</div>';
                detailsHtml += '</div>';
                $row.find('.product-details').html(detailsHtml);

                $row.find('.product-quantity').val(1);
                var salePrice = product.price;
                $row.find('.product-amount').val((1 * salePrice).toFixed(2));

                calculateTotal();
            });

            // Calculate amount on quantity change
            $(document).on('input', '.product-quantity', function() {
                var $row = $(this).closest('.product-row');
                var quantity = $(this).val() || 0;
                var salePrice = $row.find('.product-price').val() || 0;
                $row.find('.product-amount').val((quantity * salePrice).toFixed(2));
                calculateTotal();
            });

            // Calculate amount on price change
            $(document).on('input', '.product-price', function() {
                var $row = $(this).closest('.product-row');
                var quantity = $row.find('.product-quantity').val() || 0;
                var salePrice = $(this).val() || 0;
                $row.find('.product-amount').val((quantity * salePrice).toFixed(2));
                calculateTotal();
            });

            // Add new product row
            $('#add-product').on('click', function() {
                var rowCount = $('.product-row').length;
                var newRow = `
                    <div class="row product-row text-center align-items-center pt-1">
                        <div class="col-md-3 col-md-products mb-2">
                            <div class="form-group">
                                <select class="form-control product-select" name="products[]" data-row="${rowCount}" style="width: 100%;">
                                    <option value="">Select Product</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4 mb-2">
                            <div class="product-details" style="padding-bottom: 0px;">
                                -
                            </div>
                        </div>
                        <div class="col-md-1 mb-2">
                            <input type="number" class="form-control form-control-customr product-quantity" name="quantity[]" value="0" min="1" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <input type="number" class="form-control form-control-customr product-price" name="price[]" value="0.00" min="0">
                        </div>
                        <div class="col-md-2 mb-2">
                            <div class="row">
                                <div class="col-10 pe-3">
                                    <input type="number" class="form-control form-control-customr product-amount" name="amount[]" readonly value="0.00" min="0">
                                </div>
                                <div class="col-1 ps-1 d-flex justify-content-end close-md-products">
                                    <button type="button" class="btn-close remove-row p-0" style="justify-self: center;">
                                        <i class="fa-regular fa-circle-xmark"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;

                $('#product-list').append(newRow);

                var $newSelect = $('.product-row:last .product-select');
                $newSelect.select2({
                    placeholder: 'Search and select product',
                    allowClear: true,
                    ajax: {
                        url: productsearch,
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term || ''
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.data.map(function(product) {
                                    return {
                                        id: product.id,
                                        text: product.name + ' - ' + (product.sale_price || product
                                            .price),
                                        product: product
                                    };
                                })
                            };
                        },
                        cache: true
                    },
                    templateResult: formatProduct,
                    templateSelection: formatProductSelection
                });

                updateRemoveButtons();
            });

            $(document).on('click', '.remove-row', function() {
                $(this).closest('.product-row').remove();
                updateRemoveButtons();
                calculateTotal();
            });

            function updateRemoveButtons() {
                var $rows = $('.product-row');
                if ($rows.length > 1) {
                    $rows.find('.remove-row').removeClass('d-none');
                } else {
                    $rows.find('.remove-row').addClass('d-none');
                }
            }
        });

        function calculateTotal() {
            var totalItems = 0;
            var totalPrice = 0;
            
            $('.product-row').each(function() {
                var quantity = parseFloat($(this).find('.product-quantity').val()) || 0;
                var amount = parseFloat($(this).find('.product-amount').val()) || 0;
                
                if ($(this).find('.product-select').val()) {
                    totalItems += quantity;
                    totalPrice += amount;
                }
            });
            
            $('#total_items').val(totalItems);
            $('#total_price').val(totalPrice.toFixed(2));
        }

        $(document).ready(function() {
            @if(isset($stock))
                // Pre-populate form for edit mode
                $('#total_items').val('{{ number_format($stock->total_quantity, 0, ".", "") }}');
                $('#total_price').val('{{ number_format($stock->total_price, 2, ".", "") }}');
                setTimeout(function() {
                    $('.product-row').remove();
                    @foreach($stock->details as $index => $detail)
                        var productRow = `
                            <div class="row product-row pt-2 text-center align-items-center">
                                <div class="col-md-3 mb-2">
                                    <select class="form-control product-select" name="products[]" data-row="{{ $index }}" style="width: 100%;">
                                        <option value="{{ $detail->product_id }}" selected>{{ $detail->product->name ?? 'Product' }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4 mb-2">
                                    <div class="product-details" style="padding-bottom: 0px;">-</div>
                                </div>
                                <div class="col-md-1 mb-2">
                                    <input type="number" class="form-control form-control-customr product-quantity" name="quantity[]" value="{{ (int) $detail->qty == $detail->qty ? (int) $detail->qty : $detail->qty }}" min="1" required>
                                </div>
                                <div class="col-md-2 mb-2">
                                    <input type="number" class="form-control form-control-customr product-price" name="price[]" value="{{ $detail->price }}" min="0">
                                </div>
                                <div class="col-md-2 mb-2">
                                    <div class="row">
                                        <div class="col-10 pe-3">
                                            <input type="number" class="form-control form-control-customr product-amount" name="amount[]" value="{{ $detail->amount }}" readonly>
                                        </div>
                                        <div class="col-1 ps-1 d-flex justify-content-end close-md-products">
                                            <button type="button" class="btn-close remove-row p-0 {{ count($stock->details) > 1 ? '' : 'd-none' }}">
                                                <i class="fa-regular fa-circle-xmark"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#product-list').append(productRow);
                        $('.product-row:last .product-select').select2({
                            placeholder: 'Search and select product',
                            allowClear: true,
                            ajax: {
                                url: productsearch,
                                dataType: 'json',
                                delay: 250,
                                data: function(params) {
                                    return { q: params.term || '' };
                                },
                                processResults: function(data) {
                                    return {
                                        results: data.data.map(function(product) {
                                            return {
                                                id: product.id,
                                                text: product.name + ' - ' + (product.sale_price || product.price),
                                                product: product
                                            };
                                        })
                                    };
                                },
                                cache: true
                            },
                            templateResult: formatProduct,
                            templateSelection: formatProductSelection
                        });
                        
                        // Load product details for edit mode
                        (function(productId, $currentRow) {
                            $.ajax({
                                url: productsearch,
                                data: { q: '{{ $detail->product->name ?? "" }}' },
                                success: function(response) {
                                    var product = response.data.find(p => p.id == productId);
                                    if (product) {
                                        var detailsHtml = '<div style="display: flex;text-align: left; font-size: 12px;">';
                                        detailsHtml += '<img src="' + (product.image_url || '/images/no-image.png') + '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
                                        detailsHtml += '<div><strong>' + product.name + '</strong><br>';
                                        detailsHtml += 'Category: ' + (product.category_name || '-') + ' | SKU: ' + (product.sku || '-')  + ' | Price: $' + (product.sale_price || product.price) + '</div>';
                                        detailsHtml += '</div>';
                                        $currentRow.find('.product-details').html(detailsHtml);
                                    }
                                }
                            });
                        })('{{ $detail->product_id }}', $('.product-row:last'));
                    @endforeach
                    calculateTotal();
                }, 500);
            @endif
        });

        function showPreview() {
            var validProducts = 0;
            var hasErrors = false;
            var productIds = [];

            $('.product-row').each(function(index) {
                var $row = $(this);
                var productId = $row.find('.product-select').val();
                var quantity = parseFloat($row.find('.product-quantity').val()) || 0;
                var price = parseFloat($row.find('.product-price').val()) || 0;
                var rowNumber = index + 1;

                if (productId) {
                    // Check for duplicate products
                    if (productIds.includes(productId)) {
                        Botble.showError('Duplicate product found in row ' + rowNumber + '. Same product cannot be added multiple times.');
                        hasErrors = true;
                        return false;
                    }
                    productIds.push(productId);

                    // Validate quantity
                    if (quantity <= 0 || isNaN(quantity)) {
                        Botble.showError('Product quantity must be greater than 0 in row ' + rowNumber);
                        hasErrors = true;
                        return false;
                    }

                    // Validate price
                    if (price <= 0 || isNaN(price)) {
                        Botble.showError('Product price must be greater than 0 in row ' + rowNumber);
                        hasErrors = true;
                        return false;
                    }

                    validProducts++;
                } else if ($row.find('.product-quantity').val() || $row.find('.product-price').val()) {
                    // Row has quantity or price but no product selected
                    Botble.showError('Please select a product for row ' + rowNumber + ' or remove the row');
                    hasErrors = true;
                    return false;
                }
            });

            if (hasErrors) return;

            if (validProducts === 0) {
                Botble.showError('Please add at least one product');
                return;
            }

            var formData = {
                opening_stock_no: $('#opening_stock_no').val(),
                stock_date: $('#stock_date').val(),
                total_items: $('#total_items').val(),
                total_price: $('#total_price').val(),
                remark: $('#remark').val(),
                products: [],
                quantity: [],
                price: [],
                amount: [],
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            $('.product-row').each(function() {
                var productId = $(this).find('.product-select').val();
                if (productId) {
                    formData.products.push(productId);
                    formData.quantity.push($(this).find('.product-quantity').val());
                    formData.price.push($(this).find('.product-price').val());
                    formData.amount.push($(this).find('.product-amount').val());
                }
            });

            $.ajax({
                url: '{{ route('opening.stock.preview') }}',
                method: 'POST',
                data: formData,
                success: function(response) {
                    $('#previewContent').html(response);
                    $('#stockPreviewModal').modal('show');
                },
                error: function(xhr) {
                    Botble.showError('Error generating preview. Please try again.');
                }
            });
        }

        function confirmStock() {
            $('#stockPreviewModal').modal('hide');
            saveOpeningStock();
        }

        function saveOpeningStock() {
            var formData = {
                @if(isset($stock))
                    stock_id: {{ $stock->id }},
                @endif
                opening_stock_no: $('#opening_stock_no').val(),
                stock_date: $('#stock_date').val(),
                total_items: $('#total_items').val(),
                total_price: $('#total_price').val(),
                remark: $('#remark').val(),
                products: [],
                quantity: [],
                price: [],
                amount: [],
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            $('.product-row').each(function() {
                var productId = $(this).find('.product-select').val();
                if (productId) {
                    formData.products.push(productId);
                    formData.quantity.push($(this).find('.product-quantity').val());
                    formData.price.push($(this).find('.product-price').val());
                    formData.amount.push($(this).find('.product-amount').val());
                }
            });

            $.ajax({
                url: '{{ route('opening.stock.store') }}',
                method: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        Botble.showSuccess(response.message);
                        window.location.href = '{{ route('opening.stock.index') }}';
                    } else {
                        Botble.showError('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    Botble.showError('Error saving opening stock. Please try again.');
                }
            });
        }
    </script>
@endsection