<?php $__env->startSection('content'); ?>
    <main>
        <?php echo $__env->make('web.pages.components.header.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

        <section class="checkout_pg cart_pg section">
        <div class="container">
            <div class="">
                <div class="sec_head text-center mb-5 ">
                    <h2 class="fs-1 fw-bold color-primary">  <?php echo e($title); ?>      </h2>
                </div>
                <form method="post" action="<?php echo e($action); ?>" onsubmit="formAction(this)">
                    <?php if(isset($address)): ?>
                        <?php echo method_field('PUT'); ?>
                    <?php endif; ?>
                    <?php echo csrf_field(); ?>
                    <div class="box">
                        <div class="location-options">


                            <div class="location-form newLocation-form mt-4" >
                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="form-group mb-4">
                                            <input type="text" name="name" class="form-control"  value="<?php echo e($address->name ?? ''); ?>" placeholder="  <?php echo e(__('web.name')); ?>" maxlength="170"/>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group phone_group mb-4">
                                            <input name="phone" value="<?php echo e($address->phone ?? ''); ?>" class="form-control digitsOnly" placeholder="XXX-XXX-XXX  " />
                                            <span class="countryCode_span">+966</span>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-4">
                                            <select name="city_id" onchange="fetchAreas(this)" id="city_id" class="form-control form-select">
                                                <option value=""><?php echo e(__('web.city_id')); ?></option>
                                                <?php $__currentLoopData = $cities; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option <?php echo e(isset($address) ?  ($address->city_id == $row->id ? 'selected': '') : ''); ?> value="<?php echo e($row->id); ?>"><?php echo e($row->title); ?></option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group mb-4">
                                            <select name="area_id" id="area_id" class="form-control form-select">
                                                <option value=""><?php echo e(__('web.area_id')); ?></option>
                                                <?php $__currentLoopData = $areas; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                    <option <?php echo e(isset($address) ?  ($address->area_id == $row->id ? 'selected': '') : ''); ?> value="<?php echo e($row->id); ?>"><?php echo e($row->title); ?></option>
                                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group mb-4">
                                            <input type="text" name="address" class="form-control"  value="<?php echo e($address->address ?? ''); ?>" placeholder="  <?php echo e(__('web.address')); ?>" maxlength="170"/>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <input type="hidden" name="latitude" id="latitude" value="<?php echo e($address->latitude ?? ''); ?>">
                                        <input type="hidden" name="longitude" id="longitude" value="<?php echo e($address->longitude ?? ''); ?>">
                                        <div id="map" style="width: 100%;height: 20pc"></div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="butns mt-5 d-flex justify-content-center align-items-center">
                        <div class="col-lg-2">

                            <button type="submit" class="butn primary_butn ms-4 w-100">
                                <?php echo e(__('web.save')); ?>

                            </button>
                        </div>
                    </div>

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

    </main>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('inject_js'); ?>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>
    <script>
        let url_fetch_areas = "<?php echo e(route('web.fetch.areas')); ?>"
    </script>
    <script src="<?php echo e(url('')); ?>/assets/web/js/custom/relation.js"></script>
    <script type="text/javascript">

        var latlng = new google.maps.LatLng(<?php echo isset($address) ? $address->latitude.', '.$address->longitude : '21.4989, 39.2509'; ?>);
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this property',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(a) {
            var div = document.createElement('div');
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latitude").val(function() {
                return  a.latLng.lat().toFixed(4);
            });
            $("#longitude").val(function() {
                return  a.latLng.lng().toFixed(4);
            });
        });

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

<?php echo $__env->make('web.layouts.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Applications/MAMP/htdocs/flower/resources/views/web/pages/profile/addresses/form.blade.php ENDPATH**/ ?>