{if $proxies[0]->networkType == 'RESIDENTIAL' || $proxies[0]->networkType == 'MOBILE' && $proxies[0]->status neq 'EXPIRED' AND !empty($credentialgenerator)}
    <table class="table table-list dataTable dtr-inline">
    <tr>
        <td>Connection Type: <select id="proxy-connection" onchange="generateProxyAccessConfig()" class="form-control"><option value="http">HTTP</option>
        <option value="socks5">SOCKS5</option>
        </select></td>
        <td>Hostname Region: <select id="proxy-region" onchange="generateProxyAccessConfig()" class="form-control"><option value="us">United States</option>
        <option value="eu">Europe</option>
        </select></td>
    </tr>
    <tr>
        <td>Country:
            <select id="proxy-country" onchange="generateProxyAccessConfig('country')" class="form-control">
                <option value="Random">Random Country
                </option>
                <option value="United States">United States
                </option>
                <option value="Canada">Canada
                </option>
                <option value="Albania">Albania
                </option>
                <option value="Algeria">Algeria
                </option>
                <option value="Argentina">Argentina
                </option>
                <option value="Armenia">Armenia
                </option>
                <option value="Australia">Australia
                </option>
                <option value="Austria">Austria
                </option>
                <option value="Azerbaijan">Azerbaijan
                </option>
                <option value="Bahamas">Bahamas
                </option>
                <option value="Bahrain">Bahrain
                </option>
                <option value="Bangladesh">Bangladesh
                </option>
                <option value="Belarus">Belarus
                </option>
                <option value="Belgium">Belgium
                </option>
                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina
                </option>
                <option value="Brazil">Brazil
                </option>
                <option value="Bulgaria">Bulgaria
                </option>
                <option value="Cambodia">Cambodia
                </option>
                <option value="Canada">Canada
                </option>
                <option value="Chile">Chile
                </option>
                <option value="China">China
                </option>
                <option value="Colombia">Colombia
                </option>
                <option value="Costa Rica">Costa Rica
                </option>
                <option value="Croatia">Croatia
                </option>
                <option value="Cyprus">Cyprus
                </option>
                <option value="Czechia">Czechia
                </option>
                <option value="Denmark">Denmark
                </option>
                <option value="Dominican Republic">Dominican Republic
                </option>
                <option value="Ecuador">Ecuador
                </option>
                <option value="Egypt">Egypt
                </option>
                <option value="El Salvador">El Salvador
                </option>
                <option value="Estonia">Estonia
                </option>
                <option value="Ethiopia">Ethiopia
                </option>
                <option value="Finland">Finland
                </option>
                <option value="France">France
                </option>
                <option value="Georgia">Georgia
                </option>
                <option value="Germany">Germany
                </option>
                <option value="Ghana">Ghana
                </option>
                <option value="Greece">Greece
                </option>
                <option value="Guatemala">Guatemala
                </option>
                <option value="Guyana">Guyana
                </option>
                <option value="Hashemite Kingdom of Jordan">Hashemite Kingdom of Jordan
                </option>
                <option value="Hong Kong">Hong Kong
                </option>
                <option value="Hungary">Hungary
                </option>
                <option value="India">India
                </option>
                <option value="Indonesia">Indonesia
                </option>
                <option value="Iran">Iran
                </option>
                <option value="Iraq">Iraq
                </option>
                <option value="Ireland">Ireland
                </option>
                <option value="Israel">Israel
                </option>
                <option value="Italy">Italy
                </option>
                <option value="Jamaica">Jamaica
                </option>
                <option value="Japan">Japan
                </option>
                <option value="Kazakhstan">Kazakhstan
                </option>
                <option value="Kenya">Kenya
                </option>
                <option value="Kosovo">Kosovo
                </option>
                <option value="Kuwait">Kuwait
                </option>
                <option value="Luxembourg">Luxembourg
                </option>
                <option value="Madagascar">Madagascar
                </option>
                <option value="Malaysia">Malaysia
                </option>
                <option value="Mauritius">Mauritius
                </option>
                <option value="Mexico">Mexico
                </option>
                <option value="Montenegro">Montenegro
                </option>
                <option value="Morocco">Morocco
                </option>
                <option value="Myanmar">Myanmar
                </option>
                <option value="Nepal">Nepal
                </option>
                <option value="Netherlands">Netherlands
                </option>
                <option value="New Zealand">New Zealand
                </option>
                <option value="Nigeria">Nigeria
                </option>
                <option value="Norway">Norway
                </option>
                <option value="Oman">Oman
                </option>
                <option value="Pakistan">Pakistan
                </option>
                <option value="Panama">Panama
                </option>
                <option value="Papua New Guinea">Papua New Guinea
                </option>
                <option value="Peru">Peru
                </option>
                <option value="Philippines">Philippines
                </option>
                <option value="Poland">Poland
                </option>
                <option value="Portugal">Portugal
                </option>
                <option value="Puerto Rico">Puerto Rico
                </option>
                <option value="Qatar">Qatar
                </option>
                <option value="Romania">Romania
                </option>
                <option value="Saudi Arabia">Saudi Arabia
                </option>
                <option value="Senegal">Senegal
                </option>
                <option value="Serbia">Serbia
                </option>
                <option value="Singapore">Singapore
                </option>
                <option value="Slovakia">Slovakia
                </option>
                <option value="Slovenia">Slovenia
                </option>
                <option value="Somalia">Somalia
                </option>
                <option value="South Africa">South Africa
                </option>
                <option value="South Korea">South Korea
                </option>
                <option value="Spain">Spain
                </option>
                <option value="Sri Lanka">Sri Lanka
                </option>
                <option value="Sweden">Sweden
                </option>
                <option value="Switzerland">Switzerland
                </option>
                <option value="Taiwan">Taiwan
                </option>
                <option value="Thailand">Thailand
                </option>
                <option value="Trinidad and Tobago">Trinidad and Tobago
                </option>
                <option value="Tunisia">Tunisia
                </option>
                <option value="Turkey">Turkey
                </option>
                <option value="Uganda">Uganda
                </option>
                <option value="Ukraine">Ukraine
                </option>
                <option value="United Arab Emirates">United Arab Emirates
                </option>
                <option value="United Kingdom">United Kingdom
                </option>
                <option value="United States">United States
                </option>
                <option value="Uzbekistan">Uzbekistan
                </option>
                <option value="Venezuela">Venezuela
                </option>
                <option value="Vietnam">Vietnam
                </option>
                <option value="Zambia">Zambia
                </option>
            </select>
        </td>
        <td>Proxy Port: <input name="username" class="form-control" id="proxy-port" class="proxy-input " value="5959"
                readonly></td>
    </tr>
    
