@extends('layouts.app')
@section('title', __('Stock Request'))

@section('content')

<!-- Content Header -->
<section class="content-header">
    <h1>@lang('Stock Request')
        <small>@lang('New Stock Request')</small>
    </h1>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</section>

<!-- Main Content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
           <div class="box box-primary">
		    
            <br>
            <!-- Filters -->
            <form id="filter-form" style="margin:-10px 0">
                <div class="row">
                                   
                    
                    		<!-- Location Filter -->
		<div class="col-md-3" id="location_filter">
		    <div class="form-group">
		        {!! Form::label('location_id', __('Request From') . ':') !!}
		        {!! Form::select('request_from', $business_locations, null, [
		            'class' => 'form-control select2', 
		            'style' => 'width:100%', 
		            'id' => 'request_location',
		            'placeholder' => __('')
		        ]) !!}
		    </div>
		</div>
                    
		<!-- Location Filter -->
		<div class="col-md-3" id="location_filter">
		    <div class="form-group">
		        {!! Form::label('location_id', __('Request To') . ':') !!}
		        {!! Form::select('location_id', $business_locations, null, [
		            'class' => 'form-control select2', 
		            'style' => 'width:100%', 
		            'id' => 'product_list_filter_location_id',
		            'placeholder' => __('')
		        ]) !!}
		    </div>
		</div>
                    
                    <!-- Category Filter -->
                    <div class="col-md-3">
                        <div class="form-group">
                            {!! Form::label('category_id', __('product.category') . ':') !!}
                            {!! Form::select('category_id', $categories, null, [
                                'class' => 'form-control select2', 
                                'style' => 'width:100%', 
                                'id' => 'product_list_filter_category_id',
                                'placeholder' => __('lang_v1.all')
                            ]) !!}
                        </div>
                    </div>

		<div class="col-md-3">
	    <div class="form-group">
	        <label for="productSearch">Search Products:</label>
	        <div class="select-container">
	            <input type="text" id="searchInput" class="select-input" placeholder="Search products..." autocomplete="off">
	            <div id="dropdown" class="select-dropdown"></div>
	        </div>
	    </div>
	</div>

		
		    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .select-container {
            width: 200px;
            position: relative;
        }
        .select-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .select-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            border: 1px solid #ccc;
            border-top: none;
            max-height: 150px;
            overflow-y: auto;
            background-color: white;
            display: none;
            z-index: 999;
        }
        .select-dropdown div {
            padding: 8px;
            cursor: pointer;
        }
        .select-dropdown div:hover {
            background-color: #f1f1f1;
        }
    </style>
    
    <script>
 document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("searchInput");
    const dropdown = document.getElementById("dropdown");
    const productListContainer = document.getElementById("product-list-container");  // Target the product list container

    let isFirstProductAdded = false;

    // Show dropdown when user focuses on the input
    input.addEventListener("focus", function () {
        dropdown.style.display = "block";
    });

    // Hide dropdown when clicked outside
    document.addEventListener("click", function (e) {
        if (!dropdown.contains(e.target) && e.target !== input) {
            dropdown.style.display = "none";
        }
    });

    // Inside the input event listener for product search
input.addEventListener("input", function () {
    const searchTerm = input.value.toLowerCase();

    if (searchTerm.length < 2) {
        dropdown.style.display = "none";  // Hide if search term is too short
        return;
    }

    // Make an AJAX request to fetch matching products
    $.ajax({
        url: '{{ route('stockrequest.index') }}',
        method: 'GET',
        data: {
            search: searchTerm,
            _token: $('meta[name="csrf-token"]').attr('content') // CSRF token
        },
        success: function (response) {
            const products = response.products; // Assuming response returns products array
            dropdown.innerHTML = '';  // Clear existing dropdown options

            // Populate the dropdown with product names
            products.forEach(function (product) {
                const div = document.createElement("div");
                div.classList.add("option");
                div.textContent = product.product_name;
                div.setAttribute("data-value", product.id);

                // Add click event to select product
                div.addEventListener("click", function () {
                    input.value = product.product_name; // Set input value to selected product name
                    dropdown.style.display = "none"; // Hide dropdown

                    // Show the stock count form and hide the existing product list
                    document.getElementById("stock-count-form").style.display = "block";
                    document.getElementById("existing-product-list").style.display = "none";

                    // If this is the first product added, clear the initial table data
                    if (!isFirstProductAdded) {
                        productListContainer.innerHTML = '';  // Clear the initial data in the table
                        isFirstProductAdded = true;  // Mark that we've added the first product
                    }

                    // Add the product to the table
                    addProductToTable(product);
                });

                dropdown.appendChild(div);
            });

            dropdown.style.display = "block"; // Show dropdown if there are results
        },
        error: function (xhr) {
            console.error('Error fetching products:', xhr.responseText);
        }
    });
});
    
let rowIndex = 1; // Initialize the row index

