{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}
    <script type="text/javascript" src="{{ asset('bundles/transcription/js/ajax/crud.js') }}"></script>
    <script type="text/javascript">
        var url_save = '{{ path('template_SaveTemplateTranscription') }}';
        var url_query = '{{ path('template_QueryDataRadiologistTemplate') }}';
        var url_search = '{{ path('template_SearchTemplateTranscription') }}';
        var url_update = '{{ path('template_UpdateDataTranscription') }}';
        var url_delete = '{{ path('template_DeleteTemplateTranscription') }}';
        var url_view_register = '{{ path('Template_ViewRegisterTranscriptionTemplate') }}';
    </script>

    <link href="{{ asset('bundles/utilities/css/editor.css') }}" rel="stylesheet">

    <script src="{{ asset('bundles/reading/js/external/jquery.hotkeys.js') }}"></script>

    <script src="{{ asset('bundles/utilities/js/bootstrap.min.js') }}"></script>

    <script src="{{ asset('bundles/reading/js/external/google-code-prettify/prettify.js') }}"></script>
    <script src="{{ asset('bundles/reading/js/bootstrap-wysiwyg.js') }}"></script>
    <style>
        #editor{
            height:400px;
        }
    </style>


    <link href="{{ asset('bundles/utilities/css/font-awesome.css') }}" rel="stylesheet">
{% endblock %}
{% block content %}

    <section>
    <article>
    <input type="hidden" id="locale" name="locale" value="{{ app.request.locale }}"/>

    <div id="container">
    <ul>
        <li><a href="#tabs-save">{{ 'template.templatesCreate'|trans([], 'LocalizationBundle') }}</a></li>
        <li><a href="#tabs-search">{{ 'template.templatesSearch'|trans([], 'LocalizationBundle') }}</a></li>
    </ul>
    <div id="tabs-save">
        <table id="save_table" style="table-layout:fixed; width: 100%;">
            <tr>
                <td style="table-layout:fixed; width: 30%; height: 100%;">

                    <div class="div_left" >
                        <table class="tb_data">
                            <tr>
                                <th>{{ 'assistive.modality.label'|trans([], 'LocalizationBundle') }}: (*)</th>
                                <td> <select id="mod_save_tab" name="mod_save_tab" style=" width: 150px;">
                                        {% for m in modList %}
                                            <option value="{{ m.idModality }}"> {{ m.idModality }}</option>
                                        {% endfor %}
                                    </select></td>
                            </tr>
                            <tr>
                                <th>{{ 'headquartercrud.user'|trans([], 'LocalizationBundle') }}: </th>
                                <td><select id="user_save_tab" name="user_save_tab" style=" width: 150px;">
                                        <option value=""></option>
                                        {% for u in userList %}
                                            <option value="{{ u.id }}">{{ u.username }}</option>
                                        {% endfor %}
                                    </select></td>
                            </tr>
                            <tr>
                                <th>{{ 'template.label3'|trans([], 'LocalizationBundle') }}</th>
                                <td> <input id="temp_name_save_tab" name="style" type="text" list="stylelist"
                                            style="width: 148px;"/></td>
                            </tr>
                        </table>
                    </div>
                </td>

                <td class="data_editor" >

                    <div id="content" method="post" name="tinymce">
                        <p><label for="style">{{ 'template.label4'|trans([], 'LocalizationBundle') }}</label></p>

                        <p>

                        <div id="contentSpeach" class="hero-unit">
                            <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i
                                                class="icon-font"></i><b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i
                                                class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                                        <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                                        <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                                    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i
                                                class="icon-italic"></i></a>
                                    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i
                                                class="icon-strikethrough"></i></a>
                                    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i
                                                class="icon-underline"></i></a>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i
                                                class="icon-list-ul"></i></a>
                                    <a class="btn" data-edit="insertorderedlist" title="Number list"><i
                                                class="icon-list-ol"></i></a>
                                    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i
                                                class="icon-indent-left"></i></a>
                                    <a class="btn" data-edit="indent" title="Indent (Tab)"><i
                                                class="icon-indent-right"></i></a>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i
                                                class="icon-align-left"></i></a>
                                    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i
                                                class="icon-align-center"></i></a>
                                    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i
                                                class="icon-align-right"></i></a>
                                    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i
                                                class="icon-align-justify"></i></a>
                                </div>
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i
                                                class="icon-link"></i></a>

                                    <div class="dropdown-menu input-append">
                                        <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                                        <button class="btn" type="button">Add</button>
                                    </div>
                                    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>

                                </div>

                                <div class="btn-group">
                                    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i
                                                class="icon-picture"></i></a>
                                    <input type="file" data-role="magic-overlay" data-target="#pictureBtn"
                                           data-edit="insertImage"/>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i
                                                class="icon-repeat"></i></a>
                                </div>
                                <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
                            </div>

                            <div id="editor" >

                            </div>
                        </div>
                        </p>
                    </div>

                </td>

            </tr>
            <tr>
                <td colspan="2">
                    <div class="div_rigth">
                        <p id="container_btn_validation">
                            <a href="#" id="button" class="button_data">{{ 'template.savenew'|trans([], 'LocalizationBundle') }}</a>
                            <a href="#" id="button2" class="button_data">{{ 'template.presave'|trans([], 'LocalizationBundle') }}</a>
                        </p>
                        <img id="spinner" style="border: none; width: 40px; display: none;"
                             src="{{ asset('bundles/utilities/images/spinner.gif') }}"/>

                        <p>
                            <label for="style">{{ 'template.modality_message'|trans([], 'LocalizationBundle') }}</label>
                        </p>
                    </div>
                </td>
            </tr>

        </table>

    </div>
    <div id="tabs-search">

        <table id="search_table" style="table-layout:fixed; width: 100%;">

            <tr>

                <td style="table-layout:fixed; width: 30%; height: 100%;">

                    <div class="div_left">
                        <table class="tb_data">
                            <tr>
                                <th colspan="2">
                                    <u><label for="style">{{ 'assistive.template.search'|trans([], 'LocalizationBundle') }}</label></u>
                                </th>
                            </tr>
                            <tr>
                                <th><label for="style">{{ 'assistive.modality.label'|trans([], 'LocalizationBundle') }}:</label> (*)</th>
                                <td><select id="mod_search_tab" name="mod" style="float: right; width: 133px;">
                                        {% for m in modList %}
                                            <option value="{{ m.idModality }}"> {{ m.idModality }}</option>
                                        {% endfor %}
                                    </select></td>
                            </tr>
                            <tr>
                                <th><label for="style">{{ 'headquartercrud.user'|trans([], 'LocalizationBundle') }}:</label></th>
                                <td>
                                    <select id="user_search_tab" name="usu" style="float: right; width: 133px;">
                                        <option value=""></option>
                                        {% for u in userList %}
                                            <option value="{{ u.id }}">{{ u.username }}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th colspan="2">
                                    <u><label for="style">{{ 'assistive.template.result'|trans([], 'LocalizationBundle') }}</label></u>
                                </th>
                            </tr>
                            <tr>
                                <th><label for="style">{{ 'template.label3'|trans([], 'LocalizationBundle') }}</label></th>
                                <td> <select id="nomPlan" name="nomPlan" style="float: right; width: 133px;">
                                        {% for r in templateList %}
                                            <option value="{{ r.idTemplate }}"> {{ r.name }}</option>
                                        {% endfor %}
                                    </select></td>
                            </tr>
                        </table>

                    </div>

                </td>

                <td >

                    <div id="content_search" method="post" name="tinymce">
                        <p><label for="style">{{ 'template.label4'|trans([], 'LocalizationBundle') }}</label></p>

                        <p> <div id="contentSpeach" class="hero-unit">
                            <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i
                                                class="icon-font"></i><b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i
                                                class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                                        <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                                        <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                                    </ul>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                                    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i
                                                class="icon-italic"></i></a>
                                    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i
                                                class="icon-strikethrough"></i></a>
                                    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i
                                                class="icon-underline"></i></a>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i
                                                class="icon-list-ul"></i></a>
                                    <a class="btn" data-edit="insertorderedlist" title="Number list"><i
                                                class="icon-list-ol"></i></a>
                                    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i
                                                class="icon-indent-left"></i></a>
                                    <a class="btn" data-edit="indent" title="Indent (Tab)"><i
                                                class="icon-indent-right"></i></a>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i
                                                class="icon-align-left"></i></a>
                                    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i
                                                class="icon-align-center"></i></a>
                                    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i
                                                class="icon-align-right"></i></a>
                                    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i
                                                class="icon-align-justify"></i></a>
                                </div>
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i
                                                class="icon-link"></i></a>

                                    <div class="dropdown-menu input-append">
                                        <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
                                        <button class="btn" type="button">Add</button>
                                    </div>
                                    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>

                                </div>

                                <div class="btn-group">
                                    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i
                                                class="icon-picture"></i></a>
                                    <input type="file" data-role="magic-overlay" data-target="#pictureBtn"
                                           data-edit="insertImage"/>
                                </div>
                                <div class="btn-group">
                                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i
                                                class="icon-repeat"></i></a>
                                </div>
                                <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
                            </div>

                            <div id="textin_search_tab"  >

                            </div>
                        </div></p>
                    </div>

                    <div id="usarenlaces" name="template_data"
                         style=" width:23%; position:absolute ;top: 25%; left: 73%;">

                        <div id="edit_template">
                            <table class="tb_data">
                                <tr>
                                    <th colspan="2"><u><label for="style">{{ 'assistive.template.tempdataedit'|trans([], 'LocalizationBundle') }}</label></u></th>
                                </tr>
                                <tr>
                                    <th>
                                        <label for="style">{{ 'assistive.modality.label'|trans([], 'LocalizationBundle') }}: (*)</label>
                                    </th>
                                    <td>
                                        <select id="mod_edit" name="mod_edit" style="width: 150px;" disabled>
                                            <option value=""></option>
                                            {% for m in modList %}
                                                <option value="{{ m.idModality }}"> {{ m.idModality }}</option>
                                            {% endfor %}
                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <label for="style">{{ 'headquartercrud.user'|trans([], 'LocalizationBundle') }}:</label>
                                    </th>
                                    <td>
                                        <select id="user_edit" name="user_edit" style="width: 150px;" disabled>
                                            <option value=""></option>
                                            {% for u in userList %}
                                                <option value="{{ u.id }}">{{ u.username }}</option>
                                            {% endfor %}

                                        </select>
                                    </td>
                                </tr>
                                <tr>
                                    <th><label for="style">{{ 'template.label3'|trans([], 'LocalizationBundle') }}</label></th>
                                    <td><input id="temp_name_edit" name="style" type="text" list="stylelist"
                                               style="width: 148px;" disabled/></td>
                                </tr>
                            </table>

                        </div>

                    </div>

                </td>

            </tr>
            <tr>
                <td>

                    <div class="div_rigth" style="position:absolute; top: 75%; left: 1%;">

                        <p>
                            <a href="#" id="button1" class="button_data">{{ 'template.load'|trans([], 'LocalizationBundle') }}</a>
                            <a href="#" id="button4" class="button_data">{{ 'template.edit'|trans([], 'LocalizationBundle') }}</a>
                            <a href="#" id="button6" class="button_data"  style="display: none">{{ 'template.update'|trans([], 'LocalizationBundle') }}</a>
                            <a href="#" id="button5" class="button_data">{{ 'template.delete'|trans([], 'LocalizationBundle') }}</a>
                            <a href="#" id="button7" class="button_data" style="display: none">{{ 'template.cancel'|trans([], 'LocalizationBundle') }}</a>
                        </p>

                        <p>
                            <label for="style">{{ 'template.modality_message'|trans([], 'LocalizationBundle') }}</label>
                        </p>

                    </div>
                </td>
            </tr>
        </table>

    </div>

    </div>

    <!--Muestra un mensaje cuando se presenta EXITO-->
    <div id="confirm" class="ui-widget">
        <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
            <p id="mensajeConfirm"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
            </p>
        </div>
    </div>
    <br>
    <!--Muestra un mensaje cuando se presenta algún error-->
    <div id="error" class="ui-widget">
        <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
            <p id="mensajeError"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
            </p>
        </div>
    </div>
    </article>
    </section>


    <script>
        $(function () {
            function initToolbarBootstrapBindings() {
                var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                            'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                            'Times New Roman', 'Verdana'],
                        fontTarget = $('[title=Font]').siblings('.dropdown-menu');
                $.each(fonts, function (idx, fontName) {
                    fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
                });
                $('a[title]').tooltip({container: 'body'});
                $('.dropdown-menu input').click(function () {
                    return false;
                })
                        .change(function () {
                            $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
                        })
                        .keydown('esc', function () {
                            this.value = '';
                            $(this).change();
                        });

                $('[data-role=magic-overlay]').each(function () {
                    var overlay = $(this), target = $(overlay.data('target'));
                    overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
                });
                if ("onwebkitspeechchange"  in document.createElement("input")) {
                    var editorOffset = $('#editor').offset();
                    $('#voiceBtn').css('position', 'absolute').offset({top: editorOffset.top, left: editorOffset.left + $('#editor').innerWidth() - 35});
                } else {
                    $('#voiceBtn').hide();
                }
            };
            function showErrorAlert(reason, detail) {
                var msg = '';
                if (reason === 'unsupported-file-type') {
                    msg = "Unsupported format " + detail;
                }
                else {
                    console.log("error uploading file", reason, detail);
                }
                $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
                        '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
            };
            initToolbarBootstrapBindings();
            $('#editor').wysiwyg({ fileUploadError: showErrorAlert});
            $('#textin_search_tab').wysiwyg({ fileUploadError: showErrorAlert});
            window.prettyPrint && prettyPrint();
        });
    </script>
{% endblock %}