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

@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.add_sell_return')</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.add_sell_return')])
    <div class="row custom-row">
        <div class="col-md-6">
            <input type="text" id="invoice_input" class="form-control" 
                placeholder="@lang('sale.invoice_no')" autofocus>
        </div>
        @can('sell.update')
            <div class="col-md-3 custom-left">
                <input type="text" id="recent-transactions-search" class="form-control" 
                placeholder="@lang('lang_v1.invoice_no_for_partial_return')" autofocus style="">
             </div>
        @endcan
        
    </div>

    <br>

    <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 () {
    // 🔎 Press Enter to fetch invoice
    $('#invoice_input').on('keypress', function (e) {
        if (e.which === 13) {
            e.preventDefault();
            let invoiceNo = $(this).val().trim();
         
            if (invoiceNo !='') {
                   if ($('#invoice_number_table tbody tr').length > 15) {
                        toastr.warning('@lang('15 اقصى حد')');
                        return;
                    }
                $.ajax({
                    url: '/sells/invoice/return', // ✅ create this route/controller
                    type: 'GET',
                    data: { invoice_no: invoiceNo },
                    success: function (res) {
                        if (res.success) {
                            let exists = false;
                                $('#invoice_number_table tbody tr').each(function () {
                                    if ($(this).find('.invoice_no').val() === res.data.invoice_no) {
                                        exists = true;
                                        return false; // break loop
                                    }
                                });

                                if (exists) {
                                    toastr.warning('@lang('lang_v1.invoice_already_added')');
                                    $('#invoice_input').val('');
                                    return;
                                }
                            let row = `
                                <tr>
                                    <td>${res.data.invoice_no}</td>
                                    <td>${res.data.final_total}</td>
                                    <td>
                                        <input type="hidden" class="transaction_id" value="${res.data.id}">
                                        <input type="hidden" class="invoice_no" value="${res.data.invoice_no}">
                                        <button class="btn btn-danger btn-sm remove-row">X</button>
                                    </td>
                                </tr>
                            `;
                            $('#invoice_number_table tbody').append(row);
                            $('#invoice_input').val('');
                        } else {
                            toastr.error(res.message || 'Invoice not 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>
    .custom-row {
    display: flex;
    align-items: center; /* vertical align */
}

.custom-row .custom-left {
    margin-inline-start: auto; /* pushes it to the opposite side (RTL/LTR aware) */
}
</style>