<!-- HERO SECTION -->
<?php
// Get the image field from ACF
$hero_sekcija_hero_pozadina = get_field('hero_sekcija_hero_pozadina');

// Check if the image exists
if ($hero_sekcija_hero_pozadina) {
    // If the value is numeric, it's likely an image ID. Get the URL from the ID.
    if (is_numeric($hero_sekcija_hero_pozadina)) {
        $image_url = wp_get_attachment_url($hero_sekcija_hero_pozadina);
    } else {
        // Otherwise, assume it's a direct URL.
        $image_url = $hero_sekcija_hero_pozadina;
    }

    $background_style = 'background-image:url(' . $image_url . '); background-size:cover; background-position:center bottom;';
} else {
    $background_style = 'background-color: #266da6;';
}

?>
<div class="w-full h-800 h-auto-1080 relative" style="<?php echo $background_style; ?>">
	<div class="container h-800 h-auto-1080 relative z-2 pb-20 flex flex-column justify-end">
		<div class="flex flex-column-1080 justify-between items-start">
			<div class="w-1-2 w-full-1080 pt-80 pt-140-1080 text-center-1080">
				<?php
					$hero_sekcija_iznad_naslova = get_field('hero_sekcija_iznad_naslova');
					if( !empty($hero_sekcija_iznad_naslova) ): 
						echo '<p class="text-light-blue mb-10">' . esc_html($hero_sekcija_iznad_naslova) . '</p>';
					endif;
					$hero_sekcija_naslov = get_field('hero_sekcija_naslov');
					if( !empty($hero_sekcija_naslov) ): 
						echo '<h1 class="text-white mb-20">' . esc_html($hero_sekcija_naslov) . '</h1>';
					endif;
					$hero_sekcija_ispod_naslova = get_field('hero_sekcija_ispod_naslova');
					if( !empty($hero_sekcija_ispod_naslova) ): 
						echo '<p class="text-white mb-40">' . esc_html($hero_sekcija_ispod_naslova) . '</p>';
					endif;
					$hero_sekcija_dugme = get_field('hero_sekcija_dugme');
					if( !empty($hero_sekcija_dugme) ): 
						echo '<a href="' . esc_url($hero_sekcija_dugme['url']) . '" class="btn btn-primary btn-rounded">' . esc_html($hero_sekcija_dugme['title']). '</a>';
					endif;
				?>
			</div>
			<div class="w-1-2 w-full-1080 h-full text-center">
				<?php
					$hero_sekcija_slika_desno = get_field('hero_sekcija_slika_desno');
					if( !empty($hero_sekcija_slika_desno) ): 
						echo '<img src="' . esc_url($hero_sekcija_slika_desno['url']) . '" class="w-full w-max h-auto">';
					endif;
				?>
			</div>
		</div>
	</div>
</div>
<!-- HERO SECTION END -->

