@extends('adminlte::page')

@section('title', __('global.Test API'))

@section('content')
      <div class="container my-5">
          <div class="row">
              <div id="form_wrapper" class="col-md-6 offset-3 text-center mt-3" >
                  <div class="card">
                      <div class="card-header bg-primary">
                          <h3 class="card-title">@lang('global.Test API')</h3>
                      </div>

                      <div class="card-body">
                        <form id="test-api-form" action="/api/qrcode/generate" method="POST">
                            <input type="hidden" name="dcc_type_id" id="dcc_type_id">
                            <div class="mb-3">
                                <div class="form-group position-relative">
                                    <button class="btn btn-sm btn-light position-absolute border" style="top: 5px; right: 4px;" type="button" id="paste_btn">@lang('global.Paste')</button>
                                    <textarea class="form-control" placeholder="DATA JSON" name="json" id="json" cols="30" rows="10"></textarea>
                                    <div class="invalid-feedback"> @lang('global.Mandatory')</div>
                                </div>
                            </div>
                    
                            <div class="mb-3">
                                <input value="{{ auth()->user()->tokens()->first() ? auth()->user()->tokens()->first()->token : '' }}" class="form-control" type="text" name="token" id="token" placeholder="token">
                                <div class="invalid-feedback"> @lang('global.Mandatory') </div>
                            </div>
                    
                            <div class="mb-3">
                                <div class="input-group">
                                    <div class="input-group-text">
                                        {{-- If checked it'll reutrn image URL --}}
                                        <input type="checkbox" name="image" id="image" value="1">
                                    </div>
                                    <select name="return" id="return" class="form-control">
                                        <option value="json">JSON </option>
                                        <option value="image">Image</option>
                                    </select>
                                </div>
                            </div>
                            {{-- <button type="submit" id="test-api-submit" class="btn btn-primary w-100">Afficher</button> --}}
                            <button type="submit" id="test-api-submit" class="btn btn-primary">@lang('global.Show')</button>
                        </form>
                      </div>
                  </div>
              </div>
          </div>
      </div>


      <div class="modal fade" id="notify-user-modal">
          <div class="modal-dialog">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">&nbsp;</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                  </div>

                  <div class="modal-body">
                    <form name="notify_form" action="{{ route('notify-user') }}" class="row text-left" method="POST">
                        @csrf

                        <input type="hidden" name="image">
                        <div class="col-md-12 form-group">
                            <label for="email">@lang('global.Email')</label> 
                            <input type="email" name="email" id="email" class="form-control" placeholder="@lang('global.Email')" /> 
                        </div> 

                        <div class="col-md-12 form-group">
                            <label for="phone">@lang('global.Phone') <small>@lang('global.phone_formatted')</small></label> 
                            <input type="text" name="phone" id="phone" class="form-control" placeholder="@lang('global.Phone')" /> 
                        </div> 
                    </form>
                  </div>

                  <div class="modal-footer">
                    <button onclick="document.notify_form.submit();" class="btn btn-primary btn-block">@lang('global.Submit')</button>
                  </div>
              </div>
          </div>
      </div>
@endsection

@section('adminlte_js')

<script>
    function syntaxHighlight(json) {
        json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }
    $(function () {

        $('#paste_btn').on('click', async function () {
            
            //const str = JSON.stringify($('#json_template').val(), undefined, 4);
            /* inputOptions can be an object or Promise */
            const inputOptions = new Promise((resolve) => {
                setTimeout(() => {
                    resolve({
                    '1': 'Test',
                    '2': 'Vaccination',
                    '3': 'Guérison' //Infection - Recovery
                    })
                }, 1000)
            });

            const { value: type_dcc } = await Swal.fire({
                icon: "info",
                title: '@lang('global.Options')',
                input: 'radio',
                showCloseButton: true,
                confirmButtonText: "@lang('global.Submit')",
                inputOptions: inputOptions,
                inputValidator: (value) => {
                    if (!value) {
                    return 'Choix Obligatoire!'
                    }
                }
            })

            let str = '';
            switch(type_dcc) {
                case "1"://tested
                    str = '{"fn" :"CHOODO", "gn":"Marc", "dob":"2000-06-05","tg": "840539006", "tt": "LP6464-4", "sc": "2022-03-13T12:34:56+00:00","tr": "260415000", "ma": "RealStar SARS-CoV-2 RT-PCR Kit 1.0","nm": "ELITechGroup SARS-CoV-2 ELITe MGB Kit","tc": "Center VIP","pid":"00B00000" }';
                    //str = '{"fn" :"TCHOKPODO", "gn":"Arcadius", "dob":"2000-06-05","tg": "840539006", "tt": "LP217198-3", "sc": "2021-12-13T12:34:56+00:00","tr": "260415000", "ma": "1232","nm": "Roche LightCycler qPCR","tc": "Testing center Vienna 1" }';

                    $('#dcc_type_id').val(1);
                    break;

                case "2"://vaccinated
                   str = '{"fn" :"CHOODO", "gn":"Marc", "dob":"2000-06-05","tg":"840539006", "vp":"1119349007","mp":"EU\/1\/20\/1528","ma":"ORG-100030215","dn":2,"sd":2,"dt":"2022-02-13","pid":"00B00000" }';
                    //str = '{"fn" :"TCHOKPODO", "gn":"Arcadius", "dob":"2000-06-05","tg":"840539006", "vp":"1119349007","mp":"EU\/1\/20\/1528","ma":"ORG-100030215","dn":2,"sd":2,"dt":"2021-12-13"}';

                    $('#dcc_type_id').val(2);
                    break;

                case "3"://Infected
                    str = '{"fn" :"CHOODO", "gn":"Marc", "dob":"2000-06-05","tg": "840539006","fr": "2022-10-20", "df": "2022-03-13","du": "2022-10-20","pid":"00B00000" }';
                    //str = '{"fn" :"TCHOKPODO", "gn":"Arcadius", "dob":"2000-06-05","tg": "840539006","fr": "2021-12-10", "df": "2021-12-20","du": "2022-03-20"}';
                    $('#dcc_type_id').val(3);
                    break;
            }

            $('#json').val((str));
        });

        $('button#test-api-submit').on('click', function (e) {
            e.preventDefault();

            $(this).attr('disabled', 'disabled');
            $(this).text('Processing....');

            //validate data
            const _json = $('#json').val();
            if(_json == '') {
                $('#json').addClass('is-invalid');
                $(this).removeAttr('disabled');
                $(this).text("@lang('global.Submit')");
                return false;
            } else {
                $('#json').removeClass('is-invalid');
            }

            const _token = $('#token').val();
            if(_token == '') {
                $('#token').addClass('is-invalid');
                $(this).removeAttr('disabled');
                $(this).text("@lang('global.Submit')");
                return false;
            } else {
                $('#token').removeClass('is-invalid');
            }

            const _form = $('form#test-api-form').get(0);
            const formData = new FormData(_form);
            $.ajax({
                type: 'POST',
                url: $('form#test-api-form').attr('action'),
                processData: false,
                contentType: false,
                data: formData,
                success: response => {

                    const read_another = "<div class='row'> <div class='offset-1 col-md-5'><a class='btn btn-secondary mb-4 w-100' href='/api-test'>Retour Test API</a></div><div class='col-md-5 offset-1'><button data-toggle='modal' data-target='#notify-user-modal' class='btn btn-info w-100' href='/api-test'>@lang('global.Communication')</button></div></div>";
                    
                    // if(typeof response != 'object') {

                    //     $('#form_wrapper').html(`<div class="alert alert-info overflow-hidden" style="overflow-wrap: break-word;">${response}</div> <div id="form-space"></div> ${read_another}`);
                    // } else {

                        let _url = '';
                        if(response.image && response.url) {
                            
                            $('#form_wrapper').html(`<div class="alert alert-info overflow-hidden" style="overflow-wrap: break-word;">${response.image}</div> <div id="form-space"></div> ${read_another}`);
                            _url = response.url;
                        } else {

                            let text = '';
                            $.each(response, function (index, value) {

                                text += `<strong>${index}</strong>: ${value} <br />`;
                            });
                            _url = response.image;
                            $('#form_wrapper').html(`<div class="alert alert-info overflow-hidden text-start" style="overflow-wrap: break-word;">${text}</div> <div id="form-space"></div> ${read_another}`);   
                        }
                    //}

                    if(true) {
                        $('input[name="image"]').val(_url);
                        //$('#notify-user-modal').modal('show');

                        // $('body #form-space').append(`<form class="row text-left mb-5" method="POST">
                        //             @csrf 
                        //             <div class="col-md-12 form-group">
                        //                 <label for="email">@lang('global.Email')</label> 
                        //                 <input type="email" name="email" id="email" class="form-control" placeholder="@lang('global.Email')" /> 
                        //             </div> 

                        //             <div class="col-md-12 form-group">
                        //                 <label for="phone">@lang('global.Phone')</label> 
                        //                 <input type="text" name="phone" id="phone" class="form-control" value="@lang('global.Phone')" /> 
                        //             </div> 

                        //             <div class="col-md-12">
                        //                 <button class="btn btn-primary btn-block">@lang('global.Submit')</button>
                        //             </div>
                        //         </form>`);
                    }
                }
            });

        });
    });

  </script>

@endsection