<?php
	include "database.php";

	$result = mysqli_query($induction, "SELECT * FROM `products1`");
	

  ?>

<div class="card">
				<?php foreach ($result as $index=>$data): ?>
					<div class="card_1clothes">
						<div class="image">
							<img src="<?= $data['img']; ?>" alt="Tovar">	
						</div>
						<div class="info">
							<h3 class="name_clothes">
								<?= $data['name']; ?>
							</h3>
						</div>
						<div class="btn">
							<button 
                class="more_detailed open_info" 
                data-index="<?= $index ?>"
              >
                Подробнее
              </button>
							<div class="info_bg">
							 	<div 
                   id="info_item-<?= $index ?>" 
                   data-index="<?= $index ?>"
                >
							 		<p>
							 			<?= $data['name']; ?>					 			
							 		</p>
							 		<img class="close__popup" src="img/close.svg" alt="Icon">
							 		<h3>
										<?= $data['description']; ?>
							 		</h3>
							 		<h1>
							 			Характеристики:
							 		</h1>
							 		<h2>
							 			<?= $data['characteristic'] ?>
							 		</h2>
							 	</div>
							</div>
						</div>
					</div>
				<?php endforeach; ?>
			</div>

.card {
	display: grid;
	grid-template-columns:minmax(300px, 1fr) minmax(300px, 1fr) minmax(300px, 1fr);
	grid-row-gap: 40px;
	width: 1320px;
	margin: 0 auto;
}

.card_1clothes {
	margin:  0;
	width: 288px;
	height: 489px;
	background-color: #9D9096;
	border-radius: 20px;
	margin-top: 10px;
	margin-left: 72px
}

.image img {
	width: 255.63px;
	height: 340.98px;
	border-radius: 10px;
	margin-top: 10px;
	margin-left: 16px;
}

.name_clothes {
	width: 176px;
	height: 60px;
	text-transform: none;
	font-size: 25px;
	font-weight: 500;
	line-height: 29px;
	color: #fff;
	margin-top: 5px;
	margin-left: 55px;
	text-align: center;
}

.more_detailed {
	width: 169.13px;
	height: 41.78px;
	font-weight: 500;
	font-size: 24px;
	line-height: 29px;
	color: #FFFFFF;
	background-color: #C4C4C4;
	border-radius: 10px;
	margin-left: 59px;
	margin-top: -15px;
	text-decoration: none;
	transition: all 0.5s ease;
	box-shadow: 0px 7px 35px rgba(44, 44, 44, 0.36);
	border: none;
}

.more_detailed:hover {
	background: #fff;
	color: #000;
}

.info_bg {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.9);
	display: 
}

.info_item {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	height: 600px;
	background: #2C2C2C;
	padding: 20px;
	transform: translate(-50%,-50%);
	padding-top: 60px;
	border-radius: 20px;
}

.close__popup {
	position: absolute;
    width: 30px;
    height: 30px;
    top: 19px;
    right: 30px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 10px;
}

.info_item p {
	font-weight: 500;
    font-size: 25px;
    line-height: 49px;
    color: #fff;
    align-items: center;
    text-align: center;
    margin-top: -50px;
}

.info_item h3 {
	font-weight: 300;
    font-size: 15px;
    width: 560px;
    line-height: 25px;
    color: #fff;
    text-align: justify;
    margin-top: -20px;
}

.info_item h1 {
	font-weight: 500;
    font-size: 18px;
    line-height: 49px;
    color: #fff;
    align-items: center;
    text-align: center;
    margin-top: -15px;
}

.info_item h2 {
	font-weight: 300;
    font-size: 15px;
    width: 560px;
    line-height: 25px;
    color: #fff;
    text-align: justify;
    margin-top: -15px;
}

$('.open_info').click(function(e) {
	e.preventDefault();
  const index = $(this).attr('data-index');
	$('#info_bg-' + index).fadeIn(600);
	$('html').addClass('no-scroll');
});
$('.close__popup').click(function() {
  const index = $(this).parent().attr('data-index');
	$('#info_bg-' + index).fadeOut(600);
	$('html').removeClass('no-scroll');
});