<!-- SERVICES SECTION -->
<div class="container py-40">
	<div class="w-2-3 w-full-768 mx-auto">
		<?php
			$usluge_sekcija_iznad_naslova = get_field('usluge_sekcija_iznad_naslova');
			if( !empty($usluge_sekcija_iznad_naslova) ): 
				echo '<h3 class="text-center mb-20">' . esc_html($usluge_sekcija_iznad_naslova) . '</h3>';
			endif;
			$usluge_sekcija_naslov = get_field('usluge_sekcija_naslov');
			if( !empty($usluge_sekcija_naslov) ): 
				echo '<h2 class="text-center mb-20">' . esc_html($usluge_sekcija_naslov) . '</h2>';
			endif;
			$usluge_sekcija_ispod_naslova = get_field('usluge_sekcija_ispod_naslova');
			if( !empty($usluge_sekcija_ispod_naslova) ): 
				echo '<h3 class="text-center mb-20">' . esc_html($usluge_sekcija_ispod_naslova) . '</h2>';
			endif;
		?>
	</div>
	<div class="swiper-servisi w-full relative o-hidden mt-40 pb-60">
		<div class="swiper-wrapper">
			<?php
			// WP_Query arguments
			$args = array(
				'post_type'      => 'uslider',
				'post_status'    => 'publish',
				'posts_per_page' => -1, // Fetch all posts. Adjust this if you want a specific number.
			);

			// The Query
			$uslider_query = new WP_Query( $args );

			// The Loop
			if ( $uslider_query->have_posts() ) {
				while ( $uslider_query->have_posts() ) {
					$uslider_query->the_post();	
						echo '<div class="swiper-slide relative">';
							echo '<div class="relative mb-10">';
								$usluge_slider_link = get_field('usluge_slider_link');
								if( !empty($usluge_slider_link) ): 
								echo '<a href="' . esc_url($usluge_slider_link['url']) . '" class="">';							
									echo '<div class="overlay w-full h-full absolute bg-blue-o-8 flex justify-center items-center p-20 text-center br-10 z-2">';
										$usluge_slider_tekst = get_field('usluge_slider_tekst');
										if( !empty($usluge_slider_tekst) ): 
											echo '<p class="text-white">' . esc_html($usluge_slider_tekst) . '</p>';
										endif;
									echo '</div>';
									echo '<div class="w-full h-full o-hidden br-10">';
										$usluge_slider_slika = get_field('usluge_slider_slika');
										if( !empty($usluge_slider_slika) ): 
											echo '<img src="' . esc_url($usluge_slider_slika['url']) . '" class="w-full w-max h-300  o-fit-cover o-pos-center">';
										endif;
									echo '</div>';
								echo '</a>';
								endif;
							echo '</div>';
							echo '<h3 class="text-center">' . get_the_title() . '</h3>';
						echo '</div>';
				}
				// Restore original Post Data
				wp_reset_postdata();
			} else {
				// No posts found
				echo 'No slides found.';
			}
			?>
		</div>
		<div class="swiper-pagination"></div> <!-- Add this div for pagination bullets -->
	</div>
	<script>
		var swiperServisi = new Swiper(".swiper-servisi", {
			spaceBetween: 20,
			<?php
				$autoplay = get_field('podesavanje_slidera_autoplay');

				if( $autoplay ){
				?>
					autoplay: {
						delay: 2500,
						disableOnInteraction: false,
					},
				<?php
				}
			?>
			pagination: {
				el: ".swiper-pagination",
				clickable: true,
			},
			breakpoints: {
				1081: {
					slidesPerView: <?php $podesavanje_slidera_slajd_desktop = get_field('podesavanje_slidera_slajd_desktop'); echo $podesavanje_slidera_slajd_desktop;?>,
				},
				769: {
					slidesPerView: <?php $podesavanje_slidera_slajd_tablet = get_field('podesavanje_slidera_slajd_tablet'); echo $podesavanje_slidera_slajd_tablet;?>,
				},
				451: {
					slidesPerView: <?php $podesavanje_slidera_slajd_telefon = get_field('podesavanje_slidera_slajd_telefon'); echo $podesavanje_slidera_slajd_telefon;?>,
				},
				0: {
					slidesPerView: <?php $podesavanje_slidera_slajd_manji_telefon = get_field('podesavanje_slidera_slajd_manji_telefon'); echo $podesavanje_slidera_slajd_manji_telefon;?>,
				},
			},
		});
	</script>
</div>
<!-- SERVICES SECTION END-->

<!-- TIZI SECTION -->
<div class="w-full h-auto bg-blue py-40">
	<div class="container">
		<div class="w-full flex flex-column-768 justify-between items-center">
			<div class="w-1-2 w-full-768 br-10 o-hidden mb-40-768">
				<?php
					$tizi_sekcija_slika_lijevo = get_field('tizi_sekcija_slika_lijevo');
					if( !empty($tizi_sekcija_slika_lijevo) ): 
						echo '<img src="' . esc_url($tizi_sekcija_slika_lijevo['url']) . '" class="w-full w-max h-auto">';
					endif;
				?>
			</div>
			<div class="w-1-2 w-full-768 px-40 px-0-768 text-center-768">
				<?php
					$tizi_sekcija_iznad_naslova = get_field('tizi_sekcija_iznad_naslova');
					if( !empty($tizi_sekcija_iznad_naslova) ): 
						echo '<p class="text-light-blue mb-10">' . esc_html($tizi_sekcija_iznad_naslova) . '</p>';
					endif;
					$tizi_sekcija_naslov = get_field('tizi_sekcija_naslov');
					if( !empty($tizi_sekcija_naslov) ): 
						echo '<h2 class="text-white mb-20">' . esc_html($tizi_sekcija_naslov) . '</h2>';
					endif;
					$tizi_sekcija_ispod_naslova = get_field('tizi_sekcija_ispod_naslova');
					if( !empty($tizi_sekcija_ispod_naslova) ): 
						echo '<p class="text-white mb-40">' . esc_html($tizi_sekcija_ispod_naslova) . '</p>';
					endif;
					$tizi_sekcija_dugme = get_field('tizi_sekcija_dugme');
					if( !empty($tizi_sekcija_dugme) ): 
						echo '<a href="' . esc_url($tizi_sekcija_dugme['url']) . '" class="btn btn-primary btn-rounded">' . esc_html($tizi_sekcija_dugme['title']). '</a>';
					endif;
				?>
			</div>
		</div>
	</div>
</div>
<!-- TIZI SECTION END -->

