@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-sm-12">
        <x-form id="save-requisition-form" method="POST" :action="route('product-requisitions.update', $Requisition->id)" enctype="multipart/form-data">
            @csrf
            @method('PUT') <!-- Adiciona o método PUT -->
            <div class="bg-white rounded">
                <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
                    @lang('app.edit') @lang('Produtos')
                </h4>

                <div class="row p-20">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-md-6">
                                <x-forms.text fieldId="name" :fieldLabel="__('Nome do Produto')" fieldName="name"
                                    fieldRequired="true" :fieldPlaceholder="__('placeholders.fatura')"
                                    :fieldValue="$Requisition->name">
                                </x-forms.text>
                            </div>

                            <div class="col-md-6">
                                <x-forms.file fieldId="image" :fieldLabel="__('Imagem do Produto')" fieldName="image">
                                    @if($Requisition->image)
                                        <img src="{{ asset($Requisition->image) }}" alt="Product Image" width="100">
                                    @endif
                                </x-forms.file>
                            </div>
                        </div>
                    </div>
                </div>

                <x-form-actions>
                    <x-forms.button-primary id="save-requisition-form-btn" class="mr-3" icon="check">
                        @lang('app.save')
                    </x-forms.button-primary>
                    <x-forms.button-cancel :link="route('product-requisitions.index')" class="border-0">
                        @lang('app.cancel')
                    </x-forms.button-cancel>
                </x-form-actions>
            </div>
        </x-form>
    </div>
</div>
@endsection

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('#save-requisition-form-btn').on('click', function(e) {
        e.preventDefault(); // Impede o envio padrão do formulário

        const url = "{{ route('product-requisitions.update', $Requisition->id) }}";

        var formData = new FormData($('#save-requisition-form')[0]);

        $.ajax({
            url: url,
            type: "POST", // Certifique-se de usar o método correto
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                $('#save-requisition-form-btn').prop('disabled', true);
                $('body').addClass('loading');
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = "{{ route('product-requisitions.index') }}";
                } else {
                    alert('Erro ao atualizar o registro.');
                    console.error(response);
                }
            },
            error: function(xhr) {
                alert('Ocorreu um erro ao atualizar o registro.');
                console.error(xhr.responseText);
            },
            complete: function() {
                $('#save-requisition-form-btn').prop('disabled', false);
                $('body').removeClass('loading');
            }
        });
    });
});
</script>