<?php if (isset($component)) { $__componentOriginal166a02a7c5ef5a9331faf66fa665c256 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal166a02a7c5ef5a9331faf66fa665c256 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'filament-panels::components.page.index','data' => ['record' => $record]] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('filament-panels::page'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['record' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute($record)]); ?>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <p><strong>Serial Number:</strong> <?php echo e($record->serial_number); ?></p>
        </div>

        <div style="margin-top: 20px;">
            <div id="widget" wire:ignore></div>

            <div id="map" style="height: 400px; width: 100%; margin-top: 20px;" class="rounded-lg shadow" wire:ignore></div>

            <div style="margin-top: 20px;">
                <form wire:submit.prevent="submit">
                    <div style="margin-top: 20px;">
                        
                        <?php echo e($this->form); ?>

                    </div>

                    
                    <div style="margin-top: 20px;">
                        <?php if (isset($component)) { $__componentOriginal6330f08526bbb3ce2a0da37da512a11f = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal6330f08526bbb3ce2a0da37da512a11f = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'filament::components.button.index','data' => ['type' => 'submit','color' => 'primary']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('filament::button'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes(['type' => 'submit','color' => 'primary']); ?>
                            Save Changes
                         <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal6330f08526bbb3ce2a0da37da512a11f)): ?>
<?php $attributes = $__attributesOriginal6330f08526bbb3ce2a0da37da512a11f; ?>
<?php unset($__attributesOriginal6330f08526bbb3ce2a0da37da512a11f); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal6330f08526bbb3ce2a0da37da512a11f)): ?>
<?php $component = $__componentOriginal6330f08526bbb3ce2a0da37da512a11f; ?>
<?php unset($__componentOriginal6330f08526bbb3ce2a0da37da512a11f); ?>
<?php endif; ?>
                    </div>
                </form>
            </div>
        </div>
    </div>

    
    <script src="https://maps.googleapis.com/maps/api/js?key=<?php echo e(config('services.google_maps.key')); ?>&libraries=places&callback=initMap" async defer></script>

    <script>
        let map;
        let autocomplete;
        let marker;

        function initMap() {
            const defaultCenter = { lat: Number("24.8607"), lng: Number("67.0011") };

            map = new google.maps.Map(document.getElementById('map'), {
                center: defaultCenter,
                zoom: 12,
            });

            const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({});
            document.getElementById('widget').appendChild(placeAutocomplete);


            placeAutocomplete.addEventListener('gmp-select', async ({placePrediction}) => {
                const place = placePrediction.toPlace();
                await place.fetchFields({ fields: ['location', 'addressComponents', 'formattedAddress', 'displayName'] });
                const placeData = place.toJSON();
                console.log(placeData);

                const lat = placeData.location.lat;
                const lng = placeData.location.lng;

                if (!marker) {
                    marker = new google.maps.Marker({
                        position: { lat, lng },
                        map: map,
                    });
                } else {
                    marker.setPosition({ lat, lng });
                }

                map.setCenter({ lat, lng });
                map.setZoom(17);

                const businessName = placeData.displayName+" "+placeData.formattedAddress;
                const placeId = placePrediction.placeId;
                const reviewUrl = `https://search.google.com/local/writereview?placeid=${placeId}`;
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('data.business_name', businessName);
                window.Livewire.find('<?php echo e($_instance->getId()); ?>').set('data.review_url', reviewUrl);
            });
        }
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal166a02a7c5ef5a9331faf66fa665c256)): ?>
<?php $attributes = $__attributesOriginal166a02a7c5ef5a9331faf66fa665c256; ?>
<?php unset($__attributesOriginal166a02a7c5ef5a9331faf66fa665c256); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal166a02a7c5ef5a9331faf66fa665c256)): ?>
<?php $component = $__componentOriginal166a02a7c5ef5a9331faf66fa665c256; ?>
<?php unset($__componentOriginal166a02a7c5ef5a9331faf66fa665c256); ?>
<?php endif; ?>
<?php /**PATH C:\laragon\www\review\resources\views/filament/resources/devices/pages/device-resource-setup.blade.php ENDPATH**/ ?>