@extends('layouts.esic.gerenciador')
@section('content')
    <style>
        .ui-autocomplete-loading {
            background: white url({{url('img/gif/ajax-loader.gif')}}) right center no-repeat;
        }
    </style>

    <h3 class="page-header"><i class="fa fa-retweet" aria-hidden="true"></i> Solicitação <small>(Responder)</small></h3>
    <h5 class="page-header"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> Histório da Solicitação</h5>
    <table class="table table-bordered">
        <tr>
            <td><strong>Número Protocolo</strong></td>
            <td><b>{{$dados->numprotocolo}}</b></td>
            <td><strong>Tipo Solicitação</strong></td>
            <td colspan="3">***</td>
        </tr>
        <tr>
            <td><strong>Situação</strong></td>
            <td>{{$statu_situacao[$dados->situacao]}}</td>
            <td><strong>Forma Retorno</strong></td>
            <td colspan="3">{{$dados->formaretorno == 'E' ? 'E-Mail':''}}</td>
        </tr>
        <tr>
            <td><strong>Data da Solicitação</strong></td>
            <td>{{$dados->datasolicitacao}}</td>
            <td><strong>Recebida</strong></td>
            <td>{{$dados->datarecebimentosolicitacao}}</td>
            <td><strong>Previsão de Retorno</strong></td>
            <td>{{$dados->dataprevisaoresposta}}</td>
        </tr>
        <tr>
            <td><strong>Solicitação:</strong></td>
            <td colspan="5"><p style="background-color: #F0FFF0; padding: 10px">{{$dados->textosolicitacao}}</p></td>
        </tr>
        @if(!empty($dados->resposta))
            <tr>
                <td><strong>Resposta:</strong></td>
                <td colspan="5"><p style="background-color: #E0FFFF; padding: 10px"><b>{{$dados->dataresposta}}</b>, {{$dados->resposta}}</p></td>
            </tr>
        @endif
    </table>

    <div class="row">
        <div class="col-md-12">
            <label for=""><i style="color: grey">* Arquivos aceitos: pdf,xlx e csv de até 2MB.</i></label>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-body">
            <form name="FrmUpload" action="{{route('anexar-documento.store')}}" method="post" id="file-upload" enctype="multipart/form-data">
                @csrf
                <div class="form-row align-items-center">
                    <div class="col-md-6 col-md-offset-5">
                        <input type="file" name="file" class="form-control" required>
                        <input type="hidden" name="upd_solicitacao_id" value="{{encriptar($dados->idsolicitacao)}}">
                        <input type="hidden" name="upd_user_id" value="{{encriptar(userConnectedSicPainel()->idusuario)}}">
                    </div>
                    <div class="col-md-1">
                        <button type="submit" class="btn btn-warning"><i class="fa fa-plus" aria-hidden="true"></i> Anexar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if(!empty($anexos))
        <h4 class="page-header"><i class="fa fa-paperclip" aria-hidden="true"></i> Anexo(s)</h4>
        <div class="table-responsive">
            <table class="table table-hover table-condensed table-bordered">
                <thead>
                <tr>
                    <th width="5%">Código</th>
                    <th width="85%">Anexo</th>
                    <th width="10%">Baixar</th>
                </tr>
                </thead>
                <tbody>
                @foreach($anexos as $anexo)
                    <tr>
                        <td>{{str_pad($anexo->upd_id, 4, 0, STR_PAD_LEFT)}}</td>
                        <td>{{$anexo->upd_nome_original}}</td>
                        <td class="2" align="center">
                            <a href="{{asset("storage/esic/" . clearString(Config::get('myConstants.instituicao.nome'))."/anexos/".$dados->idsolicitacao."/".$anexo->upd_nome_encrypt )}}"
                               class="btn btn-default btn-sm" target="_blank"><i class="fa fa-download" aria-hidden="true"></i></a>
                            &nbsp;<a href="#" class="delete-record btn btn-danger btn-sm" data-id="{{$anexo->upd_id}}"><i class="fa fa-trash" aria-hidden="true"></i></a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    @endif

    @if(!empty($dados->situacao) && $dados->situacao == 'A')
        <form name="FrmUpdate" action="{{route('esic-gerenciador-responder-update')}}" method="post" autocomplete="off">
            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-md-12">
                    <label for=""><i style="color: grey">* Campo de Preenchimento Obrigatório</i></label>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <label>* Resposta:</label>
                    <textarea class="form-control" name="resposta" cols="30" rows="6" required></textarea>
                </div>
                <div class="col-md-2">
                    <label>* Status</label>
                    <select class="form-control" name="situacao" required>
                        <option selected></option>
                        @foreach($statu_situacao as $key => $val)
                            @if($statu_situacao[$key] == 'Respondido' || $statu_situacao[$key] == 'Negado')
                                @unset($statu_situacao[$key])
                                <option value="{{$key}}">{{$val}}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>
            <hr>

            <div class="row">
                <div class="col-md-12">
                    <input type="hidden" name="idsolicitacao" value="{{encriptar($dados->idsolicitacao)}}">
                    <button type="button" onclick="window.history.back()" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Voltar</button>
                    <button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-retweet" aria-hidden="true"></i> Responder</button>
                </div>
            </div>
            <hr>
        </form>
    @else
        <div class="row">
            <div class="col-md-12">
                <a href="{{route('area-logada-gerenciador')}}" class="btn btn-default"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Voltar</a>
            </div>
        </div>
    @endif
