@extends('usuarios.clientes.master.layoutcliente')
@section('conteudo')
<style type="text/css">
#btalterar{
    display:none;
}
</style>



{{-- SELECT STYLE --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">


    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-user bg-blue"></i>
                        <div class="d-inline">
                            <h5>Perfil</h5>

                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <nav class="breadcrumb-container" aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{url('img/clientes'.$perfil_data->avatar)}}"><i class="ik ik-home"></i></a>
                            </li>
                            <li class="breadcrumb-item">
                                <a href="#">Página</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Perfil</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-4 col-md-5">
                <div class="card">
                    <div class="card-body">


                        @if(session()->has('statusFail'))
                            <script>
                                    Swal.fire({
                                        position: 'top-end',
                                        icon: 'error',
                                        title: 'Aviso',
                                        text:'erro ao fazer upload da imagem',
                                        showConfirmButton: true,
                                        timer: 2500
                                        })

                            </script>
                    <!--<div class="alert alert-danger"> {{session('statusFail')}} </div>--->
                        @else
                        @if(session()->has('statusSucesso'))
                            <script>
                                Swal.fire({
                                    position: 'top-end',
                                    icon: 'error',
                                    title: 'Aviso',
                                    text:''+msgs.message,
                                    showConfirmButton: true,
                                    timer: 2500
                                    })

                            </script>
                    <!----    <div class="alert alert-success"> {{session('statusSucesso')}} </div>---->
                        @endif
                        @endif

                        <div class="text-center">
                            <form method="post" action="#" name="add" entype="multipart/form-data">
                                @csrf
                                <img src="{{ url('img/clientes/'.Auth::user()->avatar) }}"  class="rounded-circle" id="myimg" width="150" />
                                <input value="{{$perfil_data->id}}"name="userid" hidden/>
                                <span><a onclick="defaultBtnActive()" i><i class="ik ik-instagram"></i></a></span>
                                <input id="default-btn" type="file" name="imagem" hidden>
                                <h6>
                                <button type="submit" id="btalterar">alterar</button></h6>
                            <!----    <button  id="btalterar">Cancelar</button> ---->
                            </form>
                            <h4 class="card-title mt-10">{{$perfil_data->nome}}</h4>
                            <p class="card-subtitle">{{$perfil_data->categoriacliente}}</p>
                            <!----
                            <div class="row text-center justify-content-md-center">
                                <div class="col-4"><a href="javascript:void(0)" class="link"><i class="ik ik-user"></i> <font class="font-medium">254</font></a></div>
                                <div class="col-4"><a href="javascript:void(0)" class="link"><i class="ik ik-image"></i> <font class="font-medium">54</font></a></div>
                            </div>
                            --->
                        </div>
                    </div>
                    <hr class="mb-0">
                    <div class="card-body">
                        <small class="text-muted d-block">Compania</small>
                                @php
                                    $nome=\App\Models\FuncionarioCliente::trazer_Empresa_Nome();
                                @endphp

                        <h6><b>{{$nome->nome}} </b></h6>
                        <small class="text-muted d-block">email</small>
                        <h6>{{$perfil_data->email}} </h6>
                         <small class="text-muted d-block pt-10">Nº Funcionário</small>
                        <h6>{{$perfil_data->numerofuncionariocliente}} </h6>
                        <small class="text-muted d-block pt-10">Data Nascimento</small>
                        <h6>{{$perfil_data->datanascimento}} </h6>
                        <small class="text-muted d-block pt-10">Telefone</small>
                        <h6>{{$perfil_data->telefone}} </h6>

                                @php

                                    $meu_depa=\App\Models\DepCliente::join('orgaosdeestrutura','orgaosdeestrutura.id','departamentosclientes.orgaosdeestrutura_id')
                                                                     ->where('departamentosclientes.id',$perfil_data->depacliente_id)
                                                                     ->select('departamentosclientes.departamento','orgaosdeestrutura.orgao')->first();

                            @endphp
                        <small class="text-muted d-block pt-10">Agência</small>
                            @if(!empty($meu_depa))
                            <h6>  {{ $meu_depa->orgao }} </h6>
                            @endif
                        <small class="text-muted d-block pt-10">Direção</small>
                            @if(!empty($meu_depa))
                            <h6>  {{ $meu_depa->departamento }} </h6>
                            @endif
                        <!-----
                        <div class="map-box">
                            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d248849.886539092!2d77.49085452149588!3d12.953959988118836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670c9b44e6d%3A0xf8dfc3e8517e4fe0!2sBengaluru%2C+Karnataka!5e0!3m2!1sen!2sin!4v1542005497600" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
                        </div>
                        ----->
                        <small class="text-muted d-block pt-30">Social Profile</small>
                        <br/>
                        <button class="btn btn-icon btn-facebook"><i class="fab fa-facebook-f"></i></button>
                        <button class="btn btn-icon btn-twitter"><i class="fab fa-twitter"></i></button>
                        <button class="btn btn-icon btn-instagram"><i class="fab fa-instagram"></i></button>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 col-md-7">
                <div class="card">
                    <ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">

                        <li class="nav-item active">
                            <a class="nav-link active" id="pills-setting-tab" data-toggle="pill" href="#previous-month" role="tab" aria-controls="pills-setting" aria-selected="false">Editar</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="pills-tabContent">

                        <div class="tab-pane fade active show" id="previous-month" role="tabpanel" aria-labelledby="pills-setting-tab">
                            <div class="card-body">
                                <form class="form-horizontal" name="form_senha" method="post">
                                   @csrf

                                    <div class="form-group">
                                        <label for="example-password">Senha Actual</label>
                                        <input type="password"  name="oldsenha" class="form-control actual" value="" placeholder="digite a senha actual" id="example-password" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="example-password">Nova Senha</label>
                                        <input type="password" name="newsenha"  class="form-control" placeholder="digite a nova actual" id="example-password" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="example-password">Confirmar Senha</label>
                                        <input type="password" name="confirmsenha"  class="form-control" placeholder="confirmar nova senha actual" id="example-password" required>
                                    </div>
                                    <button class="btn btn-success" type="submit">Atualizar Senha</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

<script src="{{url('cliente/js/widgets.js')}}"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>


<script src="{{url('cliente/plugins/jvectormap/jquery-jvectormap.min.js')}}"></script>
<script src="{{url('cliente/plugins/jvectormap/tests/assets/jquery-jvectormap-world-mill-en.js')}}"></script>
<script src="{{url('cliente/plugins/moment/moment.js')}}"></script>
<script src="{{url('cliente/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js')}}"></script>

<script>

    $(".actual").val("");



    const defaultBtn = document.querySelector("#default-btn");
    const customBtn = document.querySelector("#custom-btn");
    const btnAlterar = document.querySelector("#btalterar");
    //const cancelBtn = document.querySelector("#cancel-btn i");
    const img = document.querySelector("#myimg");
    let regExp = /[0-9a-zA-Z\^\&\'\@\{\}\[\]\,\$\=\!\-\#\(\)\.\%\+\~\_ ]+$/;
    function defaultBtnActive(){
      defaultBtn.click();
    }
    defaultBtn.addEventListener("change", function(){
      const file = this.files[0];
      if(file){
        const reader = new FileReader();
        reader.onload = function(){
          const result = reader.result;
          img.src = result;
          //wrapper.classList.add("active");
        }
        // cancelBtn.addEventListener("click", function(){
        //   img.src = "";
        //   wrapper.classList.remove("active");
        // })
        reader.readAsDataURL(file);
        btnAlterar.style.display="block";

      }
      if(this.value){
        let valueStore = this.value.match(regExp);
        fileName.textContent = valueStore;
      }
    });
  </script>
  
<script>  
  
  $(function(){

    $('form[name="form_senha"]').submit(function(data){
        data.preventDefault();

        $.ajax({
            url:"{{route('us.admin.cliente.myperfil.senha.single.reset')}}",
            type:"post",
            data:$(this).serialize(),
            dataType:"json",
            success: function (msgs) {

                if(msgs.success === true)
                {

                    const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 2200,
                            timerProgressBar: true,

                            });

                            Toast.fire({
                            icon: 'success',
                            title: ''+msgs.message,
                                });

                            $(".actual").val("");
                            $(".form-control").val("");
                }else
                {
                        Swal.fire({ position: 'top-end',
                                    icon: 'error',
                                    text: ''+msgs.message,
                                    })

                }
            }
        })

    });

});
  </script>

@endsection