| DIR: /var/www/devs.lapieza.net/resources/views/frontend/ |
| Current File : /var/www/devs.lapieza.net/resources/views/frontend/shipping_info.blade.php |
@extends('frontend.layouts.app')
@section('styles')
<style>
.map_canvas {
height: 500px;
margin-top: 20px;
margin-bottom: 20px;
}
@media all and (max-width: 991px) {
.map_canvas {
height: 354px !important;
width: 291px !important;
margin-top: 0.8em !important;
position: relative !important;
overflow: hidden !important;
margin-left: 0px !important;
}
}
.searchTextField {
width: 100%;
height: 9%;
}
.selected {
border-style: solid;
border-width: 1px 1px 8px 1px !important;
transition: all 500ms;
}
.address-card, .add-address-card {
width: 100%;
cursor: pointer;
border: 1px solid #adaaaa;
margin: 5px 0;
}
@media (min-width: 1024px) {
.address-card, .add-address-card {
width: calc(33.3% - 10px);
margin: 5px !important;
}
}
</style>
@endsection
@section('content')
<!-- External Css -->
<link rel="stylesheet"
href="{{ static_asset('assets/registrocomercio/registro-form/assets/css/line-awesome.min.css') }}">
<link rel="stylesheet"
href="{{ static_asset('assets/registrocomercio/registro-form/assets/css/owl.carousel.min.css') }}"/>
<link rel="stylesheet"
href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
<link rel="stylesheet"
href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" type="text/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">
<!-- Steps -->
@include('components.delivery.steps', ['step' => 2])
<!-- Shipping Info -->
<section class="mb-4 gry-bg">
<div class="container">
<div class="row cols-xs-space cols-sm-space cols-md-space mt-15px">
<div class="col-xxl-8 col-xl-10 mx-auto">
<div class="border bg-white p-4 mb-4 rounded-15px mt-15px">
<div
class="row addresses-container w-100 justify-content-center m-auto justify-content-md-start">
@foreach ($addresses as $key => $address)
<div class="address-card rounded-15px pt-2 px-2">
<div class="d-flex flex-column justify-content-between h-100">
<div class="d-block bg-white rounded-15px mb-0 h-100">
<input id="address_radio_{{ $address->id }}" data-id="{{ $address->id }}"
type="radio" name="address_id" value="{{ $address->id }}"
class="form-check-input-radio"
{{--@checked(old('address_id', $address->set_default ?? false))--}} required
data-default-id="{{ $address->id }}">
<span class="d-flex p-3 border-0">
<!-- Address -->
<span class="flex-grow-1 pl-3 text-left">
<div class="row">
<span
class="fs-14 text-secondary col-3">{{ translate('Address') }}</span>
<span
class="fs-14 text-dark fw-500 ml-2 col">{{ $address->address }}</span>
</div>
<div class="row">
<span
class="fs-14 text-secondary col-3">{{ translate('Postal Code') }}</span>
<span
class="fs-14 text-dark fw-500 ml-2 col">{{ $address->postalCode }}</span>
</div>
<div class="row">
<span
class="fs-14 text-secondary col-3">{{ translate('City') }}</span>
<span
class="fs-14 text-dark fw-500 ml-2 col">{{ $address->city }}</span>
</div>
<div class="row">
<span
class="fs-14 text-secondary col-3">{{ translate('State') }}</span>
<span
class="fs-14 text-dark fw-500 ml-2 col">{{ $address->state }}</span>
</div>
<div class="row">
<span
class="fs-14 text-secondary col-3">{{ translate('Country') }}</span>
<span
class="fs-14 text-dark fw-500 ml-2 col">{{ $address->country }}</span>
</div>
<div class="row">
<span
class="fs-14 text-secondary col-3">{{ translate('Phone') }}</span>
<span
class="fs-14 text-dark fw-500 ml-2 col">{{ $address->phone }}</span>
</div>
</span>
</span>
</div>
<!-- Edit Address Button -->
<div class="p-3 text-right">
<a class="btn btn-sm btn-warning text-white mr-4 rounded-25px px-4"
onclick="edit_address({{ $address->id }}, '{{ $address->longitude }}', '{{ $address->latitude }}')">
Editar
</a>
</div>
</div>
</div>
<!-- Edit Address Modal -->
<div class="modal fade" id="edit-address-modal_{{ $address->id }}" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
{{--{{ translate('Edit Address') }} --}}
Editar Dirección
</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-default" role="form" id="edit-address-form"
action="{{ route('addresses.update', $address->id ?? '') }}"
method="POST">
@csrf
@method('PUT')
<div class="modal-body c-scrollbar-light">
<div class="p-3">
<!-- Address -->
<div class="row">
<div class="col-md-2">
<label>{{ translate('Address') }}</label>
</div>
<div class="col-md-10">
<input class="form-control mb-3 rounded-15px"
placeholder="Introduce la Ubicación"
id="searchTextField_{{$address->id ?? '1'}}"
type="text"
name="address"
value="{{ old('address', $address->address ?? '') }}"
required readonly>
@if ($errors->has('address'))
<p style="font-size: 80%;" class="text-danger">
{{ $errors->first('address') }}
</p>
@endif
<div id="edit-addressError"
style="color: #dc3545; font-size: 80%;"></div>
<label for="address" id="edit-addressLabel"
class="fs-14 text-dark fw-500">
Solo puedes editar dirección seleccionando en el
mapa.
</label>
<div id="map_canvas_{{ $address->id ?? '1' }}"
class="map_canvas map_canvas"></div>
</div>
</div>
<br>
<div class="row">
<div class="col" style="display: none;">
<label for="latitude">Latitude</label>
<input name="latitude" class="form-control MapLat"
value="{{ old('latitude', $address->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', $address->longitude ?? '') }}"
type="text" placeholder="Longitude">
</div>
</div>
<div class="row">
<div class="col" style="display: none;">
<label for="country">country</label>
<input name="country" class="form-control"
value="{{ old('country', $address->country ?? '') }}"
type="text" placeholder="country">
@error('country')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<div id="countryError"
style="color: #dc3545; font-size: 80%;"></div>
</div>
<div class="col" style="display: none;">
<label for="state">state</label>
<input name="state" class="form-control"
value="{{ old('state', $address->state ?? '') }}"
type="text" placeholder="state">
@error('state')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<div id="stateError"
style="color: #dc3545; font-size: 80%;"></div>
</div>
</div>
<div class="row">
<div class="col" style="display: none;">
<label for="city">city</label>
<input name="city" class="form-control"
value="{{ old('city', $address->city ?? '') }}"
type="text" placeholder="city">
@error('city')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<div id="cityError"
style="color: #dc3545; font-size: 80%;"></div>
</div>
<div class="col" style="display: none;">
<label for="postalCode">postalCode</label>
<input name="postalCode" class="form-control"
value="{{ old('postalCode', $address->postalCode ?? '') }}"
type="text" placeholder="postalCode">
@error('postalCode')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
<div id="postalCodeError"
style="color: #dc3545; font-size: 80%;"></div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label>{{ translate('Phone') }}</label>
</div>
<div class="col-md-10">
<input type="tel" name="phone"
id="phonedos_{{ $address->id ?? '1' }}"
placeholder="Ejemplo: +18091234567"
class="form-control mb-3 phone-input rounded-15px phone @error('phone') is-invalid @enderror"
value="{{ old('phone', $address->phone ?? '') }}">
<div id="phoneErrordos"
style="color: #dc3545; font-size: 80%;"></div>
<div id="phoneStatus"></div>
@error('phone')
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
</div>
<div class="form-group text-right">
<button id="submit-edit-address-{{ $address->id }}"
class="btn btn-primary rounded-25px w-150px">
{{ translate('Save') }}
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endforeach
@if($addresses->count() < 3)
<!-- Add New Address OPCION DEL MAPA-->
<div class="add-address-card rounded-15px">
{{-- obtengo el id que esta haciendo el recorrido y lo agrego aqui con javascript other_form_address_id --}}
<input type="hidden" id="other_form_address_id" name="address_id_" value="">
<span class="d-flex w-100 h-100 d-block aiz-megabox-elem border-0">
<div
class="border p-3 c-pointer text-center bg-light has-transition hov-bg-soft-light h-100 w-100 d-flex flex-column justify-content-center rounded-15px"
id="add-new-address">
<i class="las la-plus la-2x mb-3"></i>
<div class="alpha-7 fw-700">{{ translate('Add New Address') }}</div>
</div>
</span>
</div>
@endif
</div>
<div class="row align-items-center">
<!-- Return to shop -->
<div class="col-md-6 text-center text-md-left order-1 order-md-0">
<a href="{{ route('cart') }}" class="btn btn-link fs-14 fw-700 px-0 mt-15px">
<i class="las la-arrow-left fs-16"></i>
{{ translate('Regresar al carrito') }}
</a>
</div>
<!-- Continue to Delivery Info -->
<div class="col-md-6 text-center text-md-right">
{{--<a href="{{ route('checkout.store_shipping_infostore') }}"
class="btn btn-primary fs-14 fw-700 rounded-25px px-4" disabled id="submit-button">
{{ translate('Continue to Delivery Info') }}
</a>--}}
<button class="btn btn-primary fs-14 fw-700 rounded-25px px-4"
id="submit-button-info" disabled>
{{ translate('Continue to Delivery Info') }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
<!-- Bootstrap CSS -->
@section('modal')
<!-- Address Modal -->
@include('frontend.partials.address_modal', ['phone_number' => auth()->user()->addresses()->default()->first()->phone ?? null])
@endsection
{{--@include('frontend.partials.address_modal')--}}
@section('script')
<script async
src='https://maps.google.com/maps/api/js?libraries=places®ion=uk&language=en&key={{ env('GOOGLE_MAPS_API_KEY') }}'></script>
<script src="{{ asset('public/assets/js/client/checkout/addressSelection.js') }}" type="text/javascript"
defer></script>
<script type="text/javascript">
$(document).ready(function () {
const submitButton = $("#submit-button-info");
function toggleSubmitButton() {
if ($(".address-card.selected").length > 0) {
submitButton.prop("disabled", false);
} else {
submitButton.prop("disabled", true);
}
}
toggleSubmitButton();
$(document).on('click', '.address-card', function () {
const parentCard = $(this).closest(".address-card");
if (parentCard.hasClass('selected')) {
toggleSubmitButton();
} else {
toggleSubmitButton();
}
});
submitButton.on('click', function () {
window.location.href = "{{ route('checkout.store_shipping_infostore') }}";
});
});
url = "{{ config('app.url') }}"
function edit_address(id, longitude, latitude) {
$('#edit-address-modal_' + id).modal('show');
showMapedit('map_canvas_' + id, longitude, latitude);
$('#submit-edit-address-' + id).attr('data-id', id);
}
$('[id^=submit-edit-address-]').on('click', function (event) {
event.preventDefault();
let id = $(this).data('id');
let url = "{{ route('addresses.update', '__id__') }}".replace('__id__', id);
let formData = $('#edit-address-form').serialize();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
method: "PUT",
url: url,
data: formData,
success: function (data, textStatus, jqXHR) {
if (data.state === 'success') {
Swal({
type: 'success',
title: 'Bien',
text: data.msg,
timer: 6000
}).then(() => {
location.reload();
})
} else {
Swal({
type: 'error',
title: 'Oops...',
text: data.msg,
timer: 6000
})
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
}
})
});
$("#add-new-address").on('click', function (e) {
e.preventDefault();
$('#new-address-modal').modal('show');
showMapnew("new-map_canvas");
});
$('#submit-new-address').on('click', function (event) {
event.preventDefault();
var url = "{{ route('addresses.store') }}";
var formData = $('#form-address').serialize();
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: url,
type: 'POST',
data: formData,
success: function (response) {
$('#new-address-modal').modal('hide');
if (response.state === 'success') {
Swal.fire({
type: 'success',
title: 'Bien',
text: response.msg,
timer: 6000
}).then(() => {
location.reload();
})
} else {
Swal.fire({
type: 'error',
title: 'Oops...',
text: response.msg,
timer: 6000
})
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
}
});
});
</script>
<script src="{{ asset('public/assets/js/utilities/Maps/main.js') }}" type="text/javascript" defer></script>
<script>
function addPlusOneToPhoneInputs() {
const inputValue = this.value;
if (!inputValue || !inputValue.startsWith('+1')) {
this.value = '+1';
}
if (inputValue && inputValue.length <= 2) {
this.value = '+1';
}
}
// Try adding +1 on DOM loaded
document.addEventListener('DOMContentLoaded', function () {
const phoneunoInput = document.getElementById('phoneuno');
const inputs = $("[id^='edit-address-modal_'] input.phone");
phoneunoInput.addEventListener('input', addPlusOneToPhoneInputs);
inputs.each(function () {
$(this).on('input', addPlusOneToPhoneInputs);
if ($(this).val().length <= 3) {
$(this).val('+1');
}
});
if (phoneunoInput.value.length <= 3) {
phoneunoInput.value = '+1';
}
});
</script>
<script>
function validatePhone(input, errorSpan) {
const inputValue = input.val().trim().replace(/\s/g, ''); // Eliminar espacios en blanco
// Validación
if (inputValue.length === 0) {
errorSpan.text('El campo número móvil es obligatorio.');
} else if (!/^[\d+]+$/.test(inputValue)) {
errorSpan.text('Solo se permiten números y el símbolo "+".');
} else if (!/^\+1\d{10}$/.test(inputValue)) {
errorSpan.text('El número móvil debe tener el formato +1 seguido de 10 números.');
} else {
errorSpan.text('');
}
// Establecer estilo de input basado en si hay un error o no
input.css({
'border': errorSpan.text() ? '1px solid #dc3545' : '1px solid #198754',
'box-shadow': errorSpan.text() ? '0 0 5px #dc3545' : '0 0 5px #198754'
});
}
$(document).ready(function () {
$('#phoneuno').on('input', function () {
validatePhone($(this), $('#phoneError'));
});
$('[id^="phonedos_"]').on('input', function () {
validatePhone($(this), $(this).siblings('#phoneErrordos'));
});
});
</script>
@endsection
|