@extends('layouts.master_panel')
@section('title', trans('titles.diligenciar'))
@section('card-icon')<i class="icofont-document-folder"></i>@endsection
@section('card-title', strtoupper(trans('titles.diligenciar')))
<!-- DatePicker -->
<link href="{{ asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">

<link href="{{ asset('bower_components/toastr/toastr.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/general_tooltip.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('css/configuration_collapse.css') }}" rel="stylesheet" type="text/css" />

@section('content')

    <div class="col-md-12" id="main-url" data-url="{{ URL::to('/') }}">
        @include('sections.validation.messages')
        @include('sections.forms.components.messages')


        <div class="row">
            @include('sections.forms.components.global-buttons')

            <div class="col py-2">
                <button id="download-format" class="btn btn-danger">
                    <i class="fa fa-download" aria-hidden="true"></i> {!! trans('buttons.descargar') !!}
                </button>
            </div>

        </div>
        <div  id="capture">
            <a href="{{ route('forms.index') }}" class="btn btn-warning btn-xs pull-left pull-down mt-1 ml-1" role="button">
                <i class="fa fa-chevron-circle-left" aria-hidden="true"></i>
                {!! trans('buttons.regresar') !!}
            </a>
            <div class="jumbotron">
                <div class="col-12 text-center">
                    <h4 id="format-name"> <b> {{ strtoupper($form->name) }} </b></h4>
                </div>
            </div>

            <div class="row">

                <div class="col-12">
                    {!! Form::open([
                        'method' => 'POST',
                        'role' => 'form',
                        'url' => url('answeredForms/save'),
                        'id' => 'format',
                        'enctype' => 'multipart/form-data',
                    ]) !!}

                    {!! Form::hidden('id', isset($answeredFormat) ? $answeredFormat->id : null, ['id' => 'id']) !!}
                    {!! Form::hidden('fk_id_format', isset($form) ? $form->id : null, ['id' => 'fk_id_format']) !!}
                    {!! Form::hidden('fk_id_user', $idUser, ['id' => 'fk_id_user']) !!}

                    <div class="col-lg-12 col-md-12 col-xs-12 bg-warning mb-2">
                        <div class="form-group text-dark">
                            <label for="fk_id_person" class=" text-dark">{!! trans('labels.personaQueDiligencia') !!}</label>
                            {!! Form::select('fk_id_person', $persons, isset($answeredFormat) ? $answeredFormat->fk_id_person : null, [
                                'class' => 'form-control selectpicker especialdrop is_required',
                                'title' => trans('labels.personaQueDiligencia'),
                                'data-actions-box' => 'true',
                                'id' => 'fk_id_person',
                                'required' => 'true',
                                'data-live-search' => 'true',
                            ]) !!}
                            <span class="help-block pb-1" style="color: red;"></span>
                        </div>

                    </div>

                    @foreach ($form->groups->sortBy('order') as $group)
                        <div class=" panel panel-default" id="{{ $group->id }}" >

                            <div class="panel-heading text-center bg-kluane text-white font-weight-bold">
                                @if ($group->visible_name == 1)
                                    {{ $group->name }}
                                @else
                                    &nbsp;
                                @endif

                                @if ($group->visible_description == 1)
                                <br>
                                <div class="alert alert-light" role="alert">
                                    {{ $group->description }}
                                </div>
                                @else
                                    &nbsp;
                                @endif
                            </div>

                            <div class="panel-body" style="{{$group->scrollabe ? 'max-height: 300px; overflow-y: scroll;' : ''}} ">
                                <ul class="list-group">
                                    <li class="list-group-item" style="border: 10px;">
                                        @foreach ($group->questions->sortBy('order') as $question)

                                            @if ($question->dynamic == null && $question->dynamic != 2)
                                                @component('sections.forms.components.question', [
                                                    'question' => $question,
                                                    'projects' => $projects,
                                                    'responsibleHse' => isset($responsibleHse) ? $responsibleHse : [],
                                                    'machines' => isset($machines) ? $machines : [],
                                                    'supervisors' => isset($supervisors) ? $supervisors : [],
                                                    'drillers' => isset($drillers) ? $drillers : [],
                                                    'drillingAuxiliars' => isset($drillingAuxiliars) ? $drillingAuxiliars : [],
                                                    'answer' => isset($answeredFormat) ? $answeredFormat->questions->where('id', $question->id)->first() : null,
                                                ])
                                                @endcomponent
                                            @elseif($question->dynamic == 1)
                                                @component('sections.forms.components.dynamic-question', [
                                                        'questions' => $group->questions->where('fk_id_question_type',$question->fk_id_question_type)->where('columns',$question->columns),
                                                        'answers' => isset($answeredFormat) ? $answeredFormat->questions->where('fk_id_question_type',$question->fk_id_question_type) : null
                                                    ])
                                                @endcomponent
                                            @endif

                                        @endforeach
                                    </li>
                                </ul>
                            </div>
                        </div>
                    @endforeach



                    <div class="col-12 bg-white p-3 border border-black">

                        <div class="col-lg-6 col-md-6 col-xs-12 border" style="overflow-x: scroll;">
                            <div class="file-field">
                                <div class="btn btn-primary btn-block">
                                    <span>{!! trans('labels.archivoSoporte') !!}</span>
                                <input type="file" name="format_file" id="format_file">
                                </div>
                            </div>
                        </div>

                        @if (isset($answeredFormat) && $answeredFormat->file_url != null)
                            <div class="col-lg-6 col-md-6 col-xs-12 border">
                                <label for="" class="mb-2"> {!! trans('labels.descargarArchivoSubido') !!} </label>
                                <a href="{{ $answeredFormat->file_url }}" class="btn btn-block btn-info" target="_blank">
                                    {!! trans('buttons.descargar') !!}
                                    <i class="fa fa-download" aria-hidden="true"></i>
                                </a>
                            </div>

                            <div class="col-md-12">

                            </div>
                        @endif

                        <div class="col-lg-12 col-md-12 col-xs-12 border">
                            <div class="form-group form-md-line-input has-info">
                                <label for="comments">{!! trans('labels.observaciones') !!}</label>
                                {!! Form::textarea('comment', isset($answeredFormat) ? $answeredFormat->comment : null, [
                                    'class' => 'form-control',
                                    'id' => 'comment',
                                ]) !!}
                                <span class="help-block pb-1" style="color: red;"></span>
                            </div>
                        </div>

                        @if (isset($viewMode))
                            <span style="" id="viewMode"></span>
                        @endif

                        @if (!isset($viewMode))
                            @if (!isset($answeredFormat))
                                <button type="button" class="btn btn-success btn-block" id="btn-save-form">
                                    {!! trans('buttons.guardar') !!} <i class="fa fa-save" aria-hidden="true"></i>
                                </button>
                            @else
                                <button type="button" class="btn btn-warning btn-block" id="btn-save-form">
                                    {!! trans('buttons.editar') !!} <i class="fa fa-save" aria-hidden="true"></i>
                                </button>
                            @endif
                        @endif

                    </div>

                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>


