{include file="sections/header.tpl"}
            <div class="container-fluid">
                <form class="form-horizontal" method="post" role="form" action="{$_url}customers/edit-post">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card card-primary card-hovered card-stacked mb30">
                                <div class="card-header" style="display: grid; align-content: center; justify-content: center;">
                                    <h5 class="card-title">{Lang::T('Edit Contact')}</h5>
                                </div>
                                <div class="card-body">
                                    <input type="hidden" name="id" value="{$d['id']}">
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Full Name')}</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" id="fullname" name="fullname"
                                                value="{$d['fullname']}">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Username')}</label>
                                        <div class="col-md-9">
                                            <div class="input-group mb-3">
                                                <span class="input-group-text" id="basic-addon1"><i
                                                        class="fa fa-user"></i></span>
                                                <input type="text" class="form-control" name="username" value="{$d['username']}"
                                                    required placeholder="Y123456789">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Email')}</label>
                                        <div class="col-md-9">
                                            <input type="email" class="form-control" id="email" name="email" value="{$d['email']}">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Phone Number')}</label>
                                        <div class="col-md-9">
                                            <div class="input-group">
                                                {if $_c['country_code_phone']!= ''}
                                                    <span class="input-group-text" id="basic-addon1">+</span>
                                                {else}
                                                    <span class="input-group-text" id="basic-addon1"><i
                                                            class="fa fa-phone-alt"></i></span>
                                                {/if}
                                                <input type="text" class="form-control" name="phonenumber" value="{$d['phonenumber']}"
                                                    placeholder="{if $_c['country_code_phone']!= ''}{$_c['country_code_phone']}{/if} {Lang::T('Phone Number')}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Password')}</label>
                                        <div class="col-md-9">
                                            <input type="password" autocomplete="off" class="form-control" id="password" name="password"
                                                onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'"
                                                value="{$d['password']}">
                                            <span class="help-block">{Lang::T('Keep Blank to do not change Password')}</span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('PPPOE Password')}</label>
                                        <div class="col-md-9">
                                            <input type="password" autocomplete="off" class="form-control" id="pppoe_password"
                                                name="pppoe_password" value="{$d['pppoe_password']}"
                                                onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'">
                                            <span class="help-block">
                                                {Lang::T('User Cannot change this, only admin. if it Empty it will use user password')}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Area')}</label>
                                        <div class="col-md-9">
                                            <textarea name="address" id="address" class="form-control">{$d['address']}</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Service Type')}</label>
                                        <div class="col-md-9">
                                            <select class="form-select" style="height: 52px; background-color: white;" id="service_type" name="service_type">
                                                <option value="Hotspot" {if $d['service_type'] eq 'Hotspot' }selected{/if}>Hotspot
                                                </option>
                                                <option value="PPPoE" {if $d['service_type'] eq 'PPPoE' }selected{/if}>PPPoE</option>
                                                <option value="Static" {if $d['service_type'] eq 'Static' }selected{/if}>Static</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Account Type')}</label>
                                        <div class="col-md-9">
                                            <select class="form-select" style="height: 52px; background-color: white;" id="account_type" name="account_type">
                                                <option value="Personal" {if $d['account_type'] eq 'Personal' }selected{/if}>Personal
                                                </option>
                                                <option value="Business" {if $d['account_type'] eq 'Business' }selected{/if}>Business
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Status')}</label>
                                        <div class="col-md-9">
                                            <select class="form-select" style="height: 52px; background-color: white;" id="status" name="status">
                                                <option value="Active" {if $d['status'] eq 'Active' }selected{/if}>Active</option>
                                                <option value="Banned" {if $d['status'] eq 'Banned' }selected{/if}>Banned</option>
                                                <option value="Disabled" {if $d['status'] eq 'Disabled' }selected{/if}>Disabled</option>
                                                <option value="Inactive" {if $d['status'] eq 'Inactive' }selected{/if}>Inactive</option>
                                                <option value="Limited" {if $d['status'] eq 'Limited' }selected{/if}>Limited</option>
                                                <option value="Suspended" {if $d['status'] eq 'Suspended' }selected{/if}>Suspended</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-md-3 control-label">{Lang::T('Coordinates')}</label>
                                        <div class="col-md-9">
                                            <input name="coordinates" id="coordinates" class="form-control" value="{$d['coordinates']}"
                                                placeholder="6.465422, 3.406448">
                                            <div id="map" style="width: '100%'; height: 200px; min-height: 150px;"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="card kanbanPreview-bx">
                                            <div class="card-body">
                                                <div class="sub-card">
                                                    <div class="card-header">
                                                    <h5>{Lang::T('Attributes')}</h5></div>
                                                    <div class="card-body">
                                                        <!--Customers Attributes edit start -->
                                                        {if $customFields}
                                                            {foreach $customFields as $customField}
                                                                <div class="form-group row">
                                                                    <label class="col-md-4 control-label"
                                                                        for="{$customField.field_name}">{$customField.field_name}</label>
                                                                    <div class="col-md-6">
                                                                        <input class="form-control" type="text" name="custom_fields[{$customField.field_name}]"
                                                                            id="{$customField.field_name}" value="{$customField.field_value}">
                                                                    </div>
                                                                    <label class="col-md-2">
                                                                        <input type="checkbox" name="delete_custom_fields[]" value="{$customField.field_name}">
                                                                        Delete
                                                                    </label>
                                                                </div>
                                                            {/foreach}
                                                        {/if}
                                                        <!--Customers Attributes edit end -->
                                                        <!-- Customers Attributes add start -->
                                                        <div id="custom-fields-container">
                                                        </div>
                                                        <!-- Customers Attributes add end -->
                                                    </div>
                                                    <div class="card-footer">
                                                        <button class="btn btn-success btn-block" type="button"
                                                            id="add-custom-field">{Lang::T('Add')}</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <center>
                        <button class="btn btn-primary" type="submit">
                            {Lang::T('Save Changes')}
                        </button>
                        <br><a href="{$_url}customers/list" class="btn btn-link">{Lang::T('Cancel')}</a>
                    </center>
                </form>
                
                {literal}
                    <script type="text/javascript">
                        document.addEventListener("DOMContentLoaded", function() {
                            var customFieldsContainer = document.getElementById('custom-fields-container');
                            var addCustomFieldButton = document.getElementById('add-custom-field');
                
                            addCustomFieldButton.addEventListener('click', function() {
                                var fieldIndex = customFieldsContainer.children.length;
                                var newField = document.createElement('div');
                                newField.className = 'form-group row';
                                newField.innerHTML = `
                                <div class="col-md-4">
                                    <input type="text" class="form-control" name="custom_field_name[]" placeholder="Name">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="custom_field_value[]" placeholder="Value">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="remove-custom-field btn btn-danger btn-sm">-</button>
                                </div>
                            `;
                                customFieldsContainer.appendChild(newField);
                            });
                
                            customFieldsContainer.addEventListener('click', function(event) {
                                if (event.target.classList.contains('remove-custom-field')) {
                                    var fieldContainer = event.target.parentNode.parentNode;
                                    fieldContainer.parentNode.removeChild(fieldContainer);
                                }
                            });
                        });
                    </script>
                
                    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
                    <script>
                        function getLocation() {
                            if (window.location.protocol == "https:" && navigator.geolocation) {
                                navigator.geolocation.getCurrentPosition(showPosition);
                            } else {
                                setupMap(51.505, -0.09);
                            }
                        }
                
                        function showPosition(position) {
                            setupMap(position.coords.latitude, position.coords.longitude);
                        }
                
                        function setupMap(lat, lon) {
                            var map = L.map('map').setView([lat, lon], 13);
                            L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png', {
                            attribution:
                                '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
                                subdomains: 'abcd',
                                maxZoom: 20
                        }).addTo(map);
                        var marker = L.marker([lat, lon]).addTo(map);
                        map.on('click', function(e) {
                            var coord = e.latlng;
                            var lat = coord.lat;
                            var lng = coord.lng;
                            var newLatLng = new L.LatLng(lat, lng);
                            marker.setLatLng(newLatLng);
                            $('#coordinates').val(lat + ',' + lng);
                        });
                        }
                        window.onload = function() {
                            {/literal}{if $d['coordinates']}
                                setupMap({$d['coordinates']});
                            {else}
                                getLocation();
                            {/if}{literal}
                        }
                    </script>
                {/literal}
                
            </div>
{include file="sections/footer.tpl"}