<!DOCTYPE html>
<html class="scroll-smooth" lang="{{ str_replace('_', '-', app()->getLocale()) }}"
      dir="{{(in_array(app()->getLocale(), ['fa','ar'])) ? 'rtl' : 'ltr'}}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @include('core.header')
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        <link rel="stylesheet" href="{{theme('/assets/css/main.css')}}">
        <link rel="stylesheet" href="{{theme('/assets/packages/plyrjs/css/cdn.plyr.io_3.7.8_plyr.css')}}"/>
        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" href="{{theme('/assets/packages/swiper/css/swiper-bundle.min.css')}}" />
        <script src="{{theme('/assets/packages/swiper/js/swiper-bundle.min.js')}}"></script>
        <script src="{{theme('/assets/packages/plyrjs/js/hls.min.js')}}"></script>
        <script src="{{theme('/assets/packages/plyrjs/js/plyr.polyfilled.js')}}"></script>
        <link rel="stylesheet" href="{{theme('/assets/index-c5309de5.css')}}">
{{--        <script>--}}
{{--            document.addEventListener('alpine:init', () => {--}}
{{--                window.Alpine.store('mobile_menu', {--}}
{{--                    mobile_menu: false,--}}
{{--                    toggle() {--}}
{{--                        this.mobile_menu = ! this.mobile_menu;--}}
{{--                    },--}}
{{--                    close()--}}
{{--                    {--}}
{{--                        this.mobile_menu = false;--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('popup', {--}}
{{--                    open: false,--}}
{{--                    show() {--}}
{{--                        this.open = true--}}
{{--                    },--}}
{{--                    hidden() {--}}
{{--                        setTimeout(() => {--}}
{{--                            this.open = false--}}
{{--                        }, 300);--}}
{{--                    },--}}
{{--                    hidden_fast() {--}}
{{--                        this.open = false--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('tabs', {--}}
{{--                    active_tab: false,--}}
{{--                    select_tab(tab) {--}}
{{--                        this.active_tab = tab;--}}
{{--                        return true;--}}
{{--                    },--}}
{{--                    is_active(tab)--}}
{{--                    {--}}
{{--                        return this.active_tab === tab;--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('sticky', {--}}
{{--                    hand_sticky(el, styles) {--}}
{{--                        styles = styles.split(/\s+/);--}}
{{--                        const newEl = document.createElement("div");--}}
{{--                        newEl.classList.add("myObserver");--}}
{{--                        insertBefore(newEl, el);--}}
{{--                        function insertBefore(el, referenceNode) {--}}
{{--                            referenceNode.parentNode.insertBefore(el, referenceNode);--}}
{{--                        }--}}

{{--                        const observer = new IntersectionObserver(--}}
{{--                            function (entries) {--}}
{{--                                if (entries[0].intersectionRatio === 0) {--}}
{{--                                    styles.forEach(style => {--}}
{{--                                        el.classList.add(style);--}}
{{--                                    });--}}
{{--                                    //newEl.classList.add("sticky-observer");--}}
{{--                                } else if (entries[0].intersectionRatio === 1) {--}}
{{--                                    // el.classList.remove(styles);--}}
{{--                                    styles.forEach(style => {--}}
{{--                                        el.classList.remove(style);--}}
{{--                                    });--}}
{{--                                    //newEl.classList.remove("sticky-observer");--}}
{{--                                }--}}
{{--                            },--}}
{{--                            {threshold: [0, 1]}--}}
{{--                        );--}}

{{--                        observer.observe(document.querySelector(".myObserver"));--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('more_btn', {--}}
{{--                    more_btn: false,--}}
{{--                    more_text_open() {--}}
{{--                        this.more_btn = true--}}
{{--                    },--}}
{{--                    more_text_close()--}}
{{--                    {--}}
{{--                        return this.more_btn = false--}}
{{--                    }--}}
{{--                })--}}

{{--                window.Alpine.store('accordion', {--}}
{{--                    accordion_active: 0,--}}
{{--                    collapseHandler(accordion) {--}}
{{--                        this.accordion_active = accordion;--}}
{{--                    },--}}
{{--                    isActive(accordion)--}}
{{--                    {--}}
{{--                        return this.accordion_active === accordion;--}}
{{--                    },--}}
{{--                })--}}
{{--            })--}}
{{--        </script>--}}

    </head>
    <body class="bg-gray-100" x-data="{}">
        {!! theme_option('custom_html') !!}

        <main>
            {{ $slot }}
        </main>
        
        <div class="w-full relative">
          <div class="absolute lg:w-3/5 md:w-[400px] w-3/5 top-0  left-0 rounded-tr-[140px] rounded-bl-[140px]  before:w-full before:bg-gray-300 h-full 
          bg-gradient-to-b from-white to-gray-100
          z-[-1]"></div>
        
          <div class="container mx-auto p-4">
            <div class="flex flex-wrap lg:flex-nowrap md:flex-nowrap pt-5 justify-center items-center">
              <a href="{{url('/logo')}}" class="md:p-10 md:pb-0 p-0">
                <img src="{{theme('img/icons/ali-mola.gif')}}" class="w-[400px] h-auto -mt-4" alt="">
                <span class="w-full text-center block m-auto p-4 text-sm">شناسنامه برند</span>
              </a>
              <div class="px-4 z-20 ">
                <div class="flex">
                    <h3 class="md:text-2xl text-xl text-center w-full dark:text-white text-gray-700 mb-4 font-bold mr-3">
                        <img src="{{theme('/img/ghadirtv-logo.png')}}" class="m-auto" width="150px" alt="">
                    </h3>
                </div>
                <div class="w-full block text-gray-500 text-lg text-center leading-8">
                  <nav class="border-gray-200 m-auto">
                    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">              
                      <div class="block md:w-auto m-auto">
                        <ul class="font-small flex flex-col p-4 md:p-0 mt-4  rounded-lg  md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0">
                          <li>
                            <a href="{{url('/قوانین-و-مقررات')}}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#007f3f] md:p-0">مقررات</a>
                          </li>
                          <li>
                            <a href="{{url('/درباره-ما')}}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#007f3f] md:p-0">درباره ما</a>
                          </li>
                          <li>
                            <a href="{{url('/تماس-با-ما')}}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#007f3f] md:p-0">تماس با ما</a>
                          </li>
                          <li>
                            <a href="{{url('/شرایط-استفاده')}}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#007f3f] md:p-0">شرایط استفاده</a>
                          </li>
                          <li>
                            <a href="{{url('/سیاست-ها')}}" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-[#007f3f] md:p-0">سیاست‌ها</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </nav>
                </div>
                <div class="border-t-2 pt-3 z-0 flex justify-center gap-2">
                  <a href="https://sapra.ir" class="w-16 h-20 overflow-hidden rounded-md bg-gray-200 flex items-center justify-center">
                    <img src="{{theme('img/sapra-logo.png')}}" class="w-12 m-auto">
                  </a>
                  <a href="https://e.satra.ir/validation" class="w-16 h-20 overflow-hidden rounded-md bg-gray-200 flex items-center justify-center">
                    <img src="{{theme('img/logo_satra.png')}}" class="w-12 m-auto">
                  </a>
                  <a href="https://mediacast.ir" class="w-16 h-20 overflow-hidden rounded-md bg-gray-200 flex items-center justify-center">
                    <img src="{{theme('img/mediacast.png')}}" class="w-12 m-auto">
                  </a>
                </div>
        
              </div>
        
            </div>
          </div>
        </div>

        <footer class="w-full bg-white relative h-auto overflow-hidden">
          <div class="w-full bg-white border-t border-gray-200">
              <div class="container mx-auto">
                  <div class="w-full block py-4">
                      <p class="text-gray-500 text-center">
                        تمامی حقوق محفوظ و متعلق به <a href="https://ghadirkhom.com" class="text-[#007f3f] cursor-pointer"> موسسه سروش بیداری غدیرخم</a> می باشد.  
                      </p>
                  </div>
              </div>
          </div>
        </footer>

        @include('core.footer')

        <script src="{{theme('/assets/index-10f00ba2.js')}}" data-navigate-once="true"></script>

        <script>
            window.addEventListener('scrollToTop', event => {
                window.scrollTo({ top: 15, left: 15, behaviour: 'smooth' })
            })

            document.addEventListener('livewire:navigated', () => {
                const event = new CustomEvent("scrollToTop", {});
                document.dispatchEvent(event);
            })
        </script>

    </body>
</html>
