@extends('layouts.sale')

@section('content')
    <div class="content-wrapper" ng-app="tutapos">
        <!-- Content Header (Page header) -->
        <section class="content-header m-3">
            <h1>Add Stock</h1>
        </section>
        <!-- Main content -->
        <section class="content" id="receivingContent">
            <div class="row">
                <div class="col-xs-12">
                    <!-- First Card: Installation Details -->
                    <div class="box box-success">
                        <div class="box-header">
                            <h3 class="box-title">Stock Details</h3>
                        </div>
                        <div class="box-body">
                            @include('partials.flash')
                            <div class="row" ng-controller="SearchItemCtrl">
                                <div class="col-sm-12">
                                    <form id="myForm" action="/stocks" method="POST">
                                        <div class="row justify-content-center py-4 px-2">
                                            <!-- Installation No. Field -->
                                            <div class="col-sm-3 text-center">
                                                <div class="form-group mb-3">
                                                    <label for="invoice" class="control-label d-block mb-2">Stock Entry
                                                        No.</label>
                                                    <input type="text" name="invoice_no"
                                                        class="form-control text-center mx-auto" id="invoice"
                                                        value="{{ $action == 'add' ? $invoice : $receiving->invoice_no }}"
                                                        readonly />
                                                </div>
                                            </div>
                                        


                                            <div class="col-md-3 offset-md-4 text-center">
                                                <div class="form-group">
                                                    <label for="installation_date">Purchase Date</label>
                                                    <input type="date" name="installation_date" class="form-control"
                                                        id="installation_date">
                                                </div>
                                            </div>

                                            <div class="col-md-3 offset-md-4 text-center">
                                                <div class="form-group">
                                                    <label for="installation_date">Total Amount</label>
                                                    <input type="text" name="total_amount" class="form-control"
                                                        id="total_amount">
                                                </div>
                                            </div>

                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Second Card: Product Selection -->
                    <div class="box box-success">
                        <div class="box-header">
                            <h3 class="box-title">Product Selection</h3>
                        </div>
                        <div class="box-body">
                            {{-- <div class=" text-center mb-4">
                                <span style="font-size:18px;">Kindly add the products needed for the new customer installation</span>
                            </div> --}}

                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th width="5%">S/No</th>
                                        <th class="hidden-xs" width="20%">Category Type</th>
                                        <th width="30%">Product Name</th>
                                        <th width="15%">Quantity</th>
                                        {{-- <th width="20%">Installation Date</th> --}}
                                           <th width="10%">Prices</th>
                                        <th width="10%">Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="stock_table"></tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            <a href="#" data-toggle="modal" data-target="#add_installation_products"
                                                class="btn " style="background-color: #0c3d55; color:white">
                                                <i class="fa fa-plus"></i> {{ __('Add Products') }}
                                            </a>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>

                            <div class="row mt-4">
                                <div class="col-md-12">
                                    <button id="submitinstallationBtn" type="button"
                                        class="btn btn-success btn-lg pull-right">
                                        <i class="fa fa-save"></i> Save Stock
                                    </button>
                                </div>
                            </div>

                            <!-- Product Modal -->
                            <div class="modal fade" id="add_installation_products" tabindex="-1" role="dialog"
                                aria-labelledby="myModalLabel">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">
                                                {{ __('Installation Item Details') }}</h4>
                                        </div>
                                        <div class="modal-body">
                                            <div class="row">
                                                <div class="col-12 col-md-6">
                                                    <div class="form-group">
                                                        <label for="category_id">Category</label>
                                                        <select class="form-control" name="category_id" id="category_id">
                                                            <option value="" selected>Select Category</option>
                                                            @foreach ($categories as $category)
                                                                <option value="{{ $category->id }}"
                                                                    data-name="{{ $category->name }}">
                                                                    {{ $category->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-6">
                                                    <div class="form-group row">
                                                        <label for="item_type" class="col-md-3 col-form-label">Item Type</label>
                                                        <div class="col-md-9">
                                                            <select id="item_type" name="item_type" class="form-control" required onchange="toggleItemSelection(this.value)">
                                                                <option value="new">New Item</option>
                                                                <option value="existing">Existing Item</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <hr>    
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <!-- Existing Item Selection (initially hidden) -->
                                                    <div class="form-group row" id="existingItemDiv" style="display: none;">
                                                        <label for="stock_dropdown" class="col-md-3 col-form-label">Search Item</label>
                                                        <div class="col-md-9">
                                                        <select id="stock_dropdown" class="form-control select2" name="stock_id">
                                                            <option value="">Select Item</option>
                                                            @foreach ($stocks as $stock)
                                                                <option value="{{ $stock->id }}" 
                                                                    data-name="{{ $stock->name }}"
                                                                    data-quantity="{{ $stock->quantity }}"
                                                                    data-description="{{ $stock->description }}"
                                                                    data-category="{{ $stock->category_id }}">
                                                                    {{ $stock->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- Item Name -->
                                                    <div class="form-group row">
                                                        <label for="name" class="col-md-3 col-form-label">Item Name</label>
                                                        <div class="col-md-9">
                                                            <input type="text" class="form-control" name="name" id="name" required />
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- Item Description -->
                                                    <div class="form-group row">
                                                        <label for="description" class="col-md-3 col-form-label">Short Description</label>
                                                        <div class="col-md-9">
                                                            <textarea name="description" id="description" class="form-control" required rows="3"></textarea>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <!-- Quantity -->
                                                    <div class="form-group row">
                                                        <label for="quantity" class="col-md-3 col-form-label">Quantity</label>
                                                        <div class="col-md-9">
                                                            <input type="number" class="form-control" name="quantity" id="quantity" value="0" min="0" />
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- Price -->
                                                    <div class="form-group row">
                                                        <label for="price" class="col-md-3 col-form-label">Price per unit</label>
                                                        <div class="col-md-9">
                                                            <input type="number" class="form-control" name="price" id="price" value="0" min="0" step="0.01" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <hr>
                                            <div class="text-center mt-3">
                                                <button id="add_stock_item" class="btn btn-success">
                                                    <i class="fa fa-plus"></i> Add Item
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </section>
    </div>
@endsection
@section('script')
    <script type="text/javascript" src="{{ asset('js/angular.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/recevings.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Initialize select2 if available
            try {
                $('.select2').select2({
                    width: '100%',
                    placeholder: 'Select an option'
                });
            } catch (e) {
                console.log('Select2 not available');
            }

            // Event delegation for the remove-item button
            $('#stock_table').on('click', '.remove-item', function() {
                $(this).closest('tr').remove();
                // Reindex the rows after deletion
                $('#stock_table tr').each(function(index) {
                    $(this).find('td:first').text(index + 1); // Update the row number
                });
            });

            // Increment and Decrement Quantity in Table Rows
            $('#stock_table').on('click', '.increment-row-quantity', function() {
                let quantityInput = $(this).closest('.input-group').find('.row-quantity');
                let currentValue = parseInt(quantityInput.val()) || 0;
                quantityInput.val(currentValue + 1);
            });

            $('#stock_table').on('click', '.decrement-row-quantity', function() {
                let quantityInput = $(this).closest('.input-group').find('.row-quantity');
                let currentValue = parseInt(quantityInput.val()) || 0;
                if (currentValue > 0) {
                    quantityInput.val(currentValue - 1);
                }
            });

            // Add item to table
            $('#add_stock_item').on('click', function (e) {
                e.preventDefault();

                let itemType = $('#item_type').val();
                let category_id = $('#category_id').val();
                let category_name = $('#category_id option:selected').text();
                let item_id = "";
                let item_name = "";
                let description = "";
                let quantity = $('#quantity').val();
                let price = $('#price').val();

                if (itemType === 'existing') {
                    item_id = $('#stock_dropdown').val();
                    if (item_id === "") {
                        alert("Please select an existing item.");
                        return;
                    }

                    item_name = $('#stock_dropdown option:selected').data('name');
                    description = $('#stock_dropdown option:selected').data('description');
                    category_id = $('#stock_dropdown option:selected').data('category');
                    category_name = $('#category_id option[value="' + category_id + '"]').text();
                } else {
                    item_name = $('#name').val();
                    description = $('#description').val();

                    if (!category_id || !item_name || !description || !quantity || !price) {
                        alert("Please fill all required fields for the new item.");
                        return;
                    }
                }

                if (quantity === "" || quantity < 0) {
                    alert("Please enter a valid quantity.");
                    return;
                }

                let rowCount = $('#stock_table tr').length + 1;

                // Build new row with increment/decrement buttons
                let newRow = `
                    <tr>
                        <td>${rowCount}</td>
                        <td style="display:none">${category_id}</td>
                        <td class="hidden-xs">${category_name}</td>
                        <td style="display:none">${item_id}</td>
                        <td>${item_name}</td>
                        <td>
                            <div class="input-group" style="max-width: 120px;">
                                <button type="button" class="btn btn-secondary btn-sm decrement-row-quantity">-</button>
                                <input type="number" class="form-control form-control-sm text-center row-quantity" name="items[${rowCount}][quantity]" value="${quantity}" min="0" />
                                <button type="button" class="btn btn-secondary btn-sm increment-row-quantity">+</button>
                            </div>
                        </td>
                        <td>${price}</td>
                        <td>
                            <button class="btn btn-xs btn-danger remove-item"><i class="fa fa-trash"></i></button>
                            <input type="hidden" name="items[${rowCount}][item_type]" value="${itemType}">
                            <input type="hidden" name="items[${rowCount}][category_id]" value="${category_id}">
                            <input type="hidden" name="items[${rowCount}][category_name]" value="${category_name}">
                            <input type="hidden" name="items[${rowCount}][item_id]" value="${item_id}">
                            <input type="hidden" name="items[${rowCount}][item_name]" value="${item_name}">
                            <input type="hidden" name="items[${rowCount}][description]" value="${description}">
                            <input type="hidden" name="items[${rowCount}][price]" value="${price}">
                        </td>
                    </tr>
                `;

                $('#stock_table').append(newRow);
                $('#add_installation_products').modal('hide');

                // Reset form fields
                $('#item_type').val('new');
                $('#category_id').val('');
                $('#stock_dropdown').val('').trigger('change');
                $('#name').val('');
                $('#description').val('');
                $('#quantity').val('0');
                $('#price').val('0');
                toggleItemSelection('new');
            });

            // Increment and Decrement Quantity in Modal
            $('#increment-quantity').on('click', function() {
                let quantityInput = $('#quantity');
                let currentValue = parseInt(quantityInput.val()) || 0;
                quantityInput.val(currentValue + 1);
            });

            $('#decrement-quantity').on('click', function() {
                let quantityInput = $('#quantity');
                let currentValue = parseInt(quantityInput.val()) || 0;
                if (currentValue > 0) {
                    quantityInput.val(currentValue - 1);
                }
            });

            // Handle stock dropdown change
            $('#stock_dropdown').on('change', function() {
                var selectedStock = $(this).find(':selected');
                $('#name').val(selectedStock.data('name') || '');
                $('#description').val(selectedStock.data('description') || '');
                $('#quantity').val(0); // Set to 0 for existing items
                $('#category_id').val(selectedStock.data('category') || '').trigger('change.select2');
            });

            // Submit form
            $('#submitinstallationBtn').click(function () {
                var staff_id = $('#staff_dropdown').val();
                var customer_id = $('#customer_dropdown').val();
                var installation_date = $('#installation_date').val();

                if (staff_id == "" || customer_id == "") {
                    $.notify({ message: "Please select both staff and customer." }, { type: 'danger' });
                    return;
                }

                if ($('#stock_table tr').length === 0) {
                    $.notify({ message: "Please add at least one product before submitting the request." }, { type: 'danger' });
                    return;
                }

                // Clear old hidden inputs to avoid duplicates
                $('#myForm input[type=hidden]').remove();

                var formData = {};

                $('#stock_table tr').each(function (index) {
                    var rowIndex = index + 1;

                    formData['item_' + rowIndex] = {
                        item_type: $(this).find('input[name$="[item_type]"]').val(),
                        category_id: $(this).find('input[name$="[category_id]"]').val(),
                        category_name: $(this).find('input[name$="[category_name]"]').val(),
                        item_id: $(this).find('input[name$="[item_id]"]').val(),
                        item_name: $(this).find('input[name$="[item_name]"]').val(),
                        description: $(this).find('input[name$="[description]"]').val(),
                        quantity: $(this).find('.row-quantity').val(),
                        price: $(this).find('input[name$="[price]"]').val()
                    };
                });

                // Append hidden inputs
                $.each(formData, function (key, value) {
                    $.each(value, function (field, fieldValue) {
                        $('#myForm').append($('<input>', {
                            type: 'hidden',
                            name: `formData[${key}][${field}]`,
                            value: fieldValue
                        }));
                    });
                });

                $('#myForm').submit();
            });
        });

        // Toggle between new and existing item selection
        function toggleItemSelection(selectedValue) {
            const existingItemDiv = document.getElementById('existingItemDiv');
            
            if (selectedValue === 'existing') {
                existingItemDiv.style.display = 'block';
            } else {
                existingItemDiv.style.display = 'none';
                
                // Clear fields if switching back to new item
                document.getElementById('name').value = '';
                document.getElementById('description').value = '';
                document.getElementById('quantity').value = '0';
                document.getElementById('price').value = '0';
            }
        }
    </script>
@endsection