@extends('template.template')

@section('scriptsHeader')

<link rel="stylesheet" href="{!! asset("libs/css/select2.css")!!}" media="screen">
<link rel="stylesheet" href="{!! asset("libs/css/styleEmails.css")!!}">
<link href="{!! asset("libs/font-awesome/css/font-awesome.css")!!}" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="{!! asset("libs/css/summernote.css")!!}" rel="stylesheet">
<link rel="stylesheet" href="{!! asset("libs/css/select2.css")!!}" media="screen">
<link rel="stylesheet" href="{!! asset("libs/css/dropzone.css")!!}"> <!-- Chosen css for display list of users -->
<link rel="stylesheet" href="{!! asset("libs/css/timeline.css")!!}"> <!-- Resource style -->
<link rel="stylesheet" href="{!! asset("libs/css/styleTimeline.css")!!}">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<style>

@media screen and (min-width: 768px) {
    
    .modal-dialog  {width:900px;}

}

.note-group-select-from-files {
  display: none;
}

.float-e-margins .btn {
  margin-bottom: 5px;
}

a.compose-mail {
  padding: 8px 10px;
}

.rui-resizable-handle {
  background-image: url('libs/images/resizable.png');
}
<style>
.inbox-head {
    background: none repeat scroll 0 0 #41cac0;
    border-radius: 0 4px 0 0;
    color: #fff;
    min-height: 80px;
    padding: 20px;
}

.inbox-head h3 {
    display: inline-block;
    font-weight: 300;
    margin: 0;
    padding-top: 6px;
}
.inbox-head .sr-input {
    border: medium none;
    border-radius: 4px 0 0 4px;
    box-shadow: none;
    color: #8a8a8a;
    float: left;
    height: 40px;
    padding: 0 10px;
}
.inbox-head .sr-btn {
    background: none repeat scroll 0 0 #00a6b2;
    border: medium none;
    border-radius: 0 4px 4px 0;
    color: #fff;
    height: 40px;
    padding: 0 20px;
}
.btn-primary {

background-color: #6B8C9D;
border-color: #6B8C9D;
}

input[placeholder]{
    color:white;
}

.form-control:focus,
.single-line:focus {
  border-color: white !important;
}

.fa-exclamation {
  color: red;
}

.fa-minus   {
  color: blue;
}


::-webkit-input-placeholder {
   color: white !important;
}

:-moz-placeholder { /* Firefox 18- */
   color: white !important;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: white !important;  
}

:-ms-input-placeholder {  
   color: white !important;  
}

.panel .btn-group {
    margin: 0px !important;
}



.funkyradio div {
  clear: both;
  overflow: hidden;
}

.funkyradio label {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #D1D3D4;
  font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;
  margin-top: 2em;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #D1D3D4;
  border-radius: 3px 0 0 3px;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #888;
}   

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #C2C2C2;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #777;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #333;
  background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #337ab7;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  color: #333;
  background-color: #ccc;
}



.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #d9534f;
}


</style>

</style>


@stop


