@push('css')
<link rel="stylesheet" href="{{ asset('/assets/custom/select2/css/select2.min.css') }}" />
    <style>
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
@endpush
<div style="height: 100vh;">

    <!-- Encabezado de pagina -->
    <div class="header">
        <div class="header-body">
            <div class="row align-items-center">
                <div class="col">
                    <h1 class="header-title">
                        Mapa
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="col-md-5">
                            <div class="mb-4">
                                <label for="userSelect"><strong>Selecciona un colaborador:</strong></label>
                                <select id="userSelect" class="form-control select2" wire:model="selectedUserId">
                                    <option value="">Escribe el nombre</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}">
                                            {{ $user->colaborador ? ($user->colaborador->nombre . ' ' . $user->colaborador->apellido_paterno . ' ' . $user->colaborador->apellido_materno) : $user->email }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                            @if ($selectedUserId && $coordinates)
                                <div id="gmap" style="width:100%;height:600px;min-height:400px;"></div>
                            @elseif ($mapUrl)
                                <iframe 
                                    src="{{ $mapUrl }}" 
                                    width="100%" 
                                    height="600px" 
                                    allowfullscreen 
                                    loading="lazy"
                                    referrerpolicy="no-referrer-when-downgrade">
                                </iframe>
                            @endif
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
@push('js')
<script src="{{ asset('/assets/custom/select2/js/select2.min.js') }}"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}"></script>
    <script>
        document.addEventListener('livewire:load', function () {
            // Inicializar select2
            $('#userSelect').select2({
                width: '100%',
                placeholder: 'Escribe el nombre',
                allowClear: true
            }).on('change', function (e) {
                @this.set('selectedUserId', $(this).val());
            });
            Livewire.on('showAllCoordinates', coords => {
                if (!coords.length) return;
                if (window.gmapInstance) {
                    window.gmapInstance = null;
                    document.getElementById('gmap').innerHTML = '';
                }
                var center = { lat: parseFloat(coords[0].latitude), lng: parseFloat(coords[0].longitude) };
                window.gmapInstance = new google.maps.Map(document.getElementById('gmap'), {
                    zoom: 13,
                    center: center
                });
                coords.forEach(function(coord) {
                    var date = new Date(coord.recorded_at);
                    var day = String(date.getDate()).padStart(2, '0');
                    var month = String(date.getMonth() + 1).padStart(2, '0');
                    var year = date.getFullYear();
                    var hours = String(date.getHours()).padStart(2, '0');
                    var minutes = String(date.getMinutes()).padStart(2, '0');
                    var formattedDate = day + '-' + month + '-' + year + ' ' + hours + ':' + minutes;
                    new google.maps.Marker({
                        position: { lat: parseFloat(coord.latitude), lng: parseFloat(coord.longitude) },
                        map: window.gmapInstance,
                        title: 'Fecha: ' + formattedDate
                    });
                });
            });
            // Refrescar select2 cuando Livewire actualice el DOM
            Livewire.hook('message.processed', (message, component) => {
                $('#userSelect').select2({
                    width: '100%',
                    placeholder: 'Escribe el nombre',
                    allowClear: true
                });
            });
        });
    </script>
@endpush