<!-- NUMBERS SECTION -->
<div class="w-full h-auto bg-lightest-blue py-40">
	<div class="container">
		<div class="w-full flex flex-wrap justify-between items-center">
			<div class="w-1-4 w-1-2-768 w-full-450 text-center mb-20-768">
				<?php
					$brojke_sekcija_1_broj = get_field('brojke_sekcija_1_broj');
					$brojke_sekcija_1_broj_sufiks = get_field('brojke_sekcija_1_broj_sufiks');
					$brojke_sekcija_1_tekst = get_field('brojke_sekcija_1_tekst');
					if( !empty($brojke_sekcija_1_broj) ): 
						echo '<p class="text-blue fs-70 font-bold mb-0">';
							echo esc_html($brojke_sekcija_1_broj);
							if( !empty($brojke_sekcija_1_broj_sufiks) ): 
								echo esc_html($brojke_sekcija_1_broj_sufiks);
							endif;
						echo '</p>';
					endif;
					if( !empty($brojke_sekcija_1_tekst) ): 
						echo '<p class="">' . esc_html($brojke_sekcija_1_tekst) .  '</p>';
					endif;
				?>
			</div>
			<div class="w-1-4 w-1-2-768 w-full-450 text-center mb-20-768">
				<?php
					$brojke_sekcija_2_broj = get_field('brojke_sekcija_2_broj');
					$brojke_sekcija_2_broj_sufiks = get_field('brojke_sekcija_2_broj_sufiks');
					$brojke_sekcija_2_tekst = get_field('brojke_sekcija_2_tekst');
					if( !empty($brojke_sekcija_2_broj) ): 
						echo '<p class="text-blue fs-70 font-bold mb-0">';
							echo esc_html($brojke_sekcija_2_broj);
							if( !empty($brojke_sekcija_2_broj_sufiks) ): 
								echo esc_html($brojke_sekcija_2_broj_sufiks);
							endif;
						echo '</p>';
					endif;
					if( !empty($brojke_sekcija_2_tekst) ): 
						echo '<p class="">' . esc_html($brojke_sekcija_2_tekst) .  '</p>';
					endif;
				?>
			</div>
			<div class="w-1-4 w-1-2-768 w-full-450 text-center mb-20-768">
				<?php
					$brojke_sekcija_3_broj = get_field('brojke_sekcija_3_broj');
					$brojke_sekcija_3_broj_sufiks = get_field('brojke_sekcija_3_broj_sufiks');
					$brojke_sekcija_3_tekst = get_field('brojke_sekcija_3_tekst');
					if( !empty($brojke_sekcija_3_broj) ): 
						echo '<p class="text-blue fs-70 font-bold mb-0">';
							echo esc_html($brojke_sekcija_3_broj);
							if( !empty($brojke_sekcija_3_broj_sufiks) ): 
								echo esc_html($brojke_sekcija_3_broj_sufiks);
							endif;
						echo '</p>';
					endif;
					if( !empty($brojke_sekcija_3_tekst) ): 
						echo '<p class="">' . esc_html($brojke_sekcija_3_tekst) .  '</p>';
					endif;
				?>
			</div>
			<div class="w-1-4 w-1-2-768 w-full-450 text-center mb-20-768">
				<?php
					$brojke_sekcija_4_broj = get_field('brojke_sekcija_4_broj');
					$brojke_sekcija_4_broj_sufiks = get_field('brojke_sekcija_4_broj_sufiks');
					$brojke_sekcija_4_tekst = get_field('brojke_sekcija_4_tekst');
					if( !empty($brojke_sekcija_4_broj) ): 
						echo '<p class="text-blue fs-70 font-bold mb-0">';
							echo esc_html($brojke_sekcija_4_broj);
							if( !empty($brojke_sekcija_4_broj_sufiks) ): 
								echo esc_html($brojke_sekcija_4_broj_sufiks);
							endif;
						echo '</p>';
					endif;
					if( !empty($brojke_sekcija_4_tekst) ): 
						echo '<p class="">' . esc_html($brojke_sekcija_4_tekst) .  '</p>';
					endif;
				?>
			</div>
		</div>
	</div>
</div>
<!-- NUMBERS SECTION END -->

