@extends('layouts.app')
@section('titulo', (!$model->exists ? 'Creando' : 'Editando') . ' Contrato | Cliente: ' . $cliente->Nombre)
@php
    $manual = true;
@endphp

@section('content')
    @php
        $metodo = !$model->exists ? 'POST' : 'PATCH';
        $ruta = !$model->exists
            ? route('gestion.clientes.contratos.store', $cliente->id)
            : route('gestion.clientes.contratos.update', [$cliente->id, $model->id]);
    @endphp
    <div class="row">
        <div class="col">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Datos del Contrato</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    {{ html()->modelForm($model, $metodo, $ruta)->open() }}
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="nombre">Nombre del contrato</label>
                                {{ html()->text('Nombre')->class('form-control')->attributes(['oninput' => 'this.value = this.value.toUpperCase()']) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            {{ html()->hidden('Latitud') }}
                            {{ html()->hidden('Longitud') }}
                            <label id="lb_ubicacion">Ubicación
                                {{ $model->exists ? ':' . $model->Latitud . ',' . $model->Longitud : '' }}</label>
                            <button type="button" class="btn btn-info" onclick="seleccionarUbicacion()">
                                <i class="fa-solid fa-location-dot"></i> Seleccionar ubicación
                            </button>
                            <div id="map" class="d-none"></div>
                        </div>
                    </div>
                    <br>
                    @if (!$model->exists)
                        <div class="row">
                            <div class="col">
                                <select class="form-control w-100" id="selectContrato" name="selectContrato">
                                    <option value="0">[ - Seleccione un contrato ya creado - ]</option>
                                    @foreach ($contratos as $contrato)
                                        <option value="{{ $contrato->id }}">{{ $contrato->text }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    @endif
                    <hr>
                    <div class="row">
                        <div class="col">
                            {{ html()->submit('<i class="far fa-save"></i> ' . (!$model->exists ? 'Guardar' : 'Editar'))->class('btn btn-primary') }}
                        </div>
                    </div>
                    {{ html()->closeModelForm() }}
                </div>
            </div>
        </div>
    </div>
    @if ($model->exists)
        <div class="row">
            <div class="col">
                <div class="card shadow mb-4">
                    <!-- Card Header - Dropdown -->
                    <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">Lista de servicios del contrato</h6>
                    </div>
                    <!-- Card Body -->
                    <div class="card-body">
                        @livewire('contrato-servicio-table', ['Contrato' => $model])
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('css')
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2.min.css') }}" />
    <link rel="stylesheet" media="all" type="text/css" href="{{ asset('build/css/select2-bootstrap4.min.css') }}" />
    <style>
        #map {
            height: 600px;
        }
    </style>
    @if (Auth::user()->tema == 'oscuro')
        <style>
            .select2-search {
                background-color: #343A40 !important;
            }

            .select2-search input {
                color: #ffffff !important;
                background-color: #343A40 !important;
            }

            .select2-results {
                background-color: #343A40 !important;
            }
        </style>
    @endif
@endsection
@section('js')
    <script src="{{ asset('build/js/select2.min.js') }}"></script>
    <script>
        $(function() {
            $('[data-toggle="tooltip"]').tooltip();
            cargarSelect();
        });

        function cargarSelect() {
            $('#selectContrato').select2({
                placeholder: "[ - Seleccione un contrato ya creado - ]",
                theme: "bootstrap4",
                width: '100%',
            });
        }

        //Opciones de contratos
        function cambiarEstado(id, estado) {
            Swal.fire({
                title: "¿Desea " + (estado == 'A' ? "desactivar" : "activar") +
                    " este servicio del cliente actual?",
                // icon: "warning",
                iconHtml: '<i class="fa-solid ' + (estado == 'A' ? "fa-power-off" : "fa-recycle") + ' fs-xs"></i>',
                iconColor: (estado == 'A' ? "#dc3545" : "#28a745"),
                showCancelButton: !0,
                confirmButtonText: "Si",
                cancelButtonText: "No",
            }).then((result) => {
                if (result.value === true) {
                    mostrarCargando();
                    var CSRF_TOKEN = '{{ csrf_token() }}';
                    $.ajax({
                        type: 'DELETE',
                        url: "{{ $model->exists ? route('gestion.clientes.contratos.servicios.destroy', [$model->id, '']) : '' }}/" +
                            id,
                        data: {
                            _token: CSRF_TOKEN
                        },
                        dataType: 'JSON',
                        success: function(results) {
                            location.reload();
                        }
                    });

                }

            });
        }

        function mostrarCargando() {
            Swal.fire({
                title: 'Cambiando de estado...',
                html: 'Por favor espere...',
                allowOutsideClick: false,
                timerProgressBar: true,
                didOpen: () => {
                    Swal.showLoading()
                }
            })
        }

        //Mapa de google maps
        var mapa = null;

        function cargarMapa() {
            if (mapa != null) {
                mapa.clearMarkers();
                return;
            }
            // Create the script tag, set the appropriate attributes
            var script = document.createElement('script');
            script.src =
                'https://maps.googleapis.com/maps/api/js?key=AIzaSyB_Kcn510oGEWE-b96JDcOJtkBJ795y770&callback=initMap';
            script.async = true;

            window.initMap = function() {
                // Añado a Map un array con los markers que contiene
                google.maps.Map.prototype.markers = new Array();

                // Añado a Map un método clearMakers que borrar los markers
                google.maps.Map.prototype.clearMarkers = function() {
                    for (var i = 0; i < this.markers.length; i++) {
                        this.markers[i].setMap(null);
                    }
                    this.markers = new Array();
                };

                var oldSetMap = google.maps.Marker.prototype.setMap;
                google.maps.Marker.prototype.setMap = function(map) {
                    if (map) {
                        map.markers.push(this);
                    }
                    oldSetMap.call(this, map);
                }

                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        mostrarMapa(position.coords.latitude, position.coords.longitude)
                    },
                    function errorCallback(error) {
                        console.log(error)
                    }
                );
            };

            document.head.appendChild(script);
        }

        function mostrarMapa(lat, lng) {
            var myLatLng = {
                lat,
                lng
            };

            mapa = new google.maps.Map(document.getElementById('map'), {
                zoom: 18,
                center: myLatLng,
                mapTypeId: 'hybrid'
            });

            google.maps.event.addListener(mapa, "click", function(event) {
                var latitude = event.latLng.lat();
                var longitude = event.latLng.lng();
                addMarker(latitude, longitude);
            });

            if ($('#Latitud').val() != '' && $('#Longitud').val() != '' &&
                $('#Latitud').val() != '-1' && $('#Longitud').val() != '-1') {
                addMarker(parseFloat($('#Latitud').val()), parseFloat($('#Longitud').val()));
                mapa.setCenter({
                    lat: parseFloat($('#Latitud').val()),
                    lng: parseFloat($('#Longitud').val())
                });
            }
        }

        function addMarker(lat, lng) {
            var myLatLng = {
                lat,
                lng
            };

            var marker = new google.maps.Marker({
                position: myLatLng,
                draggable: true,
                // label: {
                //     text: "Heber Lazo",
                //     fontSize: "20px",
                //     fontWeight: "bold",
                //     color: 'white',
                // }
            });

            mapa.clearMarkers();
            marker.setMap(mapa);

            $('#Latitud').val(lat);
            $('#Longitud').val(lng);
            $('#lb_ubicacion').text('Ubicación: ' + lat + ', ' + lng);
        }

        //Seleccionar ubicacion
        function seleccionarUbicacion() {
            $('#map').removeClass('d-none');
            cargarMapa();
        }
    </script>
@endsection