@extends('site.layouts.master')
@section('title', 'انتخاب رشته')
@section('content')


<style>
    .video-popup {
  position: fixed;
  top: 7%;
  left: 50;
  width: 70%;
  height: 70%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999999;
  margin: 0 auto;
}
/* .h_iframe-aparat_embed_frame iframe {
    width: 50% !important;
} */
.close-video-btn {
  position: absolute;
  top: 1%;
  right: 10px;
  color: #fff;
  cursor: pointer;
}

.video-in-popup {
  width: 100%;
  height: 100%;
}
.modal-content{
width: 50rem
}

</style>



      <section class="page-header -type-1 mt-50">
        <div class="container">
          <div class="page-header__content">
            <div class="row justify-center text-center">
              <div class="col-auto">
                <div>

                  <h1 class="page-header__title">لیست انتخاب رشته </h1>

                </div>

                <div >


                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <section class="layout-pt-md layout-pb-lg">
        <div data-anim-wrap class="container">
          <div class="tabs -pills js-tabs">
            <div class="tabs__content pt-40 js-tabs-content">

              <div class="tabs__pane -tab-item-1 is-active">
                <div class="row y-gap-30 pt-30">



                    <div class="col-lg-6 col-md-6">
                        <div class="eventCard -type-1">
                        <div class="eventCard__img" >
                          <video >
                            <source src="">
                              <img src="" alt="image">
                          </video>
                        </div>

                        <div class="eventCard__bg bg-white">
                            <div class="eventCard__content y-gap-10">
                            <div class="eventCard__inner">
                                <h4 class="eventCard__title text-16 fw-500">title</h4>
                                <div class="d-flex x-gap-15 pt-10">
                                <div class="d-flex items-center">

                                </div>
                                <div class="d-flex items-center">
                                </div>
                                </div>
                            </div>

                            <div class="eventCard__button">
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>



                    <div class="col-lg-6 col-md-6">
                        <div class="eventCard -type-1">
                        <div class="eventCard__img" >
                          <video>
                            <source src="">
                              <img src="" alt="image">
                          </video>
                        </div>

                        <div class="eventCard__bg bg-white">
                            <div class="eventCard__content y-gap-10">
                            <div class="eventCard__inner">
                                <h4 class="eventCard__title text-16 fw-500">title</h4>
                                <div class="d-flex x-gap-15 pt-10">
                                <div class="d-flex items-center">

                                </div>
                                <div class="d-flex items-center">
                                </div>
                                </div>
                            </div>

                            <div class="eventCard__button">
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>




            </div>


            <div data-anim-wrap class="container">
                <div class="tabs -pills js-tabs">
                    <div class="tabs__content pt-40 js-tabs-content">
                        <div class="tabs__pane -tab-item-1 is-active">
                            <div class="row y-gap-30 pt-30">
                                <section class="layout-pt-md layout-pb-md">
                                    <div data-anim-wrap class="container">
                                      <div class="row justify-center text-center">
                                        <div class="col-auto">
                                          <div class="sectionTitle ">
                                            <h2 class="sectionTitle__title ">دانشجو های کافه کنکور</h2>
                                          </div>
                                        </div>
                                      </div>

                                    <div class="pt-50">
                                            <div class="row">

                                                @foreach ($honor as $item)
                                                    <div class="col-2 mt-10" style="text-align: center" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                                        <img class="rounded-circle m-auto" src="{{ $item->gender == 'man' ?  asset('site/img/general/man.jpeg') :  asset('site/img/general/woman.jpeg') }}" alt="icon">
                                                        <div class="">{{$item->name}}</div>
                                                        <div class="">رتبه: {{$item->rank}}</div>
                                                        <div class="">{{$item->uni}}</div>
                                                    </div>
                                                        <!-- Modal -->
                                                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">ویدیو ها</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                    <div class="row">
                                                                        <div class="col-lg-6 col-md-6 col-sm-12 mb-2">
                                                                            <a class="popup-btn">
                                                                                <div class="img-modal" >
                                                                                    <video controls class="col-lg-12 col-md-12 col-sm-12 mb-4">
                                                                                    <source src="{{$item->file_1}}" type="video/mp4">
                                                                                        <img src="{{$item->file_1}}" alt="picture">
                                                                                    </video>
                                                                                </div>
                                                                            </a>
                                                                        </div>
                                                                        <div class="col-lg-6 col-md-6 col-sm-12 mb-2">
                                                                            <a class="popup-btn">
                                                                                <div class="img-modal">
                                                                                    <video controls class="col-lg-12 col-md-12 col-sm-12 mb-4">
                                                                                    <source src="{{$item->file_2}}" type="video/mp4">
                                                                                        <img src="{{$item->file_2}}" alt="picture">
                                                                                    </video>
                                                                                </div>
                                                                            </a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach

                                                <div class="video-popup">
                                                    <div class="close-video-btn">X</div>
                                                    <div class="video-in-popup"></div>
                                                </div>

                                            </div>



                                            <div class="d-flex justify-center x-gap-15 items-center pt-60 lg:pt-40">

                                            </div>
                                    </div>
                                    </div>
                                </section>






                            </div>
                        </div>
                    </div>
                </div>
            </div>




              </div>

            </div>
          </div>
        </div>
      </section>

@endsection

@section('scripts')
<script>
    $(".popup-btn").on('click', function(e) {
        e.preventDefault()
        let self = $(this);
        var videoPopup = $(".video-popup");
        videoPopup.find('.video-in-popup').html(self.data('src'))
        videoPopup.css('display', 'flex');
    });

  $('.close-video-btn').on('click', function() {
    let self = $(this);
    var videoPopup = $(".video-popup");
    videoPopup.find('.video-in-popup').html('')
    videoPopup.fadeOut();
  });
</script>

@endsection