Actualizacuion de Rama Kquiroz

desarrollo/resources/views/frontend/registro-comercio/views/assets/css/theme-1.css

@@ -209,6 +209,14 @@
   left: 100px;
   z-index: 10;
 }
+
+.loguito{
+  display: block;
+  width: 45% !important; 
+  margin-left: 16% !important;
+  margin-top: 20% !important;
+}
+
 .light-logo{
   display: block;
 }
@@ -216,6 +224,10 @@
   display: none;
 }
 
+.ugf-sidebar-bg-lapieza {
+  background-color: #003b73;
+}
+
 .ugf-sidebar-bg {
   background: url(../images/bg/sidebar-bg.jpg) no-repeat center bottom;
   background-size: cover;
@@ -343,6 +355,7 @@
   font-weight: 400;
   font-family: "Roboto", sans-serif;
   margin-top: 20px;
+  margin-bottom: 1%;
 }
 .ugf-content form {
   margin-top: 40px;
@@ -586,7 +599,7 @@
   font-weight: 700;
   color: #1c2437;
   font-family: "Roboto", sans-serif;
-  text-transform: uppercase;
+  /* text-transform: uppercase; */
 }
 .ugf-content form .form-group .form-control {
   height: 60px;
@@ -875,13 +888,16 @@
   line-height: 60px;
 }
 
