@extends('layouts.app')

@section('content')
<div class="row">
    <div class="col-sm-12">
        <x-form id="save-requisition-form" method="PUT" :action="route('requisitions.update', $Requisition->id)">
            <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('Requisition')
                </h4>
                <div class="row p-20">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-md-6">
                                <x-forms.number class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('Quantity')"
                                    fieldName="quantity" fieldId="quantity" :fieldPlaceholder="__('placeholders.quantity')"
                                    :fieldValue="$Requisition->quantity" />
                            </div>

                            <div class="col-md-6">
                                <x-forms.select fieldId="product_id" :fieldLabel="__('Product')" fieldName="product_id"
                                    fieldRequired="true">
                                    @foreach ($produtos as $product)
                                        <option value="{{ $product->id }}" {{ $Requisition->product_id == $product->id ? 'selected' : '' }}>
                                            {{ $product->name }}
                                        </option>
                                    @endforeach
                                </x-forms.select>
                            </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('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

        // Serializa todos os dados do formulário
        var formData = $('#save-requisition-form').serialize();

        // Define a URL para a solicitação de atualização
        const url = "{{ route('requisitions.update', [$Requisition->id]) }}";

        $.ajax({
            url: url,
            type: "PUT", // Certifique-se de usar o método correto
            data: formData, // Envia todos os dados do formulário serializados
            beforeSend: function() {
                $('#save-requisition-form-btn').prop('disabled', true); // Desativa o botão para evitar múltiplos envios
                $('body').addClass('loading'); // Opcional: Adiciona um efeito de carregamento
            },
            success: function(response) {
                if (response.success) {
                    window.location.href = "{{ route('requisitions.index') }}"; // Redireciona após sucesso
                } else {
                    alert('Erro ao atualizar o registro.');
                }
            },
            error: function(xhr) {
                alert('Ocorreu um erro ao atualizar o registro.');
                console.error(xhr.responseText); // Mostra o erro no console para depuração
            },
            complete: function() {
                $('#save-requisition-form-btn').prop('disabled', false); // Reativa o botão
                $('body').removeClass('loading'); // Remove o efeito de carregamento
            }
        });
    });
});
</script>