@extends('layout.backend')
@section('styles')
    @parent
@endsection
@section('scripts')
	@parent
	@vite(['resources/js/maps.js'])
@endsection
@section('content')
@if(isset($lstcity))
<div class="card shadow mb-4">
    <a href="#infoAcct" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="infoAcct">
        <h6 class="m-0 font-weight-bold text-primary">Atualizando dados do mapa, aguarde.</h6>
    </a>
    <div class="collapse show" id="infoAcct">
        <div id="lstcity"
             data-idcity="{{$idcity}}"
             data-city="{{$city}}"
             data-state="{{$state}}"
             data-postalcode="{{$postalcode}}"
             class="d-none"
             >{{json_encode($lstcity)}}</div>
        <div id="logcity"></div>
    </div>
</div>
@else
<div class="card shadow mb-4 d-none" id="divWait">
    <a href="#infoAcct" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="infoAcct">
        <h6 class="m-0 font-weight-bold text-primary">Aguarde, carregando mapa.</h6>
    </a>
</div>
<div class="card shadow mb-4" id="divMap">
    <a href="#infoAcct" class="d-block card-header py-3" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="infoAcct">
        <h6 class="m-0 font-weight-bold text-primary">Mapa {!! config('app.name') !!}</h6>
    </a>
    <div class="card-body collapse show" id="infoAcct">
        <div class="row mb-3">
            <span class="badge bg-light mr=3">
                <input type="checkbox" id="chkHlc" checked>
                Membros COLIH
            </span>
            <span class="badge bg-light mr=3">
                <input type="checkbox" id="chkPvg" checked>
                Membros GVP
            </span>
            <span class="badge bg-light mr=3">
                <input type="checkbox" id="chkHospitalPriority" checked>
                Instituições Prioritárias
            </span>
            <span class="badge bg-light mr=3">
                <input type="checkbox" id="chkHospital">
                Outras Instituições
            </span>
        </div>

        <style type="text/css">
            .text-center {
                text-align: center;
            }
            #map {
                width: 100%;
                height: 800px;
            }
        </style>        
        <div class="d-none" id='initialMarkers' >{{json_encode($initialMarkers)}}</div>
        <div class="d-none" id='polygons' >{{json_encode($polygons)}}</div>
        <div class="d-none" id='kml' >{{json_encode($kml)}}</div>
        <div id="map" 
             data-appname='{{ $appname }}'
             data-mapkey='{{ $mapkey }}'
             data-mapid='{{ $mapid }}'
             data-lat='{{ $lat }}'
             data-lon='{{ $lon }}'
             ></div>

    </div>
</div>
@endif
@endsection