@extends('layouts/contentLayoutMaster')

@section('title',  __('locale.SuppliersProducts'))

@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">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ __('locale.Table.suppliers.Column.Title') }}</h4>
                </div>
                <div class="card-body">
                    <form class="form-add-supplier">
                        {{-- <input type="hidden" name="operator_id" id="operator_id"> --}}
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="name">{{ __('locale.Table.suppliers.Column.Name') }}</label>
                                <input type="text" name="name" id="name" class="form-control"
                                    placeholder="{{ __('locale.Table.suppliers.Column.Name') }}" aria-label="Supplier Name" required />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="cnpj">{{ __('locale.Table.suppliers.Column.Cnpj') }}</label>
                                <input type="text" name="cnpj" id="cnpj" class="form-control"
                                    placeholder="{{ __('locale.Table.suppliers.Column.Cnpj') }}" aria-label="Enter the Supplier's CNPJ" data-mask="00.000.000/0000-00" required />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="operating_radius">{{ __('locale.Table.suppliers.Column.OperatingRadius') }}</label>
                                <select name="operating_radius" id="operating_radius" class="select2" required>
                                    <option value="0">{{ __('locale.Table.suppliers.Column.OperatingRadiusLocal') }}</option>
                                    <option value="1">{{ __('locale.Table.suppliers.Column.OperatingRadiusRegional') }}</option>
                                    <option value="2">{{ __('locale.Table.suppliers.Column.OperatingRadiusNational') }}</option>
                                    <option value="3">{{ __('locale.Table.suppliers.Column.OperatingRadiusInternational') }}</option>
                                </select>
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="branch_company">Sucursal destinada da empresa</label>
                                <input type="text" name="branch_company" id="branch_company" class="form-control"
                                    placeholder="Sucursal destinada da empresa"  required />
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="IOF_previous">IOF Anterior</label>
                                <input type="number" name="IOF_previous" id="IOF_previous" class="form-control"
                                    placeholder="IOF Anterior"  required />
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="IOF_current">IOF atual</label>
                                <input type="number" name="IOF_current" id="IOF_current" class="form-control"
                                    placeholder="IOF atual"  required />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <button type="reset" class="btn btn-primary me-1" id="btnAddSuppliers">{{ __('locale.Table.suppliers.Column.Submit') }}</button>
                    <button type="reset" class="btn btn-outline-secondary" id="btnReset">{{ __('locale.Table.suppliers.Column.Reset') }}</button>
                </div>
            </div>
        </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/forms/validation/jquery.validate.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>
    var operator = null;

    $('.select2').each(function() {
        var $this = $(this);
        $this.wrap('<div class="position-relative"></div>');
        $this.select2({
            dropdownAutoWidth: true,
            width: '100%',
            dropdownParent: $this.parent()
        });
    });


    $(function() {
        'use strict';

        $(".form-add-supplier").validate({
            rules: {
                name: 'required',
                cnpj: 'required',
                operating_radius: 'required',
                branch_company: 'required',
                IOF_previous: 'required',
                IOF_current: 'required',
            },
            messages: {
                name: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
                cnpj: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
                operating_radius: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
                branch_company: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
                IOF_previous: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
                IOF_current: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
            }
        });

        // $(".form-add-operator").validate({
        //     rules: {
        //         beneficiary_inclusion_sla: 'required',
        //         beneficiary_exclusion_sla: 'required',
        //         beneficiary_registration_changes_sla: 'required',
        //         beneficiary_second_card: 'required',
        //     },
        //     messages: {
        //         beneficiary_inclusion_sla: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
        //         beneficiary_exclusion_sla: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
        //         beneficiary_registration_changes_sla: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
        //         beneficiary_second_card: "{{ __('locale.Table.suppliers.Column.RequiredField') }}",
        //     }
        // });

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

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

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

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

        });


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

            eve.preventDefault();

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

        });

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

        //     eve.preventDefault();

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


        //         if (operator === null) {

        //             let payload = Object.fromEntries((new FormData($(".form-add-operator").get(0)))
        //                 .entries());

        //             let {
        //                 data: response_body,
        //                 ...response
        //             } = await axios({
        //                 url: `{{ route('api.operators.store') }}`,
        //                 method: 'post',
        //                 data: payload,
        //                 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.suppliers.Column.CloseButton") }}'
        //                     })
        //                 } else if (response.status === 404) {
        //                     Swal.fire({
        //                         title: 'Ops!',
        //                         text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
        //                         icon: 'error',
        //                         cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
        //                     })
        //                 } else {

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

        //                 }

        //                 return false;

        //             });

        //             if (response.status === 200 || response.status === 201) {

        //                 operator = response_body;

        //                 $("#operator_id").val(operator.id)

        //                 return $(".form-add-supplier").submit();

        //             }

        //         }

        //         $(".form-add-supplier").submit();

        //     }

        // });



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

            eve.preventDefault();

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

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

                try {

                    let {
                        data: response
                    } = await axios({
                            url: `{{ route('api.suppliers.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.suppliers.Column.CloseButton") }}'
                                })
                            } else if (response.status === 404) {
                                Swal.fire({
                                    title: 'Ops!',
                                    text: '{{ __("locale.Table.suppliers.Column.RequestedNotFound") }}',
                                    icon: 'error',
                                    cancelButtonText: '{{ __("locale.Table.suppliers.Column.CloseButton") }}'
                                })
                            } else {

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

                            }

                            return false;

                        });

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


                } catch (e) {

                }
            }

        });

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

    });
</script>
@endsection