<tr {if $proxies[0]->networkType != 'RESIDENTIAL'}style="display:none"{/if}>
        <td>State: <select id="proxy-state" onchange="generateProxyAccessConfig('state')" class="form-control">
                <option value="Random">Random</option>
            </select>
            
        </td>
        <td>City: <select id="proxy-city" onchange="generateProxyAccessConfig('city')" class="form-control">
                <option value="Random">Random</option>
            </select>
        </td>
    </tr>

    <tr>
        <td>Session type: <select id="proxy-session" onchange="randomizesession();generateProxyAccessConfig('session')"
                class="form-control">
                <option value="random">Random IP</option>
                <option value="sticky">Session ID</option>
                {if $proxies[0]->networkType == 'RESIDENTIAL'}<option value="long">Long Session ID</option>{/if}

            </select>

        </td>
        <td>Proxy Username: <input name="username" id="proxy-username" class="proxy-input form-control"
                value="{$proxies[0]->authentication->username}" readonly></td>
    </tr>
    <tr>
        <td>Hostname type: <select id="proxy-hostname" onchange="generateProxyAccessConfig('hostname')" class="form-control">
                <option value="dns">DNS Hostname</option>
                <option value="ip">IP Hostname</option>

            </select></td>
        <td>Proxy Password: <input name="username" id="proxy-pass" class="proxy-input form-control"
                value="{$proxies[0]->authentication->password}" readonly=""></td>
    </tr>
     <tr {if $proxies[0]->networkType != 'RESIDENTIAL'}style="display:none"{/if}>
        <td>ASN: <input oninput="generateProxyAccessConfig()" name="asn" id="proxy-asn" placeholder="ASN (Optional)" class="proxy-input form-control"
                ></td>
    </tr>
