@include('livewire.tenant.common.modalHead')

<div class="row">

    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Nombre</label>
            <input type="text" wire:model.blur='name' class="form-control">
            @error('name')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Nombre fantasía</label>
            <input type="text" wire:model.blur='nickname' class="form-control">
            @error('nickname')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-8">
        <div class="form-group">
            <label>Dirección</label>
            <input type="text" wire:model.blur='address' class="form-control">
            @error('address')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-4">
        <div class="form-group">
            <label>Comuna</label>
            <input type="text" wire:model.blur='commune' class="form-control">
            @error('commune')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Teléfono</label>
            <input type="text" wire:model.blur='phone' class="form-control">
            @error('phone')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Rut</label>
            <input type="text" wire:model.blur='rut' class="form-control">
            @error('rut')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Latitud</label>
            <input type="text" wire:model.blur='lat' class="form-control">
            @error('lat')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <label>Longitud</label>
            <input type="text" wire:model.blur='lng' class="form-control">
            @error('lng')
                <span class="text-danger er">{{ $message }}</span>
            @enderror
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <button wire:click='getGeocoding()' class="btn btn-primary">Obtener coordenadas</button>
        </div>
    </div>
    <div class="col-sm-12 col-md-6">
        <div class="form-group">
            <a href="https://www.google.com/maps/search/?api=1&query={{ $lat }},{{ $lng }}"
                target="_blank"
                class="items-center whitespace-nowrap decoration-red-700 decoration-4 md:hover:underline underline-offset-8">
                <strong class="text-red-600 dark:text-red-400 text-sm font-medium">
                    Ver Mapa
                </strong>
            </a>
        </div>
    </div>

    @if ($geocode)
        <div class="col-12">
            <div class="form-group">
                <a href="https://www.google.com/maps/search/?api=1&query={{ $lat }},{{ $lng }}"
                    target="_blank"
                    class="items-center whitespace-nowrap decoration-red-700 decoration-4 md:hover:underline underline-offset-8">
                    <strong class="text-red-600 dark:text-red-400 text-sm font-medium">
                        {{ $geocode[0]['formatted_address'] }}
                    </strong>
                </a>
            </div>
        </div>
    @endif

</div>


@include('livewire.tenant.common.modalFooter')