projet_php/app/views/search.php

<section aria-label="Blog">
			<h2 class="visually-hidden">Rechercher parmi les articles</h2>
            <div class="row mb-2">
				<section class="mb-5" aria-labelledby="search-heading">
					<form name="formSearch" method="post" action="?ctrl=project&action=search" class="border rounded p-4 bg-light">
						<h3 id="search-heading" class="h4 mb-4">
							<i class="fas fa-search me-2" aria-hidden="true"></i>
							Rechercher des articles
						</h3>
						
						<div class="row g-3">
							<div class="col-md-6">
								<label for="keywords" class="form-label">Mots-clés</label>
								<input 
									value=""
									type="text" 
									class="form-control" 
									id="keywords" 
									name="keywords"
									placeholder="Ex: JavaScript, CSS..."
									aria-describedby="keywords-help">
								<small id="keywords-help" class="form-text text-muted">
									Recherchez dans les titres et contenus
								</small>
							</div>
							
							<div class="col-md-6">
								<label for="author" class="form-label">Auteur</label>
								<select class="form-select" id="author" name="author">
									<option value="0" <?php echo ($intAuthor == 0)?'selected':''; ?>>Tous les auteurs</option>
									<?php
									foreach($arrUser as $arrDetUser){
									?>
										<option value="<?php echo $arrDetUser['user_id']; ?>" 
											<?php echo ($intAuthor == $arrDetUser['user_id'])?'selected':''; ?> 
										>
											<?php echo $arrDetUser['user_firstname'].' '.$arrDetUser['user_name']; ?>
										</option>
									<?php
									}
									?>
								</select>
							</div>

							
							<div class="col-6">
								<fieldset>
									<legend class="form-label">Type de recherche par date</legend>
									<div class="form-check form-check-inline">
										<input 
											class="form-check-input" 
											type="radio" 
											name="period" 
											id="period-exact" 
											value="0" 
											<?php echo ($intPeriod == 0)?'checked':'' ; ?>
											aria-controls="date-exact date-range">
										<label class="form-check-label" for="period-exact">
											Date exacte
										</label>
									</div>
									<div class="form-check form-check-inline">
										<input 
											class="form-check-input" 
											type="radio" 
											name="period" 
											id="period-range" 
											value="1"
											<?php echo ($intPeriod == 1)?'checked':'' ; ?>
											aria-controls="date-exact date-range">
										<label class="form-check-label" for="period-range">
											Période
										</label>
									</div>
								</fieldset>
							</div>
								<!-- AJOUT RECHERCHE PAR CATEGORIE -->
							<div class="col-6">
								<fieldset>
									<legend class="form-label">Type de recherche par catégories</legend>
									<div class="col-md-6">
										<label for="author" class="form-label">Catégorie</label>
										<select class="form-select" id="category" name="category">
											<option value="0" <?php echo ($intCategory == 0)?'selected':''; ?>>Toutes les catégories</option>
											<?php
											foreach($arrCategory as $arrDetCategory){
											?>
												<option value="<?php echo $arrDetCategory['category_id']; ?>" 
													<?php echo ($intCategory == $arrDetCategory['category_id'])?'selected':''; ?> >
													<?php echo $arrDetCategory['category_name']; ?>
												</option>
											<?php
											}
											?>
										</select>
									</div>
								</fieldset>
							</div>
							
							<div class="col-md-6" id="date-exact">
								<label for="date" class="form-label">Date</label>
								<input 
									type="date" 
									class="form-control" 
									id="date" 
									name="date"
									aria-describedby="date-help"
									value="<?php echo $strDate; ?>" >
								<small id="date-help" class="form-text text-muted">
									Format: JJ/MM/AAAA
								</small>
							</div>
							
							<div id="date-range" style="display: none;">
								<div class="row g-3">
									<div class="col-md-6">
										<label for="startdate" class="form-label">Date de début</label>
										<input 
											type="date" 
											class="form-control" 
											id="startdate" 
											name="startdate"
											value="<?php echo $strStartDate; ?>" >
									</div>
									<div class="col-md-6">
										<label for="enddate" class="form-label">Date de fin</label>
										<input 
											type="date" 
											class="form-control" 
											id="enddate" 
											name="enddate"
											value="<?php echo $strEndDate; ?>" >
									</div>
								</div>
							</div>
							
							<div class="col-12">
								<button type="submit" class="btn btn-primary">
									<i class="fas fa-search me-2" aria-hidden="true"></i>
									Rechercher
								</button>
								<button type="reset" class="btn btn-secondary ms-2">
									<i class="fas fa-redo me-2" aria-hidden="true"></i>
									Réinitialiser
								</button>
							</div>
						</div>
					</form>
				</section>

				<!-- Liste des articles -->
				<section aria-labelledby="articles-heading">
            <h3 id="articles-heading" class="visually-hidden">Liste des projets</h3>
            <div class="row mb-2">
				<?php
				if (count($arrProject) == 0){
				?>
					<div class="alert alert-warning">
						<p>Pas de résultats</p>
					</div>
				<?php
				}
				foreach($arrProjectToDisplay as $objProject){
					include("../app/views/partials/preview.php");
				} ?>                
            </div>
        </section>
	</div>
</section>
	<script>
        // Gestion de l'affichage des champs de date
        const periodRadios = document.querySelectorAll('input[name="period"]');
        const dateExact = document.getElementById('date-exact');
        const dateRange = document.getElementById('date-range');
        
        function toggleDateFields() {
            const selectedPeriod = document.querySelector('input[name="period"]:checked').value;
            
            if (selectedPeriod === '0') {
                dateExact.style.display = 'block';
                dateRange.style.display = 'none';
            } else {
                dateExact.style.display = 'none';
                dateRange.style.display = 'block';
            }
        }
        
        periodRadios.forEach(radio => {
            radio.addEventListener('change', toggleDateFields);
        });
        
        // Initialisation au chargement
        toggleDateFields();
    </script>