</table>
<div class="terminal" id="curl-example"></div>

<table class="table table-list dataTable dtr-inline">
    <tr>
        <td>Credential count: </td>
        <td><input name="username" id="proxy-count" class="proxy-input form-control" value="50" type="number" min="1">
        </td>
    </tr>
    <tr>
        <td colspan="2"><button type="button" class="btn btn-primary" onclick="generateCredentials()">Generate Credentials</button></td>
    </tr>
</table>

<div class="terminal" id="credential-list"></div>

<hr>
{/if}
<table class="table table-list dataTable dtr-inline">
<tr>
    <th>ID</th>
    <th>Status</th>
    <th>Bandwidth</th>
    <th>Type</th>
    <th>Actions</th>
</tr>
{foreach from=$proxies item=proxy}
    <tr>
        <td>
            {$proxy->id}
        </td>
        <td>
            {$proxy->status}
        </td>
        <td>
            {if $proxy->bandwidth->total != null}
                {if $proxy->bandwidth->used} GB{$proxy->bandwidth->used}{else}0{/if} / {$proxy->bandwidth->total} GB
            {else} Unlimited
            {/if}
        </td>
        <td>
            {$proxy->networkType}
        </td>
        <td>
            {if $proxy->authentication->username != ''}
            {else}<button type="button"
                    onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=whitelist';">Edit
                IP Whitelist</button>{/if}
            {if $proxy->networkType == 'RESIDENTIAL'} <button type="button" class="btn btn-default"
                    onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=buybw';">Buy
                    Bandwidth</button>
            {/if}

            {if !empty($oneproxyinfo) AND in_array('EXTEND_PERIOD', $oneproxyinfo.actions)} <button type="button" class="btn btn-default"
                    onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=extend';">Extend
                Period</button>{/if}
        </td>
    </tr>
    <tr>
        <td colspan="5" style="text-align:left">
            <table class="proxy-details">
                {if $proxy->connection->connectIp}<tr>
                        <td>
                            Connect IP:
                        </td>
                        <td>
                            <strong>{$proxy->connection->connectIp}{if $proxy->connection->httpPort}:{$proxy->connection->httpPort}{elseif $proxy->connection->socks5Port}:{$proxy->connection->socks5Port}{elseif $proxy->connection->httpsPort }:{$proxy->connection->httpsPort }{/if}</strong>
                        </td>
                </tr>{/if}{if $proxy->connection->publicIp}<tr>
                    <td>
                        Public IP:
                    </td>
                    <td>
                        <strong>{$proxy->connection->publicIp}{if $proxy->connection->httpPort}:{$proxy->connection->httpPort}{elseif $proxy->connection->socks5Port}:{$proxy->connection->socks5Port}{elseif $proxy->connection->httpsPort }:{$proxy->connection->httpsPort }{/if}</strong>
                         {if in_array('ROTATE_IP', $oneproxyinfo.actions)} 
                            <button type="button" class="btn btn-xs btn-default"
                                onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=rotate_ip';">Rotate IP</button>
                        {/if}
                    </td>
        </tr>
    {/if}
    <tr>
        <td>Connection Type:</td>
        <td>{$proxy->proxyType} {if $protocols and count($protocols['availableTypes'])>1}
        {foreach from=$protocols['availableTypes'] item=protocolType}
            {if $protocolType neq $proxy->proxyType} 
                <button type="button" class="btn btn-xs btn-default"
                    onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=switchprotocol&p={$protocolType}';">Switch to {$protocolType}</button>
            {/if}
        {/foreach}
    {/if}
