@extends('construction.admin.master.master')

@section('css')
    <link rel="stylesheet" href="{{url(asset('admin/assets/vendor/datatables/media/css/dataTables.bootstrap5.css'))}}"/>
@endsection


@section('content')
    <div class="row">
        <div class="col">
            <section class="card">
                <header class="card-header">
                    <div class="card-actions">
                        <a href="#" class="card-action card-action-toggle" data-card-toggle></a>
                        <a href="#" class="card-action card-action-dismiss" data-card-dismiss></a>
                    </div>
                    <h4 class="card-title">{{$pageName}}</h4>
                </header>
                <div class="card-body">

                    @if(isset($dependentes))
                        @if (count($dependentes) < $plano->LimiteDependentes)
                            <div id="podeCadastrar" class="alert alert-success" style="display : flex; align-items : center;">
                                <span id="podeCadastrarDependentes">Você pode adicionar {{' ' . ($plano->LimiteDependentes - count($dependentes)) . ' '}} dependente{{($plano->LimiteDependentes - count($dependentes) )> 1 ? 's':''}}!</span>
                                <button class="btn btn-light pull-right" style="position: absolute; right: 0.7rem;" onclick="showCadastrarDependentes()">Adicionar</button>
                            </div>
                        @endif
                    @endif

                    <table class="table table-bordered table-striped table-no-more mb-0" id="datatable-tabletools" style="width: 100%">
                        <thead>
                        <tr >
                            <th class="text-left">Nome</th>
                            <th class="text-end">Parentesco</th>
                            <th class="text-end">Cadastro</th>
                            <th class="text-end">Adicional</th>
{{--                            @can('cartao-configuracao')--}}
                                <th class="text-end">Cartão</th>
{{--                            @endcan--}}
{{--                            <th class="d-lg-none">Cadastrato em</th>--}}
                        </tr>
                        </thead>
                        <tbody id="tbody">

                        @foreach($dependentes as $dependente)
                            <tr>
                                <td data-title="Nome" >{{$dependente->Dependente}} <br> <span style="font-size: x-small; font-family: Helvetica, sans-serif, Verdana, Arial;">{{$dependente->Parentesco}}</span></td>
                                <td data-title="Situação" class="text-center align-middle">{{$dependente->Situacao}}</td>
                                <td data-title="Cadastro" class="text-center align-middle">{{$dependente->Data}}</td>
                                <td data-title="Adicional" class="text-center align-middle">{{$dependente->Adicional->Valor != 'R$0,00' ? $dependente->Adicional->Valor: '-'}}</td>
{{--                                <td data-title="Adicional" class="text-end">R${{number_format($dependente->Adicional->Valor,2, ',','.') }}</td>--}}
{{--                                @can('cartao-visualizacao')--}}
                                <td data-title="" class="text-center align-middle">
                                    <div class="btn-group">
                                        <a target="_blank"
                                           href="https://{{$_SERVER['HTTP_HOST']}}/cartao/dependente/{{\App\Support\clsTexto::criptografa($dependente->Id)}}"
                                           class="btn custom-url-portal btn btn-sm btn-primary rounded "
                                           style="font-weight: 100;"
                                           id="cartaoZap">
                                            <i class="fa-solid fa-eye"></i>
                                        </a>
                                        <a target="_blank"
                                           href="https://api.whatsapp.com/send?text=https://{{$_SERVER['HTTP_HOST']}}/cartao/dependente/{{\App\Support\clsTexto::criptografa($dependente->Id)}}"
                                           class="btn custom-url-portal btn btn-sm btn-primary rounded "
                                           style="font-weight: 100;"
                                           id="cartaoZap">
                                            <i class="fa-brands fa-whatsapp"></i>
                                        </a>
                                    </div>
                                </td>
{{--                                @endcan--}}
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </section>
        </div>
    </div>


@endsection

