@extends('home.layouts.index')

@section('title')
    آموزش های سایت نیکسان
@endsection

@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <style>
        .modall {
            display: none;
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            margin: 0 auto !important;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            width: 80vw !important;
            background-color: white;
            border-radius: 10px;
            animation: open_modal 0.2s forwards;
            flex-direction: column;
            max-width: none !important;
            overflow-y: scroll;
            padding: 0 !important;
        }

        .modal::-webkit-scrollbar, .modal::-webkit-scrollbar-thumb {
            display: none !important;
        }


        .sheet {
            height: fit-content;
            width: 100%;
            padding: 10px;
        }

        .modal-btn {
            width: fit-content;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background-color: transparent;
            border: none;
            ouline: none;
            width: 70px;
            height: 70px;
            cursor: pointer;
            transition: all .2s;
        }

        .modal-btn:hover {
            transform: translate(-50%, -50%) scale(1.1);
        }

        .backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw !important;
            height: 100vh !important;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 9999;
            max-width: none !important;
        }

        .db {
            display: block;
            animation: open_modal 0.2s forwards;
        }

        .df {
            display: flex;
            animation: open_modal 0.2s forwards;
        }

        .modal-show {
            display: block;
        }

        .main-modal {
            /*cursor: pointer;*/
        }

        .h_iframe-aparat_embed_frame {
            position: relative;
        }

        .title {
            font-size: 15px;
            display: flex;
            align-items: center;
            margin-top: 20px;
        }

        .title:hover {
            text-decoration: underline;
        }

        .h_iframe-aparat_embed_frame {
            position: relative;
            width: 100%;
            /*height: 0;*/
            }

        .h_iframe-aparat_embed_frame iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .item-grid{
            width:33.3333%;
            position:relative;
        }

        @keyframes open_modal {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
        
        @media only screen and (max-width: 767px) {
            .item-grid{
            width:100%;
            }
        }

    </style>
    <style>
        .post figure{
            margin:0 !important;
        }
        .main-modal{
            cursor:pointer;
        }
    </style>
@endsection

@section('script')
     <script>
        const btns = document.querySelectorAll('.main-modal');
const modals = document.querySelectorAll('.modall');
const backdrop = document.querySelector('.backdrop');

btns.forEach((btn, index) => {
  btn.addEventListener('click', () => {
    // Hide all modals first (optional, in case multiple modals are open)
    modals.forEach(modal => (modal.style.display = 'none'));

    // Show the modal corresponding to the clicked button
    modals[index].style.display = 'flex';
    backdrop.style.display = 'block';
    document.body.style.overflowY = 'hidden';
  });
});

  backdrop.addEventListener('click', () => {
    // Hide all modals
    modals.forEach(modal => {
      modal.style.display = 'none';

      // Pause any iframe video inside modal by resetting its src
      const iframe = modal.querySelector('iframe');
      if (iframe) {
        const src = iframe.src;
        iframe.src = src; // reloads iframe and stops the video
      }
    });

    // Hide backdrop
    backdrop.style.display = 'none';
    document.body.style.overflowY = 'auto';
  });

    </script>

@endsection

@section('content')
    <!-- Start of Main -->
    <main class="main">
        <!-- Start of Page Header -->
        <div class="page-header">
            <div class="container">
                <h1 class="page-title mb-0">    آموزش های سایت نیکسان  </h1>
            </div>
        </div>
        <!-- End of Page Header -->

        <!-- Start of Page Content -->
        <div class="page-content">

            <div class="container">
                <div class="row cols-lg-3 cols-md-2 mb-2">
                    @foreach($educations as $education)
                        <div class="modall">
                            <div class="sheet">
                            

                                <a href="{{ route('home.education',['education'=>$education->id]) }}"
                                   onclick="event.stopPropagation();" class="title-parent">
                                    <h4 class="post-title text-black title">
                                        <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true"
                                             width="15px" height="15px"
                                             fill="#000000">
                                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round"
                                               stroke-linejoin="round"></g>
                                            <g id="SVGRepo_iconCarrier">
                                                <path fill="#000000"
                                                      d="M12.1.6a.944.944 0 0 0 .2 1.04l1.352 1.353L10.28 6.37a.956.956 0 0 0 1.35 1.35l3.382-3.38 1.352 1.352a.944.944 0 0 0 1.04.2.958.958 0 0 0 .596-.875V.96a.964.964 0 0 0-.96-.96h-4.057a.958.958 0 0 0-.883.6z"></path>
                                                <path fill="#000000"
                                                      d="M14 11v5a2.006 2.006 0 0 1-2 2H2a2.006 2.006 0 0 1-2-2V6a2.006 2.006 0 0 1 2-2h5a1 1 0 0 1 0 2H2v10h10v-5a1 1 0 0 1 2 0z"></path>
                                            </g>
                                        </svg>
                                        &nbsp;
                                        <a href="{{ route('home.education',['education'=>$education->id]) }}">{{ $education->title }}</a>

                                    </h4>


                                </a>
                                {!! $education->embed!!}
                            </div>
                        </div>

                        <div class="backdrop"></div>
                        <div class="grid-item fashion mt-3 item-grid main-modal">
                            <!--<button type="button" class="modal-btn" style="z-index:1">-->
                            <!--    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">-->
                            <!--        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>-->
                            <!--        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>-->
                            <!--        <g id="SVGRepo_iconCarrier">-->
                            <!--            <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd"-->
                            <!--                  d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"-->
                            <!--                  fill="#ffffff"></path>-->
                            <!--            <path-->
                            <!--                d="M15.4137 13.059L10.6935 15.8458C9.93371 16.2944 9 15.7105 9 14.7868V9.21316C9 8.28947 9.93371 7.70561 10.6935 8.15419L15.4137 10.941C16.1954 11.4026 16.1954 12.5974 15.4137 13.059Z"-->
                            <!--                fill="#ffffff"></path>-->
                            <!--        </g>-->
                            <!--    </svg>-->
                            <!--</button>-->
                            <article class="post post-mask overlay-zoom br-sm">
                                <figure class="post-media">
                                    <img src="{{ imageExist(env('ARTICLES_IMAGES_UPLOAD_PATH'),$education->image)}}"
                                         width="600"
                                          alt="blog" style="object-fit:contain;border-radius:12px;overflow:hidden">
                                </figure>
                                <div class="post-details">
                                    <div class="post-details-visible">
                                        <a href="{{ route('home.education',['education'=>$education->id]) }}"
                                           onclick="event.stopPropagation();"><h4
                                                class="post-title text-white mt-3">
                                                <a href="{{ route('home.education',['education'=>$education->id]) }}" style="font-size:26px;margin-top:25px">{{ $education->title }}</a>
                                            </h4>
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
        <!-- End of Page Content -->
    </main>
    <!-- End of Main -->
@endsection