{% extends 'AdminBundle:Admin:adminLayout.html.twig' %}
{#("admin.titles.home"|trans) : (path("rawafedjobslist_myjoblistadmin_home")),#}
{% block breadcrumb %}
    {{ backendHelpers.breadcrumb({

        ("islamiccontent.titles.fatawa requests"|trans) : (path("rawafedjobslist_myjoblistadmin_home")),
        ("islamiccontent.titles.Answer"|trans) : '',
        (fatwa_request.questionTitle ?  : '') : ''
    }) }}
{% endblock %}

{% block content %}
    <style>
        .publish-state.glyphicon-ok { color:#87b87f; }
        .publish-state.glyphicon-remove { color:#dd5a43; }
    </style>
    {{ backendHelpers.pageTitle( fatwa_request.questionTitle ? : (fatwa_request.question|truncate(100, '...')) ) }}

    <div class="actionButtons">
        {{ backendHelpers.addActionButton(path("rawafedjobslist_myjoblistadmin_index"), "rawafedjobslist_myjoblistadmin_index", ('admin.titles.list'|trans), 'btn-light', 'icon-list' )}}
    </div>

    <table class="table table-bordered">
        <tbody>
        <tr>
            <th class="col-xs-3">{{"admin.titles.id"|trans}}</th>
            <td class="col-xs-9">{{ fatwa_request.id }}</td>
        </tr>
        <tr>
            <th class="col-xs-3">{{"islamiccontent.titles.sender"|trans}}</th>
            {% if userProfileLink %}
                <td class="col-xs-9"><a href="{{ userProfileLink }}" >{{ fatwa_request.user.realName ? : fatwa_request.user }}</a></td>
            {% else %}
                <td class="col-xs-9">{{ fatwa_request.user.realName ? : fatwa_request.user }}</td>
            {% endif %}
        </tr>
        <tr>
            <th class="col-xs-3">{{"islamiccontent.titles.send date"|trans}}</th>
            <td class="col-xs-9">{{ fatwa_request.sendDate|date("d") ~ " " ~ (fatwa_request.sendDate|date("F"))|trans ~ " " ~ fatwa_request.sendDate|date("Y") }}</td>
        </tr>

        <tr>
            <th class="col-xs-3">{{"islamiccontent.titles.category"|trans}}</th>
            <td class="col-xs-9">{{ fatwa_request.category }}</td>
        </tr>

        <tr>
            <th class="col-xs-3">{{"islamiccontent.titles.question title"|trans}}</th>
            <td class="col-xs-9">{{ fatwa_request.questionTitle }}</td>
        </tr>

        <tr>
            <th class="col-xs-3">{{"islamiccontent.titles.question details"|trans}}</th>
            <td class="col-xs-9">{{ fatwa_request.question }}</td>
        </tr>

        </tbody>
    </table>

    <div>
        <a class="btn btn-info" style="font-size: 100%; line-height: 200%; padding: 0px 20px;" href="{{ redirectPath }}">
            <i class="icon-unlock bigger-130"></i>
            {{ 'rawafed_job_list.titles.release'|trans }}
        </a>

        {{ "admin.titles.or"|trans }}
        <a href="{{ path('rawafedjobslist_myjoblistadmin_index') }}">{{ "islamiccontent.titles.keep holding"|trans }}</a>
    </div>


    <div>
        {%if form_errors(form)%}
            {{ form_errors(form) }}
        {%endif%}

        <div class="row">
            <div class="col-xs-12">
                <form novalidate class="form-horizontal" role="form" action="{{form.vars.action}}" method="post" {{ form_enctype(form) }}>

                    {{ form_rest(form) }}

                    <div class=" form-actions">
                        <legend>الرد بتسجيل صوتى</legend>
                        <div class="">

                            <button id="recorderBtn" class="btn btn-primary" type="button" onclick="toggle(this)">
                                {#<i class="fa fa-stop-circle-o icon">#}
                                    <img src="{{ asset('bundles/islamiccontent/images/player_record.png') }}" width="24">
                                {#</i>#}
                                <span class="text">{{ 'islamiccontent.titles.Record'|trans }}</span>
                            </button>
                            <img id="recorderLoader" style="visibility: hidden;" src="{{ asset('bundles/admin/images/ajax_loaders/horizontal.gif') }}">

                            <button id="delete-btn" style="display: none;" class="btn btn-danger btn-sm" type="button" > <i class="icon-trash bigger-120"></i> </button>

                        </div> &nbsp;&nbsp;

                        <div id="recordings"> </div>
                        <div class="clearfix"></div>
                    </div>

                    <div class=" form-actions">
                        <div class="pull-right">
                            <button type="submit" name="submit" class="btn btn-info" id="send-answer">
                                <i class="icon-ok bigger-110"></i>
                                {{'global.titles.send'|trans}}
                            </button>

                        </div>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript">


    </script>

    <script type="text/javascript">

        var recorderWorker = "{{ asset('bundles/islamiccontent/js/lib/recorderWorker.js') }}";
        var mp3Worker = "{{ asset('bundles/islamiccontent/js/lib/mp3Worker.js') }}";

        var playIcon = "{{ asset('bundles/islamiccontent/images/player_record.png') }}";
        var stopIcon = "{{ asset('bundles/islamiccontent/images/player_stop.png') }}";

        var audio;
        var audioError;
        var audioErrorMessage = 'خطأ اثناء محاولة تشغيل الميكروفون';

        function init() {
            var cfg = {};

            Recorder.prototype.onStreamFailure = function ( error ) {
                audioError = true;
            }
            audio = new Recorder(cfg);

        }


        function toggle( btn ){

            if(audioError) {
                alert(audioErrorMessage);
                return;
            }

            // audio && audio.record();

            if(audio instanceof Recorder){

                var btnId = btn.id;

                if(btn.getAttribute('class') === 'btn btn-primary'){

                    audio.record();

                    $("#recorderLoader").css('visibility', 'visible');
                    $('#send-answer').prop('disabled', true);

                    $("#" + btnId).children('img').attr('src', stopIcon);
                    $("#" + btnId).children('span').text("{{ 'islamiccontent.titles.Stop'|trans }}");
                }else if(btn.getAttribute('class') === 'btn btn-danger'){
                    audio.stop();
                    createPreview( 'recordings' );
                    audio.clear();

                    $("#" + btnId).children('img').attr('src', playIcon);
                    $("#" + btnId).children('span').text("{{ 'islamiccontent.titles.Record'|trans }}");
                }



                {#btn.firstChild.nodeValue = (start) ? "{{ 'islamiccontent.titles.Stop'|trans }}" : "{{ 'islamiccontent.titles.Record'|trans }}";


                var btnLabel = btn.firstChild.nodeValue;

                if( btnLabel === "{{ 'islamiccontent.titles.Record'|trans }}" ){
                    audio.record();
                    $("#recorderLoader").css('visibility', 'visible');
                    $('#send-answer').prop('disabled', true);
                }else{
                    audio.stop();
                    createPreview( 'recordings' );
                    audio.clear();
                }
                btn.firstChild.nodeValue = (btnLabel === "{{ 'islamiccontent.titles.Record'|trans }}") ? "{{ 'islamiccontent.titles.Stop'|trans }}" : "{{ 'islamiccontent.titles.Record'|trans }}";#}

                btn.setAttribute('class', (btn.getAttribute('class') === 'btn btn-primary') ? 'btn btn-danger' : 'btn btn-primary');

            } else {
                init();
                toggle( btn );
            }

        }

        function createPreview( containerId ) {
            // audio && audio.exportWAV( function(blob) {


            var targetContainer = document.getElementById( containerId );

            var timestamp = new Date().getTime();
            var filename = 'recording_'+ timestamp;
            var div = document.createElement('div');
            /*
            var linkMP3 = document.createElement('a');
            linkMP3.setAttribute('id', 'MP3-'+ timestamp);

            var iconMP3 = document.createElement('img');
            iconMP3.setAttribute('src', 'images/i-mp3.jpeg');

            var linkWAV = document.createElement('a');
            linkWAV.setAttribute('id', 'WAV-'+ timestamp);

            var iconWAV = document.createElement('img');
            iconWAV.setAttribute('src', 'images/i-wav.jpeg');

            var player = document.createElement('audio');
            player.setAttribute('id', 'PLAYER-'+ timestamp);
            player.controls = true;

            div.appendChild(player);
            div.appendChild(linkWAV);
//            div.appendChild(linkMP3);
            targetContainer.appendChild(div);
            */

            audio.export( function( mediaObj ) {

                var xhr = new XMLHttpRequest();
                xhr.onload = function(e) {
                    if(this.readyState === 4) {
                        console.log("Server returned: ", e.target.responseText);
                        $('#fatwa_request_answer_attachedRecord').val(filename);
                        $('#delete-btn').click(function () {
                            $('#fatwa_request_answer_attachedRecord').val('');
                            $("#" + containerId).html('');
                            $(this).hide();

                        }).show();

                        $("#recorderLoader").css({'visibility':'hidden'});
                        $('#send-answer').prop('disabled', false);

                        var data = $.parseJSON(e.target.responseText);
                        if(data.error != undefined) alert(data.error);

                        if(data.path != undefined){
                            $("#" + containerId).html($('<audio controls> <source src="'+ data.path +'" type="audio/mpeg"> Your browser does not support the audio element </audio> '));
                        }

                    }

                };
                var fd = new FormData();
                fd.append('__audio_file__', mediaObj.blob);

                //mediaObj.blob.type
                xhr.open('POST', '{{ path("islamiccontent_fatwarequestadmin_record", {"filename": "__filename__"}) }}'.replace('__filename__', filename), true);
                xhr.send(fd);
            });
        }

    </script>
{% endblock %}


{% block js_files %}
    {{ parent() }}
    .script('islamiccontent/js/recorder-wav-mp3.js')
{% endblock %}


{% block js_document_ready %}
    {{ parent() }}

    $(document).on('uploading', 'input[id^="fileupload_fatwa_request_answer_attached"]', function(data) {
         $('#send-answer').prop('disabled', true);
    });

    $(document).on('uploaded', 'input[id^="fileupload_fatwa_request_answer_attached"]', function(data) {
        $('#send-answer').prop('disabled', false);
    });

    $(document).on('complete', 'input[id^="fileupload_fatwa_request_answer_attached"]', function(data) {
        $('#send-answer').prop('disabled', false);
    });
{% endblock %}