@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
                <input type="hidden" id="client_setting_id" name="client_setting_id" value="{{$client_settings->id}}">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Configurações</h4>
                        <div class="btn-group">
                            <a href="{{ route('dashboard.settings.clients.edit', ['id' => $client_settings->id]) }}" class="btn btn-primary" id="btnEditar"><i data-feather='edit-3'></i></a>
                            <a href="{{ route('dashboard.settings.clients.show', ['id' => $client_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-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="company_id">Cliente</label>
                                    <select class="form-select" name="company_id" id="company_id" required >
                                        <option value="" disabled selected>Selecione um cliente</option>
                                        @if ($companies)
                                        @foreach ($companies as $company)
                                        <option value="{{ $company->id }}" {{$company->id === $client_settings->company_id ? 'selected' : ''}}>{{ $company->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 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->id === $client_settings->payroll_id ? 'selected' : ''}}>{{ $payroll->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Parâmetros da conexão</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="user_id">Usuário</label>
                                    <input type="text" id="user_id" class="form-control campo_porcentagem" autocomplete="off" placeholder="Usuário"
                                        name="user_id" value="{{$client_settings->user_id}}" required/>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="client_id">Client Id</label>
                                    <input type="text" id="client_id" class="form-control campo_porcentagem" autocomplete="off" placeholder="Client Id"
                                        name="client_id" value="{{$client_settings->client_id}}" required />
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div class="mb-1">
                                    <label class="form-label" for="client_secret">Client Secret</label>
                                    <input type="text" id="client_secret" class="form-control campo_porcentagem" autocomplete="off" placeholder="Client Secret"
                                        name="client_secret" value="{{$client_settings->client_secret}}" required />
                                </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="{{ $client_settings->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" value="{{ $client_settings->endpoint_query }}" required/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Mapeamento de valores</h4>
                        <button class="btn btn-primary" id="addValueMap" >{{ __('locale.Add') }}</button>
                    </div>
                    <div class="card-body" id="map_value">

                    </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.UpdateButton') }}</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 = @json($map);
    // let map = [];
    let removedColumns = [];
    let allColumns = 0;
    let fieldCounter;
    let mapValue = [];
    $(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') }}",
            }
        });

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

            e.preventDefault();

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

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

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

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

                // if (item.input_apdata) {
                //     FieldApdata.val(item.input_apdata)
                // }

                // if (item.tag_id) {
                //     FieldId.val(item.tag_id)
                // }
            });


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

        $('#value_hi_id').on('change', function() {

            const selectedHiValue = $(this).val();
            const FieldApdata = $('#modalApi #value_apdata_id');
            const FieldId = $('#id');

            FieldApdata.val('');
            FieldId.val('');

            const selectedItem = mapValue.find(item => item.input_hi === selectedHiValue);

            if (selectedItem) {

                if (selectedItem.input_apdata) {
                    FieldApdata.val(selectedItem.input_apdata);
                }
                if (selectedItem.id) {
                    FieldId.val(selectedItem.id);
                }
            }
        });

        $('#payroll_id').on("change", async function(eve) {

            eve.preventDefault();

            let payroll_id = $(this).val();

            map = [];
            generateMapTable();
            
            getApiMap(payroll_id);
        });

        $('#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 client_setting_id = $('#client_setting_id').val();

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

                json.mapInput = JSON.stringify(mapInput);

                const Url = `{{ route("api.settings.clients.update", ":id") }}`;
                const UrlWithId = Url.replace(':id', client_setting_id);

                try {

                    let {
                        data: response
                    } = await axios({
                        url: UrlWithId,
                        method: 'put',
                        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) {
                            const url = `{{ route("dashboard.settings.clients.show", ":id") }}`;
                            const urlWithId = url.replace(':id', client_setting_id);
                            window.location.href = urlWithId
                        }
                    })


                } catch (e) {

                }
            }

        });

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

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

            e.preventDefault();

            let apdataInput = $('#value_apdata_id').val();
            let apdataValue = $('#value_apdata').val();
            let hiInput = $('#value_hi_id').val();
            let hiValue = $('#value_hi').val();
            let idModal = $('#id').val();

            map.push({
                id: idModal,
                field_apdata: apdataInput,
                apdata: apdataValue,
                field_hi: hiInput,
                hi: hiValue
            });

            $('#modalApi').modal('hide');
            generateMapTable();
            
        });

        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 generateMapTable() {
            $('#map_value').empty();

            let table = $('<table></table>').addClass('table table-bordered');
            let thead = $('<thead></thead>');
            let headerRow = $('<tr></tr>');

            headerRow.append('<th>Campo APDATA</th>');
            headerRow.append('<th>APDATA</th>');
            headerRow.append('<th>Campo HI</th>');
            headerRow.append('<th>HI</th>');
            headerRow.append('<th>Ações</th>');
            thead.append(headerRow);

            table.append(thead);

            let tbody = $('<tbody></tbody>');

            map.forEach(function(item, index) {
                let row = $('<tr></tr>');

                row.append(`<td>${item.field_apdata}</td>`);
                row.append(`<td>${item.apdata}</td>`);
                row.append(`<td>${item.field_hi}</td>`);
                row.append(`<td>${item.hi}</td>`);

                let deleteButton = $('<button></button>').addClass('btn btn-danger btn-sm');
                let icon = '<i class="fas fa-trash"></i>'

                deleteButton.append(icon);
                
                deleteButton.on('click', function(e) {
                    e.preventDefault();
                    deleteItem(index);
                });

                row.append($('<td></td>').append(deleteButton));

                tbody.append(row);
            });

            table.append(tbody);

            $('#map_value').append(table);
        }
        generateMapTable();

        function deleteItem(index) {

            map.splice(index, 1);  
            generateMapTable();
            

        }

        function getApiMap(payroll_id){
            axios.get(`{{ route('api.settings.apis.map', '') }}/${payroll_id}`, {
                        headers: {
                            "Authorization": "Bearer {{ session('Authorization') }}"
                        }
                    })
                    .then(function(response) {
                        
                        mapValue = response.data;
                        
                    })
                    .catch(function(error) {
                        console.error('Erro na requisição:', error);
                    });
        }
        getApiMap($('#payroll_id').val());


    });
</script>
@endsection