function addProductToTable(product) {
    // Get the selected location name and ID
    const selectedLocationId = document.getElementById('product_list_filter_location_id').value;
    const selectedLocationName = $('#product_list_filter_location_id option:selected').text();

    // Update the location_id in the form with the selected location
    document.getElementById('location_id').value = selectedLocationId;

    // Check if the table exists, if not create it.
    let table = document.getElementById("product-list-table");

    if (!table) {
        // Create the table element
        table = document.createElement("table");
        table.classList.add("table", "table-bordered", "table-striped", "table-hover");
        table.id = "product-list-table";

        // Create the table header
        const thead = document.createElement("thead");
        const headerRow = document.createElement("tr");

        // Define table headers
        const headers = [
            "#",
            "@lang('sale.product')",
            "@lang('purchase.business_location')",
            "@lang('Stock Count')",          
            "@lang('product.sku')"
        ];

        // Create and append header columns
        headers.forEach(headerText => {
            const th = document.createElement("th");
            th.innerHTML = headerText;
            headerRow.appendChild(th);
        });

        // Append the header row to the table
        thead.appendChild(headerRow);
        table.appendChild(thead);

        // Create table body
        const tbody = document.createElement("tbody");
        table.appendChild(tbody);

        // Append the table to the product-list-container
        document.getElementById("product-list-container").appendChild(table);
    }

    // Create a new row with the selected product's details
    const row = document.createElement("tr");

    row.innerHTML = `
        <td>${rowIndex}</td> <!-- Index of the row -->
        <td style="display:none;">${product.id}</td> <!-- Product ID, hidden -->
        <td>${product.product_name}</td>
        <td>${selectedLocationName}</td> <!-- Location name -->
        <td>
            <input type="number" class="form-control stock_count_input" name="stock_counts[${product.id}]" value="0" min="0" style="width:200px;">
        </td>
        <td>${product.sku}</td>
    `;

    // Increment row index
    rowIndex++;

    // Append the new row to the table body
    table.querySelector("tbody").appendChild(row);
}


    // Hide dropdown if clicked outside
    document.addEventListener("click", function (e) {
        if (!dropdown.contains(e.target) && e.target !== input) {
            dropdown.style.display = "none";
        }
    });
    
    
    
});
</script>
	
	                    <!-- Filter Button -->
                    <div class="col-md-3" style="display:none;">
                        <button type="button" id="apply_filters" class="btn btn-primary" style="margin-top: 25px;">
                            @lang('Apply Filters')
                        </button>
                    </div>
                </div>
                
                
                
            </form>
	
	</div>
            
        </div>
    </div>
<div class="adb mb-5" style="margin-left:800px;">
    <a class="btn btn-primary" href="{{ route('stockrequest.stock') }}">Stock Request Records</a>
</div>
<!-- Product List Container -->
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">@lang('Products')</h3>
    </div>
    
    <!-- Stock Count Form -->
<form action="{{ route('stockrequest.submit') }}" method="POST" id="stock-count-form" style="display: none;">
    @csrf
    <input type="hidden" name="location_id" id="location_id" value="{{ old('location_id', 0) }}"> <!-- The location ID, set dynamically -->

    <!-- Product List Table -->
    <div id="product-list-container">
        <!-- Table will be appended here dynamically with product rows -->
    </div>

<div style="display: flex; margin-left:350px; width: 100%;">
    <button  type="submit" class="btn btn-primary">Submit Stock Count</button>
    </div>
    <br>
</form>

    
    <div class="box-body" id="existing-product-list">
        <div id="product-list-containerr">
            @include('stockrequest.partials.product_list', ['products' => collect()]) <!-- Empty initially -->
        </div>
    </div>
</div>

</section>

<!-- jQuery (Ensure it loads before script runs) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script>
$(document).ready(function () {

    function applyFilters(autoSubmit = false) {
        var category_id = $('#product_list_filter_category_id').val();
        var location_id = $('#product_list_filter_location_id').val();
        

        if (!category_id && !location_id && !autoSubmit) {
            return; // Don't submit if nothing is selected
        }

        $.ajax({
            url: '{{ route('stockrequest.index') }}',
            method: 'GET',
            data: {
                category_id: category_id,
                location_id: location_id,
                apply_filters: true,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function () {
                $('#apply_filters').prop('disabled', true).text('Filtering...');
            },
            success: function (response) {
                $('#product-list-containerr').html(response.html);
            },
            error: function (xhr) {
                console.log(xhr.responseText);
                //alert('Error fetching product data.');
            },
            complete: function () {
                $('#apply_filters').prop('disabled', false).text('Apply Filters');
            }
        });
    }

    // Simulate selection of the first option after "all" if "all" is selected
    function simulateSelectionAfterAll() {
        var categorySelect = $('#product_list_filter_category_id');
        var locationSelect = $('#product_list_filter_location_id');
        var requestFromSelect = $('#request_location'); // <-- Added line
    
        // For Category filter
        if (categorySelect.val() === null || categorySelect.val() === '') {
            categorySelect.val(categorySelect.find('option:not([value=""])').first().val()).trigger('change');
        }
    
        // For Location filter
        if (locationSelect.val() === null || locationSelect.val() === '') {
            locationSelect.val(locationSelect.find('option:not([value=""])').first().val()).trigger('change');
        }
    
        // For Request From filter
        if (requestFromSelect.val() === null || requestFromSelect.val() === '') {
            requestFromSelect.val(requestFromSelect.find('option:not([value=""])').first().val()).trigger('change');
        }
    }


    // Auto-submit on filter change
    $('#product_list_filter_category_id, #product_list_filter_location_id').on('change', function () {
        applyFilters(true); // Auto-submit when filter changes
    });

    // Manual filter button
    $('#apply_filters').on('click', function () {
        applyFilters(false);
    });

    // Simulate the selection after "all" on page load
    simulateSelectionAfterAll();

});
</script>


@endsection