@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Adicionar Nova Taxa de Envio</div>

                    <div class="card-body">
                        <form action="{{ route('shipping-rates.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="form-group">
                                <label for="country">Pais</label>
                                <input type="text" id="country" name="country" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="weight_limit">Limite de Peso</label>
                                <input type="text" id="weight_limit" name="weight_limit" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="cost">Custo</label>
                                <input type="text" id="cost" name="cost" class="form-control" required>
                            </div>

                            <div class="form-group">
                                <label for="image_url">Upload de Imagem</label>
                                <input type="file" id="image_url" name="image_url" class="form-control-file">
                            </div>

                        <button type="submit" class="btn btn-primary">Salvar Taxa de Envio</button>
                        <a href="{{ route('shipping-rates.index') }}" class="btn btn-secondary">Cancelar</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
<script>
    $(document).ready(function() {
        $('#shippingRateForm').on('submit', function(e) {
            e.preventDefault(); // Impede o envio padrão do formulário

            var formData = new FormData(this);

            $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    // Manipular a resposta de sucesso aqui, se necessário
                    console.log(response);
                    // Redirecionar para a página de índice de taxas de envio após o sucesso
                    window.location.href = "{{ route('shipping-rates.index') }}";
                },
                error: function(xhr, status, error) {
                    // Manipular erros de validação ou outros erros
                    var errors = xhr.responseJSON.errors;
                    console.log(errors);
                    // Exibir os erros de validação, se houver
                    // Exemplo simples para mostrar erro de validação no campo 'country'
                    if (errors && errors.country) {
                        alert(errors.country[0]);
                    }
                }
            });
        });
    });
</script>