{% extends "base.html.twig" %}

{% block title %}Config Profiles List{% endblock %}

{% form_theme form1 'form/modal.html.twig' %}
{% form_theme form2 'form/modal.html.twig' %}

{% block body %}

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900"><i class="c-light-blue-500 fas fa-tags"></i> List of Config Profiles
                        <a href="{{ path('admin_help', {'page': 'labels'}) }}"><span class="help-box" title="How to manage labels"></span></a>
                    </h4>
                    <hr class="mB-30">
                    {% include 'blocks/filter.html.twig' %}
                    {{ sg_datatables_render(datatable) }}
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="create-config-profile-from-device" tabindex="-1" role="dialog" aria-labelledby="createConfigProfileFromDevice" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createConfigProfileFromDevice">Create new Config profile</h5>
                </div>
                <div class="modal-body">
                <div id="errors"></div>
                    {{ form_start(form1, {attr: {class: 'form1', id: 'configProfileCreateFromDeviceForm'} }) }}
                    {{ form_widget(form1) }}
                    {{ form_end(form1) }}
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="create-config-profile-from-existing-profile" tabindex="-1" role="dialog" aria-labelledby="createConfigProfileFromExistingProfile" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createConfigProfileFromExistingProfile">Create new Config profile</h5>
                </div>
                <div class="modal-body">
                    <div id="errors"></div>
                    {{ form_start(form2, {attr: {class: 'form2', id: 'configProfileCreateFromProfileForm'} }) }}
                    {{ form_widget(form2) }}
                    {{ form_end(form2) }}
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-download-modal" tabindex="-1" role="dialog" aria-labelledby="confirmDownloadConfigProfile" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDownloadConfigProfile">Download Config Profile</h5>
                </div>
                <div class="modal-body">
                    Do you want to download selected Config Profile?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="confirm-download" class="btn btn-primary btn-ok"><span class="fas fa-download"></span>  Download</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="confirmDeleteConfigProfile" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmDeleteConfigProfile">Delete Config Profile</h5>
                </div>
                <div class="modal-body">
                    Do you really want to delete selected Config Profile?
                </div>
                <div class="modal-footer">
                    <button id="cancel" type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <a id="confirm" class="btn btn-danger btn-ok"><span class="fas fa-trash"></span>  Delete</a>
                </div>
            </div>
        </div>
    </div>

{% endblock body %}

{% block stylesheets %}

    {{ parent() }}

    <style>

        .btn-primary.custom-btn {
            background-color: #32808c;
            border-color: #32808c;
        }

    </style>

{% endblock %}