@section('conteudoPagina')

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <!-- <div class="row">
                <div class="panel-heading panel-tabs-scrollFix clearfix" style="padding-left:50px; background-color:#566b7f;">
                    <div class="col-lg-4">
                        <button id="enviarEmail" style="border:1px solid black; background-color: #6B8C9D;" class="btn btn-white btn-sm enviarEmail" data-toggle="tooltip" data-placement="left" title="Enviar Mail"><i class="fa fa-reply"></i> Enviar</button>
                        remover bt <button style="border:1px solid black; background-color: #6B8C9D;" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Anexar Documentos"><i class="fa fa-paperclip"></i> Anexar</button>
                        <button style="border:1px solid black; background-color: #6B8C9D;" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="left" title="Eliminar novo mail"><i class="fa fa-times"></i> Eliminar</button>
                    </div>
                </div>
        </div> -->

        <div>
            
            <div id="alertaGravacao">
            </div>
            
            <input id="timestamp" val="" class="hidden"></input>
            <input id="prioridade" val="" class="hidden"></input>
            <input id="idEmailResposta" val="" class="hidden"></input>
            <input id="idEmailRascunho" val="" class="hidden"></input>
            <input id="idEmailReencaminhar" val="" class="hidden"></input>
           

                <div class="animated fadeInRight">
                    <div class="mail-box-header">
                        <div class="pull-right tooltip-demo" >
                            <a id="botaoPrioridade">
                                                            </a>
                            <span>Comprovativo Leitura:</span>
                            <input name="checkboxCaixa[]" id="checkboxCaixa" type="checkbox" class="i-checks" value="2" checked >
                            <a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Definir uma prioridade ao mail" onclick="definirPrioridade();"><i class="fa fa-pencil"></i> Definir Prioridade</a>
                            <a id="btnRascunho" class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top" title="Guardar como rascunho" onclick="guardaRascunho();"><i class="fa fa-pencil" ></i> Guardar Rascunho</a>
                            <a id="enviarEmail" class="btn btn-sm btn-success enviarEmail" data-toggle="tooltip" data-placement="top" title="Enviar Mail"><i class="fa fa-reply"></i> Enviar</a>
                            <a href="{{ URL::action('EmailsController@caixaEntrada' )}}" class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Eliminar novo mail"><i class="fa fa-times"></i> Eliminar</a>
                        </div>
                        <div class="row">
                            <div id="" class="col-sm-2">
                                <h2>
                                Novo Mail
                                </h2>
                            </div>
                            <div id="btnControlo" class="col-sm-1">
                            </div>
                        </div>
                    </div>


                    <div class="mail-box">

                    <div class="mail-body">

                    <form class="form-horizontal" method="get">

                        <div class="form-group"><label id="paraLabel" class="col-sm-2 control-label">Para:</label>
                            <div class="col-sm-10">

                                <select id="paraNovoEmail" name="paraNovoEmail" class="form-control paraNovoEmail input-sm" data-placeholder="Seleccione Utilizador(es) da Plataforma"  multiple="multiple"  >
                                <option></option>
                                                                </select>
                            </div>
                        </div>

                        <div class="form-group"><label id="bccLabel" class="col-sm-2 control-label">Bcc:</label>
                            <div class="col-sm-10">
                                <select id="bccNovoEmail" name="bccNovoEmail" class="form-control bccNovoEmail input-sm" data-placeholder="Seleccione Utilizador(es) da Plataforma"  multiple="multiple" >
                                <option></option>
                                                                </select>
                            </div>
                        </div>

                        <div class="form-group"><label id="labelEmpresaProcesso" class="col-sm-2 control-label">Empresa:</label>
                            <div class="col-sm-10">
                                <select id="empresaProcessoEmail" name="empresaProcessoEmail" class="form-control empresaNovoEmail input-sm" data-placeholder="Seleccione a Empresa Associada ao Processo"  >
                                <option></option>
                                                                </select>
                            </div>
                        </div>

                         <div class="form-group"><label id="labelTipoEntidade" class="col-sm-2 control-label">Tipo Entidade:</label>
                            <div class="col-sm-10">
                                <select id="tipoEntidadeEmail" name="tipoEntidadeEmail" class="form-control tipoEntidadeEmail input-sm" data-placeholder="Seleccione o Tipo de Entidade"  >
                                <option></option>
                                                                </select>
                            </div>
                        </div>



                        <div class="form-group"><label id="labelEntidadeEmail" class="col-sm-2 control-label">Entidade:</label>
                            <div class="col-sm-10">
                                <select id="entidadeProcessoEmail" name="entidadeProcessoEmail" class="form-control tipoProcessoEmail input-sm" data-placeholder="Seleccione uma Entidade Associada ao Processo" disabled="disabled" >
                                <option></option>
                                                                </select>
                            </div>
                        </div>

                        <div class="form-group"><label id="labelTipoProcesso" class="col-sm-2 control-label">Tipo Processo:</label>
                            <div class="col-sm-10">
                                <select id="tipoProcessoEmail" name="tipoProcessoEmail" class="form-control tipoProcessoEmail input-sm" data-placeholder="Seleccione o Tipo de Processo"  >
                                <option></option>
                                                                </select>
                            </div>
                        </div>

                         <div class="form-group"><label id="labelProcesso" class="col-sm-2 control-label">Processo:</label>
                            <div class="col-sm-10">
                                <select id="processoNovoEmail" name="processoNovoEmail" class="form-control processoNovoEmail input-sm" data-placeholder="Seleccione o Processo" disabled="disabled" >
                                <option></option>
                                                                </select>
                            </div>
                        </div>


                        
                        <div class="form-group"><label id="assuntoLabel" class="col-sm-2 control-label">Assunto:</label>
                            <div class="col-sm-10"><input id="assuntoEmail" name="assuntoEmail" type="text" class="form-control" value=""></div>
                        </div>

                        <div class="form-group"><label id="labelPublico" class="col-sm-2 control-label">Publico</label>
                            <div class="col-sm-10">
                                <select id="publicoEmail" name="publicoEmail"  >
                                    <option value="1">Sim</option><option value="0">Não</option>                                </select>
                            </div>
                        </div>
                        
         
                    </form>

                    </div>

                                        <div class="mail-text h-200" style="padding:40px">

                        <textarea class="summernote" id="corpoMensagem"  ng-model="blog.content" ></textarea>
                            
                        
                        <div class="clearfix"></div>
                        
                    </div>
                    
                                            <div class="mail-text h-200 " style="padding:40px">
                        <h3>Anexos</h3>

                        <div class="dropzone" id="dropzoneAnexos">
                        </div>

                    </div>
                    
                    <div class="mail-body text-right tooltip-demo">
                        <a id="enviarEmail" class="btn btn-sm btn-success enviarEmail" data-toggle="tooltip" data-placement="top" title="Enviar Mail"><i class="fa fa-reply"></i> Enviar</a>
                        <a href="{{ URL::action('EmailsController@caixaEntrada' )}}" class="btn btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Eliminar Email"><i class="fa fa-times"></i> Eliminar</a>
                        <a id="btnRascunho" class="btn btn-info btn-sm" data-toggle="tooltip" data-placement="top" title="Guardar Rascunho" onclick="guardaRascunho();"><i class="fa fa-pencil"></i> Guardar Rascunho</a>
                    </div>
                    
                    <div class="clearfix"></div>

                    </div>
                </div>

        </div>
</div>

<div class="modal fade" id="modalConversa">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Histórico de Comunicações</h4>
      </div>
      <div class="modal-body">
        <section id="cd-timeline" class="cd-container">
                                

        </section>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" id="modalPrioridade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Prioridade do Mail</h4>
      </div>
      <div class="modal-body">
        
        <div class="funkyradio">

        <div class="funkyradio-primary">
            <input type="radio" name="prioridades" id="prioridadeBaixa" value="1"/>
            <label for="prioridadeBaixa">Baixa</label>
        </div>

        <div class="funkyradio-default">
            <input type="radio" name="prioridades" id="prioridadeNormal" value="2" checked/>
            <label for="prioridadeNormal">Normal</label>
        </div>

        <div class="funkyradio-primary">
            <input type="radio" name="prioridades" id="prioridadeUrgente" value="3" />
            <label for="prioridadeUrgente">Urgente</label>
        </div>
      
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary" onclick="guardaPrioridades();">Guardar Prioridade</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- Modal for processing task async for new itens -->
<div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="text-center">
                    <img src=