<?php $__env->startSection('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>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
    <!-- External Css -->
    <link rel="stylesheet"
          href="<?php echo e(static_asset('assets/registrocomercio/registro-form/assets/css/line-awesome.min.css')); ?>">
    <link rel="stylesheet"
          href="<?php echo e(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="<?php echo e(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 -->
    <?php echo $__env->make('components.delivery.steps', ['step' => 2], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    <!-- 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">
                            <?php $__currentLoopData = $addresses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $address): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <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_<?php echo e($address->id); ?>" data-id="<?php echo e($address->id); ?>"
                                                   type="radio" name="address_id" value="<?php echo e($address->id); ?>"
                                                   class="form-check-input-radio"
                                                    required
                                                   data-default-id="<?php echo e($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"><?php echo e(translate('Address')); ?></span>
                                                        <span
                                                            class="fs-14 text-dark fw-500 ml-2 col"><?php echo e($address->address); ?></span>
                                                    </div>
                                                    <div class="row">
                                                        <span
                                                            class="fs-14 text-secondary col-3"><?php echo e(translate('Postal Code')); ?></span>
                                                        <span
                                                            class="fs-14 text-dark fw-500 ml-2 col"><?php echo e($address->postalCode); ?></span>
                                                    </div>
                                                    <div class="row">
                                                        <span
                                                            class="fs-14 text-secondary col-3"><?php echo e(translate('City')); ?></span>
                                                        <span
                                                            class="fs-14 text-dark fw-500 ml-2 col"><?php echo e($address->city); ?></span>
                                                    </div>
                                                    <div class="row">
                                                        <span
                                                            class="fs-14 text-secondary col-3"><?php echo e(translate('State')); ?></span>
                                                        <span
                                                            class="fs-14 text-dark fw-500 ml-2 col"><?php echo e($address->state); ?></span>
                                                    </div>
                                                    <div class="row">
                                                        <span
                                                            class="fs-14 text-secondary col-3"><?php echo e(translate('Country')); ?></span>
                                                        <span
                                                            class="fs-14 text-dark fw-500 ml-2 col"><?php echo e($address->country); ?></span>
                                                    </div>
                                                    <div class="row">
                                                        <span
                                                            class="fs-14 text-secondary col-3"><?php echo e(translate('Phone')); ?></span>
                                                        <span
                                                            class="fs-14 text-dark fw-500 ml-2 col"><?php echo e($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(<?php echo e($address->id); ?>, '<?php echo e($address->longitude); ?>', '<?php echo e($address->latitude); ?>')">
                                                Editar
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Address Modal -->
                                <div class="modal fade" id="edit-address-modal_<?php echo e($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">
                                                    
                                                    Editar Dirección
                                                </h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <form class="form-default" role="form" id="edit-address-form"
                                                  action="<?php echo e(route('addresses.update', $address->id ?? '')); ?>"
                                                  method="POST">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('PUT'); ?>
                                                <div class="modal-body c-scrollbar-light">
                                                    <div class="p-3">
                                                        <!-- Address -->
                                                        <div class="row">
                                                            <div class="col-md-2">
                                                                <label><?php echo e(translate('Address')); ?></label>
                                                            </div>
                                                            <div class="col-md-10">
                                                                <input class="form-control mb-3 rounded-15px"
                                                                       placeholder="Introduce la Ubicación"
                                                                       id="searchTextField_<?php echo e($address->id ?? '1'); ?>"
                                                                       type="text"
                                                                       name="address"
                                                                       value="<?php echo e(old('address', $address->address ?? '')); ?>"
                                                                       required readonly>
                                                                <?php if($errors->has('address')): ?>
                                                                    <p style="font-size: 80%;" class="text-danger">
                                                                        <?php echo e($errors->first('address')); ?>
                                                                    </p>
                                                                <?php 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_<?php echo e($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="<?php echo e(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="<?php echo e(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="<?php echo e(old('country', $address->country ?? '')); ?>"
                                                                       type="text" placeholder="country">
                                                                <?php $__errorArgs = ['country'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                                                <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="<?php echo e(old('state', $address->state ?? '')); ?>"
                                                                       type="text" placeholder="state">
                                                                <?php $__errorArgs = ['state'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                                                <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="<?php echo e(old('city', $address->city ?? '')); ?>"
                                                                       type="text" placeholder="city">
                                                                <?php $__errorArgs = ['city'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                                                <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="<?php echo e(old('postalCode', $address->postalCode ?? '')); ?>"
                                                                       type="text" placeholder="postalCode">
                                                                <?php $__errorArgs = ['postalCode'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                                                <div id="postalCodeError"
                                                                     style="color: #dc3545; font-size: 80%;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-2">
                                                                <label><?php echo e(translate('Phone')); ?></label>
                                                            </div>
                                                            <div class="col-md-10">
                                                                <input type="tel" name="phone"
                                                                       id="phonedos_<?php echo e($address->id ?? '1'); ?>"
                                                                       placeholder="Ejemplo: +18091234567"
                                                                       class="form-control mb-3 phone-input rounded-15px phone <?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                                                       value="<?php echo e(old('phone', $address->phone ?? '')); ?>">
                                                                <div id="phoneErrordos"
                                                                     style="color: #dc3545; font-size: 80%;"></div>
                                                                <div id="phoneStatus"></div>
                                                                <?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                                                <div class="invalid-feedback"><?php echo e($message); ?></div>
                                                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                                            </div>
                                                        </div>
                                                        <div class="form-group text-right">
                                                            <button id="submit-edit-address-<?php echo e($address->id); ?>"
                                                                    class="btn btn-primary rounded-25px w-150px">
                                                                <?php echo e(translate('Save')); ?>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            <?php if($addresses->count() < 3): ?>
                                <!-- Add New Address OPCION DEL MAPA-->
                                <div class="add-address-card rounded-15px">
                                    
                                    <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"><?php echo e(translate('Add New Address')); ?></div>
                                        </div>
                                    </span>
                                </div>
                            <?php 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="<?php echo e(route('cart')); ?>" class="btn btn-link fs-14 fw-700 px-0 mt-15px">
                                    <i class="las la-arrow-left fs-16"></i>
                                    <?php echo e(translate('Regresar al carrito')); ?>
                                </a>
                            </div>
                            <!-- Continue to Delivery Info -->
                            <div class="col-md-6 text-center text-md-right">
                                
                                <button class="btn btn-primary fs-14 fw-700 rounded-25px px-4"
                                        id="submit-button-info" disabled>
                                    <?php echo e(translate('Continue to Delivery Info')); ?>
                                </button>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<?php $__env->stopSection(); ?>

<!-- Bootstrap CSS -->
<?php $__env->startSection('modal'); ?>
    <!-- Address Modal -->
    <?php echo $__env->make('frontend.partials.address_modal', ['phone_number' => auth()->user()->addresses()->default()->first()->phone ?? null], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->stopSection(); ?>



<?php $__env->startSection('script'); ?>

    <script async
            src='https://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&key=<?php echo e(env('GOOGLE_MAPS_API_KEY')); ?>'></script>
    <script src="<?php echo e(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 = "<?php echo e(route('checkout.store_shipping_infostore')); ?>";
            });
        });


        url = "<?php echo e(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 = "<?php echo e(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 = "<?php echo e(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="<?php echo e(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>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('frontend.layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/devs.lapieza.net/resources/views/frontend/shipping_info.blade.php ENDPATH**/ ?>