@extends('template.'.config('settings.template').'.content.master')
@section('head')
    <title>Home | {{config('settings.name')}}</title>
    <style>
        #map {
            height: 80vh;
            width: 100%;
        }
        .address + .address{
            margin-top: .5rem;
        }
        #marker-window{
            min-width: 100px;
        }
        #contents {
            scrollbar-color: #aaa #f5f5f5;
        }

        #contents::-webkit-scrollbar {
            width: 8px;
            border-radius: 10px;
            background-color: #f5f5f5;
        }

        #contents::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #aaa;
        }

        #contents::-webkit-scrollbar-thumb:hover {
            background-color: #888;
        }

        .address{
            cursor: pointer;
            transition: all .2s;
        }
        .address:hover{
            background: #eee;
        }
    </style>
@stop
@section('content')
    <div class="container py-5">
        <div class="row mb-5 mt-3">
            <div class="col-12">
                <h1>{{config('settings.name')}}</h1>
                <p class="mt-3">{{config('settings.description')}}</p>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-12 col-md rounded-end">
                <div class="d-flex">
                    <div id="filters" class="d-flex">
                        <template id="filter">
                            <div class="dropdown me-2 filter">
                                <button class="btn btn-primary dropdown-toggle btn-sm bg-light" style="color: #212529; background: #e9ecef; border: 1px solid #ced4da;" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <span class="filter-name"></span> <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu checkbox-menu allow-focus p-2 filter-options"></ul>
                            </div>
                        </template>
                    </div>
                    <div class="flex-fill me-2" style="max-width: 400px;">
                        <input type="text" class="form-control form-control-sm" id="ort" placeholder="Ort"/>
                    </div>
                    <div class="input-group flex-fill me-2" style="max-width: 400px;">
                        <input type="text" class="form-control form-control-sm" id="search-input" placeholder="Freitext-Suche">
                        <button class="input-group-text bg-primary text-light" id="search-button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="mt-2 d-flex">
                    <div class="d-flex">
                        <div id="applied-filters" class="d-flex">
                            <template id="applied-filter">
                                <button class="btn btn-sm btn-primary me-2 btn applied-filter d-none">
                                    <span class="filter-name"></span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                                    </svg>
                                </button>
                            </template>
                        </div>
                        <button class="btn btn-sm btn-primary me-2 btn applied-filter" data-field="ort" style="display: none;">
                            <span class="filter-name"></span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </button>
                        <button class="btn btn-sm btn-primary me-2 btn applied-filter" data-field="search" style="display: none;">
                            <span class="filter-name"></span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                                <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                            </svg>
                        </button>
                    </div>
                    <button id="reset-filters-button" class="btn btn-danger btn-sm ms-1" style="display: none;">Alle löschen</button>
                </div>
            </div>
            <div class="col-12 col-md-auto pe-0 d-flex align-items-end">
                <p class="text-end text-muted small m-0 p-0"><span id="count-items-displayed">0</span> results</p>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-8 g-0 ps-md-3 order-md-last">
                <div id="map"></div>
                <div id="marker-window" class="d-none">
                    <h6 id="firstHeading" class="firstHeading">$title</h6>
                    <div id="bodyContent">
                        <img class="img-fluid rounded" data-src="$image" alt="">
                        <p>$description</p>
                        <a data-href="$path" style="outline: none;">Details</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-4 overflow-auto mt-3 mt-md-0" style="height: 80vh;" id="contents">
                <div class="card d-none address shadow-sm ">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-5">
                                <img class="img-fluid rounded" data-src="$image" alt="">
                            </div>
                            <div class="col-12 col-md-7">
                                <h4 class="fs-6 mt-2 fw-bolder">$title</h4>
                                <p class="mt-2 text-muted small postal-code"> <svg style="fill: #ea4335; width: 10px; margin-right: 4px; margin-bottom: 2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M384 192c0 87.4-117 243-168.3 307.2c-12.3 15.3-35.1 15.3-47.4 0C117 435 0 279.4 0 192C0 86 86 0 192 0S384 86 384 192z"/></svg>$postalCode</p>
                                <div style="gap: .25rem;" class="d-flex tags"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <script>
        const urlBase = "{{url('/')}}";
        const type = "{{$_type}}";
        const locationField = "{{$_location_field}}";
        const tagField = "{{$_tags_field??''}}";
        let filterFields = {!! json_encode($_filter_fields) !!};
    </script>
    <script src="{{storage('assets/home/script.js')}}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKGJCCKvmWZl-L5bBF0uS5BWf0gN4ZkpI&libraries=places&callback=initMap"></script>
@stop