@extends('Admin.Views.admin')

@push('styles')
    <link href="{{ asset('js/Leaflet-1.7.1/leaflet.css') }}" rel="stylesheet" type="text/css">
@endpush

@include('dss::sidebar')

@section('content')
    <div class="card">
        <div class="card-header">
            <h5 class="card-title">{{ $person->name }}</h5>
        </div>
        <div class="card-body">
            @include('dss::dss.partials.nav')

            <form action="{{ route('dss.person.save_data', $person->id) }}" method="post">
                @csrf
                @method('PUT')
                <div class="row">
                    <div class="col-12">
                        <x-fieldtext
                            label='Nombre'
                            name='name'
                            :data='$person'
                            placeholder='Nombre'
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-4">
                        <x-fieldtext
                            label='Tipo de documento'
                            name='typedni'
                            :data='$person'
                            placeholder='Tipo de documento'
                        />
                    </div>
                    <div class="col-12 col-md-4">
                        <x-fieldtext
                            label='Nro. de documento'
                            name='dni'
                            :data='$person'
                            placeholder='Nro. de documento'
                        />
                    </div>
                    <div class="col-12 col-md-4">
                        <x-fieldtext
                            label='CUIT/CUIL'
                            name='cuit'
                            :data='$person'
                            placeholder='CUIT/CUIL'
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-md-4">
                        <div class="form-group">
                            <x-forms.label>Fecha de nacimiento</x-forms.label>
                            <x-forms.input
                                type="date"
                                name="birthday"
                                :value="$person->birthday"
                            />
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <x-fieldtext
                            label='Teléfono'
                            name='phone'
                            :data='$person'
                            placeholder='Teléfono'
                        />
                    </div>
                    <div class="col-12 col-md-4">
                        <x-fieldselect
                            label='Género'
                            name='gender_id'
                            :data='$person'
                            :items='$model_info->genders'
                            itemtext='name'
                            itemindex='id'
                        />
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <x-fieldselect
                            label='Estado Civil'
                            name='marital_status_id'
                            :data='$person'
                            :items='$model_info->maritalStatuses'
                            optionalText="Estado civil"
                            itemtext='name'
                            itemindex='id'
                        />
                    </div>
                    <div class="col-md-4">
                        <x-fieldselect
                            label='Condición laboral'
                            name='employment_status_id'
                            :data='$person'
                            :items='$model_info->employmentStatuses'
                            optionalText="Condición laboral"
                            itemtext='name'
                            itemindex='id'
                        />
                    </div>
                    <div class="col-md-4">
                        <x-fieldselect
                            label='Obra Social'
                            name='health_insurance_id'
                            :data='$person'
                            :items='$model_info->healthInsurances'
                            optionalText='Busque una Obra Social'
                            itemtext='name'
                            itemindex='id'
                        />
                    </div>
                </div>
                <x-fieldselectajax
                    label='Persona a Cargo'
                    name='guardian_id'
                    :data='$person'
                    template='templateSelectPersons'
                    :items='$model_info->guardian'
                    itemsurl='{{ route("people.persons.find") }}'
                    itemtext='name'
                    itemindex='id'
                />
                <div class="row">
                    <div class="col-12 col-md-5">
                        <x-fieldtext
                            label='Dirección'
                            name='address'
                            :data='$person'
                            placeholder='Dirección'
                        />
                    </div>
                    <div class="col-12 col-md-4">
                        <x-fieldselect
                            label='Ciudad'
                            name='city_id'
                            :data='$person'
                            :items='$model_info->cities'
                            itemtext='name'
                            itemindex='id'
                        />
                    </div>
                    <div class="col-12 col-md-3 align-self-center">
                        <button
                            id="searchAddress"
                            class="btn btn-primary btn-block"
                            type="button"
                        >
                            Ubicar en el mapa
                        </button>
                    </div>
                </div>
                <div class="row text-right">
                    <div class="col-12 offset-md-9 col-md-3">
                        <button
                            id="resetCoordinates"
                            class="btn btn-danger"
                            type="button"
                        >
                            Reiniciar el mapa
                        </button>
                    </div>
                </div>
                <div id="formMap" style="height: 300px; margin-bottom: 2.25rem !important;"></div>
                <input id="lat" type="number" step="0.000001" min="-90" max="90" name="latitude" value="{{ $person->latitude ?? '' }}" readonly hidden />
                <input id="lng" type="number" step="0.000001" min="-180" max="180" name="longitude" value="{{ $person->longitude ?? '' }}" readonly hidden />
                <div class="row text-right">
                    <div class="col-12">
                        <button type="submit" class="btn btn-success">
                            Guardar
                            <i class="mi-save ml-2"></i>
                        </button>
                    </div>
                </div>
            </form>
            <input id="defaultLat" type="number" step="0.000001" min="-90" max="90" value="{{ config('sipemu.organization.lat') }}" disabled  hidden />
            <input id="defaultLng" type="number" step="0.000001" min="-180" max="180" value="{{ config('sipemu.organization.lng') }}" disabled hidden />
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/Leaflet-1.7.1/leaflet.js') }}"></script>
    <script>
        "use strict";

        const getCityName = (selector) => {
            const e = document.querySelector(selector);

            return e.options[e.selectedIndex].text.split(" ").join("+");
        }

        const changeMapLocation = (lat, lng) => {
            document.querySelector("#lat").value = lat;
            document.querySelector("#lng").value = lng;
            marker.setLatLng([lat, lng]);
            formMap.panTo([lat, lng]);
        };

        const resetMapLocation = () => {
            document.querySelector("#lat").value = coordinates[0];
            document.querySelector("#lng").value = coordinates[1];
            marker.setLatLng(coordinates);
            formMap.panTo(coordinates);
        };

        const getAddressGeolocation = () => {
            if (!document.querySelector("input[name='address']").value) {
                alert("Ingrese una dirección");
                return 0;
            }

            const city = getCityName("select[name='city_id']");
            const province = "Entre+Rios";
            const country = "Argentina";
            const searchAddress = document
                .querySelector("input[name='address']")
                .value.split(" ")
                .join("+");

            const searchQuery = `${searchAddress}+${city}+${province}+${country}`;
            const apiUrl = "https://nominatim.openstreetmap.org/search?q=";
            const apiParameters = "&limit=1&format=json";
            const searchUrl = apiUrl + searchQuery + apiParameters;

            const request = new XMLHttpRequest();
            request.open("GET", searchUrl, true);
            request.setRequestHeader(
                "Access-Control-Allow-Origin",
                "https://nominatim.openstreetmap.org"
            );
            request.setRequestHeader("User-Agent", "Location Search");
            request.responseType = "json";

            request.onload = () => {
                if (request.status === 200) {
                    if (typeof request.response[0] !== "undefined") {
                        changeMapLocation(
                            request.response[0].lat,
                            request.response[0].lon
                        );
                    } else {
                        alert("No se encontró la dirección solicitada");
                    }
                } else {
                    alert("Hubo problemas al contactar al servidor");
                }
            };
            request.onerror = () => {
                alert("No pudimos contactar al servidor");
            };
            request.send();
        };

        const defaultLat = parseFloat(document.querySelector("#defaultLat").value);
        const defaultLng = parseFloat(document.querySelector("#defaultLng").value);

        let lat = document.querySelector("#lat").value;
        let lng = document.querySelector("#lng").value;
        let coordinates = [];

        if (lat && lng) {
            lat = parseFloat(lat);
            lng = parseFloat(lng);
            coordinates = [lat, lng];
        } else {
            coordinates = [defaultLat, defaultLng];
        }

        const formMap = L.map("formMap", { scrollWheelZoom: false }).setView(
            coordinates,
            18
        );

        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution:
                '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
            maxZoom: 18,
        }).addTo(formMap);

        const marker = L.marker(coordinates).addTo(formMap);

        formMap.on("click", (e) => {
            changeMapLocation(e.latlng.lat, e.latlng.lng);
        });

        document
            .querySelector("#searchAddress")
            .addEventListener("click", getAddressGeolocation);
        document
            .querySelector("#resetCoordinates")
            .addEventListener("click", resetMapLocation);
    </script>
@endpush