@extends('layouts.app')

@section('title', 'All Communities')

@push('styles')
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet" />
    <style>
        #map {
            height: 480px;
            width: 100%;
        }
        .mapboxgl-popup {
            max-width: 200px;
        }
    </style>
@endpush

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>All Communities</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li>All Communities</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="service-details">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="alert alert-info text-center rounded-0 text-dark">
                            The map displays all CACs. Use the buttons on the right side of the map to zoom in or out. You
                            may also click on a location for more information.
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col d-flex align-items-stretch">
                        <div id="map"></div>
                    </div>
                </div>
                <div class="row my-3">
                    <div class="col-2">
                        <div class="d-grid gap-2">
                            <a class="btn btn-dark rounded-0 " href="{{ route('cacs.index') }}">Reset Map</a>
                        </div>
                    </div>
                    <div class="col-10">
                        <form action="#" method="get">
                            <div class="row">
                                <div class="col-8">
                                    <label for="address" class="d-none"></label>
                                    <input type="text" id="address" name="address" class="form-control" placeholder="Search By Address" value="{{ old('address', request()->query('address')) }}" />
                                </div>
                                <div class="col-3">
                                    <label for="distance" class="d-none"></label>
                                    <select class="form-select" id="distance" name="distance">
                                        <option value="">Select Distance</option>
                                        <option value="50" {{ old('distance', request()->query('distance')) == '50' ? 'selected="selected"' : '' }}>50 Miles</option>
                                        <option value="100" {{ old('distance', request()->query('distance')) == '100' ? 'selected="selected"' : '' }}>100 Miles</option>
                                        <option value="250" {{ old('distance', request()->query('distance')) == '250' ? 'selected="selected"' : '' }}>250 Miles</option>
                                        <option value="500" {{ old('distance', request()->query('distance')) == '500' ? 'selected="selected"' : '' }}>500 Miles</option>
                                        <option value="750" {{ old('distance', request()->query('distance')) == '750' ? 'selected="selected"' : '' }}>750 Miles</option>
                                        <option value="1000" {{ old('distance', request()->query('distance')) == '1000' ? 'selected="selected"' : '' }}>1000 Miles</option>
                                    </select>
                                </div>
                                <div class="col-1">
                                    <button type="submit" class="btn rounded-0 btn-primary">Search</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
    <script>
        const latitude = '{{ $latitude }}';
        const longitude =  '{{ $longitude }}';
        mapboxgl.accessToken = '{{ $mapboxAccessToken->access_token }}';
        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [longitude, latitude],
            zoom: 5
        });
        map.addControl(new mapboxgl.NavigationControl());
        map.on('load', function() {
            $.ajax({
                url: '{{ route('cacs.mapLoad') }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    access_token: '{{ $mapboxAccessToken->access_token }}'
                }
            });
        });
        const markers = {!! $cacs !!};
        console.log(markers);
        for (let i = 0; i < markers.length; i++) {
            if (markers[i].longitude !== null && markers[i].longitude !== null) {
                const cacUrl = '{{ url('cacs') }}/' + markers[i].id;
                const popup = new mapboxgl.Popup({offset: 25})
                    .setHTML('<strong>Community</strong>: ' + markers[i].title + '<br />' + markers[i].address1 + '<br />Admin: ' + markers[i].users[0].username + '<br />Status: ' + markers[i].cac_status.name + '<br /><a href="' + cacUrl + '">View</a>')
                    .setMaxWidth('50');
                let markerColor;
                if (markers[i].cac_status.name === 'Active') {
                    markerColor = '#50C878';
                }
                if (markers[i].cac_status.name === 'In-Development') {
                    markerColor = '#FFEA00';
                }
                if (markers[i].cac_status.name === 'Proposed') {
                    markerColor = '#CCCCCC';
                }
                new mapboxgl.Marker({
                    color: markerColor
                }).setLngLat([markers[i].longitude, markers[i].latitude]).setPopup(popup).addTo(map);
            }
        }
    </script>
@endpush