@extends('layouts.main')
@section('content')
@php
$hero = \App\Models\HeroSection::first();
$aboutUs = \App\Models\AboutUs::first();
$sectionTitle= \App\Models\SectionTitle::first();
$whyUs = \App\Models\WhyUs::first();
$cta = \App\Models\Cta::first();
if ($whyUs) {
    $whyUs->accordion_items = json_decode($whyUs->accordion_items, true); // true for associative array
}
$clientImages = \App\Models\ClientImage::all();
$skills = \App\Models\Skill::all();
$services = \App\Models\CardService::with('cards')->get();
$categories = \App\Models\Portfolio::select('category')->distinct()->get();

        $portfolios = \App\Models\Portfolio::all();
        $section = \App\Models\Section::all();
        $teamSection = App\Models\TeamSection::first(); // Get the first team section
        $teamMembers = App\Models\TeamMember::all(); // Get all team members
        $pricingSection = App\Models\PricingSection::with('plans')->first();
        $faqSection = App\Models\FAQSection::first();

        // Check if the FAQ section exists and then fetch related FAQs based on section_id
        $faqs = $faqSection ? App\Models\FAQ::where('section_id', $faqSection->id)->get() : collect();
@endphp

@if($section->where('section_name', 'hero')->first() && $section->where('section_name', 'hero')->first()->status == 1)
<section id="hero" class="d-flex align-items-center">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="200">
                <h1 style="color: {{ $hero->font_color ?? '#000' }};">{{ $hero->heading ?? "" }}</h1>
                <h2 style="color: {{ $hero->font_color ?? '#000' }};">{{ $hero->subheading ?? '' }}</h2>

                <div class="d-flex justify-content-center justify-content-lg-start">
                    <a href="{{ $hero->button_url ?? "" }}" class="btn-get-started scrollto" style="background-color: {{ $hero->button_color ?? '#007bff' }}; color: {{ $hero->font_color ?? '#fff' }};">
                        {{ $hero->button_text ?? '' }}
                    </a>
                    <a href="https://www.youtube.com/watch?v=NU6qkVYxxVY" class="glightbox btn-watch-video">
                        <i class="bi bi-play-circle"></i><span>Watch Video</span>
                    </a>
                </div>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-in" data-aos-delay="200">
                <img src="{{ asset('storage/' . ($hero->banner_image ?? 'default-image.jpg')) }}" class="img-fluid animated" alt="">
            </div>
        </div>
    </div>
</section>
@endif

<main id="main">

<!-- ======= Clients Section ======= -->
@if(!empty($clientImages))
@if($section->where('section_name', 'clients')->first() && $section->where('section_name', 'clients')->first()->status == 1)
<section id="cliens" class="cliens section-bg">
    <div class="container">
        <div class="row" data-aos="zoom-in">
            @foreach($clientImages as $clientImage)
                <div class="col-lg-2 col-md-4 col-6 d-flex align-items-center justify-content-center">
                    <img src="{{ asset('storage/' . ($clientImage->image_path ?? 'default-client-image.jpg')) }}" class="img-fluid" alt="">
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endif



<!-- ======= About Us Section ======= -->
@if($section->where('section_name', 'about_us')->first() && $section->where('section_name', 'about_us')->first()->status == 1)
<section id="about" class="about">
    <div class="container" data-aos="fade-up">
        <div class="section-title">
            <h2 style="color: {{ $aboutUs->font_color ?? '#000' }}">{{ $aboutUs->title ?? '' }}</h2>
        </div>
        <div class="row content">
            <div class="col-lg-6">
                <p style="color: {{ $aboutUs->font_color ?? '#000' }}">
                    {{ $aboutUs->description1 ?? '' }}
                </p>
                <ul>
                    @foreach($aboutUs->list_items ?? [] as $item)
                        <li style="color:{{ $aboutUs->font_color ?? '#000' }}"><i class="ri-check-double-line"></i> {{ $item ?? '' }}</li>
                    @endforeach
                </ul>
            </div>
            <div class="col-lg-6 pt-4 pt-lg-0">
                <p style="color: {{ $aboutUs->font_color ?? '#000' }}">
                    {{ $aboutUs->description2 ?? '' }}
                </p>
                <a href="{{ $aboutUs->button_link ?? '#' }}" class="btn-learn-more" style="background-color: {{ $aboutUs->button_color ?? '#007bff' }}">{{ $aboutUs->button_text ?? 'Learn More' }}</a>
            </div>
        </div>
    </div>
