<section class="controle">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3">
<?php include('pages/visual/common/menu.php'); ?>
			</div>
			<div class="col-md-6">
				<h2 class="text-center titleSection">Controle da Galeria</h2>
				<br>
				<a class="btn btn-success" data-toggle="modal" data-target=".insertBanner"><i class="fas fa-plus-circle"></i> Inserir</a>
				<?php
				$link = URL_BASE.'data/galeria.php';
				$ch = curl_init($link);
				curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
				curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
				curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36");
				$response = curl_exec($ch);
				$error = curl_error($ch);
				$info = curl_getinfo($ch);
				curl_close($ch);
				$galerias = json_decode($response, true);
				?>
				<div class="modal fade insertBanner" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
				  <div class="modal-dialog modal-lg">
					<div class="modal-content">
					  <form method="POST" action="<?php echo URL_BASE.'controle/command/galeria.php?step=1'; ?>" enctype="multipart/form-data">
						  <div class="form-group">
							<div class="form-row">
							  <div class="col-12">
								<label>Tipo de Conteúdo</label><br>
								<input type="radio" name="tipo" value="1" CHECKED> <i class="fa-solid fa-video"></i> Vídeo
							  </div>
							</div>
							<div class="form-row">
							  <div class="col-12" style="margin-top: 20px;">
								<label>Descrição</label>
								<input type="text" class="form-control fieldForm" name="descricao">
							  </div>
							</div>
							<!--<div class="form-row">
							  <div class="col-6" style="margin-top: 20px;">
								<label>Imagem do Banner</label>
								<input type="file" class="form-control-file" name="imagem" accept="image/*">
							  </div>
						    </div>-->
							<div class="form-row">
							  <div class="col-12" style="margin-top: 20px;">
								<label>URL Vídeo do Youtube</label>
								<input type="text" class="form-control fieldForm" name="video" placeholder="Exemplo: https://www.youtube.com/watch?v=fi3uz-Z8trY">
							  </div>
							</div>
							<div class="form-row">
							  <div class="col-3">
								&nbsp;
							  </div>
							  <div class="col-6" style="margin-top: 20px;">
								<button type="submit" class="btn btn-primary btn-block"><i class="far fa-save"></i> Salvar</button>
							  </div>
							  <div class="col-3">
								&nbsp;
							  </div>
							 </div>
							</form>
						  </div>
					  </form>
					</div>
				  </div>
				</div>
				
				<br><br>
				
				<div class="row">
					<div class="col-12">
					
					<table class="table table-striped">
					  <thead>
						<tr>
						  <th scope="col"> </th>
						  <th scope="col">Descrição</th>
						  <th scope="col">Tipo</th>
						  <th scope="col"> </th>
						</tr>
					  </thead>
					  <tbody id="table-body">

				<?php
				$i = 1;
				foreach($galerias as $galeria){
				?>
				
						<tr>
						  <th scope="row"><?php echo $i; ?></th>
						  <td><?php echo $galeria['descricao']; ?></td>
						  <td><?php if($galeria['tipo'] == 0){echo '<i class="fa-regular fa-image text-info"></i>';} if($galeria['tipo'] == 1){echo '<i class="fa-solid fa-video text-danger"></i>';} ?></td>
						  <td>
						  
						  <a data-toggle="modal" data-target=".view-<?php echo $galeria['id']; ?>" style="cursor: pointer;">
							<i class="fa-solid fa-eye text-info"></i>
						  </a>&nbsp;&nbsp;
						  <a href="<?php echo URL_BASE.'controle/command/galeria.php?step=2&id='.$galeria['id']; ?>">
							<i class="fa-solid fa-trash-can text-danger"></i>
						  </a>
						  
						  </td>
						</tr>				
				
				<div class="modal fade view-<?php echo $galeria['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
				  <div class="modal-dialog modal-lg">
					<div class="modal-content">
					  
					  <div class="row">
						<div class="col-3">
							&nbsp;
						</div>
						<div class="col-6">
						  <?php
						  if($galeria['tipo'] == 0){
						  ?>
						  <img src="<?php echo URL_BASE.'assets/images/'.$galeria['recurso']; ?>" style="width: 100%;">
						  <?php
						  }
						  if($galeria['tipo'] == 1){
						  ?>
						  <iframe src="https://www.youtube.com/embed/<?php echo $galeria['recurso']; ?>" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="width: 100%;height: 350px;"></iframe>
						  <?php
						  }
						  ?>
						  </div>
						  <div class="col-3">
							&nbsp;
						</div>
					  </div>
					  
					</div>
				  </div>
				</div>
				<?php
				$i++;
				}
				?>

					  </tbody>
					</table>

					<nav>
						<ul class="pagination justify-content-center" id="pagination">
							<!-- Botões serão adicionados dinamicamente -->
						</ul>
					</nav>
					
					</div>
				</div>
				
			</div>
			<div class="col-md-3">
				&nbsp;
			</div>
		</div>
	</div>
</section>

<script>
    $(document).ready(function() {
        let rowsPerPage = 10;
        let rows = $('#table-body tr');
        let totalPages = Math.ceil(rows.length / rowsPerPage);

        function showPage(page) {
            rows.hide();
            rows.slice((page - 1) * rowsPerPage, page * rowsPerPage).show();
        }

        function createPagination() {
            let pagination = $('#pagination');
            pagination.empty();

            for (let i = 1; i <= totalPages; i++) {
                let btn = $('<li class="page-item"><a class="page-link" href="#">' + i + '</a></li>');
                btn.click(function() {
                    $('.page-item').removeClass('active');
                    $(this).addClass('active');
                    showPage(i);
                });
                pagination.append(btn);
            }
            pagination.find('li:first-child').addClass('active');
        }

        showPage(1);
        createPagination();
    });
</script>