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

@section('content')

<!-- Content Header -->
<section class="content-header">
    <h1>@lang('Generate Current Stock')
        <small>@lang('')</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">
                <div class="col-md-2"></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-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>

                <!-- Filter Button -->
                <div class="col-md-3">
                   <!-- Print to PDF Button -->
<button id="print-pdf-btn" class="btn btn-primary" style="margin-top: 25px;">Print to PDF</button>

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

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

<!-- Product List Container -->
<div class="box box-primary">
    <div class="box-header with-border">
        <h3 class="box-title">@lang('Products')</h3>
    </div>
    <div class="box-body">
        <div id="product-list-container">
            @include('stocktake.partials.currentstock_list', ['products' => collect()]) <!-- Empty initially -->
        </div>
    </div>
</div>


</section>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />

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

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.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('stocktake.current_stock') }}',
            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-container').html(response.html);
            },
            error: function (xhr) {
                console.log(xhr.responseText);
            },
            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');

        // 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');
        }
    }

    // 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();

    // Print to PDF
    $('#print-pdf-btn').on('click', function() {
        var iframe = document.createElement('iframe');
        iframe.style.display = 'none';  // Hide iframe
        document.body.appendChild(iframe);

        var content = document.getElementById('product-list-container').innerHTML;

        // Add current date/time to the header
        var currentDateTime = new Date().toLocaleString();

        var htmlContent = `
            <html>
            <head>
                <style>
                    body { font-family: Arial, sans-serif; margin: 20px; }
                    .header { text-align: center; margin-bottom: 20px; }
                    .header h1 { margin: 0; }
                    .content { margin-top: 20px; }
                </style>
            </head>
            <body>
                <div class="header">
                    <h1>Current Stock</h1>
                    <p>Generated on: ${currentDateTime}</p>
                </div>
                <div class="content">
                    ${content}
                </div>
            </body>
            </html>
        `;

        iframe.contentWindow.document.open();
        iframe.contentWindow.document.write(htmlContent);
        iframe.contentWindow.document.close();

        iframe.contentWindow.print();
    });
});
</script>

@endsection