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

@section('css')
    <link rel="stylesheet" href="{{url(asset('admin/assets/css/theme-shop.css'))}}">

    <!-- include summernote css/js -->
    <link href="{{url(asset('temas/comuns/summernote-0.8.18-dist/summernote.css'))}}" rel="stylesheet">
@endsection

@section('content')



    <div role="main" class="main shop pb-4">

{{--        <div class="container" id="app">--}}
        <div class="container">

{{--            <form role="form" class="needs-validation" method="post" action="{{route('web.plano.contratar')}}" novalidate="novalidate">--}}
            <form method="POST" @submit.prevent="onSubmit" autocomplete="off" name="formContratarPlano">
                @csrf
                <div class="row" >
                    <div class="col-lg-7 mb-4 mb-lg-0">

                        <h2 class="text-color-dark font-weight-bold text-5-5 mb-3">Informações pessoais</h2>
                        <input type="hidden" name="plano_id" value="{{$plano->Id}}" >
                        <input type="hidden" name="vendedor_id" value="{{$vendedor}}" >

                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Nome <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 nome-error" name="nome" id="nome" value="" >
                                <span class="invalid-feedback" id="nome-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Cpf <span class="text-color-danger">*</span></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>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Sexo <span class="text-color-danger">*</span></label>
                                <select class="form-select form-control h-auto py-2 sexo-error" id="sexo" name="sexo">
                                    <option value="" selected=""></option>
                                    <option value="Masculino">Masculino</option>
                                    <option value="Feminino">Feminino</option>
                                    <option value="Feminino">Outro</option>
                                </select>
                                <span class="invalid-feedback" id="sexo-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Documento RG </label>
                                <input type="text" class="form-control h-auto py-2 documento-error" id="documento" name="documento" value="">
                                <span class="invalid-feedback" id="documento-error"></span>
                            </div>
                        </div><div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Email <span class="text-color-danger">*</span></label>
                                <input type="email" class="form-control h-auto py-2 email-error" name="email" id="email" value="" >
                                <span class="invalid-feedback" id="email-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Nascimento <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 date data_nascimento-error" id="data_nascimento" name="data_nascimento" value="">
                                <span class="invalid-feedback" id="data_nascimento-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Telefone 1 <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 telefone1-error phone" name="telefone1" id="telefone1" value="" >
                                <span class="invalid-feedback" id="telefone1-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Telefone 2</label>
                                <input type="text" class="form-control h-auto py-2 telefone2-error phone" id="Telefone2" name="telefone2" value="">
                                <span class="invalid-feedback" id="telefone2-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Cep <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 cep cep-error" name="cep" id="cep" value="" >
                                <span class="invalid-feedback" id="cep-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Estado <span class="text-color-danger">*</span></label>
                                <select class="form-select form-control h-auto py-2 estado-error" id="uf" name="uf" >
                                    <option value="" selected=""></option>
                                    <option value="AC">Acre</option>
                                    <option value="AL">Alagoas</option>
                                    <option value="AP">Amapá</option>
                                    <option value="AM">Amazonas</option>
                                    <option value="BA">Bahia</option>
                                    <option value="CE">Ceará</option>
                                    <option value="DF">Distrito Federal</option>
                                    <option value="ES">Espírito Santo</option>
                                    <option value="GO">Goiás</option>
                                    <option value="MA">Maranhão</option>
                                    <option value="MT">Mato Grosso</option>
                                    <option value="MS">Mato Grosso do Sul</option>
                                    <option value="MG">Minas Gerais</option>
                                    <option value="PA">Pará</option>
                                    <option value="PB">Paraíba</option>
                                    <option value="PR">Paraná</option>
                                    <option value="PE">Pernambuco</option>
                                    <option value="PI">Piauí</option>
                                    <option value="RJ">Rio de Janeiro</option>
                                    <option value="RN">Rio Grande do Norte</option>
                                    <option value="RS">Rio Grande do Sul</option>
                                    <option value="RO">Rondônia</option>
                                    <option value="RR">Roraima</option>
                                    <option value="SC">Santa Catarina</option>
                                    <option value="SP">São Paulo</option>
                                    <option value="SE">Sergipe</option>
                                    <option value="TO">Tocantins</option>
                                </select>
                                <span class="invalid-feedback" id="estado-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label class="form-label">Cidade <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 cidade-error" id="cidade" name="cidade" value="" >
                                <span class="invalid-feedback" id="cidade-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label class="form-label">Logradouro <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 logradouro-error" name="logradouro" id="logradouro" value="" >
                                <span class="invalid-feedback" id="logradouro-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Número <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 numero-error" name="numero" id="numero" value="" >
                                <span class="invalid-feedback" id="numero-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Complemento </label>
                                <input type="text" class="form-control h-auto py-2 complemento-error" name="complemento" id="complemento">
                                <span class="invalid-feedback" id="complemento-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col">
                                <label class="form-label">Bairro <span class="text-color-danger">*</span></label>
                                <input type="text" class="form-control h-auto py-2 setor-error" name="setor" id="bairro" value="">
                                <span class="invalid-feedback" id="setor-error"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label class="form-label">Dia do Vencimento <span class="text-color-danger">*</span></label>
                                <select class="form-select form-control h-auto py-2 vencimento-error" id="vencimento" name="vencimento">
                                    <option value="" selected=""></option>
                                    <option value="1">01</option>
                                    <option value="2">02</option>
                                    <option value="3">03</option>
                                    <option value="4">04</option>
                                    <option value="5">05</option>
                                    <option value="6">06</option>
                                    <option value="7">07</option>
                                    <option value="8">08</option>
                                    <option value="9">09</option>
                                    <option value="10">10</option>
                                    <option value="11">11</option>
                                    <option value="12">12</option>
                                    <option value="13">13</option>
                                    <option value="14">14</option>
                                    <option value="15">15</option>
                                    <option value="16">16</option>
                                    <option value="17">17</option>
                                    <option value="18">18</option>
                                    <option value="19">19</option>
                                    <option value="20">20</option>
                                    <option value="21">21</option>
                                    <option value="22">22</option>
                                    <option value="23">23</option>
                                    <option value="24">24</option>
                                    <option value="25">25</option>
                                    <option value="26">26</option>
                                    <option value="27">27</option>
                                    <option value="28">28</option>
                                </select>
                                <span class="invalid-feedback" id="vencimento-error"></span>
                            </div>
                            <div class="form-group col-md-6">
                                <label class="form-label">Filial de atendimento <span class="text-color-danger">*</span></label>
                                <select class="form-select form-control h-auto py-2 filial-error" id="filial" name="filial" disabled="true">
                                    <option value="" selected=""></option>
                                    @foreach($filiais as $filial)
                                        <option value="{{$filial->Id}}">{{$filial->Filial}}</option>
                                    @endforeach
                                </select>
                                <span class="invalid-feedback" id="filial-error"></span>
                            </div>
                        </div>
                        @if($plano->LimiteDependentes)
                        <div class="row">
                            <div class="form-group col-md-12">
                                <div class="alert alert-info">
                                    Os seus <strong>dependentes</strong> serão cadastrados após a contratação do plano na <strong>área do associado!</strong>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="col-lg-5 position-relative">
                        <div class="pin-wrapper" style="height: 934px;"><div class="card border-width-3 border-radius-0 border-color-hover-dark" data-plugin-sticky="" data-plugin-options="{'minWidth': 991, 'containerSelector': '.row', 'padding': {'top': 85}}" style="width: 376px;">
                                <div class="card-body">
                                    <h4 class="font-weight-bold text-uppercase text-4 mb-3">{{$plano->Plano . ' - R$'  . $valorPlano }}</h4>
                                    <table class="shop_table cart-totals mb-3">
                                        <tbody>
                                        <tr>
                                            <td colspan="2" class="border-top-0">
                                                <strong class="text-color-dark">Produtos</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                        <tr>
                                            <td>
                                                <ul>
                                                    @foreach($plano->produtos as $produto)
                                                        <li >
                                                                <span class="text-color-dark">{{ucfirst(mb_strtolower($produto->Produto, 'UTF-8'))}}</span>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td colspan="2" class="border-top-0">
                                                <strong class="text-color-dark">Serviços</strong>
                                            </td>
                                        </tr>
                                        <tr>
                                        <tr>
                                            <td>
                                                <ul>
                                                    @foreach($plano->servicos as $servico)
                                                        <li>
                                                            <span class="d-block text-color-dark">{{ucfirst(mb_strtolower($servico->Descricao, 'UTF-8'))}}</span>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="border-top-0 pt-0">
                                                <strong class="d-block text-color-dark line-height-1 font-weight-semibold">Adesão</strong>
{{--                                                <span class="text-1">{{}}</span>--}}
                                            </td>
                                            <td class="border-top-0 text-end align-top pt-0">
                                                <span class="amount font-weight-medium text-color-grey">R${{$plano->Adesao}}</span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td colspan="2">
                                                O valor da adesão será cobrado no ato da contratação.
                                            </td>
                                        </tr>
                                        <tr class="total">
                                            <td>
                                                <strong class="text-color-dark text-3-5">Mensalidade</strong>
                                            </td>
                                            <td class="text-end">
                                                <strong class="text-color-dark"><span class="text-color-dark text-5">R${{$valorPlano}}</span></strong>
                                            </td>
                                        </tr>
                                        <tr class="payment-methods">
                                            <td colspan="2">
                                                <strong class="d-block text-color-dark mb-2">Método de pagamento</strong>

                                                <div class="d-flex flex-column">
                                                    <label class="d-flex align-items-center text-color-grey mb-0" for="payment_method1">
                                                        <input id="payment_method1" type="radio" class="me-2" name="payment_method" checked="">
                                                        Boleto bancário
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr class="payment-methods">
                                            <td colspan="2">
                                                <span class="d-block text-color-dark mb-2">
                                                    <strong>Termos / Clausulas </strong>
                                                    <button class="btn btn-outline btn-primary btn-xs mb-2" style="margin-top: 3px;" onclick="exibirTermos()"> Visualizar</button>
                                                </span>

                                                <div class="d-flex flex-column">
                                                    <label class="d-flex align-items-center text-color-grey mb-0 ">
                                                        <input type="checkbox" class="form-check-switch me-2" id="switch_termos" onchange="document.getElementById('buttonEnviar').disabled = !this.checked;">
                                                        Aceito os termos e condições
                                                    </label>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2">
                                                Seus dados pessoais serão usados para processar seu pedido e somente isso.
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <button disabled id="buttonEnviar" type="submit" class="btn btn-primary btn-modern w-100 text-uppercase bg-color-hover-secondary border-color-hover-primary border-radius-0 text-3 py-3">
                                        <div class="buttonEnviar text-white" role="status">
                                            <span class="sr-only">Loading...</span>
                                            Contratar <i class="fas fa-arrow-right ms-2"></i>
                                        </div>
                                    </button>

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

        </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 modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="defaultModalLabel">Termos e condições!</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
                    <div class="modal-body">

                        {!! $termos !!}

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