@section('modais')
    <!-- Modal -->
    <div class="modal fade show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="defaultModalLabel">Cadastro de dependente!</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
                    <div class="ajax_response"></div>
                </div>
                <form name="formCadastrarDependente" id="formCadastrarDependente" class="mb-4" novalidate="novalidate">
                    @csrf
                    <input type="hidden" value="{{$associado->Id}}" name="IdPessoa">
                <div class="modal-body">

                        <div class="form-group col-md-12">
                            <label class="form-label">Nome completo <span class="text-color-danger">*</span></label>
                            <input type="text" class="form-control h-auto py-2 dependente-error" name="Dependente" id="Dependente" value="" >
                            <span class="invalid-feedback" id="dependente-error"></span>
                        </div>
                        <div class="form-group col-md-12">
                            <label class="form-label">Parentesco <span class="text-color-danger">*</span></label>
                            <select class="form-control parentesco-error" name="Parentesco">
                                <option value="">
                                    ...
                                </option>
                                <option value="Cônjuge">Cônjuge</option>
                                <option value="Pai">Pai</option>
                                <option value="Mãe">Mãe</option>
                                <option value="Filho(a)">Filho(a)</option>
                                <option value="Irmã(ão)">Irmã(ão)</option>
                                <option value="Avó(ô)">Avó(ô)</option>
                                <option value="Neto(a)">Neto(a)</option>
                                <option value="Tio(a)">Tio(a)</option>
                                <option value="Sobrinho(a)">Sobrinho(a)</option>
                                <option value="Bisavó(ô)">Bisavó(ô)</option>
                                <option value="Bisneto(a)">Bisneto(a)</option>
                                <option value="Primos">Primos</option>
                                <option value="Sogro(a)">Sogro(a)</option>
                                <option value="Genro/Nora">Genro/Nora</option>
                                <option value="Cunhado(a)">Cunhado(a)</option>
                                <option value="Padrasto">Padrasto</option>
                                <option value="Madrasta">Madrasta</option>
                                <option value="Enteado(a)">Enteado(a)</option>
                                <option value="Ex-cônjuge">Ex-cônjuge</option>
                                <option value="Outro dependente">Outro dependente</option>
                            </select>

                            <span class="invalid-feedback" id="parentesco-error"></span>
                        </div>

                        <div class="form-group col-md-12">
                            <label class="form-label">Cpf</label>
                            <input type="text" class="form-control h-auto py-2 cpf cpf-error"id="cpf" name="Cpf" value="">
                            <span class="invalid-feedback" id="cpf-error"></span>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Nascimento</label>
                                <input type="text" class="form-control h-auto py-2 date data_nascimento-error" id="data_nascimento" name="DataNascimento" value="">
                                <span class="invalid-feedback" id="data_nascimento-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Telefone</label>
                                <input type="text" class="form-control h-auto py-2 telefone1-error phone" name="Telefone" id="telefone" value="" >
                                <span class="invalid-feedback" id="telefone1-error"></span>
                            </div>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Fechar</button>
                    <button id="buttonEnviar" type="submit" class="btn btn-primary">
                        <div class="buttonEnviar text-white" role="status">
                            <span class="sr-only">Loading...</span>
                            Salvar
                        </div>
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>

        function showCadastrarDependentes() {
            $("#myModal").modal('show');
        }

        // AJAX RESPONSE
        var ajaxResponseBaseTime = 3;

        function ajaxMessage(message, time) {
            var ajaxMessage = $(message);

            ajaxMessage.append("<div class='message_time'></div>");
            ajaxMessage.find(".message_time").animate({"width": "100%"}, time * 1000, function () {
                $(this).parents(".message").fadeOut(200);
            });

            $(".ajax_response").append(ajaxMessage);
        }

        // AJAX RESPONSE MONITOR
        $(".ajax_response .message").each(function (e, m) {
            ajaxMessage(m, ajaxResponseBaseTime += 1);
        });

        // AJAX MESSAGE CLOSE ON CLICK
        $(".ajax_response").on("click", ".message", function (e) {
            $(this).effect("bounce").fadeOut(1);
        });

        $(function () {

            $('form[name="formCadastrarDependente"]').submit(function (event) {
                event.preventDefault();
                $('input').removeClass('is-invalid');
                $('select').removeClass('is-invalid');

                $.ajax({
                    url:        "{{route('admin.cadastraDependente')}}",
                    type:       "post",
                    //aqui no data estou serializando o form
                    data:       $(this).serialize(),
                    //dataType é o tipo de retorno que está aguardando
                    dataType:   "json",
                    beforeSend: function() {
                        $('.buttonEnviar').addClass('spinner-border').html('<span class="sr-only"></span>');
                        $('.buttonEnviar').addClass('spinner-border-sm');
                        // Aqui desativamos seu botão, troque para o id correto
                        $('#buttonEnviar').attr('disabled', 'disabled');
                    },
                    success: function (response) {
                        ajaxMessage(response.mensagem, 3);
                        console.log(response);

                        var dependentes = response.dependentes;

                        if(response.numDependentes == 1 ) {
                            // remove a linha de Nenhum registro encontrado, se houver somente 1 item na lista
                            document.getElementById('tbody').deleteRow(0);
                        }

                        $("#datatable-tabletools").append('' +
                            '<tr>'+
                            '<td>'+response.dependente.Dependente+'</td>'+
                            '<td>'+response.dependente.Parentesco+'</td>'+
                            '<td>'+response.dependente.Situacao+'</td>'+
                            '<td>'+response.dependente.Data2+'</td>'+
                            '<td class="text-end">R$0,00</td>'+
                                @can('cartao-configuracao')'<td class="text-end"></td>'+@endcan
                            '</tr>');

                        $('.buttonEnviar').removeClass('spinner-border').html('Salvar');
                        $('.buttonEnviar').removeClass('spinner-border-sm');
                        $('#buttonEnviar').removeAttr('disabled');

                        if ((response.plano.LimiteDependentes - response.numDependentes) > 1){
                            $('#podeCadastrarDependentes').html('Você pode adicionar ' + (response.plano.LimiteDependentes - response.numDependentes) + ' dependentes!');
                        } else {
                            $('#podeCadastrarDependentes').html('Você pode adicionar ' + (response.plano.LimiteDependentes - response.numDependentes) + ' dependente!');
                        }


                        $("#formCadastrarDependente").trigger("reset");
                        @if(isset($plano->LimiteDependentes))
                        if(response.numDependentes >= {{$plano->LimiteDependentes}} ) {
                            $('#podeCadastrar').remove();
                            $("#myModal").modal('hide');
                        }
                        @endif


                        setTimeout(function () {
                            document.getElementById('message').style.display = "none";
                        }, 3000)
                    },
                    error: function (error) {
                        console.log(error);
                        console.log(error.responseJSON.message);

                        $('.buttonEnviar').removeClass('spinner-border').html('Salvar');
                        $('.buttonEnviar').removeClass('spinner-border-sm');
                        $('#buttonEnviar').removeAttr('disabled');

                        var erros = error.responseJSON.errors;

                        if(typeof(erros)  !== "undefined") {
                            if (error.responseJSON.errors.Dependente) {
                                $('#dependente-error').text(erros.Dependente);
                                $('.dependente-error').addClass('is-invalid');
                            }

                            if (error.responseJSON.errors.Parentesco) {
                                $('#parentesco-error').text(erros.Parentesco);
                                $('.parentesco-error').addClass('is-invalid');
                            }

                            if (error.responseJSON.errors.Cpf) {
                                $('#cpf-error').text(erros.Cpf);
                                $('.cpf-error').addClass('is-invalid');
                            }

                            if (error.responseJSON.errors.DataNascimento) {
                                $('#data_nascimento-error').text(erros.DataNascimento);
                                $('.data_nascimento-error').addClass('is-invalid');
                            }

                            if (error.responseJSON.errors.Telefone) {
                                $('#telefone1-error').text(erros.Telefone);
                                $('.telefone1-error').addClass('is-invalid');
                            }

                            console.log(erros);
                        }
                    }
                })
            })
        })
    </script>
    <script src="{{url(asset('admin/assets/vendor/datatables/media/js/jquery.dataTables.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/media/js/dataTables.bootstrap5.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/dataTables.buttons.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.bootstrap4.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.html5.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/Buttons-1.4.2/js/buttons.print.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/JSZip-2.5.0/jszip.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/pdfmake.min.js'))}}"></script>
    <script src="{{url(asset('admin/assets/vendor/datatables/extras/TableTools/pdfmake-0.1.32/vfs_fonts.js'))}}"></script>
    <!-- Examples -->
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.default.js'))}}"></script>
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.row.with.details.js'))}}"></script>
    <script src="{{url(asset('admin/assets/js/examples/examples.datatables.tabletools.js'))}}"></script>
{{--    <script src="{{url(asset('temas/construction/ScriptJS/AjaxMessage.js'))}}"></script>--}}
    <script src="{{url(asset('temas/construction/ScriptJS/jQuery-Mask-Plugin-master/dist/jquery.mask.js'))}}"></script>
    <script src="{{url(asset('temas/construction/ScriptJS/inputMask.js'))}}"></script>
@endsection


@section('modais')

@endsection