$host = 'localhost';
$username = 'admin';
$password = 'hfKJbTkMW9UWJjTCb7Xr';
$dbname = 'sms';
$charset = 'utf8';

/*
if (isset($_COOKIE['_gcl_au'])) {
}else{
   header("Location:http://78.47.124.109/");
   exit();
}*/
$dsn = "mysql:host=$host;dbname=$dbname;charset=$charset";
$xpdo = new xPDO($dsn, $username, $password);

$list = $xpdo->query("SELECT list FROM phone WHERE user = '$user' GROUP BY list");
$list = $list->fetchAll();

$query = "SELECT * FROM phone WHERE user='$user'" . (isset($_GET['list']) ? ' AND list = \'' . $modx->stripTags($_GET['list']) . '\'' : '');
$data = $xpdo->query($query);
$i=1;
?>


	<style>
@import url('https://rsms.me/inter/inter.css');

h1, h2, h3 {
  font-weight: 900;
}

mark {
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: bold;
  padding: 0 0.2em;
}

.card {
  background: var(--color-background);
  padding: calc(4 * var(--size-bezel));
  margin-top: calc(4 * var(--size-bezel));
  border-radius: var(--size-radius);
  border: 3px solid var(--color-shadow, currentColor);
  box-shadow: .5rem .5rem 0 var(--color-shadow, currentColor);
  
  &--inverted {
    --color-background: var(--color-dark);
    color: var(--color-light);
    --color-shadow: var(--color-accent);
  }
  
  &--accent {
    --color-background: var(--color-signal);
    --color-accent: var(--color-light);
    color: var(--color-dark);
  }
  
  *:first-child {
    margin-top: 0;
  }
}


.l-design-widht {
  max-width: 40rem;
  padding: 1rem;
}

.input {
  position: relative;
  
  &__label {
    position: absolute;
    left: 0;
    top: 0;
    padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * .5);
    margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * .5);
    background: pink;
    white-space: nowrap;
    transform: translate(0, 0);
    transform-origin: 0 0;
    background: var(--color-background);
    transition: transform 120ms ease-in;
    font-weight: bold;
    line-height: 1.2;
  }
  &__field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 3px solid currentColor;
    padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
    color: currentColor;
    background: transparent;
    border-radius: var(--size-radius);
    
    &:focus,
    &:not(:placeholder-shown) {
      & + .input__label {
        transform: translate(.25rem, -65%) scale(.8);
        color: var(--color-accent);
      }
    }
  }
}


.button-group {
  margin-top: calc(var(--size-bezel) * 2.5);
}

button {
    color: #ffffff;
    background-color: #008337;
    border: black;
    border-radius: 4px;
    font-weight: 600;
  &[type=reset]{
    background: var(--color-background);
    font-weight: 200;
  } 
}

button + button {
  margin-left: calc(var(--size-bezel) * 2);
}

.icon {
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .5em;
}

.hidden {
  display: none;
}


		*{
			box-sizing: border-box;
		}
		.datas{
			display: flex;
			flex-direction: column;
		}
		/*.add{
			width: 550px;

		}*/
		.add>span{
			padding:10px;
		}
		.add>span:hover{
			cursor: pointer;
		}
		.decor {
		   position: relative;
		   max-width: 400px;
		   margin: 50px auto 0;
		   background: white;
		   border-radius: 30px;
		}
		table {
		  font-family: arial, sans-serif;
		  border-collapse: collapse;
		  width: 100%;
		}
		td, th {
		  border: 1px solid #dddddd;
		  text-align: left;
		  padding: 8px;
		}
input {
    margin-right: 15px;
    background-color: #ffffff;
    padding: 6px 8px;
    border-radius: 5px;
}
select {
    padding: 8px 12px;
margin-right: 12px;
}
#list_contacts {
    display: flex;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    padding: 2px 20px;
    background: #00833721;
}
#list_contacts a {
    margin: 0 5px;
    padding: 3px;
}
#list_contacts a.active {
    color: #008337 !important;
}
form#fileLoad {
    display: flex;
}
#add_contacts {
}
.h2, h2 {
    font-size: 24px;
}

form {
    background: #deefe58f;
    padding: 25px;
    border: 1px solid #ddd;
    margin: 0 0 10px;
}
form.form select[name="list"] {
    margin: 0 15px 12px 0;
    min-height: 43px;
}
	</style>
	<h2 style="margin-top: 0px;">Списки контактов</h2>
<div id="list_contacts">
<a href="nomernyie-pulyi" class="<?=!isset($_GET['list']) ? 'active' : ''?>">Общий</a>
<?foreach($list as $val):?>
<a href="nomernyie-pulyi?list=<?=$val['list']?>" class="<?=$_GET['list'] == $val['list'] ? 'active' : ''?>"><?=$val['list']?></a>
<?endforeach?>
</div>
<div id="add_contacts">
<h2>Добавить контакт</h2>
	<form action="http://78.47.124.109/assets/test/add.php" method="post" class="form">
