@extends('frontend.layouts.observe')

@section('after-styles')
    <style>
        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
@endsection

@section('content')

    <div class="container">

        <div class="card card-nav-tabs">
            <div class="header header-dark-blue">
                <div class="nav-tabs-navigation">
                    <div class="nav-tabs-wrapper">
                        <h3 class="h3 text-center text-uppercase">Weather Observation Stations</h3>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="row" style="margin-top: 30px; margin-bottom: 30px;">

                    <div class="col-md-12">
                        <div class="row">
                            @foreach($stations as $station)
                                <div class="col-md-4">
                                    <a href="{{route('frontend.observation.station', $station->station)}}"
                                       class="btn btn-info btn-md btn-block">{{ $station->station }}</a>
                                </div>
                            @endforeach
                        </div>
                    </div>

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

    </div>
    <div id="viewDiv"></div>

@endsection

@section('after-scripts')
    <script src="https://js.arcgis.com/4.6/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "dojo/domReady!"
        ], function (Map, MapView) {
            var map = new Map({
                basemap: "streets"
            });
            var view = new MapView({
                container: "viewDiv",  // Reference to the scene div created in step 5
                map: map,  // Reference to the map object created before the scene
                zoom: 4,  // Sets zoom level based on level of detail (LOD)
                center: [15, 65]  // Sets center point of view using longitude,latitude
            });
        });
    </script>
@endsection