@extends('layout')

@section('cssUrl')
    <link rel="stylesheet" href="{{ asset('assets/plugins/morrisjs/morris.css') }}" />
    <!-- Colorpicker Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.css') }}" />
    <!-- Multi Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/multi-select/css/multi-select.css') }}">
    <!-- Bootstrap Spinner Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/jquery-spinner/css/bootstrap-spinner.css') }}">
    <!-- Bootstrap Tagsinput Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css') }}">
    <!-- Bootstrap Select Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap-select/css/bootstrap-select.css') }}" />
    <!-- noUISlider Css -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/nouislider/nouislider.min.css') }}" />
    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/select2.css') }}" />
@endsection

@section('csss')

@endsection

@php
    $title = 'Cadastro de Atendimento';
@endphp

@section('title')
    {{ $title }}
@endsection

@section('conteudo')
    <section class="content">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-sm-12">
                        <h2 class="uppercase">{{ $title }}</h2><br>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                            class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <button id="btNovo" style="width: 150px;" class="btn btn-primary btn-icon float-left"
                            type="button"  data-urlnew="{{ route('atendimentoprovedor.show', ['0', $dataShow->Cliente->id_provedor_clientes]) }}"><i>Novo Suporte</i></button>
                        <button id="btVoltar" style="width: 150px;" class="btn btn-warning btn-icon float-left"
                            type="button"><i>Voltar</i></button>
                        <button id="btWhatsApp" style="width: 150px;" class="btn btn-info btn-icon float-left"
                            type="button"><i>Enviar mensagem para o técnico</i></button>
                        @if($dataDesbloqueio)
                            <button id="btDesbloqueio" style="width: 150px;" class="btn btn-success btn-icon float-left"
                                type="button"><i>Desbloqueio</i></button>
                        @endif
                    </div>
                </div>
                @if(session('error'))
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                            </div>
                        </div>
                    </div>
                @endif
                <div class="row">
                    <div class="col-sm-4"><br>
                        <small>PROTOCOLO:</small>
                        <h1 class="uppercase">{{ $dataShow->protocolo_provedor_atendimento }}</h1>
                    </div>
                    <div class="col-sm-8" id="conexao" style="padding-top: 30px;">

                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12" id="conexao">
                        <small>EQUIPAMENTO:</small>
                        <ul id="listaPatrimonio">
                            @php
                                $contador = 0;
                            @endphp
                            @forelse ($dataPatrimonio as $item)
                                <li>
                                    <a id="linkPatrimonio{{ $contador }}" target="_blank" data-porta="{{ $item->porta_provedor_patrimonio }}" href="#"><h5 class="uppercase">{{ $item->descricao_provedor_patrimonio }} - Login: {{ $item->login_provedor_patrimonio }}</h5></a>
                                </li>
                                @php
                                    $contador++;
                                @endphp
                            @empty
                                <td>Sem patrimônio</td>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
            <form action="{{ route('atendimentoprovedor.store') }}" id="frmCadastro" class="form-horizontal">
                <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
                <div class="card">
                    <div class="body">
                        <div class="row">
                            <div class="col-lg-1">
                                <label>Id.:</label><br>
                                <input type="text" style="width: 100%;" name="id_provedor_atendimento"
                                    id="id_provedor_atendimento" readonly class="form-control bg-light" required
                                    value="{{ $dataShow->id_provedor_atendimento }}"><br>
                            </div>
                            <div class="col-lg-1">
                                <label>Id. Cliente:</label><br>
                                <input type="text" style="width: 100%;" name="idcli_provedor_atendimento"
                                    id="idcli_provedor_atendimento" readonly class="form-control bg-light" required
                                    value="{{ $dataShow->idcli_provedor_atendimento }}"><br>
                                <input type="hidden" id="idfat_provedor_atendimento" name="idfat_provedor_atendimento" value="{{ $dataShow->idfat_provedor_atendimento }}">
                            </div>
                            <div class="col-lg-4">
                                <label>Pessoa:</label><br>
                                <input type="text" style="width: 100%;" name="nome_pessoa"
                                    id="nome_pessoa" readonly class="form-control bg-light" required
                                    value="{{ $dataShow->Cliente->Pessoa->nome_pessoa }}{{ $dataShow->Cliente->Pessoa->empresa_pessoa }}">
                                <br>
                            </div>
                            <div class="col-lg-4">
                                <label>Técnico:</label><br>
                                <select name="idtec_provedor_atendimento" id="idtec_provedor_atendimento"
                                    class="form-control show-tick ms select2 bg-light" data-placeholder="Select" required>
                                    <option value="0" selected>Selecione um técnico</option>
                                    @forelse ($dataTecnico as $item)
                                        @if ($item->id_provedor_tecnico === $dataShow->idtec_provedor_atendimento)
                                            <option value="{{ $item->id_provedor_tecnico }}" data-nome="{{ $item->Pessoa->nome_pessoa }}" selected>{{ $item->id_provedor_tecnico }} / {{ $item->Pessoa->nome_pessoa }}</option>
                                        @else
                                            <option value="{{ $item->id_provedor_tecnico }}" data-nome="{{ $item->Pessoa->nome_pessoa }}">{{ $item->id_provedor_tecnico }} / {{ $item->Pessoa->nome_pessoa }}</option>
                                        @endif
                                    @empty
                                        <option value="0" selected>Sem técnico</option>
                                    @endforelse
                                </select>
                                <br><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Prioridade:</label><br>
                                <select name="prioridade_provedor_atendimento" id="prioridade_provedor_atendimento"
                                    class="form-control show-tick ms select2 bg-light" data-placeholder="Select" required>
                                        <option value="IRRELEVANTE" selected>IRRELEVANTE</option>
                                        <option value="ALTA" >ALTA</option>
                                        <option value="BAIXA" >BAIXA</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4">
                                <label>Tipo:</label><br>
                                <select name="tipo_provedor_atendimento" id="tipo_provedor_atendimento"
                                    class="col-lg-12 form-control" data-placeholder="Select" required>
                                        <option value="REPARO" selected>REPARO</option>
                                        <option value="INSTALAÇÃO">INSTALAÇÃO</option>
                                        <option value="FINANCEIRO">FINANCEIRO</option>
                                        <option value="AGENDAMENTO">AGENDAMENTO</option>
                                        <option value="RETIRADA">RETIRADA</option>
                                        <option value="INTERNO">INTERNO</option>
                                </select><br><br>
                            </div>
                            <div class="col-lg-8">
                                <label>Descrição:</label><br>
                                <input type="text" style="width: 100%;" name="queixa_provedor_atendimento"
                                    id="queixa_provedor_atendimento" class="form-control bg-light"
                                    value="{{ $dataShow->queixa_provedor_atendimento }}"><br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <label>Problema:</label><br>
                                <textarea name="problema_provedor_atendimento" id="problema_provedor_atendimento"
                                            class="col-lg-12 form-control bg-light" rows="3">{{ $dataShow->problema_provedor_atendimento }}</textarea><br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <label>Solução:</label><br>
                                <textarea name="solucao_provedor_atendimento" id="solucao_provedor_atendimento"
                                            class="col-lg-12 form-control bg-light" rows="3">{{ $dataShow->solucao_provedor_atendimento }}</textarea><br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3">
                                <label>Agendamento:</label><br>
                                <input type="datetime-local" style="width: 100%;" name="registro_provedor_atendimento"
                                    id="registro_provedor_atendimento" class="form-control bg-light"
                                    value="{{ str_replace(' ', 'T', $dataShow->registro_provedor_atendimento) }}"><br>
                            </div>
                            <div class="col-lg-3">
                                <label>Concluso:</label><br>
                                <input type="datetime-local" style="width: 100%;" name="concluso_provedor_atendimento"
                                    id="concluso_provedor_atendimento" class="form-control bg-light"
                                    value="{{ str_replace(' ', 'T', $dataShow->concluso_provedor_atendimento) }}"><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Pagamento tec.:</label><br>
                                {{ $dataShow->pagtecnico_provedor_atendimento }}<br><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Status:</label><br>
                                <select name="status_provedor_atendimento" id="status_provedor_atendimento"
                                    class="col-lg-12 form-control" data-placeholder="Select" required>
                                        <option value="ABERTO" selected>ABERTO</option>
                                        <option value="PROCESSO">PROCESSO</option>
                                        <option value="FINALIZADO">FINALIZADO</option>
                                </select><br><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Custo Total:</label><br>
                                <input type="text" style="width: 100%;" readonly name="custos_provedor_atendimento"
                                    id="custos_provedor_atendimento" class="form-control bg-light"
                                    value="{{ $dataShow->custos_provedor_atendimento }}"><br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <label>Observação:</label><br>
                                    <textarea name="obs_provedor_atendimento" id="obs_provedor_atendimento"
                                            class="col-lg-12 form-control bg-light" rows="3">{{ $dataShow->obs_provedor_atendimento }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="body">
                        <div class="row">
                            <div class="col-lg-10" id="msgReturn">

                            </div>
                            @if ($dataShow->status_provedor_atendimento != 'FINALIZADO')
                            <div class="col-lg-2">
                                <button type="submit" id="btSalvar"
                                    class="btn btn-raised btn-primary btn-lg">Salvar</button>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="card" id="cardPContato">
                    <div class="body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="uppercase">Produto(s) usado(s)</h2>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-10">
                                <label>Selecione um produto:</label><br>
                                <!--select name="id_provedor_patrimonio" id="id_provedor_patrimonio"
                                    class="form-control show-tick ms select2 bg-light" data-placeholder="Select" required>
                                    <option value="0" selected>Selecione um patrimônio</option>
                                    forelse ($dataPatrimonioSelect as $item)
                                        <option value=""></option>
                                    empty
                                        <option value="0" selected>Sem patrimônio disponível</option>
                                    endforelse
                                </select-->
                                <br><br>
                            </div>
                            <div class="col-lg-2 justify-content-center align-items-center align-self-center">
                                <button type="button" id="btCadastrarPatrimonio" class="btn btn-raised btn-primary bg-default btn-lg">ADD</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="table-responsive">
                                <!--table class="table table-striped" id="tablePatrimonio">
                                    <thead>
                                        <tr>
                                            <th>Id:</th>
                                            <th>Id. Patrimônio:</th>
                                            <th>Descrição:</th>
                                            <th>Modelo:</th>
                                            <th>Login:</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        forelse ($dataPatrimonio as $item)
                                            <tr id="tr">
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td style="float-right">
                                                    <a href="javascript:void(0);" onclick="deleteItem();" data-id_perm="" class="btn btn-default waves-effect waves-float btn-sm waves-red">
                                                        <i class="zmdi zmdi-delete"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        empty
                                            <td>Sem patrimônio</td>
                                        endforelse
                                    </tbody>
                                </table-->
                            </div>
                        </div>
                        <div class="card">
                            <div class="body">
                                <div class="row">
                                    <div class="col-lg-6" id="msgReturn">

                                    </div>
                                    <div class="col-lg-2">

                                    </div>
                                    <div class="col-lg-2">

                                    </div>
                                    <div class="col-lg-2">

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


            </form>
    </section>
@endsection

@section('scriptUrl')

    <script src="{{ asset('assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.js') }}"></script><!-- Bootstrap Colorpicker Js -->
    <script src="{{ asset('assets/plugins/jquery-inputmask/jquery.inputmask.bundle.js') }}"></script><!-- Input Mask Plugin Js -->
    <script src="{{ asset('assets/plugins/multi-select/js/jquery.multi-select.js') }}"></script><!-- Multi Select Plugin Js -->
    <script src="{{ asset('assets/plugins/jquery-spinner/js/jquery.spinner.js') }}"></script><!-- Jquery Spinner Plugin Js -->
    <script src="{{ asset('assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js') }}"></script><!-- Bootstrap Tags Input Plugin Js -->
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script><!-- Select2 Js -->
    <script src="{{ asset('assets/js/pages/forms/advanced-form-elements.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap-notify/bootstrap-notify.js') }}"></script>
    <script src="{{ asset('assets/js/formjs.js') }}"></script>
@endsection

@section('scripts')
<script>
    $('#btVoltar').click(function() {
        $(location).attr('href', "{{ route('atendimentoprovedor.index', $dataShow->idcli_provedor_atendimento) }}");
    });
    $('#btFaturas').click(function() {
        $(location).attr('href', "{{ route('faturaprovedor.index') }}/" + $('#id_provedor_clientes').val());
    });

    $(document).ready(function(){
        $('#tipo_provedor_atendimento').val("{{ $dataShow->tipo_provedor_atendimento }}").change();
        $('#status_provedor_atendimento').val("{{ $dataShow->status_provedor_atendimento }}").change();
        $('#pagtecnico_provedor_atendimento').val("{{ $dataShow->pagtecnico_provedor_atendimento }}").change();
        $('#prioridade_provedor_atendimento').val("{{ $dataShow->prioridade_provedor_atendimento }}").change();
        setInterval(function(){ verConexao() }, 5000);
        verConexao();
    });

    $('#status_provedor_atendimento').change(function(){
        if ($('#status_provedor_atendimento').val() == 'FINALIZADO'){
            swal("Atendimentos finalizados, não poderam serem editados!", {
                icon: "warning"
            });
        }
    });

    function verConexao(){
        let varPorta = '{{ $dataPatrimonio[0]->porta_provedor_patrimonio }}';
        $.ajax({
            type: "POST",
            url: "{{ route('mikrotik.statusppp') }}",
            headers: {'X-CSRF-TOKEN': $('#_token').val()},
            data: {
                id_provedor_clientes: '{{ $dataShow->idcli_provedor_atendimento }}'
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 1000){
                    let arryData    = data.data;
                    if (arryData.connect){
                        $('#conexao').html('<div class="alert alert-success"><strong>Conectado</strong> - ' + arryData.uptime + ' - <a target="_blank" href="http://' + arryData.address + ':' + varPorta + '" class="alert-link">' + arryData.address + '</a>.</div>');
                        $('#listaPatrimonio li').each(function(index, element){
                            $('#linkPatrimonio'+index).attr('href', 'http://' + arryData.address + ':' + $('#linkPatrimonio'+index).attr('data-porta'));
                        });
                    } else {
                        $('#conexao').html('<div class="alert alert-danger"><strong>Desconectado deste de</strong> ' + arryData.lastloggedout + '</div>');
                        $('linkPatrimonio').attr('href', '#');
                    }
                } else {
                    showNotification(data.message, 'alert-danger');
                }
            }
        });
    }

    $('#btCadastrarPatrimonio').click(function(){
        if ($('#id_provedor_clientes').val() == '0'){
            swal({
                title: "Erro!",
                text: "Não tem um cliente salvo!",
                icon: "error"
        })
        } else {
            $.ajax({
                type: "POST",
                url: "{{ route('patrimonioprovedor.addcliente') }}",
                data: {
                    _token:                     $('#_token').val(),
                    id_provedor_patrimonio:     $('#id_provedor_patrimonio option:selected').val(),
                    id_provedor_clientes:       $('#id_provedor_clientes').val()
                },
                dataType: "json",
                success: function (response) {
                    console.log(response);
                    if (response[0].tipo_provedor_patrimonio == 'CTO'){
                        $('#distribuicao_lat').val(response[0].lat_provedor_patrimonio);
                        $('#distribuicao_lng').val(response[0].lng_provedor_patrimonio);
                        construtoMap($('#endereco_pessoac').val());
                    }
                    $('#tablePatrimonio').find('tbody').prepend(
                    '<tr id="' + response[0].id_provedor_clie_patri  + '">' +
                        '<td>' + response[0].id_provedor_clie_patri  + '</td>' +
                        '<td>' + response[0].id_provedor_patrimonio  + '</td>' +
                        '<td>' + response[0].descricao_provedor_patrimonio +' / ' + response[0].serie_provedor_patrimonio + ' / ' + response[0].end_provedor_patrimonio + '</td>' +
                        '<td>' + response[0].modelo_provedor_patrimonio + '</td>' +
                        '<td>' + response[0].login_provedor_patrimonio + '</td>' +
                        '<td style="float-right">' +
                            '<a href="javascript:void(0);" onclick="deleteItem(' + response[0].id_provedor_clie_patri + ');" data-id_perm="' + response[0].id_provedor_clie_patri + '" class="btn btn-default waves-effect waves-float btn-sm waves-red">' +
                                '<i class="zmdi zmdi-delete"></i>' +
                            '</a>' +
                        '</td>' +
                    '</tr>');
                }
            });
        }
    });
    function deleteItem(item){
        swal({
            title: "Atenção!!!",
            text: "Você esta prestes a deletar uma patrimônio, você realmente deseja fazer isso?",
            icon: "warning",
            buttons: true,
            dangerMode: true
        })
        .then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url: "{{ route('patrimonioprovedor.deletecliente') }}",
                    method: 'POST',
                    dataType: 'html',
                    data: {
                        id: item,
                        _token: $('#_token').val()
                    },
                    success: function(retorno) {
                        $('#tr' + item).remove();
                    }
                });
                swal("Património retirado do cliente com Sucesso", {
                    icon: "success"
                });
            } else {
                swal("Ação cancelada");
            }

        });
    }
    $('#btWhatsApp').click(function(){
        $.ajax({
            url: "{{ route('enviarmensagemtecnico', $dataShow->id_provedor_atendimento) }}",
            method: 'GET',
            dataType: 'html',
            headers: {'X-CSRF-TOKEN': $('#_token').val()},
            data: {},
            success: function(retorno) {
                swal("Mensagem enviado com sucesso!", {
                    icon: "success"
                });
            }
        });
    });
    @if($dataDesbloqueio)
        $('#btDesbloqueio').click(function(){
            swal({
                title: "Atenção!!!",
                text: "O desbloqueio vai durar {{ $dataConfiguracao->agendamento_provedor_configuracao }} dias",
                icon: "warning",
                buttons: true,
                dangerMode: true
            }).then((willDelete) => {
                if (willDelete) {
                    $.ajax({
                        url: "{{ route('atendimentoprovedor.desbloqueioPPP') }}",
                        method: 'POST',
                        dataType: 'html',
                        data: {
                            idcli_provedor_atendimento: $('#idcli_provedor_atendimento').val(),
                            idfat_provedor_atendimento: $('#idfat_provedor_atendimento').val(),
                            _token: $('#_token').val()
                        },
                        success: function(retorno) {
                            consolo.log(retorno);
                            $('#tr' + item).remove();
                        }
                    });
                    swal("Património retirado do cliente com Sucesso", {
                        icon: "success"
                    });
                } else {
                    swal("Ação cancelada");
                }

            });
        });
    @endif
</script>
@endsection