<select name="list" required>
        <option value="">Выберите список</option>
        <?foreach($list as $val):?>
            <option value="<?=$val['list']?>" <?=isset($_GET['list']) && $_GET['list'] == $val['list'] ? 'selected' : ''?>><?=$val['list']?></option>
        <?endforeach?>
        <option value="__new__">Новый</option>
</select>
		<div class="datas">
<label for="e1" class="add">
<input type="text" style="margin-bottom: 8px;margin-right: 15px;padding: 6px 8px;" placeholder="Имя" id="e1" name="contact[]" required>
<input type="text" style="margin-bottom: 8px;margin-right: 15px;padding: 6px 8px;" placeholder="Телефон" id="e1" name="phone[]" required>
<span data-code="1" onclick="Add(this)"><b style="font-size: 15px;">+</b></span>
</label>
 </div>
                <input type="text" hidden name="user" value="<?php echo $user?>">
    		<input type="submit" style="color: #ffffff;background-color: #008337;border: black;border-radius: 4px;font-weight: 600;"  value="Добавить контакт" name="sbt">
	</form>
	<h2>Загрузить контакты (.csv или .xlsx)</h2>
<form action="http://78.47.124.109/assets/test/add.php" enctype="multipart/form-data" method="POST" id="fileLoad">
    <input type="hidden" name="user" value="<?=$user?>">
    <select name="list" required>
        <option value="">Выберите список</option>
        <?foreach($list as $val):?>
            <option value="<?=$val['list']?>" <?=isset($_GET['list']) && $_GET['list'] == $val['list'] ? 'selected' : ''?>><?=$val['list']?></option>
        <?endforeach?>
        <option value="__new__">Новый</option>
    </select>
    <input type="file" name="upload_file" onchange="loadFileContacts()" disabled>
</form>
</div>

	<?php if (isset($_GET['edit'])):
		$phone = $_GET['edit'];
		$query = "SELECT * FROM `phone` WHERE id = '$phone'";
		$ph_data = $xpdo->query($query);
		$row = $ph_data->fetch();

	 ?>	
	 	<h1>EDIT CONTACT <?=$row['contact']?></h1>
		<form action="http://78.47.124.109/assets/test/add.php" method="post" class="form">
			<div class="datas col-md-6 col-lg-6">
				<label for="e1" class="add"><input type="text" placeholder="edd_contact" id="e1" name="edd_contact" required value="<?=$row['contact']?>"><input type="text" placeholder="number" id="e1" name="edd_phone" required value="<?=$row['phone']?>"></label>
				<input type="text" hidden name="id" value="<?=$row['id']?>">
                                <input type="text" hidden name="user" value="<?php echo $user?>">
			</div>
<div class="col-md-6 col-lg-6">
			<input type="submit" style="background-color: #008337;color: #ffffff;" value="EDIT" name="sbit">
</div>
		</form>
	<?php endif ?>

		<h2>Контакты</h2>
<div class="table-responsive">
	<table>

		<tr style="background-color: #f0f0f0;">
			<th class="thead-default">№</th>
			<th>Телефон</th>
			<th>Имя</th>
<?if(!isset($_GET['list'])):?>
			<th>Список</th>
<?endif?>
			<th>Изменения</th>
		</tr>
		<?php while ($cat = $data->fetch()) { ?>
				<tr class="red">
					<td><?=$i?></td>
					<td><?=$cat['phone']?></td>
					<td><?=$cat['contact']?></td>
                                        <?if(!isset($_GET['list'])):?>
					    <td><?=$cat['list']?></td>
                                        <?endif?>
					<td><a href="http://78.47.124.109/nomernyie-pulyi?edit=<?=$cat['id']?><?=isset($_GET['list']) ? '&list=' . $_GET['list'] : ''?>">Редактировать</a> / <a href="http://78.47.124.109/assets/test/add.php?delete=<?=$cat['id']?>">Удалить</a></td>
				</tr>
		<?php 
                   $i=$i+1;
                  } ?>		
	</table>
</div>
	<script>
		function Add(e){
			let form = document.querySelector('.datas')
			let data = parseInt(e.dataset.code)+1;
		    var newInput = document.createElement('div');
		    form.appendChild(newInput);
		    newInput.outerHTML = `<label for="e${data}" class="add"><input type="text" style="margin-bottom: 8px;" placeholder="Имя" id="e1" name="contact[]" required><input type="text" style="margin-bottom: 8px;margin-left: 5px;" placeholder="Телефон" id="e${data}" name="phone[]" required><span data-code="e${data}" onclick="Add(this)"><b style="font-size: 15px;">+</b></span></label>`;
		}
	</script>
<?php