<?php
$class = isset($args['class']) ? $args['class'] : '';
$slider = isset($args['slider']) ? $args['slider'] : true;
?>


<section class="section our-portfolio <?php echo $class;?>">
    <div class="container">
        <div class="text-cont slide-down">
            <h2 class="section-title mb-3"><?php echo get_field('case_studies_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('case_studies_description'); ?></p>
        </div>

			<div class="slide-up <?php echo empty($slider) ? 'row gy-4 mt-4' : 'portfolio-slider owl-carousel owl-theme'; ?>">
            <?php $case_studies_cases = get_field('case_studies_cases'); ?>
            <?php if (is_array($case_studies_cases)) : ?>
                <?php for ($i=0; $i < count($case_studies_cases); $i++) : $case = $case_studies_cases[$i]?>
                    <div class="item <?php echo empty($slider) ? 'col-lg-6' : ''; ?>" data-dot="<button>0<?php echo ($i + 1); ?></button>">
                        <div class="card <?php echo empty($slider) ? 'portfolio-card' : ''; ?>">
                            <a href="<?php echo $case['link']; ?>" class="img-cont" aria-label="Learn more about <?php echo $case['name']; ?> case study">
								
								<?php
								$image_url = $case['image'];
								$image_id  = $image_url ? attachment_url_to_postid($image_url) : 0;
								
								$logo_url = $case['logo'];
								$attachment_id = attachment_url_to_postid($logo_url);

								if ($attachment_id) {
									$meta = wp_get_attachment_metadata($attachment_id);

									$width = $meta['width'] ?? '';
									$height = $meta['height'] ?? '';
								}


								if ($image_id) {
									echo wp_get_attachment_image($image_id, 'medium_large', false, [
										'class'         => 'img-fluid',
										'loading'         => 'lazy',
										'decoding'      => 'async',
										'alt'           => strip_tags($case['name']),
										'sizes'         => '(max-width: 767px) 336px, 636px',
									]);
								}
								?>
								
                            </a>
                            <div class="text-content">
                                <ul>
                                    <li class="left">
                                        <img src="<?php echo esc_url($logo_url); ?>" alt="<?php echo strip_tags($case['name']); ?>" class="img-fluid" loading="lazy" width="<?php echo esc_attr($width); ?>" height="<?php echo esc_attr($height); ?>">
                                    </li>
                                    <li class="right">
                                        <?php foreach ($case['tags'] as $tag) : ?>
                                            <p><?php echo $tag['tag']; ?></p>
                                        <?php endforeach; ?>
                                    </li>
                                </ul>
                                <p class="description mb-2">
                                <a href="<?php echo $case['link']; ?>" aria-label="Learn more about <?php echo $case['name']; ?> case study">
                                    <?php echo $case['description']; ?>
                                </a>
                                </p>
                                <a href="<?php echo $case['link']; ?>" class="read-more" aria-label="Learn more about <?php echo $case['name']; ?> case study">
                                    Read More 
                                    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5.61963 2.83672L9.53385 6.75093L5.61963 10.6651C5.15674 11.128 5.15674 11.8788 5.61963 12.3422C6.08253 12.8051 6.83331 12.8051 7.29668 12.3422L12.0494 7.58945C12.5123 7.12656 12.5123 6.37578 12.0494 5.91241L7.29668 1.15967C6.83378 0.696776 6.083 0.696776 5.61963 1.15967C5.15674 1.62257 5.15674 2.37335 5.61963 2.83672Z" fill="black"/>
                                        <path d="M2.0789 1.15967L6.83164 5.91241C7.29454 6.3753 7.29454 7.12608 6.83164 7.58945L2.0789 12.3422C1.61601 12.8051 0.865228 12.8051 0.401859 12.3422C-0.0610363 11.8793 -0.0610363 11.1285 0.401859 10.6651L4.31607 6.75093L0.401859 2.83672C-0.0610363 2.37382 -0.0610363 1.62304 0.401859 1.15967C0.864754 0.696776 1.61554 0.696776 2.0789 1.15967Z" fill="black"/>
                                    </svg>
                                </a>
                                
                            </div>
                        </div>
                    </div>
                <?php endfor; ?>
            <?php endif; ?>
        </div>
    </div>
</section>