@extends('template')

@section('content')
<div class="page-content">
    <div class="container-fluid">
        <div class="page-content-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light">
                        <div class="portlet body">
                            <div class="row">
                                <div class="col-md-12">
                                    <span class="font-blue-madison title"><i class="fa fa-ticket"></i> Ticket Suporte</span>
                                    @if(routeAcess('admin.tickets.create'))
                                        <a href="{{ route('admin.tickets.create') }}" id="sample_editable_1_new" class="btn sbold green-jungle popovers right" data-container="body" data-trigger="hover" data-placement="top" data-content="Abrir um novo Chamado"><i class="fa fa-plus"></i> Abrir Novo Chamado </a>
                                    @endif
                                    <hr>
                                </div>
                            </div>
                        </div>
                        <div class="portlet box blue-madison">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="icon-eye"></i>Filtros
                                </div>
                                <div class="tools popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Exibir/Esconder filtros.">
                                    <a href="javascript:;" class="expand"> </a>
                                </div>
                            </div>
                            <div class="portlet-body" style="display:none;">
                                <div class="panel-group">
                                    {!! Form::open(['route' => 'admin.tickets', 'method' => 'get']) !!}
                                        <div class="row">
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::text('nticket', '', ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off', 'id' => 'nchamado']) !!}
                                                    {!! Form::label('', 'Número do Ticket:') !!}
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    <div class="input-group left-addon">
                                                        <span class="input-group-addon has-personalizado">
                                                            <i class="fa fa-toogle"></i>
                                                        </span>
                                                        {!! Form::text('protocolo', '', ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off']) !!}
                                                         {!! Form::label('', 'Protocolo:') !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    <div class="input-group left-addon">
                                                        <span class="input-group-addon has-personalizado">
                                                            <i class="fa fa-user"></i>
                                                        </span>
                                                        {!! Form::text('name', '', ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off']) !!}
                                                        {!! Form::label('', 'Nome do Cliente:') !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    <div class="input-group left-addon">
                                                        <span class="input-group-addon has-personalizado">
                                                            <i class="fa fa-send"></i>
                                                        </span>
                                                        {!! Form::text('email', '', ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off']) !!}
                                                        {!! Form::label('', 'Email do cliente:') !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::select('status', $status, '', ['class'=>'form-control']) !!}
                                                    {!! Form::label('status', 'Status') !!}
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    <div class="input-group left-addon">
                                                        <span class="input-group-addon has-personalizado">
                                                            <i class="fa fa-calendar"></i>
                                                        </span>
                                                        {!! Form::text('data_ini', '', ['class' => 'form-control', 'placeholder' => '', 'autocomplete' => 'off', 'id' => 'data_ini']) !!}
                                                        {!! Form::label('', 'Período Inicial:') !!}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    <div class="input-group left-addon">
                                                        <span class="input-group-addon has-personalizado">
                                                            <i class="fa fa-calendar"></i>
                                                        </span>
                                                        {!! Form::text('data_fim', '', ['class' => 'form-control',  'autocomplete' => 'off', 'id' => 'data_fim']) !!}
                                                        {!! Form::label('', 'Periodo Final:') !!}
                                                    </div>
                                                </div>
                                            </div>
                                        
                                            <div class="col-md-2">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::select('departamento_id', $departamentos, '', ['class'=>'form-control','id'=>'departamento', 'onchange'=>'get_assunto()']) !!}
                                                    {!! Form::label('departamento_id', 'Departamento', ['class' => 'control-label']) !!}
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::select('titulo_id', [' ' => ':: Selecione um Departamento ::'], '', ['class'=>'form-control','id'=>'assunto']) !!}
                                                    {!! Form::label('titulo_id', 'Assunto') !!}
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group form-md-line-input has-personalizado form-md-floating-label">
                                                    {!! Form::select('operador_id', $operadores, '', ['class'=>'form-control','id'=>'operador_id']) !!}
                                                    {!! Form::label('operador_id', 'Analista') !!}
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <button type="submit" class="caption  btn blue-madison popovers"  data-container="body" data-trigger="hover" data-placement="top" data-content="Gerar Novo relatório com base nos filtros ao lado">
                                                    <i class="glyphicon glyphicon-search"></i> Filtrar
                                                </button>
                                            </div>
                                        </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_1">
                        <thead>
                            <tr class="uppercase bg-blue-madison">
                                <th class="col-sm-3 font-white"> Cliente </th>
                                <th class="col-sm-2 font-white"> Assunto </th>
                                <th class="col-sm-2 font-white"> Atendente </th>
                                <th class="col-sm-1 font-white"> Aberto em </th>
                                <th class="col-sm-2 font-white"> Status </th>
                                <th class="col-sm-2 font-white">  </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($tickets as $ticket)
                                <tr class="odd gradeX">
                                    <td> {{$ticket->cliente}} </td>
                                    <td> <span class="btn popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="{{ $ticket->departamento}}" title="Departamento">{{$ticket->assunto}}</span> </td>
                                    <td>
                                        @if(routeAcess('admin.tickets.atribuir.chamado'))
                                            @if($ticket->status=='Aberto')
                                                {!! Form::select("atendente", $operadores, $ticket->operador_id, ["class"=>"form-control", "onchange"=>"atribuirChamado(this.value, '$ticket->id')",'id'=>'atendente'.$ticket->id]) !!}
                                                {!! Form::hidden('operador', $ticket->operador_id,['id'=>'operador'.$ticket->id]) !!}
                                            @else
                                                {{ $ticket->atendente }}
                                            @endif
                                        @else
                                            {{ $ticket->atendente }}
                                        @endif
                                    </td>
                                    <td class="center"> {{ $ticket->created_at }} </td>
                                    <td class="center">
                                        @if(strtolower($ticket->status) != 'fechado') 
                                            @if($ticket->atendimento == 'ok')
                                                @if($ticket->alerta == 'Envio Aviso Alerta')
                                                    <i class="btn fa fa-circle font-yellow-lemon popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Atenção, restam {{ $ticket->tempo_atendimento}} para resolução deste Ticket"> 
                                                @else
                                                    <i class="btn fa fa-circle font-green-jungle popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Restam {{ $ticket->tempo_atendimento}} para resolução deste Ticket"> 
                                                @endif
                                            @else 
                                                <i class="btn fa fa-circle font-red popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Atraso de {{ $ticket->tempo_atendimento}} na resoluçao deste Ticket"> 
                                            @endif
                                        @else 
                                            <i class="btn fa fa-circle font-grey-salsa popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Ticket Encerrado!"> 
                                        @endif
                                        {{$ticket->status}}
                                        </i>
                                    </td>
                                    <td>
                                        <a href="{{ route('admin.tickets.edit',['id'=>$ticket->id]) }}" class="btn sbold blue-madison popovers" data-container="body" data-trigger="hover" data-placement="top" data-content="Atender Chamado"><span class="fa fa-laptop"></span></a>
                                        <span class="btn red btn-outline sbold" data-toggle="modal" href="#details" onclick="populaInfo({{ json_encode($ticket) }})"> Detalhes </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="6" align="center">{!! $paginacao !!}</td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="modal fade" id="details" tabindex="-1" role="basic" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                    <h4 class="modal-title" id = "title"></h4>
                                </div>
                                <div class="modal-body" id = "body">
                                    <div class="row">
                                        <div class="col-sm-2"><strong>Cliente: </strong></div>
                                        <div class="col-sm-10" id="cliente"></div>
                                    </div>
                                    <hr/>
                                    <div class="row">
                                        <div class="col-sm-2"><strong>Protocolo: </strong></div>
                                        <div class="col-sm-4" id="protocolo"></div>
                                        <div class="col-sm-2"><strong>Ticket Nº: </strong></div>
                                        <div class="col-sm-2" id="id"></div>
                                    </div>
                                    <hr/>
                                    <div class="row">
                                        <div class="col-sm-2"><strong>Status: </strong></div>
                                        <div class="col-sm-4" id="status"></div>
                                        <div class="col-sm-2"><strong>Situação: </strong></div>
                                        <div class="col-sm-4" id="atendimento"></div>
                                    </div>
                                    <hr/>
                                    <div class="row">
                                        <div class="col-sm-2"><strong>Aberto em: </strong></div>
                                        <div class="col-sm-4" id="created_at"></div>
                                        <div class="col-sm-3"><strong>Previsão de atendimento: </strong></div>
                                        <div class="col-sm-3" id="previsao"></div>
                                    </div>
                                    <hr/>
                                    <div class="row">
                                        <div class="col-sm-12"><strong>Tempo de Atendimento: </strong></div>
                                        <div class="col-sm-12" id="tempo_atendimento"></div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.modal-content -->
                        </div>
                        <!-- /.modal-dialog -->
                    </div>
                </div>
            </div>
        </div>
    </div>

@stop()
@section('js-admin-tickets')
    
    <link href="{{ asset('/assets/global/css/components.min.css') }}" rel="stylesheet" id="style_components" type="text/css" />
    <script src="{{ asset('/assets/global/scripts/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery.blockui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/pages/scripts/ui-blockui.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/assets/global/plugins/jquery-ui/jquery-ui.1.10.3.js') }}" type="text/javascript"></script>   

    <script type="text/javascript">
        $(document).ready(function() {
                       
            $.datepicker.regional['pt-BR'] = {
                closeText: 'Fechar',
                prevText: '&#x3c;Anterior',
                nextText: 'Pr&oacute;ximo&#x3e;',
                currentText: 'Hoje',
                monthNames: ['Janeiro','Fevereiro','Mar&ccedil;o','Abril','Maio','Junho',
                'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
                monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun',
                'Jul','Ago','Set','Out','Nov','Dez'],
                dayNames: ['Domingo','Segunda-feira','Ter&ccedil;a-feira','Quarta-feira','Quinta-feira','Sexta-feira','Sabado'],
                dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
                dayNamesMin: ['Dom','Seg','Ter','Qua','Qui','Sex','Sab'],
                weekHeader: 'Sm',
                dateFormat: 'dd/mm/yy',
                firstDay: 0,
                isRTL: false,
                showMonthAfterYear: false,
                yearSuffix: ''
            };
            
            $.datepicker.setDefaults($.datepicker.regional['pt-BR']);
            $("#data_ini").datepicker();  
            $("#data_fim").datepicker(); 

            get_assunto();

        });

        function get_assunto(){ 
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })

            var str = "";
            var departamento = $('#departamento').val();
            if(departamento==''){
                $('#assunto').html('<option value=" ">::Selecione o setor::</option>');
            }else{
                $.ajax({ 
                    type: "GET", 
                    url: "{{ route('suporte.search.assunto') }}", 
                    data: {departamento: departamento}, 
                    success: function(data) { 
                        str += '<option value=""></option>';
                        $(data).each(function () {
                            str += '<option value=' + this.id + '>' + this.assunto + '</option>';
                        })

                        $('#assunto').html(str).focus();

                    } 
                });
            }
        }

        function atribuirChamado(atendente, chamado){

            $.blockUI({ message: "Olá {{ Auth::user()->name}}, por favor aguarde um momento enquanto a informação é processada <img src='{{ asset('/assets/global/img/loading.gif') }}'>" });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            })

            var str = "";

            if(atendente==0){

                $.unblockUI();    
                swal({"title":"Oops!","text":"Selecione um atendente para atribuir ao chamado","showConfirmButton":true,"type":"error"});  
                var atendente = $("#operador"+chamado).val();  
                $("#atendente"+chamado).val(atendente);

            }else{
                $.ajax({ 
                    type: "GET", 
                    url: "{{ route('admin.tickets.atribuir.chamado') }}",
                    data: {atendente: atendente, chamado:chamado}, 
                    success: function(data) { 
                        $.unblockUI();
                        swal({"title":"","text":"Chamado atribuído com sucesso!","showConfirmButton":true,"type":"success"});
                    } 
                });
            }

        }
        @if (session('message'))
            swal({"title":"","text":"{{ session('message') }}","showConfirmButton":true,"type":"success"});
        @endif

        function populaInfo(ticket){

            console.log(ticket);
            $("#title").html(ticket.assunto)
            $("#id").html(ticket.id)
            $("#protocolo").html(ticket.protocolo)
            $("#cliente").html(ticket.cliente)
            $("#status").html(ticket.status)
            $("#created_at").html(ticket.t_created_at)
            $("#previsao").html(ticket.t_previsao)
            $("#tempo_atendimento").html(ticket.tempo_atendimento)
            // $("#atendimento").html(ticket.status)

        }
    </script>

@stop()