@include('htmlpage.frontent.layout.app')
<!-- Bootstrap Container -->
<section class="g-padding-y-100--xs">
  <!-- Portfolio Gallery -->
<div class="container-fluid background234">
    @if ($galleries->count() == 1)
        <div class="row">
            <div class="col d-flex justify-content-center">
                <div class="lg-gallery" onclick="openModal('{{ asset('storage/' . $galleries[0]->image_path) }}')">
                    <img src="{{ asset('storage/' . $galleries[0]->image_path) }}" class="img-responsive" alt="Portfolio Image">
                    <div class="open-modal-icon slider-zoom" onclick="openModal('{{ asset('storage/' . $galleries[0]->image_path) }}')">
                        <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                    </div>
                </div>
            </div>
        </div>
    @else
        <div class="row row1">
            @if ($galleries->isNotEmpty())
                @foreach ($galleries as $gallery)
                    <div class="col p-1">
                        <div class="lg-gallery" onclick="openModal('{{ asset('storage/' . $gallery->image_path) }}')">
                            <img src="{{ asset('storage/' . $gallery->image_path) }}" class="img-responsive" alt="Portfolio Image">
                            <div class="open-modal-icon slider-zoom" onclick="openModal('{{ asset('storage/' . $gallery->image_path) }}')">
                                <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <p>No galleries found for this project.</p>
            @endif
        </div>
    @endif
</div>

<style>
    .lg-gallery {
        cursor: w-resize; /* Set cursor to pointer for all gallery items */
    }
</style>

        
   
  <!-- End Portfolio -->
  <!-- Image Modal -->
  <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true"
    style="z-index: 1051;background-color: rgba(0, 0, 0, 0.5)">
    <div class="modal-dialog modal-xl modal-dialog-centered">
      <div class="modal-content"
        style="background: transparent; position: relative; z-index: 1050; border: none; overflow: hidden;">
        <div class="modal-header" style="border: none;">
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
            style="color: #fff; font-size: 1.5rem; position: absolute; top: 0px; right: 0px; background: none; border: none;"><i
              class="fa-regular fa-circle-xmark"></i></button>
        </div>
        <div class="modal-body centered-content" style="position: relative; z-index: 1051;">
          <img src="" id="modalImage" class="img-fluid" alt="Portfolio Image" style="max-height: 80vh; width: auto;">
          <button type="button" class="btn" id="modalPrev"
            style="background-color: transparent; padding: 10px; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 1rem; border: none;">
            <i class="fa-solid fa-circle-arrow-left fa-beat fa-lg"></i>
          </button>
          <button type="button" class="btn" id="modalNext"
            style="background-color: transparent; padding: 10px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 1rem; border: none;">
            <i class="fa-solid fa-circle-arrow-right fa-beat fa-lg"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="background-overlay1"></div>
</section>
<div class="container">
  <div class="row">
    <div class="col-md-10">
      <div class="g-margin-b-40--xs">
        <p class="text-uppercase g-font-size-14--xs g-font-weight--700 g-color--primary g-letter-spacing--2 g-margin-b-25--xs">{{ $project->categoryModel->category }}</p>
        <h1 class="g-font-size-32--xs g-font-size-36--sm">{{ $project->project_name }}</h1>
        <p>Client: {{ $project->client_name }}</p>
        <p>Building Area: {{ $project->area }}</p>
        <p>Project Status: @if($project->project_status == 1)
            Completed
        @elseif($project->project_status == 2)
            Proposed
        @elseif($project->project_status == 3)
            Ongoing
        @else
            Unknown
        @endif</p>
        <p>Project Description: {!! $project->description !!}</p>

      </div>
    </div>
    <div class="col-md-2 d-flex align-items-center">
      <div class="row">
        <div class="col-md-12 d-flex align-items-end">
          <div>
            <div class="container">
              <div class="mt-4 mb-5">
                @if (strpos($project->location_url, 'https://maps.app.goo.gl/') === 0)
                <div class="mt-2 QRcode" id="qrCodeContainer">
                  <a target="_blank" rel="noopener noreferrer" href="{{ $project->location_url }}">
                    <canvas style="height: 128px; width: 128px;" height="128" width="128" id="qrCodeCanvas"></canvas>
                  </a>
                </div>
                  <div class="row">
                  <div class="d-flex align-items-center">
                    <div class="btn d-flex align-items-center">
                      <div class="fs-3 ms-3">
                       <a href="https://wa.me/?text={{ $project->location_url }}" target="_blank"><i class="fa-brands fa-whatsapp" style="color: #5ba42a;"></i></a>
                      </div>
                      <div class="fs-3 ms-3"> <i id="copyIcon" class="fa fa-share-alt" style="cursor: pointer; color: #727273;"><span style="display:none">{{ $project->location_url }}</span></i></div>
                    </div>
                  </div>
                </div>
                <!-- Add this in the head section of your HTML -->
                <script src="https://cdn.jsdelivr.net/npm/qrious@4.0.2/dist/qrious.min.js"></script>
                <script>
                  document.addEventListener('DOMContentLoaded', function () {
                    var qrCodeContainer = document.getElementById('qrCodeContainer');
                    var qrCodeCanvas = document.getElementById('qrCodeCanvas');
                    var locationUrl = "{{ $project->location_url }}";

                    // Generate QR code using qrious library
                    var qr = new QRious({
                      element: qrCodeCanvas,
                      value: locationUrl,
                      size: 128
                    });

                    // Update the link's href attribute with the location URL
                    qrCodeContainer.querySelector('a').href = locationUrl;
                  });
                </script>
                @endif

              
              </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--
