@extends('layouts/contentLayoutMaster')

@section('title', __('locale.Settings.Client'));

@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="" name="" 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 disabled>
                                        <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 disabled>
                                        <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 disabled/>
                                </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 disabled/>
                                </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 disabled/>
                                </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 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="{{ $client_settings->endpoint_query }}" required disabled/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Mapeamento de valores</h4>
                        
                    </div>
                    <div class="card-body" id="map_value">

                    </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 ='';
    let fieldCounter = 0;
    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') }}",
            }
        });

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

            eve.preventDefault();

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

        });

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


        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);
        }

        function generateMapTableForBD(){
            let payroll_id = $('#payroll_id').val();
            axios.get(`{{ route('api.settings.clients.map', '') }}/${payroll_id}`, {
                    headers: {
                        "Authorization": "Bearer {{ session('Authorization') }}"
                    }
                })
                .then(function(response) {
                    
                    mapValue = response.data;

                    $('#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>');

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

                        row.append(`<td>${item.api_map_inputs.input_apdata}</td>`);
                        row.append(`<td>${item.apdata}</td>`);
                        row.append(`<td>${item.api_map_inputs.input_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);
                })
                .catch(function(error) {
                    console.error('Erro na requisição:', error);
                });
        }
        generateMapTableForBD();

    });
</script>
@endsection