<!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">
        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>
        <meta name="keywords" content="@yield('meta_keywords', theme_option('meta_keywords'))">
        @include('core.header')
        <meta property="og:site_name" content="{{ theme_option('meta_title') }}">
        @yield('header.custom_meta')
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="@yield('meta_title', theme_option('meta_title'))">
        <meta name="twitter:description" content="@yield('meta_description', theme_option('meta_description'))">
        <link rel="stylesheet" href="{{theme('/assets/css/main.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 type="module" src="{{asset('storage/modules/vod/v2-player/index-BCAtswbT.js')}}"></script>
        <link rel="stylesheet" href="{{asset('storage/modules/vod/v2-player/index-DBYI9Ne3.css')}}" />
        <link rel="stylesheet" href="{{ basset('/storage/assets/admin/packages/yekan-bakh/fontface.css') }}">
        <link rel="stylesheet" href="{{theme('/assets/profiles-b0bc8d51.css')}}">
        <link rel="stylesheet" href="{{theme('/assets/user-de68258e.css')}}">

    </head>
    <body class="bg-gray-100" x-data="{show_backToTop: false}" @scroll.window="show_backToTop = window.pageYOffset > 30">
        {!! 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')
        @section('modals')

        @php
            \Illuminate\Support\Facades\Vite::useBuildDirectory("storage/themes/ekmal");
        @endphp

        @vite([
            "Themes/ekmal/resources/theme.css",
            "Themes/ekmal/resources/theme.js",
        ])

        <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>
