@include('patient.layout.header')
<!-- //wrapper -->
<div class="wrapper" id="wrapper">
    <section id="home" class="home p-70" style="background-image:url(landing/images/home-bg.png)">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-12">
                    <div class="content_home">
                        <h4 id="firstQuestion"></h4>
                        <p id="firstAnsewer"></p>
                        {{-- <!--
                        @php
                            $MobileNumber = session('mob_no', '');
                            $encryptedMobileNumber = $MobileNumber ? Crypt::encryptString($MobileNumber) : '';
                            $doctorName = session('doctor_name', '');
                            $encryptedDoctorName = $doctorName ? Crypt::encryptString($doctorName) : '';
                        @endphp
                        <input type="hidden" id="mobile_number" value="{{ $encryptedMobileNumber }}">
                        @if (empty($MobileNumber))
                        <a href="{{ route('patientlogin', ['doctor_name' => $encryptedDoctorName]) }}" id="dosageReminderButton" class="btn btn-primary">
                            <img src="{{ asset('landing/images/white-dosage-reminder.png') }}">Dosage Reminder</a>
                        @else
                        <a href="{{ route('patientDoseReminder') }}" id="dosageReminderButton" class="btn btn-primary"
                            style="display: none;"><img
                            src="{{ asset('landing/images/white-dosage-reminder.png') }}">Dosage Reminder</a>
                        @endif --> --}}

                        @php
                            $MobileNumber = session('mob_no', '');
                            $encryptedMobileNumber = $MobileNumber ? Crypt::encryptString($MobileNumber) : '';
                            $doctorName = session('doctor_name', '');
                            $encryptedDoctorName = $doctorName ? Crypt::encryptString($doctorName) : '';
                        @endphp

                        <input type="hidden" id="mobile_number" value="{{ $encryptedMobileNumber }}">

                        <a href="{{ empty($MobileNumber) ? route('patientlogin', ['doctor_name' => $encryptedDoctorName]) : route('patientDoseReminder') }}"
                            id="dosageReminderButton" class="btn btn-primary">
                            <img src="{{ asset('landing/images/white-dosage-reminder.png') }}">Dosage Reminder
                        </a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 ms-auto">
                    <!-- <div class="content_home_img">
                  {{-- <img src="{{ asset('landing/images/home_img.png') }}"> --}}
              </div> -->
                </div>
            </div>
        </div>
    </section>
    <section id="about" class="about p-70" style="background-image:url(landing/images/about-bg.png)">
        <div class="container-fulid">
            <div class="row m-0">
                <div class="col-lg-5 col-md-6 col-sm-12 me-auto ps-0">
                    <div class="content_about_img">
                        <img src="{{ asset('landing/images/about.png') }}">
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12 m-auto">
                    <div class="content_home">
                        <h4>Myasthenia Gravis</h4>
                        <p>Myasthenia gravis affects how your nerves communicate with your muscles. It leads to muscle
                            weakness that worsens throughout the day and with activity. Drooping eyelids and/or double
                            vision are often the first sign. You may find it difficult to stand, lift objects and speak
                            or swallow.</p>
                        <p>The onset of the disorder may be sudden. Symptoms may not be immediately recognized as
                            myasthenia gravis. The degree of muscle weakness involved varies among individuals being
                            diagnosed by Myasthenia Gravis</p>
                        <p>There’s no cure for myasthenia gravis. However, effective treatment is available to help
                            manage your symptoms and you can still live a healthy life despite being diagnosed with
                            Myasthenia Gravis</p>

                    </div>
                </div>

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

    <section id="doctor_export" class="doctor_export p-70" style="background-image:url(landing/images/dose-bg.png)">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 col-md-8 col-sm-12 m-auto">
                    <div class="middle_name">
                        <h2>Expert Speak</h2>
                    </div>
                </div>
            </div>
            <div class="row">

                {{-- <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-auto">
                    <div class="video_ex">
                        <a href="{{ asset('landing/images/video.mp4') }}" class="video_img" data-fancybox>
                            <img src="{{ asset('landing/images/speak-img.png') }}" class="vid_img">
                            <div class="play_icon">
                                <img src="{{ asset('landing/images/play_icon.png') }}">
                            </div>
                        </a> --}}
                {{-- <div class="video_content">
                            <h6>Integer vehicula arcu vel lectus pretium, vel interdum urna tempus.</h6>
                            <p>Duis ac nisl nec lacus bibendum auctor nec et tellus.</p>
                        </div> --}}
                {{-- </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-auto">
                    <div class="video_ex">
                        <a href="{{ asset('landing/images/video.mp4') }}" class="video_img" data-fancybox>
                            <img src="{{ asset('landing/images/speak-img.png') }}" class="vid_img">
                            <div class="play_icon">
                                <img src="{{ asset('landing/images/play_icon.png') }}">
                            </div>
                        </a> --}}
                {{-- <div class="video_content">
                            <h6>Integer vehicula arcu vel lectus pretium, vel interdum urna tempus.</h6>
                            <p>Duis ac nisl nec lacus bibendum auctor nec et tellus.</p>
                        </div> --}}
                {{-- </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-auto">
                    <div class="video_ex">
                        <a href="{{ asset('landing/images/video.mp4') }}" class="video_img" data-fancybox>
                            <img src="{{ asset('landing/images/speak-img.png') }}" class="vid_img">
                            <div class="play_icon">
                                <img src="{{ asset('landing/images/play_icon.png') }}">
                            </div>
                        </a> --}}
                {{-- <div class="video_content">
                            <h6>Integer vehicula arcu vel lectus pretium, vel interdum urna tempus.</h6>
                            <p>Duis ac nisl nec lacus bibendum auctor nec et tellus.</p>
                        </div> --}}
                {{-- </div>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-auto">
                    <div class="video_ex">
                        <a href="{{ asset('landing/images/video.mp4') }}" class="video_img" data-fancybox>
                            <img src="{{ asset('landing/images/speak-img.png') }}" class="vid_img">
                            <div class="play_icon">
                                <img src="{{ asset('landing/images/play_icon.png') }}">
                            </div>
                        </a> --}}
                {{-- <div class="video_content">
                            <h6>Integer vehicula arcu vel lectus pretium, vel interdum urna tempus.</h6>
                            <p>Duis ac nisl nec lacus bibendum auctor nec et tellus.</p>
                        </div> --}}
                {{-- </div>
                </div> --}}

                @foreach ($expertSpeaks as $expert)
                    <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-auto">
                        <div class="video_ex">
                            <a href="{{ asset('assets/expertspeak/' . $expert->video_url) }}" class="video_img"
                                data-fancybox>
                                <img src="{{ asset('assets/expertspeak/' . $expert->thumbnail) }}" class="vid_img">
                                <div class="play_icon">
                                    <img src="{{ asset('landing/images/play_icon.png') }}">
                                </div>
                            </a>
                            {{-- Optional: Show title or description --}}
                            {{-- <div class="video_content">
                    <h6>{{ $expert->title }}</h6>
                    <p>{{ $expert->description }}</p>
                </div> --}}
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <section id="patient_education" class="patient_education p-70"
        style="background-image:url(landing/images/doctor-export-bg.png)">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 col-md-8 col-sm-12 m-auto">
                    <div class="middle_name">
                        <h2>Patient Education</h2>
                        <!-- <p>Fusce ut ornare nulla. Nulla facilisi. Donec lacus nulla, maximus quis enim a, pulvinar hendrerit ipsum.</p> -->
                    </div>
                </div>
            </div>
            <div class="row pb-3">

            </div>
            <div class="row">

                <div class="col-lg-3 col-md-6 col-sm-6 col-12 m-auto">
                    <div class="video_ex pdf_ex" id="lang_vise_pdf">
                        <!-- {{-- <a href="{{ asset('landing/pdf/MG Poster with QR code - Artwork for Digital_English.PDF') }}" --}} -->
                        <a class="video_img" data-type="iframe" data-fancybox>
                            <img src="{{ asset('landing/images/pdf.png') }}" class="pdf_img">

                        </a>
                        <span class="fixed_top pdf_bg">PDF</span>
                    </div>
                </div>

            </div>
    </section>

    <section id="faq" class="faq p-70" style="background-image:url(landing/images/about-bg.png)">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 col-md-8 col-sm-12 m-auto">
                    <div class="middle_name">
                        <h2>FAQs</h2>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="acc">
                        @for ($i = 1; $i <= 6; $i++)
                            <div class="acc__card">
                                <div class="acc__title" id="faqs_q{{ $i }}"></div>
                                <div class="acc__panel" id="faqs_ans{{ $i }}"></div>
                            </div>
                        @endfor
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="acc">
                        @for ($i = 7; $i <= 12; $i++)
                            <div class="acc__card">
                                <div class="acc__title" id="faqs_q{{ $i }}"></div>
                                <div class="acc__panel" id="faqs_ans{{ $i }}"></div>
                            </div>
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<!--  wrapper end  -->


