@php
    use App\Models\Profile;
    use App\Models\Contact;
    $profile = Profile::first();
    $contact = Contact::first();
@endphp

<!-- ======= Footer ======= -->
<footer id="footer" class="footer mh-footer">

    <div class=" mh-footer-top">
    <div class="container">
        <div class="row ">

            {{-- About / Profile --}}
            <div class="col-lg-6 col-md-12 ">
                <div class="mh-footer-about">

                @if($profile)
                    <a href="/en" class="mh-footer-logo d-flex align-items-center mb-3">
                        <span class="mh-footer-brand fw-bold">{{ $profile->name }}</span>
                    </a>
                    <p class="mh-footer-text text-justify text-break">
                        {{ $profile->short_bio }}
                    </p>
                @else
                    <p class="mh-footer-text">No profile information available.</p>
                @endif

                @if($contact)
                    <div class="mh-footer-social d-flex mt-4">
                        <a href="https://www.twitter.com/{{ $contact->twitter ?? '' }}" target="_blank" rel="noopener noreferrer" class="mh-footer-social-link">
                            <i class="bi bi-twitter"></i>
                        </a>
                        <a href="https://www.facebook.com/{{ $contact->facebook ?? '' }}" target="_blank" rel="noopener noreferrer" class="mh-footer-social-link">
                            <i class="bi bi-facebook"></i>
                        </a>
                        <a href="https://www.instagram.com/{{ $contact->instagram ?? '' }}" target="_blank" rel="noopener noreferrer" class="mh-footer-social-link">
                            <i class="bi bi-instagram"></i>
                        </a>
                        <a href="https://www.linkedin.com/in/{{ $contact->linkedin ?? '' }}" target="_blank" rel="noopener noreferrer" class="mh-footer-social-link">
                            <i class="bi bi-linkedin"></i>
                        </a>
                    </div>
                @endif
            </div>
            </div>

            {{-- Contact --}}
            <div class="col-lg-6 col-md-12 ">
            <div class="mh-footer-contact text-md-end text-center">

                <h4 class="mh-footer-title mb-3">Contact Us</h4>

                @if($contact)
                    <p class="mh-footer-contact-line text-break mb-2">
                        <i class="bi bi-geo-alt me-1"></i>
                        {{ $contact->address ?? 'No Address Available' }}
                    </p>
                    <p class="mh-footer-contact-line text-break mb-1">
                        <i class="bi bi-telephone me-1"></i>
                        <strong>Phone:</strong> {{ $contact->phone ?? 'No Phone Number Available' }}
                    </p>
                    <p class="mh-footer-contact-line text-break">
                        <i class="bi bi-envelope me-1"></i>
                        <strong>Email:</strong> {{ $contact->gmail ?? 'No Email Available' }}
                    </p>
                @else
                    <p class="mh-footer-contact-line">No contact information available.</p>
                @endif
            </div>
            </div>

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

    <div class="mh-footer-bottom">
        <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-2 text-center text-md-start">

            <p class="mb-0 mh-footer-copy">
                &copy; <span>Copyright</span>
                <strong class="px-1">
                    @if($profile)
                        {{ $profile->name }}
                    @else
                        Hoope
                    @endif
                </strong>
                <span>All Rights Reserved</span>
            </p>

            <div class="mh-footer-credits">
                <span>Developed By:</span>
                <a href="https://www.ulanish.dev" target="_blank" class="mh-footer-dev-link">
                    UlanishDev
                </a>
            </div>

        </div>
    </div>

</footer>

<!-- Scroll Top Button -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center">
    <i class="bi bi-arrow-up-short"></i>
</a>

<!-- Preloader -->
<div id="preloader">
    <div></div><div></div><div></div><div></div>
</div>

<!-- Vendor JS Files -->
<script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('assets/vendor/glightbox/js/glightbox.min.js') }}"></script>
<script src="{{ asset('assets/vendor/purecounter/purecounter_vanilla.js') }}"></script>
<script src="{{ asset('assets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
<script src="{{ asset('assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
<script src="{{ asset('assets/vendor/aos/aos.js') }}"></script>
<script src="{{ asset('assets/vendor/php-email-form/validate.js') }}"></script>
<script src="{{ asset('assets/js/main.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const preloader = document.getElementById('preloader');
        if (preloader) {
            preloader.style.display = 'none';
        }
    });
</script>

</body>
</html>