{include file="sections/header.tpl"}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />

<div class="bg-light text-dark rounded-3 shadow-sm p-4 mb-4">
    <h3 class="mb-0 fw-bold"><i class="ti ti-router me-2"></i>{Lang::T('Edit Router')}</h3>
    <p class="mb-0 opacity-75">Update router or access point configuration</p>
</div>

<div class="row">
    <div class="col-sm-12 col-lg-8 mx-auto">
        <div class="card border-0 shadow-sm rounded-3 mb-4">
            <div class="card-header bg-light text-dark fw-bold">
                <i class="ti ti-settings me-2"></i>{Lang::T('Router Configuration')}
            </div>
            <div class="card-body p-4">
                <form method="post" role="form" action="{Text::url('')}routers/edit-post">
                    <input type="hidden" name="id" value="{$d['id']}">
                    
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-toggle-right me-1"></i>{Lang::T('Status')}
                        </label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" {if $d['enabled'] eq '1'}checked{/if} 
                                    name="enabled" value="1" id="enable">
                                <label class="form-check-label" for="enable">
                                    <i class="ti ti-check me-1 text-success"></i>{Lang::T('Enable')}
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" {if $d['enabled'] eq '0'}checked{/if} 
                                    name="enabled" value="0" id="disable">
                                <label class="form-check-label" for="disable">
                                    <i class="ti ti-x me-1 text-danger"></i>{Lang::T('Disable')}
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-device-desktop me-1"></i>{Lang::T('Router Name / Location')}
                        </label>
                        <input type="text" class="form-control" id="name" name="name" 
                            maxlength="32" value="{$d['name']}" required>
                        <small class="text-muted">{Lang::T('Name of Area that router operated')}</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-world me-1"></i>{Lang::T('IP Address')}
                        </label>
                        <input type="text" placeholder="192.168.88.1:8728" class="form-control" 
                            id="ip_address" name="ip_address" value="{$d['ip_address']}" required>
                        <small class="text-muted">Include port if necessary (default: 8728)</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-user me-1"></i>{Lang::T('Username')}
                        </label>
                        <input type="text" class="form-control" id="username" name="username" 
                            value="{$d['username']}" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-lock me-1"></i>{Lang::T('Router Secret')}
                        </label>
                        <input type="password" class="form-control" id="password" name="password"
                            onmouseleave="this.type = 'password'" onmouseenter="this.type = 'text'" 
                            value="{$d['password']}" required>
                        <small class="text-muted">Hover to view password</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-file-text me-1"></i>{Lang::T('Description')}
                        </label>
                        <textarea class="form-control" id="description" name="description" 
                            rows="3">{$d['description']}</textarea>
                        <small class="text-muted">{Lang::T('Explain Coverage of router')}</small>
                    </div>

                    <div class="bg-light rounded-3 p-4 mt-4">
                        <label class="form-label fw-semibold">
                            <i class="ti ti-map-pin me-1"></i>{Lang::T('Coverage Map')}
                        </label>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{Lang::T('Coordinates')}</label>
                                <input type="text" class="form-control" id="coordinates" 
                                    name="coordinates" placeholder="latitude,longitude" value="{$d['coordinates']}">
                                <small class="text-muted">Click on map to set coordinates</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{Lang::T('Coverage Radius')} (meters)</label>
                                <input type="number" class="form-control" id="coverage" 
                                    name="coverage" onchange="updateCoverage()" value="{$d['coverage']}" min="1">
                                <small class="text-muted">Coverage area in meters</small>
                            </div>
                        </div>
                        <div id="map" class="rounded-3 border border-2 mt-2" style="height: 400px; width: 100%;"></div>
                    </div>

                    <div class="mb-4 mt-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" checked name="testIt" value="yes" id="testConnection">
                            <label class="form-check-label" for="testConnection">
                                <i class="ti ti-plug-connected me-1"></i>{Lang::T('Test Connection')}
                            </label>
                        </div>
                    </div>

                    <div class="text-center mt-4">
                        <button class="btn btn-success btn-lg shadow-sm" 
                            onclick="return ask(this, '{Lang::T("Continue the process of changing Routers?")}')"
                            type="submit">
                            <i class="ti ti-device-floppy me-2"></i>{Lang::T('Save Changes')}
                        </button>
                        <br><br>
                        <a href="{Text::url('')}routers/list" class="btn btn-link text-primary fw-semibold">
                            <i class="ti ti-arrow-left me-1"></i>{Lang::T('Cancel')}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{literal}
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <script>
        var circle;
        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 updateCoverage() {
            if(circle != undefined){
                circle.setRadius($("#coverage").val());
            }
        }

        function setupMap(lat, lon) {
            var map = L.map('map').setView([lat, lon], 13);
            L.tileLayer('https://{s}.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga', {
                subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
                maxZoom: 20
            }).addTo(map);
            circle = L.circle([lat, lon], 5, {
                color: 'blue',
                fillOpacity: 0.1
            }).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;
                newLatLng = new L.LatLng(lat, lng);
                marker.setLatLng(newLatLng);
                circle.setLatLng(newLatLng);
                $('#coordinates').val(lat + ',' + lng);
                updateCoverage();
            });
            updateCoverage();
        }
        window.onload = function() {
        {/literal}
        {if $d['coordinates']}
            setupMap({$d['coordinates']});
        {else}
            getLocation();
        {/if}
        {literal}
        }
    </script>
{/literal}

{include file="sections/footer.tpl"}
