@extends('layouts.app')
@section('head')
    @include('components.meta')
    <link href="{{ asset('css/leaflet.css') }}" rel="stylesheet" type="text/css">
    <script src="{{ asset('js/leaflet.js') }}"></script>
@endsection
@section('content')
<div class="contacts" id="section6">
    <section class="section6" >
        <div class="map" id="map"></div>
        <div class="contact-filter">
            <div class="contact-container flex flex-row  flex-wrap space-between align-center">
                <form action="#" method="POST">
                  <span>{{__('site.choose_region')}}</span>&nbsp; &nbsp; 
                  <select id="dropdownCityMaps"  onchange="changeMap(this.value)">
                        @foreach ($regions as $r)
                            <option value="{{$r->id}}">{{$r->getTitleAttribute()}}</option>
                        @endforeach
                    </select>
                </form>
                <div class="email text-white">
                    <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M23.1433 13.7143V3.42857C23.1433 3.42857 12.7433 10.6857 11.7318 11.0623C10.7376 10.7029 0.286133 3.42857 0.286133 3.42857V13.7143C0.286133 15.1429 0.58899 15.4286 2.00042 15.4286H21.429C22.8741 15.4286 23.1433 15.1777 23.1433 13.7143ZM23.1267 1.412C23.1267 0.371428 22.8233 0 21.429 0H2.00042C0.566133 0 0.286133 0.445715 0.286133 1.48571L0.303276 1.64571C0.303276 1.64571 10.6284 8.75429 11.7318 9.14286C12.8976 8.69143 23.1433 1.48571 23.1433 1.48571L23.1267 1.412Z" fill="white" fill-opacity="0.9"/></svg> &nbsp; e-mail: &nbsp;<a class="text-decoration-none text-white" href="mailto:info@uzdtv.uz">info@uzdtv.uz</a>
                </div>
            </div>
        </div>
    </section>
    <div class="top-contact text-white">
        <div class="container">
            <div class="row flex flex-row flex-wrap align-center">
                <div class="col-3">
                    {{__('site.all_cities')}}
                </div>
                <div class="col-3">
                    {{__('site.branch')}}
                </div>
                <div class="col-3">
                    {{__('site.address')}}
                </div>
                <div class="col-3">
                    {{__('site.phone_fax')}}
                </div>
            </div>
        </div>
    </div>
    <div class="contact-text">
        <div class="container">
            @foreach ($regions as $r)
                @if (count($r->contacts))
                    <div class="row flex flex-row flex-wrap align-center">
                        <div class="col-3 name">
                            {{$r->getTitleAttribute()}}
                        </div>
                        <div class="col-9 flex flex-row flex-wrap">
                            @foreach ($contacts as $c)
                                @if ($c->region_id==$r->id)
                                    <div class="col-4">
                                        <p>{{$c->getTitleAttribute()}}</p>
                                    </div>
                                    <div class="col-4">
                                        <p>
                                            {{$c->getAddressAttribute()}} <br>
                                            <button onclick="openContact({{$c->id}})">{{__('site.show_map')}}</button>
                                        </p>
                                    </div>
                                    <div class="col-4">
                                        <p>                                         
                                            {{__('site.phone')}} {{$c->phone}}  <br>
                                                                    
                                            {{__('site.fax')}}{{$c->fax}}
                                        </p>
                                    </div>
                                @endif
                            @endforeach    
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

@endsection
@section('foot')
<script>
    var map;
    map = L.map('map', {
        center: [40.102532, 65.368014],
        zoom: 7,
        scrollWheelZoom: false
    });
    var tiles =L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    
    var markers = [
      @foreach ($contacts as $c)
        ['{{$c->id}}', {{$c->latitude}},{{$c->longitude}} ], 
      @endforeach
    ];

    var infoWindowContent = [
        @foreach ($contacts as $c)
            ['<div id="infowindows"><div id="wraps"><span class="titles">{{$c->getTitleAttribute()}}</span><ul><li><strong>{{__('site.address')}}: </strong><span> {{$c->getAddressAttribute()}}</span></li><li><strong>{{__('site.work_time')}}: </strong><span>{{__('site.work_time_value')}}</span></li></ul>'],
        @endforeach
    ];

    var myIcon = L.icon({
        iconUrl: '{{ asset('images/marker-pin.png') }}',
        iconSize: [32, 40],
        popupAnchor: [0, -30]
    });

    var map_markers = [];

    for( i = 0; i < markers.length; i++ ) {
        var position = L.latLng(markers[i][1], markers[i][2]);
        map_markers.push(L.marker(position, {icon: myIcon}).addTo(map).bindPopup(infoWindowContent[i][0]));
    }
    
    function openContact(id){
        map_markers[id-1].openPopup();
         $('html').scrollTop(top);
        // window.location.hash = "#section6";
        // window.location.hash = "#bottom-header";
    }

    var coords = {
        @foreach ($regions as $r)
            {{$r->id}}: '{{$r->latitude}}, {{$r->longitude}}',
        @endforeach
    };

    function changeMap(city) {
        var c = coords[city].split(',');
        console.log(c);
        map.setView([c[0], c[1]], 12);
    }

</script>

@endsection