@extends('layouts.backoffice')

@section('styles')
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="css/maps.css" src="css/maps.css">

<style>

.modal-footer panel{
    background-color:white;
}

.modal-content{
    text-align: center;
}
    </style>

@endsection

@section('content')

    <meta name="csrf-token" content="{{ csrf_token() }}">

    {{-- <section class="content-header">
        <h1>
            Busque um locker próximo de você!
            <small>Clique no marcador e visualize informações do local</small>
        </h1>
    </section> --}}

    {{-- <button class='btn btn-primary' > + </button> Clicando neste botão você adiciona o locker a sua lista de favoritos  --}}

    <div class="row">
        <div class="col-md-8">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Encontre o locker mais próximo de você</h3>
                    <br><img src="/img/iconMarkerN.svg" alt=""> New Post Locker
                </div>
                <div class="box-body no-padding">
                       <input id="pac-input" onkeypress="initAutocomplete()" class="controls inputGoogleMaps" type="text" placeholder="Digite CEP ou endereço">  <i class="fa fa-fw fa-search"></i> <i class="fa fa-fw fa-question-circle modalhelp"></i>
                    <div id="map" class='map' style="height: 490px;"></div>

                </div>
                <a href='/credito/listar-opcoes-credito' class='btn btn-success compre-ja'>Adquira já seus créditos!</a>
            </div>
        </div>

        <div class="col-md-4">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Meus Lockers Favoritos</h3>
                </div>
                <div class="box-body no-padding">
                    {{-- @dd( $lockers ); --}}
                    <ul id="sortable" class="outputLockerModel">

                        @foreach($lockers as $locker)
                            <li class="ui-state-default" data-id="{{$locker['clientid']}}" >
                                <div class="texto" data-id_locker="{{$locker['clientid']}}"  >
                                    <h4 class="titulo" onclick="focaLockerMapa( {{$locker['longitude']}},{{$locker['latitude']}} )" >{{ $locker['lockerName'] }}</h4>
                                    {{ $locker['type'] }}
                                    {{ $locker['address'] }}, {{ $locker['number'] }}, <br>
                                    {{ $locker['city'] }} -
                                    {{ $locker['district'] }}<br>
                                    {{ $locker['zip'] }}

                                <button type="button" data-id_locker="{{$locker['clientid']}}" class="btn btn-vermelho btn-sm btn-wide excluirLocker" data-toggle="modalExcluir" data-target="#modalExcluirLocker">
                                        <i class="fa fa-fw fa-trash"></i>
                                    </button>
                                </div>
                            </li>
                        @endforeach
                    </ul>

                    @if($errors->any())
                    <button class="btn btn-warning fade out">{{$errors->first()}}</button>
                    @endif
                </div>
                <div class="box-footer clearfix">
                        {{-- confirma exclusão do lockers --}}
                        <div class="row desejaExcluir fade in"  style="display:none;">
                               <div class="col-md-12">
                                    <div class="box box-primary">
                                        <div class="box-header with-border">
                                            <h3 class="box-title">Deseja Excluir este Locker?</h3>
                                        </div>
                                        <div class="box-footer clearfix">
                                                {{-- fecha a janela --}}
                                                <button type="button" onclick="$('.desejaExcluir').fadeOut('slow');" class="btn btn-danger"  data-dismiss="modal">Não</button>

                                                <button type="button"  class="btn btn-success btnConfirmar"  >Sim</button>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        {{-- adicionar ou não o locker selecionado no maps? Este trecho foi desativado --}}
                        <div class="row desejaAdicionar fade in"  style="display:none;">
                                <div class="col-md-12">
                                     <div class="box box-primary">
                                         <div class="box-header with-border">
                                             <h3 class="box-title">Deseja Adicionar o Locker indicado?</h3>
                                         </div>
                                         <div class="box-footer clearfix">
                                                 {{-- fecha a janela --}}
                                                 <button type="button" onclick="$('.desejaAdicionar').fadeOut('slow');" class="btn btn-danger"  data-dismiss="modal">Não</button>

                                                 <button type="button"  class="btn btn-success btnAdicionar"  >Sim</button>
                                         </div>
                                     </div>
                                 </div>
                         </div>
                        {{-- Locker Excluído --}}
                         <div class="row lockerExcluido fade in"  style="display:none;">
                                <div class="col-md-12">
                                     <div class="box box-primary">
                                         <div class="box-header with-border">
                                             <h3 class="box-title">Locker Excluído!</h3>
                                         </div>

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

                            {{-- Locker Excluído --}}
                            <div class="row lockerJaAdicionado fade in"  style="display:none;">
                                    <div class="col-md-12">
                                         <div class="box box-primary red">
                                             <div class="box-header with-border red">
                                                 <h3 class="box-title">Locker já adicionado!</h3>
                                             </div>
                                         </div>
                                     </div>
                             </div>

                        <div class='row'>
                                <i class="fa fa-fw fa-search" style="margin-left: 12px;"></i>
                            <input class='form-group filtroLockers' value="" id="entrada" placeholder="Filtrar Lockers Disponíveis">  <i class="fa fa-fw fa-question-circle modalListaHelp"></i>
                            </div>
                         <div class="row lockerAdicionado fade in"  style="display:none;">
                                <div class="col-md-12">
                                     <div class="box box-primary">
                                         <div class="box-header with-border">
                                             <h3 class="box-title">Locker Adicionado a lista de favoritos</h3>
                                         </div>
                                         <div class="box-footer clearfix">
                                                 {{-- fecha a janela --}}
                                                 <button type="button" onclick="$('.desejaAdicionar').fadeOut('slow');" class="btn btn-danger"  data-dismiss="modal">Okay</button>
                                         </div>
                                     </div>
                                 </div>
                         </div>
                         <div class="row">
                            {{-- <input class='form form-input' class="entrada" id="entrada" value=""  > --}}
                        </div>
                        {{-- aqui são filtrados os lockers  --}}
                         <ul id="lista-lockers" class="listaTodosLockers list-group" style="background-color: yellow; width: auto;height: 279px !important; overflow: auto;">
                                {{-- @dd($dadosLocais); --}}
                                @foreach($dadosLocais as $lockerModel)
                                <li class="list-group-item" onclick="focaLockerMapa( {{$lockerModel['longitude']}},{{$lockerModel['latitude']}}  )">
                                        <h4 class='titulo pointer'>{{ $lockerModel['lockerName'] }}</h4><br>
                                        {{ $lockerModel['address'] }}, {{ $lockerModel['number'] }}, <br>
                                        {{ $lockerModel['city'] }} -
                                        {{ $lockerModel['district'] }}<br>
                                        {{ $lockerModel['zip'] }}
                                    </li>
                                @endforeach
                            </ul>
                            <br>


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



    <!-- Modal, verifica locker a ser substituido-->
    <div class="modal modalLockers" id="modalLockers"  role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" onclick="$('.modalLockers').fadeOut('slow');">&times;</button>
            <h4 class="modal-title">Qual Locker sairá da lista?</h4>
            </div>
            <div class="modal-body">

                <input type="hidden" value="" class='lockerSelecionado' name="lockerSelecionado" id="lockerSelecionado" />

                <p>Você já tem três lockers, por favor exclua um deles para adicionar um novo</p>
            </div>
            </div>
            <div class="modal-footer panel">
                    <button type="button" onclick="$('.modalLockers').fadeOut('slow')" class="btn btn-warning"  data-dismiss="modal">Ok</button>
            </div>
        </div>

    </div>

             {{-- dialogos de ajuda --}}
             <div class="modal modalAjuda" id="modalhelp" role="dialog" style="display: none;">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" onclick="$('.modalAjuda').fadeOut('slow');">×</button>
                            <h4 class="modal-title">Ajuda</h4>
                            </div>
                            <div class="modal-body">
                              <b>Pesquisando locais</b><br>
                              1. Clique na barra amarela;<br>
                              2. Digite um endereço e carregará uma lista de endereços com sugestões de locais relacionados a sua pesquisa;<br>
                              3. Escolha um local na lista de sugestões;<br>
                              4. Após selecionar um local carregaremos nossos locais com os lockers junto a localização que você escolher.<br>
                              5. Assim poderá selecionar os lockers e visualizar mais informações de cada um deles;
                            </div>
                        </div>
                        <div class="modal-footer panel">
                                <button type="button" onclick="$('.modalAjuda').fadeOut('slow')" class="btn btn-warning" data-dismiss="modal">Ok</button>
                        </div>
                </div>
            </div>

                   {{-- dialogos de ajuda lateral próximo a lista de disponiveis --}}
             <div class="modal modalAjudaListaLateral" id="modalhelpListaLateral" role="dialog" style="display: none;">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modalListaLateral" onclick="$('#modalhelpListaLateral').fadeOut('slow');">×</button>
                            <h4 class="modal-title">Ajuda</h4>
                            </div>
                            <div class="modal-body">
                            Digite o nome de uma loja ou endereço para filtrar!
                            </div>
                        </div>
                        <div class="modal-footer panel">
                                <button type="button" onclick="$('#modalhelpListaLateral').fadeOut('slow');" class="btn btn-warning" data-dismiss="modalListaLateral">Ok</button>
                        </div>
                    </div>
                </div>
            </div>


@endsection

@section('scripts')

    {{-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> --}}

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

     <!-- Latest compiled and minified JavaScript -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

     {{-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> --}}
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

     {{-- essencial para o gogle mas rodar aqui --}}
     <script src="{{asset('js/maps/mapsInstance.js')}}"></script>
     {{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> --}}
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDIpnHFAp3i0xkl_L8ejOFbbKf6Mpi80Sw&libraries=places"></script>

     <script>


    </script>
@endsection