@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

<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 class="btn-group">
                            <a href="{{ route('dashboard.settings.apis.edit', ['id' => $api_settings->id]) }}" class="btn btn-primary" id="btnEditar"><i data-feather='edit-3'></i></a>
                            <a href="{{ route('dashboard.settings.apis.show', ['id' => $api_settings->id]) }}" class="btn btn-info" id="btnVisualizar">
                                <i data-feather="eye"></i>
                            </a>
                        </div>
                    </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 disabled>
                                        <option value="" disabled selected>Selecione um cliente</option>
                                        @if ($payrolls)
                                        @foreach ($payrolls as $payroll)
                                        <option value="{{ $payroll->id }}" {{ $payroll->id == $api_settings->payroll_id ? 'selected' : '' }}>{{ $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" value="{{ $api_settings->endpoint_token }}" required disabled/>
                                </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" value="{{ $api_settings->endpoint_query }}" required disabled/>
                                </div>
                            </div> --}}
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Mapeamento de Campos</h4>
                        
                    </div>
                    <div class="card-body" id="card-inputs">

                    </div>
                    <div class="card-footer">
                        <div class="row">    
                            <div class="col-12">
                                <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 = @json($apiMapInputs);
    let removedColumns = [];
    let allColumns = @json($all_columns);
    let fieldCounter;

    $(function() {
        'use strict';

        function findMaxTagId(items) {
            let maxTagId = 0;

            items.forEach(function(item) {
                if (item.tag_id > maxTagId) {
                    maxTagId = item.tag_id;
                }
            });

            return maxTagId;
        }

        fieldCounter = findMaxTagId(map)

        $('.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();
                createInputMapValue();
            });

        });

        $('#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.parameters.index') }}';
        });

        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 alreadyExists = map.some(function(item) {
                        return item.input_apdata === apdataValue && item.input_hi === hiValue;
                    });

                    if (!alreadyExists) {
                        map.push({
                            input_apdata: apdataValue,
                            input_hi: hiValue,
                            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]);
                }
            });
        }

        function createInputMapValue() {
            map.forEach(function(item) {

                let valueGroup = $(`#value-group-${item.id}`);

                if(item.value_apdata == null){
                    item.value_apdata = '';
                }

                if(item.value_hi == null){
                    item.value_hi = '';
                }

                if (valueGroup.length === 0) {

                    var newFieldsValue = `
                        <div class="row" id="value-group-${item.id}">
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="value_apdata_${item.id}">${item.input_apdata}</label>
                                    <input type="text" value="${item.value_apdata}" id="value_apdata_${item.id}" class="form-control campo_porcentagem" autocomplete="off" placeholder="Valor Apdata"
                                        disabled/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="value_hi_${item.id}">${item.input_hi}</label>
                                    <input type="text" value="${item.value_hi}" id="value_hi_${item.id}" class="form-control campo_porcentagem" autocomplete="off" placeholder="Valor HI"
                                        disabled/>
                                </div>
                            </div>
                        </div>
                    `;

                    $("#map_value").append(newFieldsValue);

                    $(`#value_apdata_${item.id}`).on('input', function() {
                        var valueApdata = $(this).val();
                        var valueHi = $(`#value_hi_${item.id}`).val();

                        if (valueApdata && valueHi) {
                            var updatedItem = map.find(i => i.id === item.id);
                            if (updatedItem) {
                                updatedItem.value_apdata = valueApdata;
                                updatedItem.value_hi = valueHi;
                            }
                        }
                    });

                    $(`#value_hi_${item.id}`).on('input', function() {
                        var valueHi = $(this).val();
                        var valueApdata = $(`#value_apdata_${item.id}`).val();

                        if (valueApdata && valueHi) {
                            var updatedItem = map.find(i => i.id === item.id);
                            if (updatedItem) {
                                updatedItem.value_apdata = valueApdata;
                                updatedItem.value_hi = valueHi;
                            }
                        }
                    });

                }
            });
        }
        createInputMapValue()

        function createFieldsFromMap() {
            map.forEach(function (item) {
                fieldCounter++;

                var prefilledFields = `
                    <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" value="${item.input_apdata || ''}" required disabled/>
                            </div>
                        </div>
                        <div class="col-md-6 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 disabled>
                                    <option value="" disabled ${!item.input_hi ? 'selected' : ''}>Selecione uma opção</option>
                                </select>
                            </div>
                        </div>
                        
                    </div>
                `;

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

                // Preencher as opções do select
                var selectElement = $(`#input_hi_${fieldCounter}`);
                allColumns.forEach(function (column) {
                    selectElement.append(`<option value="${column}" ${item.input_hi === column ? 'selected' : ''}>${column}</option>`);
                });

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

                // Adicionar evento de exclusã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();

                });

                // Adicionar eventos para atualizar o mapa
                $(`#input_apdata_${fieldCounter}, #input_hi_${fieldCounter}`).on('change', function () {
                    getInputMap();
                    createInputMapValue();

                });
            });
        }
        createFieldsFromMap();



    });
</script>
@endsection