{{-- Extends layout --}}
@extends('front.layouts.app')

{{-- Content --}}
@section('content')
    <div class="entry clearfix content row">
        <nav class="navbar navbar-expand-lg navbar-light p-0">
            <h4 class="mb-0 pr-2 ls1  font-weight-bold">{{ __('Gözlem Haritası') }}


                </h4>
        </nav>

        <div class="line line-xs line-dark"></div>

        <p>{{ __('Lütfen gözlemlemek istediğiniz kategoriyi seçiniz')}}
            <a href="{{ route('det.map.category', ['category_id' => 10]) }}"><img class='pr-2 pl-4'
                src='{{ asset('images/icons/animals/1.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 9]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/2.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 7]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/3.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 13]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/4.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 8]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/5.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 12]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/6.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 18]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/7.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 15]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/8.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 4]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/9.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 17]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/10.png') }}' /></a>
        <a href="{{ route('det.map.category', ['category_id' => 11]) }}"><img class='pr-2'
                src='{{ asset('images/icons/animals/12.png') }}' /></a>
        </p>

        @if($category)
        <h4>{{ __(" :Category kategorisindeki tespitler haritada listelenmiştir.",['category'=>$category->title])}}</h4>
        @endif
        <div id="map" style="height:500px; width:1000px"></div>


    @endsection

    {{-- Styles Section --}}
    @section('styles')

    @endsection

    @section('scripts')
        @component('front.components.google_map', ['coordinates' => $coordinates??NULL, 'title' => __('Harita')])
        @endcomponent

    @endsection