@extends('layouts.app')

@section('title', 'Вы нашли питомца')

@section('sidebar')
@endsection

@pushOnce('scripts')
    <script src="https://api-maps.yandex.ru/2.1/?apikey={{ config('maps.yandex.key') }}&lang=ru_RU" type="text/javascript">
    </script>

    <script type="text/javascript">
        window.addEventListener("DOMContentLoaded", (event) => {
            const mapToggler = document.getElementById('toggle_map');
            if (mapToggler) {
                mapToggler.addEventListener("click", (event) => {
                    let mapBlock = document.getElementById('map-block')

                    if (mapBlock.style.display === 'none') {
                        document.getElementById('map').innerHTML === '' ? ymaps.ready(init) : '';
                        mapToggler.textContent = 'Скрыть карту';
                        mapBlock.style.display = 'block';
                    } else {
                        mapToggler.textContent = 'Показать карту';
                        mapBlock.style.display = 'none';
                    }
                });
            }
        });



        function init() {

            var geolocation = ymaps.geolocation,
                myPlacemark,
                inputSearch = new ymaps.control.SearchControl({
                    options: {
                        size: 'large',
                        noPlacemark: true,
                        noSuggestPanel: true,
                    }
                }),
                myMap = new ymaps.Map('map', {
                    center: [55.76, 37.64],
                    zoom: 12,
                    controls: [
                        inputSearch,
                        'zoomControl',
                        'geolocationControl',
                        'trafficControl',
                        'fullscreenControl',
                        'rulerControl',
                    ]
                });

            geolocation.get({
                provider: 'yandex',
                mapStateAutoApply: true,
                autoReverseGeocode: false,
            }).then(function (result) {
                setPlaceMark(result.geoObjects.position)
                myMap.geoObjects.add(result.geoObjects);
                addCoordinatesToInputs(result.geoObjects.position)
            });

            geolocation.get({
                provider: 'browser',
                mapStateAutoApply: true,
                autoReverseGeocode: false,
            }).then(function (result) {
                setPlaceMark(result.geoObjects.position)
                myMap.geoObjects.add(result.geoObjects);
                addCoordinatesToInputs(result.geoObjects.position)
            });

            myMap.events.add('click', function (e) {
                var coords = e.get('coords');

                setPlaceMark(coords)
                addCoordinatesToInputs(coords);
            });

            function setPlaceMark(coords) {
                // Если метка уже создана – просто передвигаем ее.
                if (myPlacemark) {
                    myPlacemark.geometry.setCoordinates(coords);
                } else {
                    // Создаем метку
                    myPlacemark = createPlacemark(coords);
                    myMap.geoObjects.add(myPlacemark);
                    // Слушаем событие окончания перетаскивания на метке.
                    myPlacemark.events.add('dragend', function (e) {
                        addCoordinatesToInputs(myPlacemark.geometry.getCoordinates())
                        console.log('dragend: ', myPlacemark.geometry.getCoordinates())
                    });
                }
            }

            // Создание метки.
            function createPlacemark(coords) {
                return new ymaps.Placemark(coords, {
                    iconCaption: ''
                }, {
                    preset: 'islands#blueIcon',
                    draggable: true
                });
            }

            function addCoordinatesToInputs(coords) {
                document.getElementById('map-submit').disabled = false;
                document.getElementById('map-latitude').value = coords[0]
                document.getElementById('map-longitude').value = coords[1]
            }
        }

    </script>
@endPushOnce

@section('content')
    <div class="main_text my-5" style="font-size: 18px;">Поздравляем! Вы нашли питомца.</div>

    <div class="service-main_table p-4">
        <div class="row row-cols-1 row-cols-sm-2 text-center text-sm-start">
            <div class="col">
                <div class="main_text mb-5" style="font-size: 16px; font-weight:bold;">Данные питомца</div>

                @if (!empty($pet->nickname))
                    <div class="main_text mb-4">Дата рождения питомца: {{ $pet->nickname }}</div>
                @else
                    <div class="main_text mb-4">ID питомца: {{ $pet->external_id }}</div>
                @endif

                @if (!empty($pet->date_of_birth))
                    <div class="main_text mb-4">Дата рождения питомца: {{ $pet->date_of_birth }}</div>
                @endif

                @if (!empty($pet->brand))
                    <div class="main_text mb-4">Клеймо питомца: {{ $pet->brand }}</div>
                @endif
            </div>
            <div class="col">
                <div class="main_text mb-5" style="font-size: 16px; font-weight:bold;">Данные владельца</div>

                <div class="main_text mb-4">Хозяин: {{ $pet->user->name }}</div>
                <div class="main_text mb-4">Телефон: <a href="tel:{{ $pet->user->phone }}">{{ $pet->user->phone }}</a></div>
                <div class="main_text mb-4">Почта: <a href="mailto:{{ $pet->user->email }}">{{ $pet->user->email }}</a></div>

                @if (!empty($pet->user->city?->name))
                    <div class="main_text mb-4">Город: {{ $pet->user->city->name }}</div>
                @endif
            </div>
        </div>
    </div>

    @if(empty($notification->latitude) && empty($notification->longitude))
    <div class="service-main_table mt-5 py-4 px-3">
        <button type="button" id="toggle_map" class="d-block mx-auto mb-4 service-main_button mt-1">Показать карту</button>

        <ul class="">
            <li>* Вы можете выбрать место встречи на карте, чтобы владелец знал где можно забрать питомца:</li>
            <li>* Нажмите на карте или перетащите указатель чтобы выбрать местоположение.</li>
            <li>* Затем нажмите Сохранить.</li>
        </ul>

        <div id="map-block" style="display: none;">
            <div id="map" style="height: 400px;"></div>
            <form action="{{ route('notification.coordinates.store', ['id' => $notification->id]) }}" method="POST">
                @csrf
                <input type="hidden" id="map-latitude" name="latitude">
                <input type="hidden" id="map-longitude" name="longitude">
                <button type="submit" id="map-submit" class="d-block mx-auto service-main_button" disabled>Сохранить</button>
            </form>
        </div>

    </div>
    @endif

@endsection