@extends('layouts.master')

@section('title')
{{ __('home.sales') }}
@stop

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header" style="background-color: #23395D;">
                <h4 class="card-title text-white mb-0">
                    <i class="fa-solid fa-rotate-left"></i>&nbsp; استرجاع فاتورة تفصيل
                </h4>
            </div>

            <div class="card-body">
                <div class="row align-items-end">
                    <div class="col-md-4">
                        <label for="invoice_id_search" style="color:#FF4F1F; font-weight:600;">
                            {{ __('home.Invoice_no') }}
                        </label>
                        <input type="number" id="invoice_id_search" class="form-control"
                               placeholder="{{ __('home.Invoice_no') }}">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-block" id="search_invoice_btn"
                                style="background-color:#23395D; color:#fff;">
                            <i class="fa-solid fa-magnifying-glass"></i>&nbsp; {{ __('home.search') }}
                        </button>
                    </div>
                </div>

                <hr>

                <div id="invoice_details_div">
                    <div class="text-center text-muted py-4" id="empty_state">
                        من فضلك أدخل رقم الفاتورة واضغط بحث
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading overlay بسيط -->
<div id="return_loading" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,.7); z-index:9999;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);">
        <div class="spinner-border" style="color:#23395D;" role="status"></div>
    </div>
</div>
@endsection

@section('js')
<script>
$('#search_invoice_btn').click(function() {
    searchInvoiceForReturn();
});

$('#invoice_id_search').keypress(function(e) {
    if (e.which == 13) {
        searchInvoiceForReturn();
    }
});

function searchInvoiceForReturn() {
    var id = $('#invoice_id_search').val();
    if (!id) {
        alert('من فضلك أدخل رقم الفاتورة');
        return;
    }

    $('#return_loading').show();

    $.ajax({
        url: "{{ URL::to('search_invoice_for_return') }}/" + id,
        type: "GET",
        dataType: "html",
        success: function(data) {
            $('#return_loading').hide();
            $('#invoice_details_div').html(data);
        },
        error: function(response) {
            $('#return_loading').hide();
            var msg = response.responseJSON?.error ?? 'حدث خطأ، تأكد من رقم الفاتورة';
            $('#invoice_details_div').html(
                '<div class="alert alert-danger text-center">' + msg + '</div>'
            );
        }
    });
}

$(document).on('click', '#confirm_return_invoice', function() {
    var id = $(this).data('id');
    if (!confirm('متأكد إنك عايز تسترجع الفاتورة دي؟ العملية دي لا يمكن التراجع عنها.')) return;

    $('#return_loading').show();

    $.ajax({
        url: "{{ URL::to('return_invoice') }}/" + id,
        type: "POST",
        data: { _token: "{{ csrf_token() }}" },
        dataType: "json",
        success: function(data) {
            $('#return_loading').hide();
            alert(data.message);
            $('#invoice_details_div').html(
                '<div class="text-center text-muted py-4">من فضلك أدخل رقم الفاتورة واضغط بحث</div>'
            );
            $('#invoice_id_search').val('');
        },
        error: function(response) {
            $('#return_loading').hide();
            alert(response.responseJSON?.error ?? 'خطأ');
        }
    });
});
</script>
@endsection