@include('patient.layout.footer')


<script>
    document.addEventListener('DOMContentLoaded', function() {
        var mobileNumberElement = document.getElementById('mobile_number');
        var mobileNumber = mobileNumberElement ? mobileNumberElement.value : sessionStorage.getItem(
            'mobile_number');

        if (mobileNumber) {
            sessionStorage.setItem('mobile_number', mobileNumber);

            const url = new URL(window.location.href);
            url.searchParams.delete('mob_no');
            window.history.replaceState({}, document.title, url);
        }

        // if (sessionStorage.getItem('mobile_number')) {
        //     document.getElementById('dosageReminderButton').style.display = 'inline-block';
        // } else {
        //     document.getElementById('dosageReminderButton').style.display = 'none';
        // }

        var registerBtn = document.getElementById('registerBtn');
        if (registerBtn) {
            registerBtn.addEventListener('click', function() {
                sessionStorage.removeItem('mobile_number');
            });
        }
        window.addEventListener('beforeunload', function(event) {
            if (!event.persisted && (window.performance && window.performance.navigation.type !== 1)) {
                sessionStorage.removeItem('mobile_number');
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        function loadFirstQuestion(languageId) {
            $.ajax({
                url: "{{ route('getFirstQuestion') }}",
                type: 'POST',
                data: {
                    id: languageId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#firstQuestion').text(response.question);
                        $('#firstAnsewer').text(response.answer);
                    } else {
                        $('#firstQuestion').text('No question available');
                        $('#firstAnsewer').text('No answer available');
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        }

        var defaultLanguageId = $('#language').val();
        if (defaultLanguageId) {
            loadFirstQuestion(defaultLanguageId);
        }

        $('#language').change(function() {
            var languageId = $(this).val();
            loadFirstQuestion(languageId);
        });
    });
</script>


<script>
    $(document).ready(function() {
        function loadFAQs(languageId) {
            $.ajax({
                url: "{{ route('getFAQs') }}",
                type: 'POST',
                data: {
                    id: languageId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('.acc__card').each(function() {
                            $(this).find('.acc__title').text('');
                            $(this).find('.acc__panel').text('');
                        });

                        response.faqs.forEach(function(faq) {
                            var index = faq.faqs_no;
                            if (index >= 1 && index <= 12) {
                                var questionId = '#faqs_q' + index;
                                var answerId = '#faqs_ans' + index;

                                $(questionId).text(faq.question);
                                $(answerId).text(faq.answer);
                            }
                        });
                    } else {
                        console.log('No FAQs available for the selected language');
                    }
                },
                error: function(error) {
                    console.log('Error:', error);
                }
            });
        }


        $('#language').change(function() {
            var languageId = $(this).val();
            loadFAQs(languageId);
        });

        var defaultLanguageId = $('#language').val();
        if (defaultLanguageId) {
            loadFAQs(defaultLanguageId);
        }
    });
</script>


<script>
    $(document).ready(function() {
        function updatePdfLink(languageId) {
            $.ajax({
                url: "{{ route('getPatientEducationData') }}",
                type: 'POST',
                data: {
                    id: languageId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        $('#lang_vise_pdf a').attr('href', response.pdf_path);
                    } else {
                        console.log(
                            'No patient education data available for the selected language');
                    }
                },
                error: function(error) {
                    console.log('Error in Patient Education Data request:', error);
                }
            });
        }


        $('#language').change(function() {
            var languageId = $(this).val();
            updatePdfLink(languageId);
        });

        var defaultLanguageId = $('#language').val();

        if (defaultLanguageId) {
            updatePdfLink(defaultLanguageId);
        }

    });
</script>