{% block javascripts %}

    {{ parent() }}

    <script>

        $(document).ready(function() {

            $('.modal').on('hidden.bs.modal', function () {
                //$(this).removeData('bs.modal');
                if ($(this).find('form1').length !== 0) {
                    $(this).find('form1')[0].reset();
                    document.getElementById('errors').innerText = '';
                }
            })

            $('.modal').on('hidden.bs.modal', function () {
                if ($(this).find('form2').length !== 0) {
                    $(this).find('form2')[0].reset();
                    document.getElementById('errors').innerText = '';
                }
            })

            $('a#confirm-download').click(function (e) {
                $('#confirm-download-modal').modal('hide');
                $.ajax({
                    url: $('a#confirm-download').attr('link'),
                    dataType: 'json',
                    xhrFields: {
                        'responseType': 'application/json'
                    },

                    success: function (result) {

                        if (result.code === 200) {

                            var blob = new Blob([result.data], {
                                type: 'application/json'
                            });
                            var link = document.createElement('a');
                            link.href = window.URL.createObjectURL(blob);
                            link.download = result.filename;
                            link.click();

                            if(result.hasOwnProperty("success")){
                                let toastOptions = {
                                    title: "Success",
                                    message: result.message + ((Array.isArray(result.success)) ? result.success.join(',') : result.success),
                                    status: 1, //'SUCCESS',
                                    timeout: 20000
                                }
                                Toast.create(toastOptions);
                            }


                        }else{

                            if(result.hasOwnProperty("errors")){
                                let toastOptions = {
                                    title: "Error",
                                    message: result.message + ((Array.isArray(result.errors)) ? result.errors.join(',') : result.errors),
                                    status: 2, //'WARNING',
                                    timeout: 20000
                                }
                                Toast.create(toastOptions);
                            }

                        }

                    }
                });
            });

            $('a#confirm').click(function (e) {
                $('#confirm-delete').modal('hide');
                $.ajax({
                    url: $('#confirm').attr('link'),
                    success: function (result) {
                        $('#sg-datatables-config_profiles_datatable').DataTable().ajax.reload();

                        if (result.code === 200) {

                            if(result.hasOwnProperty("success")){
                                let toastOptions = {
                                    title: "Success",
                                    message: result.message + ((Array.isArray(result.success)) ? result.success.join(',') : result.success),
                                    status: 1, //'SUCCESS',
                                    timeout: 20000
                                }
                                Toast.create(toastOptions);
                            }


                        }else{

                            if(result.hasOwnProperty("errors")){
                                let toastOptions = {
                                    title: "Error",
                                    message: result.message + ((Array.isArray(result.errors)) ? result.errors.join(',') : result.errors),
                                    status: 2, //'WARNING',
                                    timeout: 20000
                                }
                                Toast.create(toastOptions);
                            }

                        }

                    }
                });
            });

            $('#sg-datatables-config_profiles_datatable').on('click', '#delete', function () {
                var link = $(this).attr('href');
                $('#confirm-delete').modal('show').find('a#confirm').attr('link', link);
            });

            $('#sg-datatables-config_profiles_datatable').on('click', '#download', function () {
                var link = $(this).attr('href');
                console.log(link);
                $('#confirm-download-modal').modal('show').find('a#confirm-download').attr('link', link);
            });

        });

        $("#configProfileCreateFromDeviceForm").submit(function(e) {

            e.preventDefault();
            var formSerialize = $(this).serialize();

            var url = "{{ path('ajax_config_profile_create_from_device')|escape('js') }}";
            $.ajax({
                type: "POST",
                url: url,
                data: formSerialize,
                success: function (result) {
                    if (result.code === 200) {

                        $('#create-config-profile-from-device').modal('hide');
                        $('#sg-datatables-config_profiles_datatable').DataTable().ajax.reload();

                        if(result.hasOwnProperty("success")){
                            let toastOptions = {
                                title: "Success",
                                message: result.message + ((Array.isArray(result.success)) ? result.success.join(',') : result.success),
                                status: 1, //'SUCCESS',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }

                        if(result.hasOwnProperty("errors")){
                            let toastOptions = {
                                title: "Error",
                                message: result.message + ((Array.isArray(result.errors)) ? result.errors.join(',') : result.errors),
                                status: 2, //'WARNING',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }

                    } else {

                    }
                },
                error: function (result) {
                    document.getElementById('errors').innerHTML = '<div class="alert alert-danger" role="alert">' + result.responseJSON.errors.error; + '</div>';
                }
            });
        });

        $("#configProfileCreateFromProfileForm").submit(function(e) {

            e.preventDefault();
            var formSerialize = $(this).serialize();

            var url = "{{ path('ajax_config_profile_create_from_config_profile')|escape('js') }}";
            $.ajax({
                type: "POST",
                url: url,
                data: formSerialize,
                success: function (result) {
                    if (result.code === 200) {

                        $('#create-config-profile-from-existing-profile').modal('hide');
                        $('#sg-datatables-config_profiles_datatable').DataTable().ajax.reload();

                        if(result.hasOwnProperty("success")){
                            let toastOptions = {
                                title: "Success",
                                message: result.message + ((Array.isArray(result.success)) ? result.success.join(',') : result.success),
                                status: 1, //'SUCCESS',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }

                        if(result.hasOwnProperty("errors")){
                            let toastOptions = {
                                title: "Error",
                                message: result.message + ((Array.isArray(result.errors)) ? result.errors.join(',') : result.errors),
                                status: 2, //'WARNING',
                                timeout: 20000
                            }
                            Toast.create(toastOptions);
                        }

                    } else {

                    }
                },
                error: function (result) {
                    document.getElementById('errors').innerHTML = '<div class="alert alert-danger" role="alert">' + result.responseJSON.errors.error; + '</div>';
                }
            });
        });

    </script>

{% endblock %}