@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;
            padding-top: 140px;
        }

        .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;
            padding-top: 50%;
        }

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

@endsection

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

        btn.addEventListener('click', () => {
            modal.style.display = 'flex';
            backdrop.style.display = 'block';
            document.body.style.overflowY = 'hidden';
        });

        backdrop.addEventListener('click', () => {
            modal.style.display = 'none';
            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">
                                <div class="h_iframe-aparat_embed_frame">

                                    <iframe src="https://www.aparat.com/video/video/embed/videohash/latjw7z/vt/frame"
                                            allowFullScreen="true" webkitallowfullscreen="true"
                                            mozallowfullscreen="true">
                                    </iframe>
                                </div>

                                <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->description!!}
                            </div>
                        </div>

                        <div class="backdrop"></div>
                        <div class="grid-item fashion mt-3 item-grid">
                            <button type="button" class="modal-btn main-modal" 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" style="box-shadow:0 0 5px #bbbbbb;padding:10px">
                                <figure class="post-media">
                                    <img src="{{ imageExist(env('ARTICLES_IMAGES_UPLOAD_PATH'),$education->image)}}"
                                         width="600"
                                         height="420" alt="blog" style="object-fit:contain">
                                </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">
                                                <a href="{{ route('home.education',['education'=>$education->id]) }}" style="font-size:26px">{{ $education->title }}</a>
                                            </h4>
                                        </a>
                                    </div>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>

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