</td>
    </tr>
    <tr>
        <td>IP Version:</td>
        <td>{$proxy->connection->ipVersion}</td>
    </tr>
   {if $proxies[0]->networkType != 'MOBILE'} <tr >
        <td>Authentication: 
            <button type="button" class="btn btn-xs btn-default" onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=changeauth'"
                   >Change</button></td>
        <td>
            {if $proxy->authentication->username && $currentAuthType eq 'USERNAME_PASSWORD'}

            Username:
                <strong>{$proxy->authentication->username}</strong><br />Password:
                <strong>{$proxy->authentication->password}</strong> {if in_array('REGENERATE_CREDENTIALS', $oneproxyinfo.actions)}<button type="button" class="btn btn-xs btn-default" onclick="window.location.href='clientarea.php?action=productdetails&id={$id}&proxy_id={$proxy->id}&a=regeneratecredentials'"
                   ><i class="fas fa-cubes fa-sync"></i> Regenerate</button>{/if}

            {else}IP Whitelist:
                {foreach from=$proxy->authentication->whitelistedIps item=whitelistip}{$whitelistip}
                {/foreach}
            {/if}
        </td>
    </tr>{/if}
    {if !empty($oneproxyinfo) && $oneproxyinfo.networkType eq "MOBILE"}
    <tr><td>Username:</td><td>{$oneproxyinfo.authentication->username}</td></tr>
    <tr><td>Password:</td><td>{$oneproxyinfo.authentication->password}</td></tr>
    {/if}
    {if $proxy->metadata->ispName} <tr>
            <td>ISP:</td>
            <td>{$proxy->metadata->ispName}</td>
    </tr>{/if}
    <tr>
        <td>Created:</td>
        <td>{fromMySQLDate($proxy->createdAt,1)}</td>
    <tr>
    <tr>
        <td>Expire:</td>
        <td>{if fromMySQLDate($proxy->expiresAt,1) eq '00/00/0000'}Never{else}{fromMySQLDate($proxy->expiresAt,1)}{/if}
        </td>
    <tr>
    
</table>

{if isset($oneproxyinfo['connection']->hostnames) && count($oneproxyinfo['connection']->hostnames) > 0}
 <table class="table table-list dataTable dtr-inline">
    <tr><th colspan="2">Hostnames</th></tr>
    <tr><th>Hostname Connection</th><th>Exit Hostname</th></tr>
    {foreach from=$oneproxyinfo['connection']->hostnames key=hostname_ip item=hostname}
    <tr><td>{$hostname_ip}</td><td>{$hostname}</td></tr>
    {/foreach}
</table>
{/if}
{if $oneproxyinfo AND $oneproxyinfo.status neq 'EXPIRED' AND in_array('CURL_EXAMPLE', $oneproxyinfo.actions)}
        CLI Command:
        <div class="terminal">
            $ curl -v -x http://{$oneproxyinfo['authentication']->username}:{$oneproxyinfo['authentication']->password}@{$oneproxyinfo['connection']->publicIp}:{$oneproxyinfo['connection']->httpPort} https://ipv4.icanhazip.com
        </div>
        <span class="curl_desc">To test your proxy copy and paste the code to your computer’s terminal and press ENTER.</span>
{/if}

