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

@section('content')

<!-- Content Header -->
<section class="content-header">
    <div class="row">
        <div class="col-md-6">
            <h1>@lang('Stock Takes')
               
            </h1>
        </div>
        <div class="col-md-3"></div>
        <div class="col-md-3">
            <div class="">
                <br>
                <a class="btn btn-primary" href="{{ route('stocktake.stock') }}">Stock Take Records</a>
            </div>
        </div>
    </div>

    <meta name="csrf-token" content="{{ csrf_token() }}">
</section>

<style>
    #searchInput {
        border: 1px solid blue;
    }
    
    body {
        font-family: Arial, sans-serif;
    }
    
    .select-container {
        width: 100%;
        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;
    }
    
    .pagination-container {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    
    .pagination-info {
        padding-top: 7px;
    }
    
    .per-page-selector {
        width: auto;
        display: inline-block;
        margin-left: 10px;
    }
</style>

<!-- 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">
                        <div class="col-md-1"></div>

                        <!-- Location Filter -->
                        <div class="col-md-3" id="location_filter">
                            <div class="form-group">
                                {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                                {!! 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-2">
                            <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>

                        <!-- Brand Filter -->
                        <div class="col-md-2">
                            <div class="form-group">
                                {!! Form::label('brand_id', __('product.brand') . ':') !!}
                                {!! Form::select('brand_id', $brands, null, [
                                    'class' => 'form-control select2',
                                    'style' => 'width:100%',
                                    'id' => 'product_list_filter_brand_id',
                                    'placeholder' => __('lang_v1.all')
                                ]) !!}
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="productSearch" style="color:blue;">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>

                        <!-- 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>

    <!-- Product List Container -->
    <div class="box box-primary mt-1">
        <div class="box-header with-border">
            <h3 class="box-title">@lang('Products')</h3>
        </div>

        <!-- Stock Count Form -->
        <form action="{{ route('stocktake.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) }}">
            <div id="product-list-container"></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">
            <!-- Per Page Selector -->
            <div class="row" style="margin-bottom: 15px;">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Show per page:</label>
                        <select id="per_page_selector" class="form-control per-page-selector">
                            <option value="25" {{ isset($perPage) && $perPage == 25 ? 'selected' : '' }}>25</option>
                            <option value="50" {{ isset($perPage) && $perPage == 50 ? 'selected' : '' }}>50</option>
                            <option value="100" {{ isset($perPage) && $perPage == 100 ? 'selected' : '' }}>100</option>
                            <option value="200" {{ isset($perPage) && $perPage == 200 ? 'selected' : '' }}>200</option>
                            <option value="500" {{ isset($perPage) && $perPage == 500 ? 'selected' : '' }}>500</option>
                            <option value="1000" {{ isset($perPage) && $perPage == 1000 ? 'selected' : '' }}>1000</option>
                            <option value="all" {{ isset($perPage) && $perPage == PHP_INT_MAX ? 'selected' : '' }}>All</option>
                        </select>
                    </div>
                </div>
            </div>

            <div id="product-list-containerr">
                @include('stocktake.partials.product_list', ['products' => $products, 'perPage' => $perPage ?? 25])
            </div>
        </div>
    </div>
</section>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const input = document.getElementById("searchInput");
    const dropdown = document.getElementById("dropdown");
    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.trim().toLowerCase();

        // If input is empty, hide dynamic table and show existing product list
        if (searchTerm === "") {
            document.getElementById("stock-count-form").style.display = "none";
            document.getElementById("existing-product-list").style.display = "block";
            // Reload the regular product list with pagination
            applyFilters(true);
            return;
        }

        if (searchTerm.length < 2) {
            dropdown.style.display = "none";
            return;
        }

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

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

                    div.addEventListener("click", function () {
                        input.value = product.product_name;
                        dropdown.style.display = "none";

                        document.getElementById("stock-count-form").style.display = "block";
                        document.getElementById("existing-product-list").style.display = "none";

                        addProductToTable(product);
                    });

                    dropdown.appendChild(div);
                });

                if (products.length > 0) {
                    dropdown.style.display = "block";
                } else {
                    dropdown.style.display = "none";
                }
            },
            error: function (xhr) {
                console.error('Error fetching products:', xhr.responseText);
            }
        });
    });
});

