@extends('seller.layout.index')

@section('title')
    آموزش ها
@endsection

@section('style')
    <style>
        .primary-color, .primary-color::before {
            color: #7239EA !important;
            background-color: #ffffff !important;
        }

        .ki-outline {
            font-size: 18px !important;
            color: #7239EA !important;
        }

        .custom-class {
            padding: 5px 0;
            width: fit-content;
            border-bottom: 1px solid transparent;
            position: relative;
        }

        .custom-class::after {
            content: '';
            position: absolute;
            right: 0;
            bottom: 0;
            width: 0%;
            height: 1px;
            background-color: #000000;
            transition: all .25s;
        }

        .custom-class:hover::after {
            width: 100%;
            transition: all .25s;
        }

        .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;
            height: 95vh !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;
        }

        .grid-item {
            position: relative;

        }

        .modal-btn {
            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;
            color: #000000;
        }

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

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

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

        .post {
            box-shadow: 0 0 5px lightgrey;
            border-radius: 10px;
            overflow: hidden;
            background: #e5e5e5;
        }

        .post-media {
            overflow: hidden;
        }

        .post-media img {
            transition: transform .25s ease-in-out;

        }

        .post-media:hover img {
            transform: scale(1.2);
        }

        .post-details {
            padding: 0 10px;
        }

        @keyframes open_modal {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }
    </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')

    <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">

        <!--begin::Wrapper container-->
        <div class="app-container container-xxl d-flex">
            <div id="kt_app_sidebar" class="app-sidebar align-self-start" data-kt-drawer="true"
                 data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}"
                 data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'200px', '300px': '225px'}"
                 data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
                <!--begin::Sidebar secondary menu-->
                <div class="card flex-grow-1 py-4" data-kt-sticky="true" data-kt-sticky-name="app-sidebar-menu-sticky"
                     data-kt-sticky-offset="{default: false, xl: '500px'}" data-kt-sticky-width="225px"
                     data-kt-sticky-left="auto" data-kt-sticky-top="125px" data-kt-sticky-animation="false"
                     data-kt-sticky-zindex="95" style="">
                    <div class="hover-scroll-y mx-3 px-1 px-lg-2" data-kt-scroll="true"
                         data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-height="auto"
                         data-kt-scroll-dependencies="#kt_app_header, #kt_app_toolbar, #kt_app_footer"
                         data-kt-scroll-wrappers="#kt_app_main" data-kt-scroll-offset="5px" style="height: 230px;">
                        <div id="kt_app_sidebar_menu"
                             class="menu menu-sub-indention menu-rounded menu-column menu-active-bg menu-title-gray-600 menu-icon-gray-400 menu-state-primary menu-arrow-gray-500 fw-semibold fs-6"
                             data-kt-menu="true"
                             class="menu menu-sub-indention menu-rounded menu-column menu-active-bg menu-title-gray-600 menu-icon-gray-400 menu-state-primary menu-arrow-gray-500 fw-semibold fs-6">
                            <!--begin:Menu item-->
                            <div class="menu-item">
                                <!--begin:Menu content-->
                                <div class="menu-content">
                                    <!--<span class="menu-section fs-5 fw-bolder ps-1 py-1">صفحات</span>-->
                                </div>
                                <!--end:Menu content-->
                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.users_profile.show')}}" class="menu-link">
												<span class="menu-bullet">
													   <svg width="32px" 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
                                                                   d="M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z"
                                                                   stroke="#7239EA " stroke-width="1.5"
                                                                   stroke-linecap="round"
                                                                   stroke-linejoin="round"></path> <path
                                                                   d="M18.74 19.3801C16.96 21.0101 14.6 22.0001 12 22.0001C9.40001 22.0001 7.04001 21.0101 5.26001 19.3801C5.36001 18.4401 5.96001 17.5201 7.03001 16.8001C9.77001 14.9801 14.25 14.9801 16.97 16.8001C18.04 17.5201 18.64 18.4401 18.74 19.3801Z"
                                                                   stroke="#7239EA " stroke-width="1.5"
                                                                   stroke-linecap="round"
                                                                   stroke-linejoin="round"></path> <path
                                                                   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"
                                                                   stroke="#7239EA" stroke-width="1.5"
                                                                   stroke-linecap="round"
                                                                   stroke-linejoin="round"></path> </g></svg>
												</span>
                                    <span class="menu-title custom-class">اطلاعات حساب کاربری </span>

                                </a>

                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.orders.users_profile.index')}}" class="menu-link">
												<span class="menu-bullet">
                                                    <svg width="32px" viewBox="0 0 24.00 24.00" 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
                                                                d="M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M14 17H8M16 13H8M20 9.98822V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V6.8C4 5.11984 4 4.27976 4.32698 3.63803C4.6146 3.07354 5.07354 2.6146 5.63803 2.32698C6.27976 2 7.11984 2 8.8 2H12.0118C12.7455 2 13.1124 2 13.4577 2.08289C13.7638 2.15638 14.0564 2.27759 14.3249 2.44208C14.6276 2.6276 14.887 2.88703 15.4059 3.40589L18.5941 6.59411C19.113 7.11297 19.3724 7.3724 19.5579 7.67515C19.7224 7.94356 19.8436 8.2362 19.9171 8.5423C20 8.88757 20 9.25445 20 9.98822Z"
                                                                stroke="#7239EA" stroke-width="1.5"
                                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                                        </g>
                                                    </svg>
                                                    <!--begin::Desc-->
												</span>
                                    <span class="menu-title custom-class">سفارشات</span>

                                </a>

                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.profile.wallet.index')}}" class="menu-link">
												<span class="menu-bullet">
													    <i class="ki-outline ki-wallet fs-2x fs-lg-2hx text-gray-500 ms-n1 primary-color"></i>
												</span>
                                    <span class="menu-title custom-class">کیف پول </span>

                                </a>

                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.addresses.index')}}" class="menu-link">
												<span class="menu-bullet">
                                                            <i class="ki-outline ki-address-book fs-2x fs-lg-2hx text-gray-500 ms-n1 primary-color"></i>
												</span>
                                    <span class="menu-title custom-class">آدرس ها   </span>

                                </a>

                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.users_profile.index')}}" class="menu-link">
												<span class="menu-bullet">
												    <i class="ki-outline ki-messages fs-2x fs-lg-2hx text-gray-500 ms-n1"></i>
												</span>
                                    <span class="menu-title custom-class">دیدگاه   </span>

                                </a>

                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.ticket.index')}}" class="menu-link">
												<span class="menu-bullet">
                                                    <i class="ki-outline ki-message-edit fs-2x fs-lg-2hx text-gray-500 ms-n1 primary-color"></i>
												</span>
                                    <span class="menu-title custom-class">درخواست پشتیبانی   </span>

                                </a>

                            </div>

                            <div class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{route('home.profile.education')}}" class="menu-link">
												<span class="menu-bullet">
                                                     <i class="ki-outline ki-chart  fs-2x fs-lg-2hx text-gray-500 ms-n1 primary-color"></i>
												</span>
                                    <span class="menu-title custom-class">آموزش ها</span>

                                </a>

                            </div>


                            <!--end:Menu item-->
                        </div>
                    </div>

                </div>
            </div>
            <!--end::Sidebar secondary menu-->
            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <div class="d-flex flex-column flex-column-fluid">
                    <div id="kt_app_content" class="app-content">
                        <div class="card card-flush">
                            <div class="card-header mb-4">
                                <h3 class="d-flex align-items-center">آموزش ها</h3>
                            </div>
                            <div class="card-body pt-0">
                                <div class="row">  @foreach($educations as $education)
                                        <div class="col-md-4 mb-4">
                                            <div class="modall">
                                                <div class="sheet">
                                                    <div class="h_iframe-aparat_embed_frame">
                                                        {!! $education->embed !!}
                                                    </div>


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


                                                    {!! $education->description!!}
                                                </div>
                                            </div>

                                            <div class="backdrop"></div>
                                            <div class="grid-item fashion mt-3">

                                                <article class="post post-mask overlay-zoom br-sm">
                                                    <figure class="post-media"
                                                            style="width:100%;height: 250px;position: relative">
                                                        <img
                                                            src="{{ imageExist(env('ARTICLES_IMAGES_UPLOAD_PATH'),$education->image)}}"
                                                            alt="blog"
                                                            style="width: 100%;height: 100%;object-fit: cover">
                                                        <button type="button" class="modal-btn main-modal">
                                                            <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>
                                                    </figure>
                                                    <div class="post-details">
                                                        <div class="post-details-visible">
                                                            <h4
                                                                class="post-title text-black">
                                                                {{ $education->title }}
                                                            </h4>

                                                        </div>
                                                    </div>
                                                </article>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!--end::Wrapper container-->
    </div>
@endsection