@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Parameters'));

@section('content')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/wizard/bs-stepper.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection

@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-wizard.css')) }}">
@endsection

<section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <form class="form-add-parameter">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('locale.Table.parameter.Column.Title') }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="name">{{ __('locale.Table.parameter.Column.Name') }}</label>
                                    <input type="text" id="name" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.Name') }}"
                                        name="name" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="branch">{{ __('locale.Table.parameter.Column.Branch') }}</label>
                                    <input type="text" id="branch" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.Branch') }}"
                                        name="branch" required/>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="cnpj">{{ __('locale.Table.parameter.Column.CNPJ') }}</label>
                                    <input type="text" id="cnpj" data-mask="00.000.000/0000-00" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.CNPJ') }}"
                                        name="cnpj" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="susep">{{ __('locale.Table.parameter.Column.Susep') }}</label>
                                    <input type="number" id="susep" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.Susep') }}"
                                        name="susep" required/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">{{ __('locale.Table.parameter.Column.Address') }}</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="zip_code">{{ __('locale.Table.parameter.Column.Zip Code') }}</label>
                                    <input type="number" id="zip_code" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.Zip Code') }}"
                                        name="zip_code" required/>
                                </div>
                            </div>
                            
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="address">{{ __('locale.Table.parameter.Column.Address') }}</label>
                                    <input type="text" id="address" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.Address') }}"
                                        name="address" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="district">{{ __('locale.Table.parameter.Column.District') }}</label>
                                    <input type="text" id="district" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.District') }}"
                                        name="district" required/>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="city">{{ __('locale.Table.parameter.Column.City') }}</label>
                                    <input type="text" id="city" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.City') }}"
                                        name="city" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="state">{{ __('locale.Table.parameter.Column.State') }}</label>
                                    <input type="text" id="state" class="form-control" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.State') }}"
                                        name="state" required/>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="csll">{{ __('locale.Table.parameter.Column.CSLL') }}</label>
                                    <input type="text" id="csll" class="form-control campo_porcentagem" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.CSLL') }}"
                                        name="csll" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="irrf">{{ __('locale.Table.parameter.Column.IRRF') }}</label>
                                    <input type="text" id="irrf" class="form-control campo_porcentagem" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.IRRF') }}"
                                        name="irrf" required/>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="iss">{{ __('locale.Table.parameter.Column.ISS') }}</label>
                                    <input type="text" id="iss" class="form-control campo_porcentagem" autocomplete="off" placeholder="{{ __('locale.Table.parameter.Column.ISS') }}"
                                        name="iss" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="status">{{ __('locale.Table.parameter.Column.Status') }}</label>
                                    <select class="form-select" name="status" id="status" required>
                                        <option value="1">{{ __('locale.Table.partner.Column.Active') }}</option>
                                        <option value="2">{{ __('locale.Table.partner.Column.Inactive') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">    
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary me-1" id="btnAddBrokers">{{ __('locale.Table.parameter.Column.AddButton') }}</button>
                                <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.parameter.Column.BackButton') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection
@section('vendor-script')
<!-- vendor files -->
<script src="{{ asset(mix('vendors/js/extensions/sweetalert2.all.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/wizard/bs-stepper.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/jquery-mask/jquery.mask.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
@endsection
@section('page-script')
<script>
    $(function() {
        'use strict';

        $(".form-add-parameter").validate({
            rules: {
                name: 'required',
               
               
            },
            messages: {
                name: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
                cnpj: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
                susep: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
                company_id: "{{ __('locale.Table.parameter.Column.RequiredField') }}",
            }
        });

        $(".campo_porcentagem").mask('##00%', {
            reverse: true
        });

        $("#cnpj").on("keyup", function() {

            let cnpj = $(this).val().replace(/\D/g, '');

            if (!validations.cnpj.isValid(cnpj)) {
                $(".form-add-parameter #btnAddBrokers").attr('disabled', 'disabled');
            } else {
                $(".form-add-parameter #btnAddBrokers").removeAttr('disabled');
            }

            if(cnpj.length === 14 && !validations.cnpj.isValid(cnpj) && window.Swal !== undefined){
                window.Swal.fire({
                    title: "Ops!",
                    text: "{{ __('locale.Table.parameter.Column.CNPJInvalid') }}",
                    icon: 'warning'
                })
            }

        });

        $("#zip_code").on("keyup", async function() {

            let zip_code = $(this).val().replace(/\D/g, '');

            if (zip_code.length < 8) return 0;

            let {
                data: json,
                ...response
            } = await axios({
                method: 'get',
                url: `https://viacep.com.br/ws/${zip_code}/json/`,
            })

            if (json.erro) {
                if (window.toastr !== undefined) {
                    window.toastr.warning('{{ __("locale.Table.Holders.Column.ZipCodeInvalid") }}', '{{ __("locale.Table.Holders.Column.Attention") }}');
                } else {
                    window.alert('{{ __("locale.Table.Holders.Column.ZipCodeInvalid") }}');
                }
                $(this).val($(this).val().slice(0, -1)).focus();
                return 0;
            }

            $("#address").val(json.logradouro);
            $("#district").val(json.bairro);
            $("#state").val(json.uf);
            $("#city").val(json.localidade);


        });

        $('#btnAddBrokers').on("click", async function(eve) {

            eve.preventDefault();

            $(".form-add-parameter").submit();

        });

        $(".form-add-parameter").on("submit", async function(eve) {

            eve.preventDefault();

            if ($(".form-add-parameter").get(0).checkValidity()) {

                let json = Object.fromEntries((new FormData($(".form-add-parameter").get(0)))
                    .entries());

                try {

                    let {
                        data: response
                    } = await axios({
                        url: `{{ route('api.parameters.store') }}`,
                        method: 'post',
                        data: json,
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}"
                        }
                    }).catch((e) => {

                        let response = e.response;

                        @if (env('APP_DEBUG'))
                            console.warn(e)
                        @endif

                        if (response.status === 400 || response.status === 422) {
                            Swal.fire({
                                title: 'Ops!',
                                text: response.data.message,
                                icon: 'error',
                                cancelButtonText: '{{ __("locale.Table.parameter.Column.CloseButton") }}'
                            })
                        } else if (response.status === 404) {
                            Swal.fire({
                                title: 'Ops!',
                                text: '{{ __("locale.Table.parameter.Column.RequestedNotFound") }}',
                                icon: 'error',
                                cancelButtonText: '{{ __("locale.Table.parameter.Column.CloseButton") }}'
                            })
                        } else {

                            Swal.fire({
                                title: 'Ops!',
                                text: '{{ __("locale.Table.parameter.Column.RegisterError") }}',
                                icon: 'error',
                                cancelButtonText: '{{ __("locale.Table.parameter.Column.CloseButton") }}'
                            })

                        }

                    });

                    Swal.fire({
                        title: 'Uhuul!',
                        text: '{{ __("locale.Table.parameter.Column.AddSuccess") }}',
                        icon: 'success',
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = '{{ route('dashboard.parameters.index') }}'
                        }
                    })


                } catch (e) {

                }
            }

        });

        $('#btnReset').on('click', function() {
            window.location.href = '{{ route('dashboard.parameters.index') }}';
        });


    });
</script>
@endsection