@endsection
@push('script')
    <script>
        $(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            //upload
            $('#file-upload').submit(function (e) {
                e.preventDefault();
                let formData = new FormData(this);
                $.ajax({
                    type: 'POST',
                    url: $(this).attr('action'),
                    cache: false,
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $.blockUI({css: {backgroundColor: '#f00', color: '#fff'}, onOverlayClick: $.unblockUI});
                    },
                    success: (response) => {
                        if (response) {
                            this.reset();
                            $.blockUI({
                                message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> O arquivo foi enviado com sucesso (:</div>',
                                timeout: 1500,
                                onOverlayClick: $.unblockUI
                            });
                            window.location.reload();
                        }
                    },
                    error: function (response) {
                        $.each(response.responseJSON.errors, function (key, value) {
                            $.blockUI({
                                message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + value[0] + ' ):' + '</div>',
                                timeout: 8000,
                                onOverlayClick: $.unblockUI
                            });
                        });
                    }
                });
            });

            //Deletar upload
            $(document).on("click", ".delete-record", function () {
                let id = $(this).attr('data-id');
                if (window.confirm("Deseja excluir registro?")) {
                    $.ajax(
                        {
                            url: urlBase + '/e-sic/painel/anexar-documento/' + id,
                            type: 'DELETE',
                            data: {
                                "id": id,
                            },
                            success: function () {
                                $.blockUI({
                                    message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> registro excluído com sucesso (:</div>',
                                    timeout: 1500,
                                    onOverlayClick: $.unblockUI
                                });
                                window.location.reload();
                            },
                            error: function (response) {
                                if (data.status === 405) {
                                    //alert('Você não tem permissão para esta ação.')
                                    $.blockUI({
                                        message: '<div class="alert alert-warning alert-dismissible" role="alert"><strong><span class="glyphicon glyphicon-ok" aria-hidden="true">Você não tem permissão para esta ação.</div>',
                                        timeout: 1500,
                                        onOverlayClick: $.unblockUI
                                    });
                                } else {
                                    $.each(response.responseJSON.errors, function (key, value) {
                                        $.blockUI({
                                            message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + value[0] + ' ):' + '</div>',
                                            timeout: 8000,
                                            onOverlayClick: $.unblockUI
                                        });
                                    });
                                }
                            }
                        });
                }
            })

            //INSERIR RESPOSTA
            let FrmUpdate = $("form[name=FrmUpdate]");
            FrmUpdate.submit(function () {
                let From = $(this).serialize(),
                    url = $(this).attr('action'),
                    post = $(this).attr('method');

                $.ajax({
                    type: post,
                    url: url,
                    data: From,
                    dataType: 'json',
                    beforeSend: function () {
                        $.blockUI({css: {backgroundColor: '#f00', color: '#fff'}, onOverlayClick: $.unblockUI});
                    },
                    success: function (data) {
                        if (data[0] === 'success') {
                            $.blockUI({
                                message: '<div class="alert alert-success alert-dismissible" role="alert"><strong><span class=glyphicon glyphicon-ok" aria-hidden="true"></span> Parabéns: </strong> ' + data[1] + ' (:',
                                timeout: 1500,
                                onOverlayClick: $.unblockUI
                            });

                            window.location.reload();
                        }
                    },
                    error: function (data) {
                        /** Mensagens vindo do back-end */
                        $.each(data.responseJSON.errors, function (key, value) {
                            $.blockUI({
                                message: '<div class="alert alert-danger alert-dismissible" role="alert"><span class="glyphicon glyphicon-alert" aria-hidden="true"></span>&nbsp;' + value[0] + ' ):' + '</div>',
                                timeout: 8000,
                                onOverlayClick: $.unblockUI
                            });
                        });
                    }
                });
                return false;
            });
        });
    </script>
@endpush