</section>
@endif
@if(!empty($whyUs))
@if($section->where('section_name', 'why_us')->first()->status == 1)
<section id="why-us" class="why-us section-bg">
    <div class="container-fluid" data-aos="fade-up">

      <div class="row">

        <div class="col-lg-7 d-flex flex-column justify-content-center align-items-stretch order-2 order-lg-1">

          <div class="content">
            <h3>{{ $whyUs->heading ?? "" }} <strong>{{ $whyUs->subheading ?? "" }}</strong></h3>
            <p>{{ $whyUs->description  ?? ""}}</p>
          </div>

          <div class="accordion-list">
            <ul>
              @foreach($whyUs->accordion_items as $key => $item)
                <li>
                  <a data-bs-toggle="collapse" class="collapse" data-bs-target="#accordion-list-{{ $key }}"><span>{{ $key + 1 }}</span> {{ $item['title'] ?? ""}} <i class="bx bx-chevron-down icon-show"></i><i class="bx bx-chevron-up icon-close"></i></a>
                  <div id="accordion-list-{{ $key }}" class="collapse {{ $key === 0 ? 'show' : '' }}" data-bs-parent=".accordion-list">
                    <p>{{ $item['content'] ?? "" }}</p>
                  </div>
                </li>
              @endforeach
            </ul>
          </div>

        </div>

        <div class="col-lg-5 align-items-stretch order-1 order-lg-2 img" style='background-image: url("assets/img/why-us.png");' data-aos="zoom-in" data-aos-delay="150">&nbsp;</div>
      </div>

    </div>
  </section>
@endif

@endif



<!-- ======= Skills Section ======= -->
@if(!empty($skills))
@if($section->where('section_name', 'skills')->first()->status == 1)

<section id="skills" class="skills">
    <div class="container" data-aos="fade-up">

      <div class="row">
        <div class="col-lg-6 d-flex align-items-center" data-aos="fade-right" data-aos-delay="100">
          <img src="assets/img/skills.png" class="img-fluid" alt="">
        </div>
        <div class="col-lg-6 pt-4 pt-lg-0 content" data-aos="fade-left" data-aos-delay="100">
          <h3>{{ $skills->first()->title ?? "" }}</h3>
          <p class="fst-italic">
          {{$skills->first()->description ?? ""}}
          </p>

          <div class="skills-content">

            @foreach ($skills as $skill)
            <div class="progress">
              <span class="skill">{{ $skill->name ?? "" }} <i class="val">{{ $skill->percentage?? "" }}%</i></span>
              <div class="progress-bar-wrap">
                <div class="progress-bar" role="progressbar" aria-valuenow="{{ $skill->percentage ?? ""}}" aria-valuemin="0" aria-valuemax="100" style="width: {{ $skill->percentage ?? "" }}%;"></div>
              </div>
            </div>
            @endforeach

          </div>

        </div>
      </div>

    </div>
  </section><!-- End Skills Section -->
  @endif

@endif


<!-- ======= Services Section ======= -->
@if($section->where('section_name', 'services')->first()->status == 1)

<section id="services" class="services section-bg">
    <div class="container" data-aos="fade-up">

      <div class="section-title">
        <h2>{{ $services->first()->title ?? "" }}</h2>
        <p>{{ $services->first()->description ?? "" }}</p>
      </div>

      @foreach($services as $service)
        <div class="service-section">
          <!-- Display the service title -->

          <div class="row">
            @foreach($service->cards as $index => $card)
              <div class="col-xl-3 col-md-6 d-flex align-items-stretch {{ $index > 0 ? 'mt-4 mt-xl-0' : '' }}" data-aos="zoom-in" data-aos-delay="{{ ($index + 1) * 100 }}">
                <div class="icon-box">
                  <!-- Card icon -->
                  <div class="icon"><i class="{{ $card->icon ?? "" }}"></i></div>

                  <!-- Card title -->
                  <h4><a href="">{{ $card->card_title ?? "" }}</a></h4>

                  <!-- Card description -->
                  <p>{{ $card->card_description ?? "" }}</p>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      @endforeach

    </div>
  </section><!-- End Services Section -->
  @endif


<!-- ======= Cta Section ======= -->
@if($section->where('section_name', 'cta')->first()->status == 1)