<div class="row mt-5 mb-5">
  <div class="video section">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 offset-lg-4">
          <div class="section-heading text-center">
            <h6 style="color: rgb(255, 255, 255);">| Video View |</h6>
            <h2>Get Closer View &amp; Different Feeling</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="video-content">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 offset-lg-1">
          <div class="video-frame">
            <iframe class="w-100 projectDetailsVideo" src="https://www.youtube.com/embed/9LD61gRuElU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="video-content mt-5">
  <div class="container">
    <h3 class="text-center mt-5 mb-5 className=&quot;g-font-size-32--xs g-font-size-36--sm g-margin-b-30--xs" style="color: black;">Client Testimonial </h3>
    <div class="row mt-5 mb-5">
      <div class="col-lg-10 offset-lg-1">
        <div class="video-frame">
          <iframe class="w-100 projectDetailsVideo" src="https://www.youtube.com/embed/0F9NViANva8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="">
          </iframe>
        </div>
      </div>
    </div>
  </div>
</div> -->
<!-- Accordion -->
<section class="mt-5 mb-5 g-bg-color--primary1 secpadding">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h2 class="g-font-size-32--xs g-font-size-36--md g-text-center--xs g-margin-b-80--xs g-color--white-opacity1">
          What are the <br> Frequently Asked Questions?
        </h2>
      </div>
    </div>
   <div class="row">
    <div class="col-md-6">
        <div class="accordion" id="accordionLeft">
            @foreach ($faqs as $index => $faq)
                @if ($index < count($faqs) / 2)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse{{ $index }}" aria-expanded="false"
                                    aria-controls="collapse{{ $index }}">
                                {{ $faq->question }}
                            </button>
                        </h2>
                        <div id="collapse{{ $index }}"
                             class="accordion-collapse collapse"
                             data-bs-parent="#accordionLeft">
                            <div class="accordion-body">
                                <strong>{{ $faq->answer }}</strong>
                                <!-- You can display other FAQ details here -->
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
    <div class="col-md-6">
        <div class="accordion" id="accordionRight">
            @foreach ($faqs as $index => $faq)
                @if ($index >= count($faqs) / 2)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapse{{ $index }}" aria-expanded="false"
                                    aria-controls="collapse{{ $index }}">
                                {{ $faq->question }}
                            </button>
                        </h2>
                        <div id="collapse{{ $index }}"
                             class="accordion-collapse collapse"
                             data-bs-parent="#accordionRight">
                            <div class="accordion-body">
                                <strong>{{ $faq->answer }}</strong>
                                <!-- You can display other FAQ details here -->
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>

  </div>
    </div>
  </div>
</section>
        <div class="text-center mb-5">
                          <a href="{{ url()->previous() }}"
                              class="text-uppercase s-btn s-btn--md s-btn--black-brd g-radius--50 text-white mt-5">Back </a>
                      </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>

<!-- Your script -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var copyIcon = document.getElementById('copyIcon');

        // Initialize Clipboard
        var clipboard = new ClipboardJS(copyIcon, {
            text: function () {
                return copyIcon.textContent.trim();
            }
        });

        // Show a tooltip when the copy is successful
        clipboard.on('success', function (e) {
            copyIcon.setAttribute('data-bs-toggle', 'tooltip');
            copyIcon.setAttribute('data-bs-placement', 'bottom');
            copyIcon.setAttribute('title', 'Location Url Copied!');
            $(copyIcon).tooltip('show');
            setTimeout(function () {
                $(copyIcon).tooltip('dispose');
            }, 1000);
            e.clearSelection();
        });
    });
</script>


<!-- End Accordion -->
@include('htmlpage.frontent.layout.footer')