@extends('layout.backend')
@section('styles')
    @parent
    <style>
        #map {
            width: 100%;
            height: calc(100vh - 260px);
            min-height: 500px;
            border-radius: 0 0 .35rem .35rem;
        }
        .map-filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            align-items: center;
            padding: .75rem 1rem;
            background: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
        }
        .map-filter-label {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .35rem .75rem;
            border-radius: 2rem;
            border: 1.5px solid transparent;
            cursor: pointer;
            font-size: .82rem;
            font-weight: 600;
            user-select: none;
            transition: opacity .2s, border-color .2s;
        }
        .map-filter-label:hover { opacity: .85; }
        .map-filter-label input[type=checkbox] { display: none; }
        .map-filter-label.unchecked { opacity: .45; border-style: dashed; }
        .map-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            flex-shrink: 0;
        }
        .filter-hlc      { background: #e8f0fe; border-color: #4285f4; color: #1a56cc; }
        .filter-pvg      { background: #e6f4ea; border-color: #34a853; color: #1a7737; }
        .filter-priority { background: #fce8e6; border-color: #ea4335; color: #c5221f; }
        .filter-hospital { background: #fef7e0; border-color: #fbbc04; color: #a07000; }
        .filter-assist   { background: #f3e8fd; border-color: #9c27b0; color: #6a0080; }
        .filter-easer    { background: #e0f4ff; border-color: #03a9f4; color: #006494; }
        .dot-hlc      { background: #4285f4; }
        .dot-pvg      { background: #34a853; }
        .dot-priority { background: #ea4335; }
        .dot-hospital { background: #fbbc04; }
        .dot-assist  { background: #9c27b0; }
        .dot-easer   { background: #03a9f4; }

        /* City update progress */
        #logcity { padding: 1rem; font-size: .85rem; }
        #logcity .log-line { padding: .2rem 0; border-bottom: 1px solid #f0f0f0; }
    </style>
@endsection
@section('scripts')
	@parent
	@vite(['resources/js/maps.js'])
@endsection
@section('content')

@if(isset($lstcity))
{{-- MODO: Atualização de dados do mapa --}}
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex align-items-center">
        <i class="fas fa-sync-alt fa-spin text-primary mr-2"></i>
        <h6 class="m-0 font-weight-bold text-primary">Atualizando dados do mapa, aguarde…</h6>
    </div>
    <div class="card-body">
        <div class="progress mb-3" style="height:6px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary w-100"></div>
        </div>
        <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" class="small text-muted"></div>
    </div>
</div>

@else
{{-- MODO: Mapa interativo --}}
<div class="card shadow mb-4" id="divWait">
    <div class="card-header py-3 d-flex align-items-center">
        <i class="fas fa-circle-notch fa-spin text-primary mr-2"></i>
        <h6 class="m-0 font-weight-bold text-primary">Carregando mapa…</h6>
    </div>
</div>

<div class="card shadow mb-4 d-none" id="divMap">
    <div class="card-header py-3 d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
            <i class="fas fa-map-marked-alt text-primary mr-2"></i>
            <h6 class="m-0 font-weight-bold text-primary">Mapa {!! config('app.name') !!}</h6>
        </div>
        <a href="#infoAcct" data-toggle="collapse" role="button" aria-expanded="true" aria-controls="infoAcct"
           class="btn btn-sm btn-outline-secondary">
            <i class="fas fa-chevron-up"></i>
        </a>
    </div>

    <div class="collapse show" id="infoAcct">
        {{-- Barra de filtros --}}
        <div class="map-filter-bar">
            <span class="text-muted small font-weight-bold mr-1">Exibir:</span>

            <label class="map-filter-label filter-hlc" id="lblHlc">
                <input type="checkbox" id="chkHlc" checked>
                <span class="map-dot dot-hlc"></span>
                Membros COLIH
            </label>

            <label class="map-filter-label filter-pvg" id="lblPvg">
                <input type="checkbox" id="chkPvg" checked>
                <span class="map-dot dot-pvg"></span>
                Membros GVP
            </label>

            <label class="map-filter-label filter-priority" id="lblPriority">
                <input type="checkbox" id="chkHospitalPriority" checked>
                <span class="map-dot dot-priority"></span>
                Instituições Prioritárias
            </label>

            <label class="map-filter-label filter-hospital" id="lblHospital">
                <input type="checkbox" id="chkHospital">
                <span class="map-dot dot-hospital"></span>
                Outras Instituições
            </label>

            <label class="map-filter-label filter-assist" id="lblAssist">
                <input type="checkbox" id="chkAssist" checked>
                <span class="map-dot dot-assist"></span>
                Assistentes
            </label>

            <label class="map-filter-label filter-easer" id="lblEaser">
                <input type="checkbox" id="chkEaser" checked>
                <span class="map-dot dot-easer"></span>
                Facilitadores
            </label>
        </div>

        {{-- Dados ocultos para o JS --}}
        <div class="d-none" id="initialMarkers">{{ json_encode($initialMarkers) }}</div>
        <div class="d-none" id="polygonsGeoJson">{{ json_encode($polygonsGeoJson) }}</div>
        <div class="d-none" id="kml">{{ json_encode($kml) }}</div>

        {{-- Container do Google Maps --}}
        <div id="map"
             data-appname="{{ $appname }}"
             data-mapkey="{{ $mapkey }}"
             data-mapid="{{ $mapid }}"
             data-lat="{{ $lat }}"
             data-lon="{{ $lon }}"></div>
    </div>
</div>
@endif
@endsection