@extends('layouts/contentLayoutMaster')

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

@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')) }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

@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

<div class="modal" id="modalApi" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Cadastrar novo valor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="#" id="ApiForm">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <input type="hidden" id="id">
                                <div class="mb-1 col-md-6">
                                    <label class="form-label" for="value_apdata_id">Campo Apdata</label>
                                    <input type="text" id="value_apdata_id" name="value_apdata_id"
                                            class="form-control" placeholder="Valor Apdata" disabled>
    
                                </div>
                                <div class="mb-1 col-md-6">
                                    <label class="form-label" for="value_hi_id">Campo HI</label>
                                    <select name="value_hi_id" id="value_hi_id" class="select2" required>
                                        <option value="" disabled selected>Selecione um valor</option>

                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="value_apdata">Valor Apdata</label>
                                        <input type="text" id="value_apdata" name="value_apdata"
                                            class="form-control" placeholder="Valor Apdata">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="value_hi">Valor HI</label>
                                        <input type="text" id="value_hi" name="value_hi"
                                            class="form-control" placeholder="Valor HI">
                                    </div>
                                </div>
                            </div>
                                <div class="col-md-12 mt-2">
                                    <button type="button" class="btn btn-primary" id="saveValueButton">{{ __('locale.Table.Supplier.Sla.Label.Save') }}</button>
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('locale.Table.Supplier.Sla.Label.Close') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<section id="multiple-column-form">
    <div class="row">
        <div class="col-12">
            <form class="form-add-setting-api">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Configurações</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="payroll_id">Folha de Pagto</label>
                                    <select class="form-select" name="payroll_id" id="payroll_id" required>
                                        <option value="" disabled selected>Selecione um cliente</option>
                                        @if ($payrolls)
                                        @foreach ($payrolls as $payroll)
                                        <option value="{{ $payroll->id }}">{{ $payroll->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            {{-- <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="endpoint_token">Endpoint Obter Token</label>
                                    <input type="text" id="endpoint_token" class="form-control campo_porcentagem" autocomplete="off" placeholder="Endpoint Obter Token"
                                        name="endpoint_token" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="endpoint_query">Endpoint Busca</label>
                                    <input type="text" id="endpoint_query" class="form-control campo_porcentagem" autocomplete="off" placeholder="Endpoint Busca"
                                        name="endpoint_query" required/>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Mapeamento de Campos</h4>
                        <button class="btn btn-primary" id="addInputMap">{{ __('locale.Add') }}</button>
                    </div>
                    <div class="card-body" id="card-inputs">

                    </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>

    let map = [];
    let removedColumns = [];
    let allColumns = @json($all_columns);
    let fieldCounter = 0;

    $(function() {
        'use strict';

        $('.select2').select2({
            width: 'resolve',
            placeholder: "Selecione uma opção"
        });

        $(".form-add-setting-api").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') }}",
            }
        });

        $("#addInputMap").on('click', function (e) {
            e.preventDefault();

            removeMatchingColumns();

            fieldCounter++;

            var newFields = `
                <div class="row" id="input-group-${fieldCounter}">
                    <div class="col-md-6 col-12">
                        <div class="mb-1">
                            <label class="form-label" for="input_apdata_${fieldCounter}">Campo Apdata</label>
                            <input type="text" id="input_apdata_${fieldCounter}" class="form-control campo_porcentagem" autocomplete="off" placeholder="Campo Apdata"
                                 required/>
                        </div>
                    </div>
                    <div class="col-md-5 col-12">
                        <div class="mb-1">
                            <label class="form-label" for="input_hi_${fieldCounter}">Campos HI</label>
                            <select class="select2" id="input_hi_${fieldCounter}" required>
                                <option value="" disabled selected>Selecione uma opção</option>
                                
                            </select>
                        </div>
                    </div>
                    <div class="col-md-1 col-12 d-flex justify-content-center align-items-center">
                        <div>
                            <button type="button" class="btn btn-danger btn-sm delete-row" data-id="input-group-${fieldCounter}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;

            $("#card-inputs").append(newFields);

            var selectElement = $(`#input_hi_${fieldCounter}`);
            allColumns.forEach(function(column) {
                selectElement.append(`<option value="${column}">${column}</option>`);
            });

            $(".select2").select2({
                width: 'resolve',
                placeholder: "Selecione uma opção"
            });

            $(".delete-row").on('click', function() {
                var rowId = $(this).data('id');
                $("#" + rowId).remove();
                
                var fieldId = $(this).data('id').replace('input-group-', '');
                
                map = map.filter(function(item) {
                    return item.id !== fieldId;
                });

                let valueGroup = $(`#value-group-${fieldId}`);

                valueGroup.remove();

            });


            $(`#input_apdata_${fieldCounter}, #input_hi_${fieldCounter}`).on('change', function () {
                getInputMap();
                
            });

        });

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

            eve.preventDefault();

            $(".form-add-setting-api").submit();

        });

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

            eve.preventDefault();

            let mapInput = map;

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

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

                json.mapInput = JSON.stringify(mapInput);

                try {

                    let {
                        data: response
                    } = await axios({
                        url: `{{ route('api.settings.apis.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.setting.api.Column.AddSuccess") }}',
                        icon: 'success',
                    }).then((_) => {
                        if (_.isConfirmed) {
                            window.location.href = '{{ route('dashboard.settings.apis.index') }}'
                        }
                    })


                } catch (e) {

                }
            }

        });

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

        $('#addValueMap').on('click', function(e) {

            e.preventDefault();

            $('#ApiForm')[0].reset();

            const FieldApdata = $('#value_apdata_id');
            const selectFieldHI = $('#value_hi_id');
            const FieldId = $('#id');

            FieldApdata.val('');
            selectFieldHI.find('option:not(:first)').remove();
            FieldId.val('');

            map.forEach(item => {
                if (item.input_hi) {
                    selectFieldHI.append(new Option(item.input_hi, item.input_hi));
                }
            });

            $('#modalApi').modal('show');
        });

        function getInputMap() {
            $(".row[id^='input-group-']").each(function () {

                let groupId = $(this).attr("id").split('-')[2];

                let apdataValue = $(`#input_apdata_${groupId}`).val();
                let hiValue = $(`#input_hi_${groupId}`).val();

                if (apdataValue && hiValue && hiValue !== "Selecione uma opção") {

                    let existingItemIndex = map.findIndex(function(item) {
                        return item.id === groupId;
                    });

                    if (existingItemIndex !== -1) {

                        map[existingItemIndex].input_apdata = apdataValue;
                        map[existingItemIndex].input_hi = hiValue;
                    } else {

                        map.push({
                            input_apdata: apdataValue,
                            input_hi: hiValue,
                            tag_id: groupId
                        });
                    }
                }
            });
        }

        function removeMatchingColumns() {
            map.forEach(function (item) {
                var hiValue = item.input_hi;

                var index = allColumns.indexOf(hiValue);
                if (index !== -1) {

                    removedColumns.push(allColumns.splice(index, 1)[0]);
                }
            });
        }



    });
</script>
@endsection