@extends('layouts.app')
@section('title', __('lang_v1.find_invoice'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header no-print">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('lang_v1.find_invoice')</h1>
     @if (!empty($video) && auth()->user()->can('edu_videos.view'))
            @include('video.video_button', ['fileName' => $video ]) 
     @endif
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary', 'title' => __('lang_v1.find_invoice')])

    <div class="row ">
       <div class="col-md-5">
                <div class="form-group">
                  {!! Form::label('transaction_date', __('lang_v1.date') . ':*') !!}
						<div class="input-group">
							<span class="input-group-addon">
								<i class="fa fa-calendar"></i>
							</span>
							{!! Form::text('transaction_date', null, ['class' => 'form-control', 'required']); !!}
						</div>
                </div>
            </div>
      
        <div class="col-md-5">
               <div class="form-group">
                        {!! Form::label('product_ids', __('product.product_name') . ':') !!}
                        {!! Form::select('product_ids[]', [], null, [
                            'class' => 'form-control select2-product',
                            'id' => 'product_ids',
                            'multiple' => 'multiple',
                            'style' => 'width: 100%;',
                        ]) !!}
                   
                </div>
        </div>
        <div class="col-md-2 tw-mt-6">
        <div class="form-group full-btn">
                <button type="button" id="search">
                    {{ __('lang_v1.search') }}
                </button>
            </div>
        </div>
        
    </div>

 

    <table class="table table-bordered" id="invoice_number_table">
        <thead>
              <tr style="background-color: {{ session('business.theme_color') ?? '#007bff' }};">
                <th>@lang('sale.invoice_no')</th>
                <th>@lang('sale.total_amount')</th>
                 <th>@lang('messages.actions')</th>
               
            </tr>
        </thead>
        <tbody>
            <!-- Rows will be appended here -->
        </tbody>
    </table>

   
     <div class="tw-mt-4">
     
        <button id="add_sell_return" class="btn btn-success">@lang('lang_v1.add_sell_return')</button>
    </div>
    @endcomponent
     @include('video.video_modal') 
    <!-- Modals -->
     <div class="modal fade sell_return_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    </div>
    
</section>
@stop

@section('javascript')
<script>
$(document).ready(function () {
     $('.select2-product').select2({
                placeholder: '{{ __('lang_v1.search_product') }}',
                minimumInputLength: 1,
                ajax: {
                    url: '/select/search-product',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.products.map(product => ({
                                id: product.id,
                                text: product.name
                            }))
                        };
                    },
                    cache: true
                }
            });
     $('#transaction_date').datetimepicker({
            format: moment_date_format,
            ignoreReadonly: true,
        });
    $('#search').on('click', function (e) {
        e.preventDefault();

        let transactionDate = $('#transaction_date').val();
        let productIds = $('#product_ids').val(); // multiple select (array)

        if (!transactionDate && (!productIds || productIds.length === 0)) {
            toastr.warning('اختر التاريخ أو المنتجات للبحث');
            return;
        }

         $('#invoice_number_table tbody').empty();
        $.ajax({
            url: '/sells/find/invoice',
            type: 'GET',
            data: { 
                transaction_date: transactionDate,
                product_ids: productIds
            },
            success: function (res) {
              if (res.success && res.data && res.data.length > 0) {

                res.data.forEach(function(invoice) {
                    let exists = false;

                    $('#invoice_number_table tbody tr').each(function () {
                        if ($(this).find('.invoice_no').text() === invoice.invoice_no) {
                            exists = true;
                            return false;
                        }
                    });

                    if (exists) {
                        toastr.warning(`Invoice ${invoice.invoice_no} already added`);
                        return; // skip adding this invoice
                    }

                    let row = `
                        <tr>
                            <td class="invoice_no">${invoice.invoice_no}</td>
                            <td>${invoice.final_total}</td>
                           <td>
                                        <input type="hidden" class="transaction_id" value="${invoice.id}">
                                        <input type="hidden" class="invoice_no" value="${invoice.invoice_no}">
                                        <button class="btn btn-danger btn-sm remove-row">X</button>
                                    </td>
                        </tr>
                    `;
                    $('#invoice_number_table tbody').append(row);
                });

                } else {
                    toastr.error(res.message || 'No invoices found');
                }
            },
            error: function () {
                toastr.error('Failed to fetch invoice.');
            }
        });
    });
    $('#recent-transactions-search').on('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault(); // prevent form submit
            var term = $(this).val().trim();
            if (!term) return;

            // AJAX call to your Laravel route
            $.ajax({
                url: '/recent-transactions/search',
                type: 'GET',
                data: { q: term },
                dataType: 'json',
                success: function(data) {
                    if (data.id) {
                        // Redirect to the transaction
                        window.open('/sell-return/add/' + data.id, '_blank');
                    } else {
                        alert(LANG.not_found);
                    }
                },
                error: function() {
                    alert('Error searching transaction');
                }
            });

            $(this).val(''); // clear input after scan
        }
    });


    // ❌ remove row
    $(document).on('click', '.remove-row', function () {
        $(this).closest('tr').remove();
    });

    // 📌 Assign to contact
    $(document).on('click', '#add_sell_return', function () {
        const selectedRows = [];
        $('#invoice_number_table tbody tr').each(function () {
            selectedRows.push($(this).find('.transaction_id').val());
        });

        if (selectedRows.length > 0) {
            $.ajax({
                url: '/sell-return/add-multi-modal',
                type: 'GET',
                data: { 'transaction_ids[]': selectedRows },
                dataType: 'html',
                success: function (result) {
                    $('.sell_return_modal').html(result).modal('show');
                },
                error: function () {
                    toastr.error('Failed to load sell return assignment modal.');
                }
            });
        } else {
            toastr.error('@lang('lang_v1.select_one_row')');
        }
    });

  
});
</script>
@endsection
<style>
.full-btn {
    width: 100%;
}

.full-btn button {
    width: 100%;
    height: 30px; /* same as .form-control */
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
    background-color: {{ session('business.theme_color') ?? '#007bff' }};
    border: none;
}

</style>