@extends('layout.layout')

@section('content')
<section class="hero-wrap js-fullheight" style="background-image: url('images/bg_2.jpg');">
    <div class="overlay"></div>
    <div class="container">
    <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center">
        <div class="text-center col-md-9 ftco-animate">
        <h1 class="mb-3 bread">Gallery</h1>
        <p class="breadcrumbs"><span class="mr-2"><a href="index.html">Home/</a></span> <span>Gallery</span></p>
        </div>
    </div>
    </div>
</section>

<section class="ftco-gallery ftco-section">
    <div class="container">
    <div class="pb-3 mb-5 row justify-content-center">
        <div class="text-center col-md-7 heading-section ftco-animate">
        <h3 class="subheading">Gallery</h3>
        <h2 class="mb-1">Our Gallery</h2>
        </div>
    </div>
    <!-- social media frames -->
        <div class="row ftco-animate">
            <div class="container mt-5 text-center col-md-12 heading-section ftco-animate">
                <div class="mb-4 btn-group" role="group">
                    <button type="button" class="btn btn-primary" id="toggleInstagram">Cancer Coaching</button>
                    <button type="button" class="btn btn-info" id="toggleFacebook">Wellness Coaching</button>
                </div>

                <div class="content">
        <!-- Cancer Coaching Gallery Section -->
                    <div id="instagramContainer" class="iframe-container active">
                        <div class="row">
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-1.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/cancer-1.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Nourish</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-2.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/cancer-2.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Thrive</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-3.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/cancer-3.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Encouragement</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/cancer-4.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Empower</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/cancer-5.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Hope</span>
                </div>
                </a>
            </div>
            </div>
        </div>
        <!-- end cancer coaching gallery section -->

        <!-- wellness coaching gallery section -->
                    <div id="facebookContainer" class="iframe-container">
                        <div class="row">
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-1.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/wellness-1.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Before</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-2.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/wellness-2.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>After</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-3.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/wellness-3.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Body & Mind Reset</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/wellness-4.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Replenish</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/wellness-5.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Wholesome</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/wellness-6.jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Peace of Mind</span>
                </div>
                </a>
            </div>
            </div>
        </div>
        <!-- end wellness coaching gallery section -->
                </div>
            </div>

            <script>
                document.getElementById('toggleInstagram').addEventListener('click', function() {
                    document.getElementById('instagramContainer').classList.add('active');
                    document.getElementById('facebookContainer').classList.remove('active');
                });

                document.getElementById('toggleFacebook').addEventListener('click', function() {
                    document.getElementById('facebookContainer').classList.add('active');
                    document.getElementById('instagramContainer').classList.remove('active');
                });
            </script>
            </div>
    </div>
</section>
{{-- <section class="ftco-gallery ftco-section">
    <div class="container">
        <div class="pb-3 mb-5 row justify-content-center">
            <div class="text-center col-md-7 heading-section ftco-animate">
            <h3 class="subheading">Gallery</h3>
            <h2 class="mb-1">Our Services (flyers)</h2>
            </div>
        </div>
        <div class="row ftco-animate">
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/services(1).jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/services (1).jpeg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Replenish</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/services (2).jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Replenish</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/services (3).jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Replenish</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/services (4).jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Replenish</span>
                </div>
                </a>
            </div>
            <div class="mb-4 col-md-3 ftco-animate">
                <a href="images/gallery-4.jpg" class="gallery image-popup img d-flex align-items-center"
                style="background-image: url(images/services (5).jpg);">
                <div class="mb-4 icon d-flex align-items-center justify-content-center">
                    <span>Replenish</span>
                </div>
                </a>
            </div>
        </div>
    </div>
</section> --}}
@endsection