@extends('layouts.backoffice')


@section('styles')
    <!-- MATERIAL DESIGN ICONIC FONT -->
    <link rel="stylesheet" href="{{asset('js/wizard/fonts/material-design-iconic-font/css/material-design-iconic-font.css')}}">
    <!-- STYLE CSS -->
    <link rel="stylesheet" href="{{asset('js/wizard/css/style.css')}}">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.css"/>

    <style>
input{
    color:black !important;
}
        </style>
@endsection

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
    <div class='col-md-12'>


            @csrf
            <label> Nome do Terminal: </label>
            <input type="text" id="name" name="name" value="" class="">

        <br>

            <label> Terminal S/N: </label>
            <input type="text" id="csn" name="csn" value="" class="">

        <br>
            <label> Numero:	 </label>
            <input type="text" id="boxnum" name="boxnum" value="" class="">

        <br>

            <br>

            <div class='autoCoplete'>

                {{-- Adicionand trecho do autocomplete --}}
                <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>

            </div>

    </div>

    <div class='col-md-6'>
        <div class='box col-md-12'>
                <div class='txt_endereco' id='txt_endereco'>
                    ...
                </div>
        </div>
    </div>
    <div class='col-md-6'>
            <div class='box col-md-12'>
                <div id="map" class="map" style="height: 490px; position: relative; overflow: hidden;">
                </div>
            </div>
            <div class='box col-md-12'>
                <div class='col-md-6'>
                    <label > Latitude </label>
                    <input class='latitude form-control' value="" id="latitude">
                </div>
                <div class='col-md-6'>
                    <label > Longitude </label>
                        <input class='longitude form-control' value="" id="longitude" >
                </div>
            </div>
        </div>
        <div class='col-md-12' id="" >
            <div class='title'>
               <h3> Disponibilidade</h3>
            </div>
            <div class='col-md-12 diasDaSemana'>

            </div>
        </div>
       <div class='row'>
            <div class='col-md-12'>
                <div class='col listarLockers'>
                    <div class='title'>
                        Lista de Locker
                    </div>
                    <div class='col-md-10 tabelaLockers'>
                        <table>
                            <thead>
                                <th>Nome do Terminal </th>
                                <th>Status </th>
                                <th>Terminal S/N </th>
                                <th> Token </th>
                                <th> Numero </th>
                                <th> Ativo % </th>
                                <th> Vazio %</th>
                                <th> Endereço </th>
                                <th> Online </th>
                                <th> Última vez online</th>
                            </thead>
                            <tbody>
                                {{-- @foreach( $lockers as $row)
                                    <tr>

                                    </tr>
                                @endforeach --}}
                            </tbody>
                        </table>

                    </div>

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


        <button class='btn btn-success' onclick="testeArray()"> Confirmar </button>

@endsection

@section('scripts')

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

    {{-- <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>
    {{-- data tables formatation javascript --}}
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/datatables.min.js"></script>


    <script src="{{ asset('js/ponte/ponteApi.js') }}"></script>

@endsection