<!-- SERVISI SECTION -->
<div class="w-full h-auto py-40">
	<div class="container">
		<div class="w-full flex flex-column-1080 justify-between items-center">
			<div class="w-1-2 w-full-1080 px-40 px-0-1080">
				<?php
					$servisi_sekcija_iznad_naslova = get_field('servisi_sekcija_iznad_naslova');
					if( !empty($servisi_sekcija_iznad_naslova) ): 
						echo '<p class="text-light-blue mb-10">' . esc_html($servisi_sekcija_iznad_naslova) . '</p>';
					endif;
					$servisi_sekcija_naslov = get_field('servisi_sekcija_naslov');
					if( !empty($servisi_sekcija_naslov) ): 
						echo '<h2 class="text-black mb-20">' . esc_html($servisi_sekcija_naslov) . '</h2>';
					endif;
					$servisi_sekcija_ispod_naslova = get_field('servisi_sekcija_ispod_naslova');
					if( !empty($servisi_sekcija_ispod_naslova) ): 
						echo '<p class="mb-40">' . esc_html($servisi_sekcija_ispod_naslova) . '</p>';
					endif;
				?>
				<div class="flex flex-column">
					<div class="flex justify-between items-center mb-20">
						<div class="w-1-4 p-10">
							<?php
								$servisi_sekcija_servisi_1_ikonica = get_field('servisi_sekcija_servisi_1_ikonica');
								if( !empty($servisi_sekcija_servisi_1_ikonica) ): 
									echo '<img src="' . $servisi_sekcija_servisi_1_ikonica . '" class="w-full w-max h-auto">';
								endif;
							?>
						</div>
						<div class="w-3-4">
							<?php
								$servisi_sekcija_servisi_1_naslov = get_field('servisi_sekcija_servisi_1_naslov');
								if( !empty($servisi_sekcija_servisi_1_naslov) ): 
									echo '<p class="mb-10"><strong>' . esc_html($servisi_sekcija_servisi_1_naslov) . '</strong></p>';
								endif;
								$servisi_sekcija_servisi_1_tekst = get_field('servisi_sekcija_servisi_1_tekst');
								if( !empty($servisi_sekcija_servisi_1_tekst) ): 
									echo '<p class="mb-0 fs-14">' . esc_html($servisi_sekcija_servisi_1_tekst) . '</p>';
								endif;
							?>
						</div>
					</div>
					<div class="flex justify-between items-center mb-40">
						<div class="w-1-4 p-10">
							<?php
								$servisi_sekcija_servisi_2_ikonica = get_field('servisi_sekcija_servisi_2_ikonica');
								if( !empty($servisi_sekcija_servisi_2_ikonica) ): 
									echo '<img src="' . $servisi_sekcija_servisi_2_ikonica . '" class="w-full w-max h-auto">';
								endif;
							?>
						</div>
						<div class="w-3-4">
							<?php
								$servisi_sekcija_servisi_2_naslov = get_field('servisi_sekcija_servisi_2_naslov');
								if( !empty($servisi_sekcija_servisi_2_naslov) ): 
									echo '<p class="mb-10"><strong>' . esc_html($servisi_sekcija_servisi_2_naslov) . '</strong></p>';
								endif;
								$servisi_sekcija_servisi_2_tekst = get_field('servisi_sekcija_servisi_2_tekst');
								if( !empty($servisi_sekcija_servisi_2_tekst) ): 
									echo '<p class="mb-0 fs-14">' . esc_html($servisi_sekcija_servisi_2_tekst) . '</p>';
								endif;
							?>
						</div>
					</div>
					<div class="flex justify-between items-center mb-40">
						<div class="w-1-4 p-10">
							<?php
								$servisi_sekcija_servisi_3_ikonica = get_field('servisi_sekcija_servisi_3_ikonica');
								if( !empty($servisi_sekcija_servisi_3_ikonica) ): 
									echo '<img src="' . $servisi_sekcija_servisi_3_ikonica . '" class="w-full w-max h-auto">';
								endif;
							?>
						</div>
						<div class="w-3-4">
							<?php
								$servisi_sekcija_servisi_3_naslov = get_field('servisi_sekcija_servisi_3_naslov');
								if( !empty($servisi_sekcija_servisi_3_naslov) ): 
									echo '<p class="mb-10"><strong>' . esc_html($servisi_sekcija_servisi_3_naslov) . '</strong></p>';
								endif;
								$servisi_sekcija_servisi_3_tekst = get_field('servisi_sekcija_servisi_3_tekst');
								if( !empty($servisi_sekcija_servisi_3_tekst) ): 
									echo '<p class="mb-0 fs-14">' . esc_html($servisi_sekcija_servisi_3_tekst) . '</p>';
								endif;
							?>
						</div>
					</div>
				</div>
			</div>
			<div class="w-1-2 w-full-1080 br-10 o-hidden text-center">
				<?php
					$servisi_sekcija_slika_desno = get_field('servisi_sekcija_slika_desno');
					if( !empty($servisi_sekcija_slika_desno) ): 
						echo '<img src="' . esc_url($servisi_sekcija_slika_desno['url']) . '" class="w-full w-max h-auto">';
					endif;
				?>
			</div>
		</div>
	</div>
</div>
<!-- SERVISI SECTION END -->