</tr></tr></table>
{/foreach}
{literal}
<link href="https://fonts.cdnfonts.com/css/ibm-plex-sans" rel="stylesheet">
<style>
    .curl_desc
    {
        font-family: Inter;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.04em;
    }
    .proxy-details {
        width: 100%;
        font-size: 15px;
    }

    .proxy-details tr td:first-child {
        width: 40%;
    }

    .proxy-input {
        width: 100%;
    }

    .terminal {
       font-family: Courier;
        font-weight: 400;
        font-size: 12px;
        line-height: 2;
        letter-spacing: 0.04px;
        text-align: left;
        background-color: rgb(0, 0, 0);
        width: 100%;
        color: rgb(74, 255, 173);
        padding: 11px;
        border-radius: 6px;
    }
</style>
<script>
const proxytype = "{/literal}{$proxies[0]->networkType}{literal}" === 'MOBILE' ? 'mob' : 'res';
        let countriesList = [];
        let countriesCitiesList = [];

let countriesByName = [];
   fetch('./modules/servers/proxycheap/list.json') // Podaj tutaj ścieżkę do pliku
.then(response => {
if (!response.ok) {
  throw new Error('Błąd sieci!'); // Obsługa błędów
}
return response.json(); // Parsowanie odpowiedzi jako JSON
})
.then(data => {


const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' });

for(item of data.data)
{
    if(!countriesList[item.region])
        {
            countriesList[item.region] = {country: item.region, states: [], cities: [], countryName: regionNamesInEnglish.of(item.region)}
            countriesByName[regionNamesInEnglish.of(item.region)] = item.region
        }

    if(!countriesList[item.region].states.includes(item.state))
    {
        countriesList[item.region].states.push(item.state)
    }
    if(!countriesList[item.region].cities.includes(item.city))
    {
        countriesList[item.region].cities.push(item.city)
    }
    if (!countriesCitiesList[item.region]) {
        countriesCitiesList[item.region] = {};
    }

    if (!countriesCitiesList[item.region][item.state]) {
        countriesCitiesList[item.region][item.state] = [];
    }

    countriesCitiesList[item.region][item.state].push(item.city);
};

})
.catch(error => {
console.error('Wystąpił problem:', error); // Obsługa błędów
});
    const randomSession = () => {
        const length = 8;
        const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let result = '';
        for (let i = length; i > 0; i -= 1) result += chars[Math.floor(Math.random() * chars.length)];
        return result;
    }