@endsection

@push('plugins')
    <script src=" {{ asset('plugins/jquery/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/sw-utils.js?v=2022-01-17') }}" type="text/javascript"></script>
    <!-- DataTables -->
    <script src=" {{ asset('plugins/datatables/jquery.dataTables.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/dataTables.buttons.min.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/buttons.flash.min.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/jszip.min.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/vfs_fonts.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/buttons.html5.min.js') }}"></script>
    <script src=" {{ asset('plugins/datatables-bs4/js/buttons.print.min.js') }}"></script>
    <script src="{{ asset('js/utils/html2canvas.min.js?v=2') }}" type="text/javascript"></script>
    <script src="{{ asset('js/utils/jspdf.min.js?v=2') }}" type="text/javascript"></script>

    <script src="{{ asset('bower_components/jquery-loading/dist/jquery.loading.min.js') }}" type="text/javascript">
        < script src = "{{ asset('plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"
        type = "text/javascript" >
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
    </script>

    <script>
        jQuery(function() {

            if (document.getElementById("viewMode")) {
                var formElements = document.querySelectorAll("input, select, textarea");

                for (var i = 0; i < formElements.length; i++) {
                    formElements[i].disabled = true;
                }
            }

            vURL = $('#main-url').data('url');

            const downloadBtn = document.getElementById('download-format');
                downloadBtn.addEventListener('click', () => {
                generateImage();
            });

            toastr.options = {
                "closeButton": true,
                "newestOnTop": false,
                "progressBar": true,
                "positionClass": "toast-top-center",
                "preventDuplicates": true,
                "onclick": null,
                "showDuration": "300",
                "hideDuration": "1000",
                "timeOut": "5000",
            }


            $(document).on('click', '#btn-save-form', function(e) {
                if ($("#format").valid()) {
                    saveForm();
                }else{
                    Swal.fire({
                        title: 'Hay campos faltantes por diligenciar / There are missing fields to fill out',
                        html:   'Revise los campos resaltados en rojo / Review the fields highlighted in red',
                        type: 'error',
                        showConfirmButton: true
                    });
                }
            });

            $(document).on('click', '.sincronize-offline-data', function(e) {

                if (navigator.onLine) {

                    syncOfflineFormats().then(response => {

                        if (response.length > 0 && response.some(element => element === 500) ) {
                            toastr.error("Intente nuevamente / Try again","Error al sincronizar / Sync error");
                        }
                        else if (response.length > 0) {

                            toastr.success("Sincronización exitosa / Successful synchronization",
                                "Los datos ingresados sin conexión fueron sincronizados correctamente"
                                );

                        } else {
                            toastr.warning("No existen datos por sincronizar / There is no data to sync",
                                "No hay datos ingresados sin conexión faltantes por sincronizar"
                                );
                        }

                    });

                } else {
                    toastr.error("No es posible sincronizar / Can't sync",
                    "El dispositivo no está conectado a internet / The device is not connected to the internet");
                }
            });

            $(document).on('click', '.reload-page', function() {
                location.reload();
            });

            $(document).on('click','.add-dynamic-question',function(){
                addDynamicQuestion($(this).data('id'));
            });

            $(document).on('click','.add-dynamic-question',function(){
                addDynamicQuestion($(this).data('id'));
            });

            // init the state from the input
            $(".image-checkbox").each(function () {
                if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
                    $(this).addClass('image-checkbox-checked');
                }
                else {
                    $(this).removeClass('image-checkbox-checked');
                }
                });

                // sync the state to the input
                $(".image-checkbox").on("click", function (e) {
                $(this).toggleClass('image-checkbox-checked');
                var $checkbox = $(this).find('input[type="checkbox"]');
                $checkbox.prop("checked",!$checkbox.prop("checked"))

                e.preventDefault();
            });

        });

        function saveForm() {
            let myForm = document.getElementById('format');
            var domData = new FormData(myForm);

            $('body').loading({
                message: $('#msg-loading').val()
            });

            if (!navigator.onLine) {
                generateImage();
            }

            $.ajax({

                url: vURL + '/answeredForms/save',
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: domData,
                success: function(data) {
                    if (data.status == 200) {

                        if ($('#format_file').val() != '' && navigator.onLine) {

                            uploadFile(data.form_id);

                        } else {
                            $('body').loading('stop');

                            Swal.fire({
                                title: data.title,
                                html: data.message,
                                type: data.type,
                                showConfirmButton: true,
                            }).then(() => {
                                $('body').loading({
                                    message: $('#msg-loading').val()
                                });

                                location.reload();
                            });
                            domData = getFormFields();
                        }
                    } else if (data.status == 400) {
                        toastr.warning(data.message, data.title);
                    } else {
                        toastr.error(data.message, data.title);
                    }
                },
                error: function(data) {

                    $('body').loading('stop');

                    if (data.status == 419) {
                        Swal.fire({
                            title: $('#msg-something-went-wrong').val(),
                            html: $('#msg-session-expired').val(),
                            type: `error`,
                            showConfirmButton: false,
                            timer: 3000
                        }).then(() => {
                            $('body').loading({
                                message: $('#msg-loading').val()
                            });

                            location.reload();
                        });
                    } else if (data.status == 500) {
                        Swal.fire({
                            title: $('#msg-something-went-wrong').val(),
                            html: $('#msg-contact-support').val(),
                            type: `error`,
                            showConfirmButton: false,
                            timer: 3000
                        });
                    }
                }
            });
        }

        function uploadFile(id) {

            var datos = new FormData(document.getElementById("format"));

            datos.append('id_format', id);

            $.ajax({
                xhr: function() {
                    var xhr = new window.XMLHttpRequest();
                    return xhr;

                },
                url: vURL + '/answeredForms/saveFile',
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: datos,
                success: function(data) {
                    $('body').loading('stop');

                    if (data.status == 200) {

                        Swal.fire({
                            title: data.title,
                            html: data.message,
                            type: 'success',
                            showConfirmButton: true,
                        }).then(() => {
                            location.reload();
                        });
                        domData = getFormFields();

                    } else if (data.status == 400) {
                        toastr.warning(data.message, data.title);
                    } else {
                        toastr.error(data.message, data.title);
                    }
                },
                error: function(data) {
                    $('body').loading('stop');

                    if (data.status == 419) {
                        Swal.fire({
                            title: $('#msg-something-went-wrong').val(),
                            html: $('#msg-session-expired').val(),
                            type: `error`,
                            showConfirmButton: false,
                            timer: 3000
                        }).then(() => {
                            location.reload();
                        });
                    } else if (data.status == 500) {
                        Swal.fire({
                            title: $('#msg-something-went-wrong').val(),
                            html: $('#msg-contact-support').val(),
                            type: `error`,
                            showConfirmButton: false,
                            timer: 3000
                        });
                    }
                }
            });

        }

        function validateForm(id, rules, custom_messages) {

            if (id == undefined || $(id).length == 0) {
                return false;
            } else {
                rules = (rules == undefined) ? [] : rules;
                custom_messages = (custom_messages == undefined) ? [] : custom_messages;

                jQuery.validator.addMethod("greaterThan",
                    function(value, element, params) {
                        if (!/Invalid|NaN/.test(new Date(value))) {
                            return new Date(value) > new Date($(params).val());
                        }
                        return isNaN(value) && isNaN($(params).val()) ||
                            (Number(value) > Number($(params).val()));
                    }, $('#msg-final-date-greater').val());

                $.validator.addClassRules("is_required", {
                    required: true,
                });

                $(id).validate().destroy();

                $.validator.addClassRules("vc_max", {
                    maxlength: 25
                });

                $(id).validate({
                    //ignore: [],
                    rules: rules,
                    messages: custom_messages,
                    errorPlacement: function(error, element) {
                        $(element).closest('.form-group').find('.help-block').html(error.html());
                        $(element).closest('tr').find('.error-subtotal .help-block').html(error.html());

                    },
                    highlight: function(element) {
                        $(element).closest('.form-group').removeClass('has-info').addClass('has-error');
                        $(element).closest('tr').find('.error-subtotal .form-group').removeClass('has-info')
                            .addClass('has-error');
                        $(element).closest('div').find('.alert').removeClass('alert-note').addClass(
                            'alert-danger');
                    },
                    unhighlight: function(element, errorClass, validClass) {
                        $(element).closest('.form-group').removeClass('has-error').addClass('has-info');
                        $(element).closest('.form-group').find('.help-block').html('');

                        $(element).closest('tr').find('.error-subtotal .form-group').removeClass('has-error')
                            .addClass('has-info');
                        $(element).closest('tr').find('.error-subtotal .help-block').html('');

                        $(element).closest('div').find('.alert').removeClass('alert-danger').addClass(
                            'alert-note');
                    }

                });

                if ($("#end_date").length > 0) {
                    $("#end_date").rules('add', {
                        greaterThan: "#initial_date"
                    });
                }
            }
        }

        function getFormFields() {
            id_area = $('#id_area').val();
            year = $('#year').val();

            var domData = {
                'id_area': id_area,
                'year': year
            };

            return domData;
        }
    </script>

    <script>
        function generateImage() {

            const elements = document.querySelectorAll('*');

            elements.forEach(element => {
                element.classList.remove('text-center');
                if (element.style.overflowY === 'scroll') {
                    element.removeAttribute('style');
                }
            });

            $('body').loading({
                message: $('#msg-loading').val()
            });

            const element = document.getElementById('capture');
            var dateElement = document.querySelector('input[type="date"]');
            const now = new Date();
            var image_name = "";
            var date = now.toLocaleDateString();
            var time = now.toLocaleTimeString();

            image_name = $('#format-name').text().trim()+' - '+dateElement.value;

            html2canvas(element, {
                allowTaint: true,
                useCORS: true,
                scale: 2,
                scrollY: -window.scrollY,
                windowWidth: document.documentElement.clientWidth,
                windowHeight: document.documentElement.clientHeight,
                logging: true,
                autoPaging: true,
                onclone: function(doc) {
                const style = doc.createElement('style');
                style.innerHTML = `
                    body {
                    margin: 0;
                    padding: 0;
                    }
                    .page-break {
                    page-break-after: always;
                    }
                `;
                doc.head.appendChild(style);
                }
            }).then(function(canvas) {
                $('body').loading('stop');
                const imgData = canvas.toDataURL('image/png');

                const link = document.createElement('a');
                link.download = image_name+'.png';
                link.href = imgData;

                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }

    </script>

@endpush