-
 @media all and (max-width: 1600px) {
   .logo {
     top: 50px;
     left: 60px;
   }
 
+  .dark-logo{
+    display: none;
+  }
+
   .alternet-access {
     right: 60px;
   }
@@ -902,21 +918,24 @@
   }
 
   .ugf-content.pt270 {
-    padding-top: 120px;
+    padding-top: 180px;
   }
   .ugf-content.pt340 {
     padding-top: 250px;
   }
 }
 @media all and (max-width: 991px) {
-  .light-logo{
+  .loguito{
     display: none;
   }
   .dark-logo{
     display: block;
+    width: 55%;
+    margin-left: 14%;
   }
   .ugf-wrapper .ugf-content-block {
     min-height: auto;
+    text-align: center;
   }
   .ugf-wrapper .ugf-content-block .logo {
     width: 690px;
@@ -950,6 +969,7 @@
   }
   .ugf-wrapper .ugf-sidebar.sidebar-steps {
     padding-bottom: 100px;
+    height: 41%;
   }
   .ugf-wrapper .ugf-sidebar.sidebar-steps .steps {
     max-width: 690px;
@@ -968,8 +988,11 @@
     margin-bottom: 100px;
   }
 
-  .ugf-content.pt270 {
-    padding-top: 120px;
+  .ugf-content .account-category .account-type {
+    height: 230px;
+    -webkit-box-flex: 0;
+        -ms-flex: 0 0 230px;
+            flex: 0 0 355px !important;
   }
 }
 @media all and (max-width: 767px) {
@@ -982,6 +1005,7 @@
   }
   .ugf-wrapper .ugf-content-block .ugf-content {
     padding: 200px 0 0;
+    text-align: center;
   }
   .ugf-wrapper .ugf-content-block .alternet-access {
     width: calc(100% - 30px);
@@ -995,7 +1019,7 @@
     width: 100%;
     min-height: auto;
     display: block;
-    padding: 100px 0 40px;
+    padding: 72px 0 40px;
   }
   .ugf-wrapper .ugf-sidebar.sidebar-steps .steps {
     max-width: calc(100% - 30px);
@@ -1028,6 +1052,9 @@
     height: 55px;
     margin-left: 20px;
   }
+  .loguito{
+    display: none;
+  }
 }
 @media all and (max-width: 539px) {
   .ugf-content form.form-flex {
@@ -1076,6 +1103,9 @@
   .final-content h2 {
     font-size: 3.2rem;
   }
+  .loguito{
+    display: none;
+  }
 }
 @media all and (max-width: 469px) {
   .ugf-content form.email-verification-form {
@@ -1085,4 +1115,7 @@
     margin-bottom: 25px;
     margin-left: 0;
   }
+  .loguito{
+    display: none;
+  }
 }

desarrollo/resources/views/frontend/registro-comercio/views/business/index.blade copy.php

@@ -26,7 +26,7 @@
         <link rel="stylesheet" type="text/css"
             href="{{ static_asset('assets/registrocomercio/registro-form/assets/css/main.css') }}">
         <link rel="stylesheet" type="text/css"
-            href="{{ static_asset('assets/registrocomercio/registro-form/assets/css/theme-1.css') }}">
+            href="{{ static_asset('assets/registrocomercio/registro-form/assets/css/theme-2.css') }}">
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
@@ -164,6 +164,8 @@
                         }
             </style>
 
+        <script src='https://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true&key={{ env("GOOGLE_MAPS_API_KEY") }}'></script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 
     </head>
 
@@ -172,20 +174,16 @@
         <div class="ugf-wrapper theme-bg">
             <div class="ugf-content-block">
                 <div class="logo">
-
                 </div>
                 <div class="container-md">
                     <div class="row">
                         <div class="col-lg-7 offset-lg-5 p-sm-0">
-                            <div style="padding-top: 100px;" class="ugf-content pt270">
-                                <a href="{{ route('shop.view.account.type') }}" class="prev-page"> <i class="las la-arrow-left"></i> Volver Atrás</a>
-                                <h2>Vamos! <span>Únete a nuestra plataforma</span></h2>
+                            <div class="ugf-content pt150">
+                                <a href="{{ route('shop.view.account.type') }}" class="prev-page margin-pd"> <i class="las la-arrow-left" ></i> Volver Atrás</a>
+                                <h3 class="margin-bc">Vamos!<span style="font-size: 2.3rem;">Únete a nuestra plataforma</span></h3>
                                 
                                 <p>Puedes registrarte llegando los siguientes pasos o a traves de una red social </p>
-                               
-                                
-                               
-                           
+
                                 <div class="form-group" style="">
                                     <ul class="list-inline social colored mb-4">
                                   
@@ -219,7 +217,7 @@
                                     <div class="container">
                                         <div class="form-row col-md-9">
 
-                                            <h5>Perfil de usuario</h5>
+                                            <h5 style="padding-bottom: 2%;">Perfil de usuario</h5>
                                             <div class="border border-vertical mb-4"></div>
 
                                             <div class="form-group mb-4">
@@ -247,18 +245,19 @@
                                                 @enderror
                                             </div>
                                             
-                                            <h5>Datos del negocio</h5>
+                                            <h5 style="padding-bottom: 2%; padding-top: 7%;">Datos del negocio</h5>
                                             <div class="border border-vertical mb-4"></div>
                                             <!-- Aquí va el título "Datos de negocio" -->
 
                                             <div class="form-group mb-4">
                                                 <label for="categories_id" id="categoryLabel">Categoría del negocio</label>
                                                 <select name="categories_id" class="form-control @error('categories_id') is-invalid @enderror" id="categories_id">
-                                                    <option value="" {{ old('categories_id') == '' ? 'selected' : '' }}>Seleccione una categoría</option>
+                                                    <option value="" selected>Seleccione una categoría</option>
                                                     @foreach ($categories as $category)
-                                                        <option value="{{ $category->value }}" {{ old('categories_id', optional($category->value)) == $category->value ? 'selected' : '' }}>{{ $category->name }}</option>
+                                                        <option value="{{ $category->id }}" {{old('categories_id') == $category->id ? 'selected' : ''}}>{{ $category->name }}</option>
                                                     @endforeach
                                                 </select>
+
                                                 @error('categories_id')
                                                     <div class="invalid-feedback">{{ $message }}</div>
                                                 @enderror
@@ -274,14 +273,60 @@
                                             </div>
                                            
                                 
-                                            <div class="form-group mb-4">
+                                            {{-- <div class="form-group mb-4">
                                                 <label for="address" id="addressLabel">Dirección</label>
                                                 <input type="text" name="address" id="address" placeholder="Dirección" class="form-control address @error('address') is-invalid @enderror" value="{{ old('address') }}">
                                                
                                                 @error('address')
                                                     <div class="invalid-feedback">{{ $message }}</div>
                                                 @enderror
+                                            </div> --}}
+
+                                          
+
+                                            <div class="form-group mb-60">
+                                                
+                                                <label for="address" id="addressLabel">Buscar dirección o selecciona en el Mapa</label>
+                                                <input class="form-control" placeholder="Introduce la Ubicación" id="searchTextField" type="text" size="50" name="address" value="{{ old('address') }}">
+
+                                        
+                                                @if ($errors->has('address'))
+                                                    <p style="font-size: 80%;" class="text-danger">{{ $errors->first('address') }}</p>
+                                                @endif
+                                               
+                                               
+                                    
+                                                <div class="row">
+                                                    <div class="col" style="display: none;">
+                                                        <label for="latitude">Latitude</label>
+                                                        <input name="latitude" class="form-control MapLat" value="{{ old('latitude') }}" type="text" placeholder="Latitude">
+                                                    </div>
+                                                    <div class="col" style="display: none;">
+                                                        <label for="longitude">Longitude</label>
+                                                        <input name="longitude" class="form-control MapLon" value="{{ old('longitude') }}" type="text" placeholder="Longitude">
+                                                    </div>
+                                                </div>
+                                                <!-- seccion mapa -->
+                                                <div id="map_canvas" class="map_canvas" ></div>
+                                                <style>
+                                                    #map_canvas{
+                                                        height: 350px;
+                                                        width: 500px;
+                                                        margin: 0.6em;
+                                                    }
+                                                    @media all and (max-width: 991px) {
+
+                                                    #map_canvas{
+                                                        height: 354px !important;
+                                                        width: 298px !important;
+                                                        margin-top: 0.8em !important;
+                                                        position: relative !important;
+                                                        overflow: hidden !important;
+                                                    }
+                                                </style>
+                                                 <!-- seccion mapa -->
                                             </div>