const port = document.getElementById('proxy-connection').value === 'http' ? 5959 : 9595;
    document.getElementById('proxy-port').value = port


    var country = document.getElementById('proxy-country').value == 'Random' ? '-any' : (countriesByName[document.getElementById('proxy-country').value.replace(/ /g, '')]).toLowerCase();
    var sessionkey = randomSession()
    var session = document.getElementById('proxy-session').value == 'sticky' ? '_session-' + sessionkey : ''

    let username = '{/literal}{$proxies[0]->authentication->username}{literal}-'+proxytype+'-'+country;
    var password = '{/literal}{$proxies[0]->authentication->password}{literal}'
    const customhostname = '{/literal}{$customhostname}{literal}';

    function randomizesession() {
    let sessiontype = document.getElementById('proxy-session').value;
        sessionkey = randomSession()
        session = document.getElementById('proxy-session').value == 'sticky' ? '-sid-' + sessionkey : (sessiontype == 'long' ? '-nnid-0' : '')
        return session
    }

    function generateProxyAccessConfig(field = null) {
         const port = document.getElementById('proxy-connection').value === 'http' ? 5959 : 9595;
    let sessiontype = document.getElementById('proxy-session').value;

        document.getElementById('proxy-port').value = port
        protocol = document.getElementById('proxy-connection').value
        session = document.getElementById('proxy-session').value != 'random' ? randomizesession() : ''
        country = document.getElementById('proxy-country').value == 'Random' ? 'any' : countriesByName[document.getElementById('proxy-country').value.trim()];
        state = document.getElementById('proxy-state').value == 'Random' ? '' : '_'+document.getElementById('proxy-state').value.toLowerCase();
        city = document.getElementById('proxy-city').value == 'Random' ? '' : '_'+document.getElementById('proxy-city').value.toLowerCase();
        
        asn = document.getElementById('proxy-asn').value.length > 0 ? '-asn_'+document.getElementById('proxy-asn').value : '';
        stateasnconditioned = state != '' || asn.length > 0 ? '_sc-' : '-';

        const resfixcountry = sessiontype == 'long' ? 'fix-'+country : '';
        username = '{/literal}{$proxies[0]->authentication->username}{literal}-'+proxytype+resfixcountry+(asn.length == 0 && sessiontype != 'long' ? stateasnconditioned+country.toLowerCase()+state+city : '')+(sessiontype != 'long' ? asn : '');

        state = document.getElementById('proxy-state').value
        const hostnameipregions = {/literal}{if $credentialgenerator}{json_encode($credentialgenerator)}{else}{/if}{literal};

        const hostnameipregionget = region => hostnameipregions[region].hostnameIp;
        const chosenRegion = document.getElementById('proxy-region').value;

        hostname = document.getElementById('proxy-hostname').value == 'dns' ? 'proxy-'+chosenRegion + '.' +'{/literal}{$customhostname}{literal}' : hostnameipregionget(chosenRegion);

        if(country != 'any' && field == 'country')
        {
            let selectTag = document.getElementById('proxy-state');
            selectTag.options.length = 0;
            ['Random', ...countriesList[country].states].map((i) => 
            {
                let opt = document.createElement('option');
                opt.value = i;
                opt.innerHTML = i;
                selectTag.append(opt);
            })
            resetField('city');
        }
        if(country == 'any' && field == 'country')
        {
            resetField('city');
            resetField('state');
        }

        if(country != '-any' && field == 'state' && state != '')
        {
            let citiesTag = document.getElementById('proxy-city');
            citiesTag.options.length = 0;
            ['Random', ...countriesCitiesList[country][state]].map((i) => 
            {
                let opt = document.createElement('option');
                opt.value = i;
                opt.innerHTML = i;
                citiesTag.append(opt);
            })
        }

        document.getElementById('proxy-username').value = username.toLowerCase() + session;
        password = '{/literal}{$proxies[0]->authentication->password}{literal}'
        document.getElementById('proxy-pass').value = password
         session = document.getElementById('proxy-session').value != 'random' ? randomizesession() : '';

        let curlExample = `$ curl -v -x ${protocol}://${username.toLowerCase()}${session}:${password}@${hostname}:${port} https://ipv4.icanhazip.com`
        document.getElementById('curl-example').innerHTML = curlExample
    }

    function resetField(field)
    {
        let select = document.getElementById('proxy-'+field);
        select.options.length = 0
        let option = document.createElement('option');
        option.text = 'Random'
        select.add(option)
    }
    function generateCredentials() {
        // const format = document.getElementById('proxy-format').value
        // if (format === 'domain:port:username:password') {
        //     let credentials = ''

        //     const count = document.getElementById('proxy-count').value

        //     for (let i = 0; i < count; i++) {
        //         credentials += `${domain}:${port}:${username}:${password}${randomizesession()}<br />`
        //     }
        //     document.getElementById('credential-list').innerHTML = credentials
        // } else {
            let credentials = ''
            let session = '';
            const count = document.getElementById('proxy-count').value

            for (let i = 0; i < count; i++) {
             session =  document.getElementById('proxy-session').value != 'random' ? randomizesession() : ''

                credentials += `${username}${session}:${password}@${hostname}:${ document.getElementById('proxy-connection').value === 'http' ? 5959 : 9595}<br />`
            }
            document.getElementById('credential-list').innerHTML = credentials
        }
  //  }

    document.addEventListener('DOMContentLoaded', function() {
        generateProxyAccessConfig()
    })
</script>{/literal}