<section id="cta" class="cta">
    <div class="container" data-aos="zoom-in">

      <div class="row">
        <div class="col-lg-9 text-center text-lg-start">
          <h3 style="color: {{ $cta->font_color ?? "" }}">{{ $cta->title ?? "" }}</h3> <!-- Dynamic font color -->
          <p style="color: {{ $cta->font_color ?? ""}}">{{ $cta->description ?? "" }}</p> <!-- Dynamic font color -->
        </div>
        <div class="col-lg-3 cta-btn-container text-center">
          <a class="cta-btn align-middle" href="{{ $cta->button_link  ?? ""}}" style="background-color: {{ $cta->button_color ?? "" }};">{{ $cta->button_text ?? "" }}</a> <!-- Dynamic button color -->
        </div>
      </div>

    </div>
  </section><!-- End Cta Section -->

  @endif

<!-- ======= Portfolio Section ======= -->
@if($section->where('section_name', 'portfolio')->first()->status == 1)

<section id="portfolio" class="portfolio">
    <div class="container" data-aos="fade-up">

        <div class="section-title">
            <h2>{{ $sectionTitle->title ?? "" }}</h2>
            <p>{{ $sectionTitle->description ?? "" }}</p>        </div>

        <!-- Portfolio Filters (Dynamic Categories) -->
        <ul id="portfolio-flters" class="d-flex justify-content-center" data-aos="fade-up" data-aos-delay="100">
            <li data-filter="*" class="filter-active">All</li>
            @foreach($categories as $category)
                <li data-filter=".filter-{{ strtolower($category->category) ?? "" }}">{{ $category->category ?? "" }}</li>
            @endforeach
        </ul>

        <!-- Portfolio Items (Dynamic Content) -->
        <div class="row portfolio-container" data-aos="fade-up" data-aos-delay="200">
            @foreach($portfolios as $portfolio)
                <div class="col-lg-4 col-md-6 portfolio-item filter-{{ strtolower($portfolio->category) ?? "" }}">
                    <div class="portfolio-img">
                        <img src="{{ asset('storage/' . $portfolio->image) ?? "" }}" class="img-fluid" alt="{{ $portfolio->title ?? "" }}">
                    </div>
                    <div class="portfolio-info">
                        <h4>{{ $portfolio->title ?? "" }}</h4>
                        <p>{{ $portfolio->category ?? ""}}</p>
                        <a href="{{ asset('storage/' . $portfolio->image) ?? "" }}" data-gallery="portfolioGallery" class="portfolio-lightbox preview-link" title="{{ $portfolio->title }}">
                            <i class="bx bx-plus"></i>
                        </a>
                        <a href="{{ $portfolio->url ?? "" }}" class="details-link" title="More Details">
                            <i class="bx bx-link"></i>
                        </a>

                    </div>
                </div>
            @endforeach
        </div>

    </div>
</section>
@endif

<!-- ======= Team Section ======= -->

@if($section->where('section_name', 'team')->first()->status == 1)

<section id="team" class="team section-bg">
    <div class="container" data-aos="fade-up">
        <div class="section-title">
            <h2>{{ $teamSection->title ?? ""}}</h2>
            <p>{{ $teamSection->description ?? "" }}</p>
        </div>

        <div class="row">
            @foreach ($teamMembers as $member)
                <div class="col-lg-4 col-md-6">
                    <div class="member">
                      <div class="pic">  <img src="{{ asset('storage/' . $member->image)  ?? ""}}" alt="{{ $member->name  ?? ""}}"></div>
                        <div class="member-info">
                            <h4>{{ $member->name ?? "" }}</h4>
                            <span>{{ $member->position ?? "" }}</span>
                            <p>{{ $member->bio ?? "" }}</p>
                            <div class="social">
                                @if($member->twitter)<a href="{{ $member->twitter ?? ""}}"><i class="bi bi-twitter"></i></a>@endif
                                @if($member->facebook)<a href="{{ $member->facebook  ?? ""}}"><i class="bi bi-facebook"></i></a>@endif
                                @if($member->instagram)<a href="{{ $member->instagram ?? "" }}"><i class="bi bi-instagram"></i></a>@endif
                                @if($member->linkedin)<a href="{{ $member->linkedin ?? ""}}"><i class="bi bi-linkedin"></i></a>@endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- ======= Pricing Section ======= -->

@if(!empty($pricingSection))

@if($section->where('section_name', 'pricing')->first()->status == 1)

