@extends('layouts.app')
@php
    $heading = __('product.stock_takes');
@endphp

@section('title', $heading)

@section('content')
    @include('layouts.partials.breadcrumb', [
        'page_title' => __('product.manage_stock_takes'),
        'bread_crumbs' => [
            ['title' => __('user.dashboard'), 'url' => ''],
            ['title' => __('product.stock_takes'), 'url' => '']
        ]
    ])

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                @component('components.filters', ['title' => __('report.filters')])
                    <div class="row filters">
                        <div class="col-md-3">
                            <div class="form-group">
                                {!! Form::label('list_filter_date_range', __('report.date_range') . ':',['class'=>'form-label']) !!}
                                {!! Form::text('list_filter_date_range', null, ['placeholder' => __('app.select_a_date_range'), 'class' => 'form-control', 'readonly']); !!}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <div class="form-group">
                                    {!! Form::label('stocktake_status',  __('sale.status') . ':',['class'=>'form-label']) !!}
                                    {!! Form::select('stocktake_status', ['pending' => __('cash_register.pending'), 'approved' => __('cash_register.approved')], null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('report.all')]); !!}
                                </div>
                            </div>
                        </div>
                    </div>



                @endcomponent
            </div>
        </div>
        <div class="row">
            <div class="col-12">

                <div class="box">
                    @component('components.widget', ['class' => 'box-body', 'title' => __('product.manage_stock_takes')])
                        <input type="hidden" id="stock_take_type" value="recorded">
                        @slot('tool')
                            <div class="box-tools">
                                <a class="btn btn-block btn-primary" href="{{ route('stocktakes.due') }}">
                                    <i class="fa fa-view"></i> @lang( 'product.view_due_stock_takes' )</a>
                            </div>
                        @endslot
                        @include('layouts.partials.datatable', [
                            'tableId' => 'stocktake_table',
                            'columns' => [
                                ['data' => 'select', 'title' => '<input type="checkbox" id="select_all" />', 'orderable' => false, 'searchable' => false],
                                ['data' => 'date', 'title' => __('messages.Date'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'item_code', 'title' => __('product.sku'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'item_name', 'title' => __('sale.product'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'category', 'title' => __('product.category'), 'orderable' => true, 'searchable' => true],

                                ['data' => 'frequency', 'title' => __('messages.ST-Frequency'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'electronic_qty', 'title' => __('messages.Electronic-QTY'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'physical_qty', 'title' => __('messages.Physical-QTY'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'difference', 'title' => __('messages.difference-QTY'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'selling_price', 'title' => __('product.selling_price'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'counted_by', 'title' => __('messages.Counted-BY'), 'orderable' => true, 'searchable' => true],

                                ['data' => 'comments', 'title' => __('messages.ST-Comments'), 'orderable' => false, 'searchable' => true],
                                ['data' => 'updated_at', 'title' => __('messages.Updated-Date/Time'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'approved_by', 'title' => __('messages.Approved-By'), 'orderable' => true, 'searchable' => true],
                                ['data' => 'approved_at', 'title' => __('messages.Approved-at'), 'orderable' => true, 'searchable' => true],

                            ],
                            'ajaxUrl' => route('stocktakes.index'), // Adjust the URL based on your route
                            'button' => true, // Adjust the URL based on your route
                            'defaultOrder' => [[1, 'desc']],
                        ])
                    @endcomponent
                        <!-- Add the "Approve Selected" button in the footer -->
                        <div class="box-footer">
                            <button id="approve_selected" class="btn btn-success">
                                Approve Selected
                            </button>
                        </div>
                </div>
                <!-- /.box -->

            </div>
        </div>
        <!-- /.row -->
    </section>
    <style>
        .highlight-row {
            background-color: #f8d7da;  /* Light red background */
            color: #721c24;  /* Dark red text */
        }
        .select-stocktake{
            opacity: 1;
        }
        [type="checkbox"]:not(:checked), [type="checkbox"]:checked {
            opacity: 1 !important;
            left: 0;
        }
    </style>
@endsection

@section('javascript')
    @parent
    <script type="text/javascript">
        $(document).ready(function() {
            // Custom JS for this page (if needed)
            dateRangeSettings.startDate = moment();
            dateRangeSettings.endDate = moment();

            // Check if start_date and end_date are available in the URL query parameters
            const urlParams = new URLSearchParams(window.location.search);
            const startDateParam = urlParams.get('start_date');
            const endDateParam = urlParams.get('end_date');


            // If the parameters are available, set the date range picker values
            if (startDateParam && endDateParam) {
                const startDate = moment(startDateParam);  // Convert start_date to a moment object
                const endDate = moment(endDateParam);  // Convert end_date to a moment object

                // Ensure start_date is less than or equal to end_date
                if (startDate.isAfter(endDate)) {
                    // If start date is after end date, set the start date to be the same as the end date
                    endDate = startDate;
                }


                dateRangeSettings.startDate = startDate;
                dateRangeSettings.endDate = endDate;
                const today = moment(); // Get current date using moment()
                // Ensure end_date is not greater than the current date
                if (endDate.isAfter(today)) {
                    // If end_date is in the future, set it to today's date
                    dateRangeSettings.endDate = moment();
                }

                $('#list_filter_date_range').daterangepicker(
                    dateRangeSettings,
                    function (start, end) {
                        $('#list_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));

                        datatable.ajax.reload();
                    }
                );
            } else {
                // If no date parameters are available, default to today's date
                dateRangeSettings.startDate = moment();
                dateRangeSettings.endDate = moment();
                $('#list_filter_date_range').daterangepicker(
                    dateRangeSettings,
                    function (start, end) {
                        $('#list_filter_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));

                        datatable.ajax.reload();
                    }
                );
            }





            sale_report_table = $('#due_stock_table').DataTable({
                processing: true,
                serverSide: true,
                bPaginate: true,
                lengthMenu: [10, 25, 50, 100],
                pageLength: 10,
                pagingType: 'simple_numbers',
                buttons: [],
                ajax: {
                    url: '{{ route('stocktakes.due') }}', // URL to your `dueForStockTake` function
                    data: function(d) {

                        // Add the date range filter parameters to the DataTable's AJAX request
                        if($('#list_filter_date_range').val()) {
                            var start = $('#list_filter_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                            var end = $('#list_filter_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
                            d.start_date = start;
                            d.end_date = end;
                        }
                        // Add status filter parameter
                        d.status = $('#stocktake_status').val() || '';
                        console.log('Sent to server:', d); // 👈 add this line
                    }
                },
                columns: [
                    { data: 'select', title: '<input type="checkbox" class="select_row" />', orderable: false, searchable: false },
                    { data: 'name', title: '{{ __("product.product_name") }}', orderable: true, searchable: true },
                    { data: 'item_code', title: '{{ __("product.sku") }}', orderable: true, searchable: true },
                    { data: 'frequency', title: '{{ __("product.stock_take_frequency") }}', orderable: true, searchable: true },
                    { data: 'last_stock_take_date', title: '{{ __("product.last_stock_take_date") }}', orderable: true, searchable: true },
                    { data: 'pending_stock_take_dates', title: '{{ __("product.pending_stock_take_date") }}', orderable: true, searchable: true },
                    { data: 'action', title: '{{ __("messages.action") }}', orderable: false, searchable: false }
                ],
                order: [[4, 'asc']], // Default ordering by next stock take date
                "fnDrawCallback": function (oSettings) {
                    __currency_convert_recursively($('#due_stock_table'));
                }
            });

            $(document).on('change', '#sell_list_filter_location_id, #sell_list_filter_customer_id, #sell_list_filter_payment_status, #created_by, #service_staffs', function() {
                data.ajax.reload();
            });
            $('#stocktake_statusi').change(function() {
                datatable.ajax.reload();
            });
        });

        $(document).ready(function() {
            // Select/Deselect all rows when header checkbox clicked
            $(document).on('click', '#select_all', function() {
                let isChecked = $(this).prop('checked');
                $('.select-stocktake:not(:disabled)').prop('checked', isChecked);
            });

            // Sync header checkbox state when any row checkbox changes
            $(document).on('change', '.select-stocktake', function() {
                let allEligible = $('.select-stocktake:not(:disabled)').length;
                let allChecked = $('.select-stocktake:not(:disabled):checked').length;

                $('#select_all').prop('checked', allEligible > 0 && allEligible === allChecked);
            });

            // Handle bulk approve
            $('#approve_selected').on('click', function() {
                let selectedIds = [];
                $('.select-stocktake:checked').each(function() {
                    if (!$(this).prop('disabled')) {
                        selectedIds.push($(this).val());
                    }
                });
                if (selectedIds.length === 0) {
                    showToast("Please select at least one unapproved Stock Take.", 'warning');
                    return;
                }
                if (selectedIds.length > 0) {
                    $.ajax({
                        url: '{{ route("stocktakes.bulk-approve") }}',
                        method: 'POST',
                        data: {
                            stock_take_ids: selectedIds,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                showToast(response.msg, 'success');
                                $('#stocktake_table').DataTable().ajax.reload(() => {
                                    $('#select_all').prop('checked', false); // reset
                                });
                            } else {
                                showToast(response.msg ?? "Error approving stock takes.", 'error');
                            }
                        },
                        error: function() {
                            showToast("Something went wrong. Please try again.", 'error');
                        }
                    });
                } else {
                    showToast("Please select at least one item to approve");
                }
            });
        });

    </script>
@endsection