@section('js')

    <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>

    <script>
        function exibirTermos() {
            event.preventDefault();
            $("#myModal").modal('show');
        }

        function aceitaTermos() {
            event.preventDefault();
            document.getElementById('switch_termos').click();
            $("#myModal").modal('hide');

        }
        $(document).ready(function() {
            $('#summernote').summernote();
        });

        //utilizando ajax
        $(function () {
            $('form[name="formContratarPlano"]').submit(function (event) {
                //serve para nao deixar ocorrer o evento default, que no caso é, direcionar e atualizar a pagina para alguma lugar
                event.preventDefault();
                $('input').removeClass('is-invalid');
                $('select').removeClass('is-invalid');
                //exemplo pegando valores dos inputs
                // var nome = $(this).find('input#nome').val();

                var formData = $(this).serializeArray();

                // Verifica se o campo select está desativado
                if ($('#filial').is(':disabled')) {
                    // Adiciona manualmente ao objeto de dados
                    formData.push({ name: "filial", value: $('#filial').val() });
                }

                // melhor serializar o form, ele se encarrega de pegar o form e formatar para o envio
                $.ajax({
                    url:        "{{route('web.plano.contratar')}}",
                    type:       "post",
                    //aqui no data estou serializando o form
                    data:       formData,
                    //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) {

                        console.log(response);

                        window.location.href = "{{url('plano/contratar/concluido/')}}/" + response.IdContrato;
                    },
                    error: function (error) {

                        // ajaxMessage("<div class='message error'>Informe os dados corretamente!</div>", 3);

                        console.log(error);
                        console.log(error.responseJSON.message);




                        $('.buttonEnviar').removeClass('spinner-border').html('Contratar <i class="fas fa-arrow-right ms-2"></i>');
                        $('.buttonEnviar').removeClass('spinner-border-sm');
                        $('#buttonEnviar').removeAttr('disabled');


                        var erros = error.responseJSON.errors;


                        if(typeof(erros)  !== "undefined"){

                            if (erros.filial) {
                                $('#filial-error').text(erros.filial);
                                $('.filial-error').addClass('is-invalid');
                                $('.filial-error').focus();
                            }

                            if (erros.vencimento) {
                                $('#vencimento-error').text(erros.vencimento);
                                $('.vencimento-error').addClass('is-invalid');
                                $('.vencimento-error').focus();
                            }

                            if (erros.numero) {
                                $('#numero-error').text(erros.numero);
                                $('.numero-error').addClass('is-invalid');
                                $('.numero-error').focus();
                            }

                            if (erros.logradouro) {
                                $('#logradouro-error').text(erros.logradouro);
                                $('.logradouro-error').addClass('is-invalid');
                                $('.logradouro-error').focus();
                            }

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

                            if (erros.documento) {
                                $('#documento-error').text(erros.documento);
                                $('.documento-error').addClass('is-invalid');
                                $('.documento-error').focus();
                            }

                            if (erros.sexo) {
                                $('#sexo-error').text(erros.sexo);
                                $('.sexo-error').addClass('is-invalid');
                                $('.sexo-error').focus();
                            }

                            if (erros.uf) {
                                $('#estado-error').text(erros.estado);
                                $('.estado-error').addClass('is-invalid');
                                $('.estado-error').focus();
                            }

                            if (erros.cidade) {
                                $('#cidade-error').text(erros.cidade);
                                $('.cidade-error').addClass('is-invalid');
                                $('.cidade-error').focus();
                            }

                            if (erros.setor) {
                                $('#setor-error').text(erros.setor);
                                $('.setor-error').addClass('is-invalid');
                                $('.setor-error').focus();
                            }


                            if (erros.cep) {
                                $('#cep-error').text(erros.cep);
                                $('.cep-error').addClass('is-invalid');
                                $('.cep-error').focus();
                            }


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


                            if (erros.email) {
                                $('#email-error').text(erros.email);
                                $('.email-error').addClass('is-invalid');
                                $('.email-error').focus();
                            }

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

                            if(error.responseJSON.errors.nome){
                                $('#nome-error').text(erros.nome);
                                $('.nome-error').addClass('is-invalid');
                                $('.nome-error').focus();

                            }

                        } else {
                            console.log(erros);
                            $('#email-error').text('Já existe um usuário com este email');
                            $('.email-error').addClass('is-invalid');
                            $('.email-error').focus();
                        }

                    },
                    complete: function() {
                        // Aqui habilitamos seu botão, troque para o id correto
                        $('.buttonEnviar').removeClass('spinner-border').html('Contratar <i class="fas fa-arrow-right ms-2"></i>');
                        $('.buttonEnviar').removeClass('spinner-border-sm');
                        $('#buttonEnviar').removeAttr('disabled');
                    }
                });

            })
        })
    </script>

    <!-- include summernote css/js -->
    <script src="{{url(asset('temas/comuns/summernote-0.8.18-dist/summernote.js'))}}"></script>
    <script src="{{url(asset('temas/comuns/summernote-0.8.18-dist/lang/summernote-pt-BR.js'))}}"></script>


@endsection