@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="stock_adjustment_number" class="form-label form-label required mb-1">
                                Stock Adjustment No
                            </label>
                            <input type="text" name="stock_adjustment_number" id="stock_adjustment_number"
                                class="form-control form-control-customr" placeholder="Enter Stock Adjustment Number"
                                readonly="" value="{{ $newAdjustmentNo ?? '' }}">
                            @if(isset($adjustment))
                                <input type="hidden" name="adjustment_id" value="{{ $adjustment->id }}">
                            @endif
                        </div>

                        <div class="col-12 col-sm-3">
                            <label for="stock_adjustment_date" class="form-label form-label required mb-1">
                                Date
                            </label>
                            <input type="text" name="stock_adjustment_date" id="stock_adjustment_date"
                                class="form-control form-control-customr" placeholder="Enter Date"
                                readonly="" value="{{ old('stock_adjustment_date', $editMode && $adjustment ? \Carbon\Carbon::parse($adjustment->date)->format('d-m-Y') : date('d-m-Y')) }}">
                        </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 Adjustment 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-3 form-label form-label mb-0">Product Details</div>
                            <div class="col-md-1 form-label form-label mb-0">Available Qty</div>
                            <div class="col-md-1 form-label form-label mb-0">Adjust Qty</div>
                            <div class="col-md-1 form-label form-label mb-0">NewStock Qty</div>
                            <div class="col-md-1 form-label form-label mb-0">Price</div>
                            <div class="col-md-2 form-label form-label mb-0">Remark</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-3 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 available-quantity"
                                    name="available_qty[]" value="0" min="0" readonly required>
                            </div>

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

                            <div class="col-md-1 mb-2">
                                <input type="number" class="form-control form-control-customr new-stock-qty"
                                    name="new_stock_qty[]" readonly value="0" required>
                            </div>

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

                            <div class="col-md-2 mb-2">
                                <div class="row">
                                    <div class="col-10 pe-3">
                                        <input type="text" class="form-control form-control-customr product-remark"
                                            name="remark[]" placeholder="Remark">
                                    </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="customer_notes" class="form-label form-label form-label">Stock Adjustment Notes</label>
                                            <textarea name="customer_notes" id="customer_notes" cols="6" rows="5"
                                                class="form-control form-control-customr" placeholder="Enter any notes (optional)">{{ old('customer_notes', $editMode && $adjustment ? $adjustment->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" 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($adjustment) ? 'Update Stock Adjustment' : 'Create Stock Adjustment' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Stock Adjustment 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">Stock Adjustment 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 Stock Adjustment</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() {
            // Initialize first product dropdown
            initializeProductSelect($('.product-select').first());

            @if(isset($adjustment))
                // Pre-populate form for edit mode
                $('#total_items').val('{{ count($items ?? []) }}');
                $('#total_price').val('${{ $adjustment->total_price ?? 0 }}');
                setTimeout(function() {
                    $('.product-row').remove();
                    @foreach($items ?? [] 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-3 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 available-quantity" name="available_qty[]" value="{{ intval($detail->available_qty ?? 0) }}" min="0" readonly required>
                                </div>
                                <div class="col-md-1 mb-2">
                                    <input type="number" class="form-control form-control-customr adjust-quantity" name="adjust_qty[]" value="{{ intval($detail->adjust_qty ?? 0) }}" required>
                                </div>
                                <div class="col-md-1 mb-2">
                                    <input type="number" class="form-control form-control-customr new-stock-qty" name="new_stock_qty[]" value="{{ intval($detail->new_stock_qty ?? 0) }}" readonly required>
                                </div>
                                <div class="col-md-1 mb-2">
                                    <input type="number" class="form-control form-control-customr product-price" name="price[]" value="{{ $detail->price ?? 0 }}" min="0"  required>
                                </div>
                                <div class="col-md-2 mb-2">
                                    <div class="row">
                                        <div class="col-10 pe-3">
                                            <input type="text" class="form-control form-control-customr product-remark" name="remark[]" value="{{ $detail->remark ?? '' }}" placeholder="Remark">
                                        </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($items ?? []) > 1 ? '' : 'd-none' }}">
                                                <i class="fa-regular fa-circle-xmark"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#product-list').append(productRow);
                        initializeProductSelect($('.product-row:last .product-select'));
                        
                        // Load product details for edit mode
                        (function(productId, $currentRow) {
                            $.ajax({
                                url: "{{ route('product.getQty', ':id') }}".replace(':id', productId),
                                success: function(response) {
                                    if (response) {
                                        var detailsHtml = '<div style="display: flex;text-align: left; font-size: 12px;">';
                                        detailsHtml += '<img src="' + (response.image_url || '/images/no-image.png') + '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
                                        detailsHtml += '<div><strong>' + response.name + '</strong><br>';
                                        detailsHtml += 'Category: ' + (response.category_name || '-') + ' | SKU: ' + (response.sku || '-') +  ' | Price: $' + (response.price || '0') + '</div>';
                                        detailsHtml += '</div>';
                                        $currentRow.find('.product-details').html(detailsHtml);
                                    }
                                }
                            });
                        })('{{ $detail->product_id }}', $('.product-row:last'));
                    @endforeach
                    calculateTotal();
                }, 500);
            @endif

            // Function to initialize product select
            function initializeProductSelect($select) {
                $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');

                // Reset adjust and new stock quantities when product changes
                $row.find('.adjust-quantity').val(0);
                $row.find('.new-stock-qty').val(0);
                $row.find('.product-price').val(0);

                // Get product details and quantity
                $.ajax({
                    url: "{{ route('product.getQty', ':id') }}".replace(':id', product.id),
                    type: "GET",
                    dataType: "json",
                    success: function(response) {
                        if (response) {
                            $row.find('.available-quantity').val(parseInt(response.qty));
                            $row.find('.product-price').val(response.price || 0);
                            
                            var detailsHtml =
                                '<div style="display: flex;text-align: left; font-size: 12px;">';
                            detailsHtml += '<img src="' + (response.image_url || '/images/no-image.png') +
                                '" class="rounded" style="margin-right: 10px;height: 40px;width: 40px;"/>';
                            detailsHtml += '<div><strong>' + response.name + '</strong><br>';
                            detailsHtml += 'Category: ' + (response.category_name || '-') + ' | SKU: ' + (response.sku || '-') + 
                                ' | Price: $' + (response.price || '0') + '</div>';
                            detailsHtml += '</div>';
                            $row.find('.product-details').html(detailsHtml);
                        } else {
                            $row.find('.available-quantity').val(0);
                            $row.find('.product-price').val(0);
                        }
                    },
                    error: function() {
                        console.error("Error fetching product details.");
                        $row.find('.available-quantity').val(0);
                        $row.find('.product-details').html('-');
                    }
                });

                calculateTotal();
            });

            // Calculate new stock on adjust quantity change
            $(document).on('input', '.adjust-quantity', function() {
                var $row = $(this).closest('.product-row');
                var available = parseFloat($row.find('.available-quantity').val()) || 0;
                var adjust = parseFloat($(this).val()) || 0;
                $row.find('.new-stock-qty').val(available + adjust);
                calculateTotal();
            });

            // Calculate total when price changes
            $(document).on('input', '.product-price', function() {
                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-3 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 available-quantity" name="available_qty[]" value="0" min="0" readonly required>
                        </div>
                        <div class="col-md-1 mb-2">
                            <input type="number" class="form-control form-control-customr adjust-quantity" name="adjust_qty[]" value="0" required>
                        </div>
                        <div class="col-md-1 mb-2">
                            <input type="number" class="form-control form-control-customr new-stock-qty" name="new_stock_qty[]" readonly value="0" required>
                        </div>
                        <div class="col-md-1 mb-2">
                            <input type="number" class="form-control form-control-customr product-price" name="price[]" value="0" min="0" required>
                        </div>
                        <div class="col-md-2 mb-2">
                            <div class="row">
                                <div class="col-10 pe-3">
                                    <input type="text" class="form-control form-control-customr product-remark" name="remark[]" placeholder="Remark">
                                </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');
                initializeProductSelect($newSelect);

                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 price = parseFloat($(this).find('.product-price').val()) || 0;
                
                if ($(this).find('.product-select').val()) {
                    totalItems += 1;
                    totalPrice += price;
                }
            });
            
            $('#total_items').val(totalItems);
            $('#total_price').val('$' + totalPrice.toFixed(2));
        }

        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 adjust = parseFloat($row.find('.adjust-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 adjustment quantity
                    if (adjust === 0) {
                        Botble.showError('Adjustment quantity cannot be 0 in row ' + rowNumber);
                        hasErrors = true;
                        return false;
                    }

                    // Validate product price
                    if (price <= 0) {
                        Botble.showError('Product price cannot be 0 or empty in row ' + rowNumber);
                        hasErrors = true;
                        return false;
                    }

                    validProducts++;
                } else if ($row.find('.adjust-quantity').val()) {
                    // Row has adjustment 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;
            }

            if (!$('#stock_adjustment_date').val()) {
                Botble.showError('Please select Stock Adjustment Date');
                return;
            }

            var formData = {
                stock_adjustment_number: $('#stock_adjustment_number').val(),
                stock_adjustment_date: $('#stock_adjustment_date').val(),
                total_items: $('#total_items').val(),
                total_price: $('#total_price').val().replace('$', ''),
                customer_notes: $('#customer_notes').val(),
                products: [],
                available_qty: [],
                adjust_qty: [],
                new_stock_qty: [],
                price: [],
                remark: [],
                _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.available_qty.push($(this).find('.available-quantity').val());
                    formData.adjust_qty.push($(this).find('.adjust-quantity').val());
                    formData.new_stock_qty.push($(this).find('.new-stock-qty').val());
                    formData.price.push($(this).find('.product-price').val());
                    formData.remark.push($(this).find('.product-remark').val());
                }
            });

            $.ajax({
                url: '{{ route('stock.adjustment.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');
            saveStockAdjustment();
        }

        function saveStockAdjustment() {
            var formData = {
                @if(isset($adjustment))
                    adjustment_id: {{ $adjustment->id }},
                @endif
                stock_adjustment_number: $('#stock_adjustment_number').val(),
                stock_adjustment_date: $('#stock_adjustment_date').val(),
                customer_notes: $('#customer_notes').val(),
                products: [],
                available_qty: [],
                adjust_qty: [],
                new_stock_qty: [],
                price: [],
                remark: [],
                _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.available_qty.push($(this).find('.available-quantity').val());
                    formData.adjust_qty.push($(this).find('.adjust-quantity').val());
                    formData.new_stock_qty.push($(this).find('.new-stock-qty').val());
                    formData.price.push($(this).find('.product-price').val());
                    formData.remark.push($(this).find('.product-remark').val());
                }
            });

            var url = @if(isset($adjustment)) '{{ route('stock.adjustment.store', $adjustment->id) }}' @else '{{ route('stock.adjustment.store') }}' @endif;
            
            $.ajax({
                url: url,
                method: 'POST',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        Botble.showSuccess('Stock Adjustment saved successfully!');
                        window.location.href = '{{ route('stock.adjustment.index') }}';
                    } else {
                        Botble.showError('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    Botble.showError('Error saving stock adjustment. Please try again.');
                }
            });

        }
    </script>
@endsection