let rowIndex = 1;

function addProductToTable(product) {
    const selectedLocationId = document.getElementById('product_list_filter_location_id').value;
    const selectedLocationName = $('#product_list_filter_location_id option:selected').text();
    document.getElementById('location_id').value = selectedLocationId;

    let table = document.getElementById("product-list-table");

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

        const thead = document.createElement("thead");
        const headerRow = document.createElement("tr");

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

        headers.forEach(headerText => {
            const th = document.createElement("th");
            th.innerHTML = headerText;
            headerRow.appendChild(th);
        });

        thead.appendChild(headerRow);
        table.appendChild(thead);

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

        document.getElementById("product-list-container").appendChild(table);
    }

    const row = document.createElement("tr");

    row.innerHTML = `
        <td>${rowIndex}</td>
        <td style="display:none;">${product.id}</td>
        <td>${product.product_name}</td>
        <td>${selectedLocationName}</td>
        <td>
            <input type="number" class="form-control stock_count_input" step="any" name="stock_counts[${product.id}]" value="0" min="0" style="width:200px;">
        </td>
        <td>${product.sku}</td>
        <td>
            <button type="button" class="btn btn-danger btn-sm remove-product-btn">Remove</button>
        </td>
    `;

    rowIndex++;

    table.querySelector("tbody").appendChild(row);

    row.querySelector(".remove-product-btn").addEventListener("click", function() {
        row.remove();
        const rows = table.querySelectorAll("tbody tr");
        rows.forEach((r, i) => {
            r.querySelector("td:first-child").textContent = i + 1;
        });
        rowIndex = rows.length + 1;
    });
}
</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();
        var brand_id = $('#product_list_filter_brand_id').val();
        var per_page = $('#per_page_selector').val();
        var page = $('.pagination .active span').text() || 1;

        if (!category_id && !location_id && !brand_id && !autoSubmit) {
            return;
        }

        $.ajax({
            url: '{{ route('stocktake.index') }}',
            method: 'GET',
            data: {
                category_id: category_id,
                location_id: location_id,
                brand_id: brand_id,
                apply_filters: true,
                per_page: per_page,
                page: page,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                $('#product-list-containerr').html(response.html);
                attachPaginationEvents();
            }
        });
    }

    function attachPaginationEvents() {
        $('.pagination a').off('click').on('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            var page = getPageFromUrl(url);
            
            $.ajax({
                url: '{{ route('stocktake.index') }}',
                method: 'GET',
                data: {
                    category_id: $('#product_list_filter_category_id').val(),
                    location_id: $('#product_list_filter_location_id').val(),
                    brand_id: $('#product_list_filter_brand_id').val(),
                    apply_filters: true,
                    per_page: $('#per_page_selector').val(),
                    page: page,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#product-list-containerr').html(response.html);
                    attachPaginationEvents();
                    window.history.pushState({}, '', updateQueryStringParameter(window.location.href, 'page', page));
                }
            });
        });
    }

    function getPageFromUrl(url) {
        var match = url.match(/[?&]page=(\d+)/);
        return match ? match[1] : 1;
    }

    function updateQueryStringParameter(uri, key, value) {
        var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
        var separator = uri.indexOf('?') !== -1 ? "&" : "?";
        if (uri.match(re)) {
            return uri.replace(re, '$1' + key + "=" + value + '$2');
        } else {
            return uri + separator + key + "=" + value;
        }
    }

    // Initialize select2
    $('#product_list_filter_category_id, #product_list_filter_location_id, #product_list_filter_brand_id').select2();

    // Handle per page change
    $('#per_page_selector').on('change', function() {
        applyFilters(true);
    });

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

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

    // Initialize with "All" as default for category
    if (!$('#product_list_filter_category_id').val()) {
        $('#product_list_filter_category_id').val('').trigger('change');
    }

    // Attach pagination events on initial load
    attachPaginationEvents();
});
</script>


@endsection