+                                            <br>
 
                                             <div class="form-group mb-4">
                                                 <div class="form-check">
@@ -291,14 +336,10 @@
                                                     </label>
                                                 </div>
                                                 @if ($errors->has('terms'))
-                                                  
-                                                        {{ $errors->first('terms') }}
-                                                        <p style="font-size: 80%;" class="text-danger">{{ $errors->first('terms') }}</p>
-                                             
+                                                    <p style="font-size: 80%;" class="text-danger">{{ $errors->first('terms') }}</p>
                                                 @endif
                                             </div>
 
-
                                             <div class="form-group mb-4">
                                                 
                                                 <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
@@ -306,12 +347,6 @@
                                                 <p style="font-size: 80%;" class="text-danger">{{ $errors->first('g-recaptcha-response') }}</p>
                                                 @endif
                                             </div>
-
-                                        
-
-
-                                            
-
                                             <div class="form-group mb-12 d-flex">
                                                 <button id="" class="btn btn-primary btn-lg btn-block"><span>Iniciemos</span> <i class="las la-arrow-right"></i></button>
                                             </div> 
@@ -391,8 +426,8 @@
         <!-- Optional JavaScript -->
         <!-- jQuery first, then Popper.js, then Bootstrap JS -->
         {{-- <script src="{{ static_asset('assets/registrocomercio/registro-form/assets/js/jquery.min.js') }}"></script> --}}
-        <script src="https://code.jquery.com/jquery-3.7.0.min.js"
-            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
+        {{-- <script src="https://code.jquery.com/jquery-3.7.0.min.js"
+            integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> --}}
         <script src="{{ static_asset('assets/registrocomercio/registro-form/assets/js/popper.min.js') }}"></script>
         <script src="{{ static_asset('assets/registrocomercio/registro-form/assets/js/bootstrap.min.js') }}"></script>
         <script src="{{ static_asset('assets/registrocomercio/registro-form/assets/js/owl.carousel.min.js') }}"></script>
@@ -425,3 +460,90 @@
     });
 
 </script>
+
+<script>
+    $(function () {
+        var lat = 18.7009047,
+            lng = -70.1654584,
+            latlng = new google.maps.LatLng(lat, lng),
+            image = 'https://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
+
+        //zoomControl: true,
+        //zoomControlOptions: google.maps.ZoomControlStyle.LARGE,
+
+        var mapOptions = {
+            center: new google.maps.LatLng(lat, lng),
+            zoom: 10,
+            mapTypeId: google.maps.MapTypeId.ROADMAP,
+            panControl: true,
+            panControlOptions: {
+                position: google.maps.ControlPosition.TOP_RIGHT
+            },
+            zoomControl: true,
+            zoomControlOptions: {
+                style: google.maps.ZoomControlStyle.LARGE,
+                position: google.maps.ControlPosition.TOP_left
+            }
+        },
+        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
+            marker = new google.maps.Marker({
+                position: latlng,
+                map: map,
+                icon: image
+            });
+
+        var input = document.getElementById('searchTextField');
+        var autocomplete = new google.maps.places.Autocomplete(input, {
+            types: ["geocode"]
+        });
+
+        autocomplete.bindTo('bounds', map);
+        var infowindow = new google.maps.InfoWindow();
+
+        google.maps.event.addListener(autocomplete, 'place_changed', function (event) {
+            infowindow.close();
+            var place = autocomplete.getPlace();
+            if (place.geometry.viewport) {
+                map.fitBounds(place.geometry.viewport);
+            } else {
+                map.setCenter(place.geometry.location);
+                map.setZoom(17);
+            }
+
+            moveMarker(place.name, place.geometry.location);
+            $('.MapLat').val(place.geometry.location.lat());
+            $('.MapLon').val(place.geometry.location.lng());
+        });
+        google.maps.event.addListener(map, 'click', function (event) {
+            $('.MapLat').val(event.latLng.lat());
+            $('.MapLon').val(event.latLng.lng());
+            infowindow.close();
+                    var geocoder = new google.maps.Geocoder();
+                    geocoder.geocode({
+                        "latLng":event.latLng
+                    }, function (results, status) {
+                        console.log(results, status);
+                        if (status == google.maps.GeocoderStatus.OK) {
+                            console.log(results);
+                            var lat = results[0].geometry.location.lat(),
+                                lng = results[0].geometry.location.lng(),
+                                placeName = results[0].address_components[0].long_name,
+                                latlng = new google.maps.LatLng(lat, lng);
+
+                            moveMarker(placeName, latlng);
+                            $("#searchTextField").val(results[0].formatted_address);
+                            $("input[name='address']").val(results[0].formatted_address);
+                            $("input[name='latitude']").val(latlng.lat());
+                            $("input[name='longitude']").val(latlng.lng());   
+                        }
+                    });
+        });
+       
+        function moveMarker(placeName, latlng) {
+            marker.setIcon(image);
+            marker.setPosition(latlng);
+            infowindow.setContent(placeName);
+            //infowindow.open(map, marker);
+        }
+    });
+</script>