@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 Técnico';
@endphp

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

@section('conteudo')
    <section class="content">
        <div class="body_scroll">
            <div class="block-header">
                <div class="row">
                    <div class="col-lg-7 col-md-6 col-sm-12">
                        <h2 class="uppercase">{{ $title }}</h2>
                        <button class="btn btn-primary btn-icon mobile_menu" type="button"><i
                            class="zmdi zmdi-sort-amount-desc"></i></button>
                    </div>
                    <div class="col-sm-12">
                        <button id="btNovo" style="width: 150px;" class="btn btn-primary btn-icon float-left" type="button"
                            data-urlnew="{{ route('tecnicoprovedor.show', ['0', '0']) }}"><i>Novo Técnico</i></button>
                        <button id="btNovoPessoa" style="width: 150px;" class="btn btn-primary btn-icon"
                            type="button"><i>Novo Pessoa</i></button>
                        <button id="btPessoa" style="width: 150px;" class="btn btn-info btn-icon float-left"
                            type="button"><i>Dados Completos</i></button>
                    </div>

                </div>
            </div>
            <form action="{{ route('tecnicoprovedor.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-2">
                                <label>Id.:</label><br>
                                <input type="text" style="width: 100%;" name="id_provedor_tecnico"
                                    id="id_provedor_tecnico" readonly class="form-control bg-light" required
                                    value="{{ $dataShow->id_provedor_tecnico }}"><br>
                            </div>
                            <div class="col-lg-6">
                                <label>Pessoa:</label><br>
                                <select name="idpessoa_provedor_tecnico" id="idpessoa_provedor_tecnico"
                                    class="form-control show-tick ms select2 bg-light" data-placeholder="Select" required>
                                    <option value="0" selected>Selecione uma pessoa</option>
                                    @forelse ($dataPessoa as $item)
                                        @if ($item->id_pessoa === $dataShow->idpessoa_provedor_tecnico)
                                            <option value="{{ $item->id_pessoa }}" data-nome="{{ $item->nome_pessoa }}" selected>{{ $item->id_pessoa }} / {{ $item->nome_pessoa }}</option>
                                        @else
                                            <option value="{{ $item->id_pessoa }}" data-nome="{{ $item->nome_pessoa }}" >{{ $item->id_pessoa }} / {{ $item->nome_pessoa }}</option>
                                        @endif
                                    @empty
                                        <option value="0" selected>Sem pessoa</option>
                                    @endforelse
                                </select>
                                <br><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Instalação:</label><br>
                                <input type="text" style="width: 100%;" name="instal_provedor_tecnico"
                                    id="instal_provedor_tecnico" class="form-control bg-light" required
                                    value="{{ $dataShow->instal_provedor_tecnico }}">
                                <br><br>
                            </div>
                            <div class="col-lg-2">
                                <label>Reparo:</label><br>
                                <input type="text" style="width: 100%;" name="reparo_provedor_tecnico"
                                    id="reparo_provedor_tecnico" class="form-control bg-light" required
                                    value="{{ $dataShow->reparo_provedor_tecnico }}">
                                <br><br>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3">
                                <label>Status:</label><br>
                                <select name="idstatus_provedor_tecnico" id="idstatus_provedor_tecnico"
                                    class="col-lg-12 form-control" required>
                                    <option value="0" selected>Selecione um status</option>
                                        @forelse ($dataStatus as $itemStatus)
                                            @if ($itemStatus->id_status === $dataShow->idstatus_provedor_tecnico)
                                                <option value="{{ $itemStatus->id_status }}" selected>{{ $itemStatus->nome_status }}</option>
                                            @else
                                                <option value="{{ $itemStatus->id_status }}">{{ $itemStatus->nome_status }}</option>
                                            @endif
                                        @empty
                                            <option value="0" selected>Sem Status</option>
                                        @endforelse
                                </select>
                                <br><br>
                            </div>
                            <div class="col-lg-9">
                                <label>Observação:</label><br>
                                <input type="text" style="width: 100%;" name="obs_provedor_tecnico"
                                    id="obs_provedor_tecnico" class="form-control bg-light" value="{{ $dataShow->obs_provedor_tecnico }}">
                                <br><br>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="body">
                        <div class="row">
                            <div class="col-lg-6">
                                <div style="display: flex; gap: 10px; align-items: center;">

                                    <input type="number" id="ano" name="ano" placeholder="Ano"
                                        class="form-control bg-light" style="max-width: 120px;">

                                    <input type="number" id="mes" name="mes" placeholder="Mês"
                                        class="form-control bg-light" style="max-width: 120px;">

                                    <button type="button" id="btPesquisar" data-urlaction=""
                                            class="btn btn-warning btn-lg">
                                        Pesquisar
                                    </button>

                                </div>
                            </div>
                            <div class="col-lg-2">
                                <button type="button" id="btVoltar" data-urlaction=""
                                    class="btn btn-raised btn-primary bg-default btn-lg">Voltar</button>
                            </div>
                            <div class="col-lg-2">
                                <button type="button" id="btexcluir"
                                    data-urlaction="{{ route('tecnicoprovedor.delete') }}"
                                    data-idcampo="{{ $dataShow->id_provedor_tecnico }}"
                                    data-return="{{ route('tecnicoprovedor.index') }}"
                                    class="btn btn-raised btn-primary bg-danger btn-lg">Excluir</button>
                            </div>
                            <div class="col-lg-2">
                                <button type="submit" id="btSalvar"
                                    class="btn btn-raised btn-primary btn-lg">Salvar</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="body">
                        <div class="row">
                            <div class="col-lg-12">
                                <h2 class="uppercase">Atividades</h2>
                            </div>
                        </div>
                        <div class="">
                           <div class="col-lg-12">

                           </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3">
                                <b>Total de reparo pentende:</b> {{ number_format($totais['REPARO']['PENDENTE'] ?? 0.00, 2, ',', '.') }}
                            </div>
                            <div class="col-lg-3">
                                <b>Total de reparo pago:</b> {{ number_format($totais['REPARO']['PAGO'] ?? 0.00, 2, ',', '.') }}
                            </div>
                            <div class="col-lg-3 text-md-right">
                                <b>Total de instalação pentende:</b> {{ number_format($totais['INSTALAÇÃO']['PENDENTE'] ?? 0.00, 2, ',', '.') }}
                            </div>
                            <div class="col-lg-3 text-md-right">
                                <b>Total de instalação pago:</b> {{ number_format($totais['INSTALAÇÃO']['PAGO'] ?? 0.00, 2, ',', '.') }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-3">
                                <b>Qtds de reparo pentende:</b> {{ $totais['REPARO']['COUNT_PENDENTE'] ?? 0 }}
                            </div>
                            <div class="col-lg-3">
                                <b>Qtds de reparo pago:</b> {{ $totais['REPARO']['COUNT_PAGO'] ?? 0 }}
                            </div>
                            <div class="col-lg-3 text-md-right">
                                <b>Qtds de instalação pentende:</b> {{ $totais['INSTALAÇÃO']['COUNT_PENDENTE'] ?? 0 }}
                            </div>
                            <div class="col-lg-3 text-md-right">
                                <b>Qtds de instalação pago:</b> {{ $totais['INSTALAÇÃO']['COUNT_PAGO'] ?? 0 }}
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-lg-4">
                                <b>Total de instalação:</b> {{ number_format($totais['INSTALAÇÃO']['TOTAL'] ?? 0.00, 2, ',', '.') }}
                            </div>
                            <div class="col-lg-4">
                                <b>Total de reparo:</b> {{ number_format($totais['REPARO']['TOTAL'] ?? 0.00, 2, ',', '.') }}
                            </div>
                            <div class="col-lg-4 text-md-right">
                                <b>Total:</b> {{ number_format(($totais['REPARO']['TOTAL'] ?? 0.00)+($totais['INSTALAÇÃO']['TOTAL'] ?? 0.00), 2, ',', '.') }}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12" id="divTable">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="tablePerm">
                                        <thead>
                                            <tr>
                                                <th>Protocolo:</th>
                                                <th>Id Cliente:</th>
                                                <th>Cliente:</th>
                                                <th>Tipo:</th>
                                                <th>Andamento:</th>
                                                <th>Data/horas:</th>
                                                <th>Pagamento:</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @if ($dataAtividade != null)
                                                @forelse ($dataAtividade as $item)
                                                    <tr id="tr{{ $item->id_provedor_atendimento }}">
                                                        <td>{{ $item->protocolo_provedor_atendimento }} </td>
                                                        <td>{{ $item->idcli_provedor_atendimento }} </td>
                                                        <td>{{ $item->nome_pessoa }} </td>
                                                        <td>{{ $item->tipo_provedor_atendimento }}</td>
                                                        <td>{{ $item->status_provedor_atendimento }}</td>
                                                        <td>{{ \Carbon\Carbon::parse($item->criacao_provedor_atendimento)->format('d/m/Y H:i:s') }}</td>
                                                        <td>{{ $item->pagtecnico_provedor_atendimento }}</td>
                                                        <td style="float-right">
                                                            <a href="javascript:void(0);" onclick="abrirProtocolo(this);" data-id_perm="{{ $item->idinstituicao_provedor_atendimento }}" class="btn btn-default waves-effect waves-float btn-sm waves-red">
                                                                <i class="zmdi zmdi-info"></i>
                                                            </a>
                                                        </td>
                                                        <td style="display: none;">{{ $item->queixa_provedor_atendimento }}</td>
                                                        <td style="display: none;">{{ $item->registro_provedor_atendimento }}</td>
                                                        <td style="display: none;">{{ $item->problema_provedor_atendimento }}</td>
                                                        <td style="display: none;">{{ $item->solucao_provedor_atendimento }}</td>
                                                        <td style="display: none;">{{ $item->criacao_provedor_atendimento }}</td>
                                                    </tr>
                                                @empty
                                                    <td>Sem atividade</td>
                                                @endforelse
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
    </section>
    <!-- inicio modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content bg-secondary text-white">
                <div class="modal-header">
                    <button id="btFechar" type="button" class="close" data-dismiss="modal" aria-label="Close"><h6><span class="bg-secondary text-white" aria-hidden="true">&times;</span></h6></button>
                    <h5 class="modal-title">
                        <label id="titulo">Detalhes das atividades</label>
                    </h5>
                </div>
                <style>
                    .labelprotocolo{
                        margin-left: 10px;
                    }
                </style>
                <div class="modal-body">
                    <div class="card">
                        <div class="row">
                            <div class="col-lg-12" style="margin: 20px;">
                                <div class="row">
                                    <div class="col-lg-3">
                                        <input type="hidden" id="id_protocolo_label" name="id_protocolo_label">
                                        <label>PROTOCOLO:</label><label id="protocolo_label" class="labelprotocolo"></label>
                                    </div>
                                    <div class="col-lg-6">
                                        <label>CLIENTE:</label><label id="cliente_label" class="labelprotocolo"></label>
                                    </div>
                                    <div class="col-lg-3">
                                        <label>TIPO:</label><label id="tipo_label" class="labelprotocolo"></label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label>RECLAMAÇÃO:</label><br><label id="reclamacao_label" class="labelprotocolo"></label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label>PROBLEMA:</label><br><label id="problema_label" class="labelprotocolo"></label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-12">
                                        <label>SOLUÇÃO:</label><br><label id="solucao_label" class="labelprotocolo"></label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-3">
                                        <label>DATA:</label><label id="data_label" class="labelprotocolo"></label>
                                    </div>
                                    <div class="col-lg-3">
                                        <label>ANDAMENTO:</label><label id="andamento_label" class="labelprotocolo"></label>
                                    </div>
                                    <div class="col-lg-2">
                                        <label>PAGAMENTO:</label>
                                    </div>
                                    <div class="col-lg-3">
                                        <select name="pagamento_label" id="pagamento_label" style="padding-left: 20px"
                                            class="col-lg-12 form-control" data-placeholder="Select" required>
                                                <option value="PENDENTE" selected>PENDENTE</option>
                                                <option value="PAGO">PAGO</option>
                                                <option value="CANCELADO">CANCELADO</option>
                                        </select><br><br>
                                    </div>
                                    <div class="col-lg-1">

                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-10">

                                    </div>
                                    <div class="col-lg-2">
                                        <button type="button" id="btSalvar2" class="btn btn-raised btn-primary btn-lg">Salvar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- fim modal -->
@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>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_xxaIJcvlTBX3Xunuku-w6mWP2Lyiea8&callback=myMap"></script>
@endsection

@section('scripts')
<script>
    let idatendimento;
    $('#btSalvar2').click(function() {
        console.log('idatendimento', idatendimento);

        $.ajax({
            type: "POST",
            url: "{{ route('tecnicoprovedor.storepagamento') }}",
            headers: {
                'X-CSRF-TOKEN': $('#_token').val()
            },
            data: {
                id_provedor_atendimento: idatendimento,
                pagtecnico_provedor_atendimento: $('#pagamento_label').val()
            },
            dataType: "json"
        })
        .done(function (response) {
            showNotification(
                response.message || 'Pagamento realizado com sucesso!',
                'bg-green'
            );

            setTimeout(function () {
                location.reload();
            }, 3000);
        })
        .fail(function (xhr) {
            let msg = 'Erro ao realizar pagamento';

            if (xhr.responseJSON && xhr.responseJSON.message) {
                msg = xhr.responseJSON.message;
            }

            showNotification(msg, 'bg-red');
        });

    });
    $('#btVoltar').click(function() {
        $(location).attr('href', "{{ route('clienteprovedor.index') }}");
    });
    $('#btSalvar').click(function() {
        console.log('btSalvar');
    });
    $('#btPesquisar').on('click', function() {
        let id  = "{{ $id }}";
        let idp = "{{ $idp }}";
        let ano = $('#ano').val();
        let mes = $('#mes').val();

        let url = "/tecnicoprovedor/show/" + id + "/" + idp + "/" + ano + "/" + mes;

        window.location.href = url;
    });
    function abrirProtocolo(button){
        var $tr = $(button).closest('tr');

        // Obter os valores dos campos ocultos
        idatendimento           = $tr.attr('id').replace('tr', '');
        var protocolo1          = $tr.find('td:nth-child(1)').text();
        var cliente             = $tr.find('td:nth-child(2)').text() + ' / ' + $tr.find('td:nth-child(3)').text();
        var tipo                = $tr.find('td:nth-child(4)').text();
        var andamento           = $tr.find('td:nth-child(5)').text();
        var criacao             = $tr.find('td:nth-child(6)').text();
        var pagamento           = $tr.find('td:nth-child(7)').text();
        var queixa1             = $tr.find('td:nth-child(9)').text();
        var registro            = $tr.find('td:nth-child(10)').text();
        var problema            = $tr.find('td:nth-child(11)').text();
        var solucao             = $tr.find('td:nth-child(12)').text();

          // Preencher os campos ocultos no modal
        $('#protocolo_label').text(protocolo1);
        $('#cliente_label').text(cliente);
        $('#tipo_label').text(tipo);
        $('#reclamacao_label').text(queixa1);
        $('#registro_label').text(registro);
        $('#problema_label').text(problema);
        $('#solucao_label').text(solucao);
        $('#data_label').text(criacao);
        $('#andamento_label').text(andamento);
        $('#pagamento_label').selectpicker('val', pagamento);
        $("#myModal").modal({backdrop: 'static', keyboard: false});

    }
    function formatarData(data) {
        console.log(data);
        var dataObj = new Date(data);
        var dia = dataObj.getDate().toString().padStart(2, '0');
        var mes = (dataObj.getMonth() + 1).toString().padStart(2, '0');
        var ano = dataObj.getFullYear();
        var hora = dataObj.getHours().toString().padStart(2, '0');
        var minuto = dataObj.getMinutes().toString().padStart(2, '0');
        var segundo = dataObj.getSeconds().toString().padStart(2, '0');
        return `${dia}/${mes}/${ano} ${hora}:${minuto}:${segundo}`;
    }
    function showNotification(text, colorName = null) {
        if (colorName === null || colorName === '') { colorName = 'bg-black'; }
        let animateEnter = 'animated fadeInDown';
        let animateExit = 'animated fadeOutUp';
        let allowDismiss = true;
        let placementFrom = 'bottom';
        let placementAlign = 'right';

        $.notify({
            message: text
        },
        {
            type: colorName,
            allow_dismiss: allowDismiss,
            newest_on_top: true,
            timer: 10000,
            placement: {
                from: placementFrom,
                align: placementAlign
            },
            animate: {
                enter: animateEnter,
                exit: animateExit
            },
            template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "" : "") + '" role="alert">' +
            '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
            '<span data-notify="icon"></span> ' +
            '<span data-notify="title">{1}</span> ' +
            '<span data-notify="message">{2}</span>' +
            '<div class="progress" data-notify="progressbar">' +
            '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
            '</div>' +
            '<a href="{3}" target="{4}" data-notify="url"></a>' +
            '</div>'
        });
    }
</script>
@endsection