@include('htmlpage.frontent.layout.app')
<div class="theme_slider bg-black p-0">
    <main class="wrapper">
        <section class="bg-dark-200 p-0 text-center pdetails" id="funfacts"
            style="
        background-image: url('{{ asset('storage/' . $project->image_path) }}');
        background-repeat: repeat;
        background-size: cover;
        background-position: left center;
        width: 100%;
        height: 100%;
        transition: all 0.5s ease-in-out;">
            <div class="d-flex justify-content-end secpadding">
                <div class="bg-dark-100 p-60  pb-100 prodetails" data-aos="fade-left" data-aos-duration="1000">
                    <div class="section-header pt-50">

                        <div class="meta m-0">
                            <div class="text-olive text-uppercase">{{ $project->categoryModel->category }}</div>

                        </div>
                        <div class="has_line_lg"></div>
                        <h1 class="text-white border-line pb-4 pt-100 text-uppercase">{{ $project->project_name }}</h1>
                    </div>
                    <div class="details_link">
                        <a href="/portfolio" class="text-center">
                            <span class="link_text">{{ $project->client_name }}</span>
                            <span class="link_icon">
                                <span class="line"></span>
                                <span class="circle"></span>
                                <span class="dot"></span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
       
        <section class="project-details bg-dark-200 pt-0" id="funfacts">
            <div class="project-details_inner">
                <div class="post_content">
                    <div class="fulltext">
                        <figure class="block-gallery">
                            <ul class="blocks-gallery-grid">
                                @foreach ($galleries as $gallery)
                                    <li class="blocks-gallery-item">
                                        <figure>
                                            <img src="{{ asset('storage/' . $gallery->image_path) }}"
                                                alt="{{ $gallery->alt }}" class="block-image">
                                            <div class="popup-btn"><a
                                                    href="{{ asset('storage/' . $gallery->image_path) }}"
                                                    data-fancybox="images"><i class="bi bi-plus"></i></a></div>
                                        </figure>
                                    </li>
                                @endforeach
                            </ul>
                        </figure>
                    </div>
                </div>
            </div>
        </section>
         <section class="project-details bg-dark-200 pt-0">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-md-4">
                        <div class="sidebar">
                            <div class="project-information">
                                <h6 class="widget-title">
                                    Client Testimony
                                    <span class="title-line"></span>
                                </h6>
                                <p>Client : {{ $project->client_name }}</p>
                                <div class="testimonials-section">
                                    @if ($testimonials->isNotEmpty())
                                        @foreach ($testimonials as $testimonial)
                                            <div class="testimonial-card">
                                                @if ($testimonial->type == 'text')
                                                    <p>Testimonial: {{ $testimonial->text_content }}</p>
                                                @elseif($testimonial->type == 'video')
                                                    @php
                                                        // Check if the video URL is a YouTube URL
                                                        $isYouTube = preg_match(
                                                            '/youtube\.com\/watch\?v=([^&]+)/',
                                                            $testimonial->video_url,
                                                            $matches,
                                                        );
                                                        $videoId = $isYouTube ? $matches[1] : null;
                                                        $isLocalVideo = !$isYouTube && !empty($testimonial->video_url);
                                                    @endphp

                                                    @if ($isYouTube)
                                                        <iframe width="320" height="240"
                                                            src="https://www.youtube.com/embed/{{ $videoId }}"
                                                            frameborder="0" allowfullscreen></iframe>
                                                    @elseif ($isLocalVideo)
                                                        <video width="320" height="240" autoplay muted loop
                                                            controls>
                                                            <source
                                                                src="{{ asset('storage/videos/' . $testimonial->video_url) }}"
                                                                type="video/mp4">
                                                            Your browser does not support the video tag.
                                                        </video>
                                                    @else
                                                        <p>Invalid video URL</p>
                                                    @endif
                                                @endif
                                            </div>
                                        @endforeach
                                    @else
                                        <p>No testimonials available for this project.</p>
                                    @endif
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-8 col-md-8">
                        <div class="project-details_inner">
                            <div class="post_content">
                                <div class="post-header">
                                    <h3 class="post-title">{{ $project->project_name }}</h3>
                                </div>
                                <div class="fulltext">
                                    <p>
                                        {{ $project->content }}
                                    </p>

                                    <h6 class="widget-title">
                                        Our Strategies
                                        <span class="title-line"></span>
                                    </h6>
                                    {!! $project->strategies !!}
                                    <div class="post-footer">
                                        <nav class="d-flex align-items-center justify-content-between">
                                            <div class="details_link l-dir pagination-previous">
                                                @if ($previousProject)
                                                    <a
                                                        href=" {{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($previousProject->url)))]) }}">

                                                        <span class="link_icon">
                                                            <span class="line"></span>
                                                            <span class="circle"></span>
                                                            <span class="dot"></span>
                                                        </span>

                                                    </a>
                                                @else
                                                    <span>No previous Project</span>
                                                @endif
                                            </div>
                                            <div class="page-all">
                                                <a href="#"><i class="bi bi-grid"></i></a>
                                            </div>
                                            <div class="details_link r-dir pagination-next">
                                                @if ($nextProject)
                                                    <a
                                                        href=" {{ route('projectdetails', ['url' => urlencode(str_replace(' ', '-', strtolower($nextProject->url)))]) }}">

                                                        <span class="link_icon">
                                                            <span class="line"></span>
                                                            <span class="circle"></span>
                                                            <span class="dot"></span>
                                                        </span>
                                                    </a>
                                                @else
                                                    <span>No next Project</span>
                                                @endif
                                            </div>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="career_us bg-dark-200 p-0 mtp-0" id="funfacts">
            <div class="d-flex justify-content-end">
                <div class="bg-dark-100 p-60 careerus pt-100 pb-100" data-aos="fade-left" data-aos-duration="1000">
                    <div class="section-header">
                        <h3>Let’s Bring Your Vision to Life – Get in Touch with Us Today!</h3>
                    </div>
                    <div class="home_contact">
                        <form id="contactForm" action="{{ route('save.projectenquiry') }}" method="POST">
                            @csrf
                            <input class="form-control form-control-lg" name="project" id="project" type="hidden"
                                value="{{ $project->id }}">
                            <input class="form-control form-control-lg" name="name" id="name" type="text"
                                placeholder="Your Name*" required aria-label=".form-control-lg example">
                            <input class="form-control form-control-lg" name="phone" id="phone" type="tel"
                                placeholder="Your Phone No" aria-label=".form-control-lg example" pattern="[0-9]{10}"
                                maxlength="15" minlength="10" required>

                            <div class="d-flex">
                                <input class="form-control form-control-lg" name="email" id="email"
                                    type="email" placeholder="Your Email*" required
                                    aria-label=".form-control-lg example">
                                <button type="button" id="sendOtp">Get OTP</button>
                            </div>
                            <input class="form-control form-control-lg mt-3" name="otp" id="otp"
                                type="text" placeholder="Enter OTP  &nbsp;( Check Your Email )"
                                aria-label=".form-control-lg example" disabled>
                            <div class="btn_group mt-3">
                                <button type="submit" id="submitBtn" class="btn olive" disabled>Submit</button>
                            </div>
                            <!-- Notification Area -->
                            <div id="notification" class="mt-3"></div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        {{-- FAQ --}}

        <section class="blog pt-lg bg-dark-100 accordiansection">
            <div class="large_font">
                <h2 class="floating_element text-dark-200 d-flex justify-content-center">FAQ</h2>
            </div>
            <div class="container mt-5">
                <div class="section-header text-center has_line">
                    <h2 class="text-white">What are the Frequently Asked Questions?</h2>
                </div>
                <div class="row">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="accordion pt-50" id="accordionExample">
                            @foreach ($faqs as $index => $faq)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ $index }}">
                                        <button class="accordion-button {{ $index !== 0 ? 'collapsed' : '' }}"
                                            type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ $index }}"
                                            aria-expanded="{{ $index === 0 ? 'true' : 'false' }}"
                                            aria-controls="collapse{{ $index }}">
                                            {{ $faq['question'] }}
                                        </button>
                                    </h2>
                                    <div id="collapse{{ $index }}"
                                        class="accordion-collapse collapse {{ $index === 0 ? 'show' : '' }}"
                                        aria-labelledby="heading{{ $index }}"
                                        data-bs-parent="#accordionExample">
                                        <div class="accordion-body">
                                            {{ $faq['answer'] }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </div>
        </section>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            $('#sendOtp').on('click', function() {
                var email = $('#email').val();
                if (email) {
                    $.ajax({
                        url: "{{ route('send.otp') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            email: email
                        },
                        success: function(response) {
                            $('#notification').html('<div class="alert alert-success">' + response.message +
                                '</div>');
                            $('#otp').removeAttr('disabled');
                        },
                        error: function(xhr) {
                            $('#notification').html('<div class="alert alert-danger">' + xhr.responseJSON
                                .message + '</div>');
                        }
                    });
                } else {
                    $('#notification').html('<div class="alert alert-warning">Please enter an email</div>');
                }
            });

            $('#otp').on('input', function() {
                var otp = $(this).val();
                var email = $('#email').val();
                if (otp.length == 6) {
                    $.ajax({
                        url: "{{ route('verify.otp') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            otp: otp,
                            email: email
                        },
                        success: function(response) {
                            $('#notification').html('<div class="alert alert-success">' + response.message +
                                '</div>');
                            $('#submitBtn').removeAttr('disabled');
                        },
                        error: function(xhr) {
                            $('#notification').html('<div class="alert alert-danger">' + xhr.responseJSON
                                .message + '</div>');
                        }
                    });
                }
            });
        </script>
    </main>

    @include('htmlpage.frontent.layout.footer')
    <!-- Fancybox -->
    <script src="{{ asset('plugins/fancybox/jquery.fancybox.min.js') }}"></script>
    <script src="{{ asset('plugins/fancybox/fancybox-init.js') }}"></script>