<section id="pricing" class="pricing">
    <div class="container" data-aos="fade-up">

      <div class="section-title">
        <h2>Pricing</h2>
        <p>{{ $pricingSection->description ?? ""}}</p>
      </div>

      <div class="row">
        @foreach($pricingSection->plans as $plan)
          <div class="col-lg-4 mt-4 mt-lg-0" data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
            <div class="box {{ $loop->first ? 'featured' : '' }}">
              <h3>{{ $plan->plan_title ?? "" }}</h3>
              <h4><sup>$</sup>{{ $plan->price ?? "" }}<span> per {{ $plan->price_duration  ?? ""}}</span></h4>
              <ul>
                @foreach(json_decode($plan->features) as $feature)
                  <li><i class="bx bx-check"></i> {{ $feature ?? "" }}</li>
                @endforeach
                <!-- If you want to handle empty features or add "not available" features, you can do it here -->
              </ul>
              {{--  <a href="#" class="buy-btn">Get Started</a>  --}}
            </div>
          </div>
        @endforeach
      </div>

    </div>
  </section><!-- End Pricing Section -->
  @endif
@endif



<!-- ======= Frequently Asked Questions Section ======= -->
<!-- resources/views/faq/index.blade.php -->
@if($section->where('section_name', 'faq')->first()->status == 1)

<section id="faq" class="faq section-bg">
    <div class="container" data-aos="fade-up">

      <div class="section-title">
        <h2>{{ $faqSection->title ?? 'Frequently Asked Questions' }}</h2>
        <p>{{ $faqSection->description ?? 'Here are some common questions asked by our users.' }}</p>
      </div>

      <div class="faq-list">
        <ul>
          @forelse($faqs as $faq)
            <li data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
              <i class="bx bx-help-circle icon-help"></i>
              <a data-bs-toggle="collapse" class="collapse" data-bs-target="#faq-list-{{ $faq->id  ?? ""}}">
                {{ $faq->question }}
                <i class="bx bx-chevron-down icon-show"></i>
                <i class="bx bx-chevron-up icon-close"></i>
              </a>
              <div id="faq-list-{{ $faq->id ?? "" }}" class="collapse" data-bs-parent=".faq-list">
                <p>
                  {{ $faq->answer ?? '' }}
                </p>
              </div>
            </li>
          @empty
            <li>No FAQs available at this time.</li>
          @endforelse
        </ul>
      </div>

    </div>
</section>
@endif
@if($section->where('section_name', 'contact')->first()->status == 1)

<section id="contact" class="contact">
  <div class="container" data-aos="fade-up">

    <div class="section-title">
      <h2>Contact</h2>

    </div>

    <div class="row">

      <div class="col-lg-5 d-flex align-items-stretch">
        <div class="info">
          <div class="address">
            <i class="bi bi-geo-alt"></i>
            <h4>Location:</h4>
            <p>{{ $footerSetting->address ?? ""}}</p>
          </div>

          <div class="email">
            <i class="bi bi-envelope"></i>
            <h4>Email:</h4>
            <p>{{ $footerSetting->email  ?? ""}}</p>
          </div>

          <div class="phone">
            <i class="bi bi-phone"></i>
            <h4>Call:</h4>
            <p>{{ $footerSetting->phone  ?? ""}}</p>
          </div>

          <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12097.433213460943!2d-74.0062269!3d40.7101282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb89d1fe6bc499443!2sDowntown+Conference+Center!5e0!3m2!1smk!2sbg!4v1539943755621" frameborder="0" style="border:0; width: 100%; height: 290px;" allowfullscreen></iframe>
        </div>

      </div>

      <div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
        <form action="{{ route('contact.submit') }}" method="post" role="form" class="php-email-form">
            @csrf
          <div class="row">
            <div class="form-group col-md-6">
              <label for="name">Your Name</label>
              <input type="text" name="name" class="form-control" id="name" required>
            </div>
            <div class="form-group col-md-6">
              <label for="name">Your Email</label>
              <input type="email" class="form-control" name="email" id="email" required>
            </div>
          </div>
          <div class="form-group">
            <label for="name">Subject</label>
            <input type="text" class="form-control" name="subject" id="subject" required>
          </div>
          <div class="form-group">
            <label for="name">Message</label>
            <textarea class="form-control" name="message" rows="10" required></textarea>
          </div>
          <div class="my-3">
            <div class="loading">Loading</div>
            <div class="error-message"></div>
            <div class="sent-message">Your message has been sent. Thank you!</div>
          </div>
          <div class="text-center"><button type="submit">Send Message</button></div>
        </form>
      </div>

    </div>

  </div>
</section><!-- End Contact Section -->
@endif

</main><!-- End #main -->
@endsection