@extends('frontend.layouts.app')

@section('title')
    Video Library
@endsection

@section('seo')
@endsection

@section('content')

    <link rel="stylesheet" href="{{ asset('css/videolib.css') }}">
    <style>
        .video-company-title {
            transform: translateX(6rem) translateY(0rem);
        }
    </style>

    <style>
        .video-banner {
            background: url('{{ asset('img/video.png') }}') no-repeat center / cover;
            height: 100vh;
            width: 100% !important;
            /* background-size:cover; */
        }

        @media screen and (max-width: 476px) {
            .video-banner {
                height: 400px;
            }
        }
    </style>
    <style>
        .video-company-title {
            transform: translateX(6rem) translateY(0rem);
        }

        .video-company-title h1 {
            font-size: 2rem !important;
        }

        @media (max-width: 769px) {
            .video-company-title {
                transform: translateX(0rem) translateY(3rem) !important;
            }

            .about-banner {
                background-size: cover;
            }
        }

        @media (max-width: 426px) {
            .video-company-title {
                transform: translateX(-1rem) translateY(1rem) !important;
            }

            .video-company-title h1 {
                font-size: 1.25rem !important;
            }
        }
    </style>
    <div class="position-relative overflow-hidden video-banner d-flex align-items-center">


        <div class="ms-4">
            <div class="container video-company-title">
                <div class="row" style="margin-top: 8rem">
                    <div class="col-3 col-md-2 d-flex align-items-center">
                        <img src="img/hi-reslogo.png" class="img-fluid" alt="" style="width: 300px; height: auto;">
                    </div>
                    <div class="col-9 col-md-10 ps-md-4">
                        <h2 class="fw-bold text-uppercase text-black my-5">
                            VIDEO LIBRARY
                        </h2>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="d-flex mb-5">
            <label class="font-text mt-1 me-2">Categories: </label>
            <form action="{{ route('videolib') }}" method="GET" class="d-flex">
                <select name="category" class="form-select " aria-label="Default select example"
                    onchange="this.form.submit()">
                    <option value="">All</option>
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->categories }}"
                            {{ request()->category == $cat->categories ? 'selected' : '' }}>
                            {{ $cat->categories }}
                        </option>
                    @endforeach
                </select>
            </form>
        </div>


        <div class="row">
            <div class="col">
                <div class="row">
                    @foreach ($data as $datas)
                        <div class="col-md-5 p-3">
                            <iframe class="w-100" width="440" height="263" src="{{ $datas->embed }}" frameborder="0"
                                allowfullscreen></iframe>
                        </div>
                        <div class="col-md-7 p-4">
                            <p class="getStarted">{{ $datas->categories }}</p>
                            <p class="title">{{ $datas->title }}</p>
                            <p>{!! Str::limit($datas->desc, 200, '...') !!}</p>
                            <p class="text-decoration-underline text-red pe-auto" data-bs-toggle="modal"
                                data-bs-target="#exampleModal{{ $datas->id }}" style="cursor: pointer;">View More</p>
                        </div>

                        <div class="modal fade" id="exampleModal{{ $datas->id }}" tabindex="-1"
                            aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="exampleModalLabel">{{ $datas->title }}</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <iframe id="youtubeVideo{{ $datas->id }}" class="w-100" width="800"
                                            height="463" src="{{ $datas->embed }}" frameborder="0"
                                            allowfullscreen></iframe>
                                        <h3>{{ $datas->title }}</h3>
                                        <p>{!! $datas->desc !!}</p>

                                    </div>
                                    <!-- <div class="modal-footer border-top-0">
                                                                                                    {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button> --}}
                                                                                                  </div> -->
                                </div>
                            </div>
                        </div>

                        <script>
                            $(function() {
                                $('#exampleModal{{ $datas->id }}').on('hidden.bs.modal', function(e) {
                                    var $iframes = $(this).find("iframe");
                                    $iframes.each(function(index, iframe) {
                                        $(iframe).attr("src", $(iframe).attr("src"));
                                    });
                                });
                            });
                        </script>

                        <!-- <script>
                            $(document).ready(function() {});
                        </script> -->

                        <!-- <div class="modal fade" id="exampleModal{{ $datas->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                                                              <div class="modal-dialog modal-lg">
                                                                                                <div class="modal-content">
                                                                                                  <div class="modal-header">
                                                                                                    <h1 class="modal-title fs-5" id="exampleModalLabel">{{ $datas->title }}</h1>
                                                                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                                                  </div>
                                                                                                  <div class="modal-body">
                                                                                                    <iframe id="youtubeVideo{{ $datas->id }}" class="w-100" width="800" height="463" src="{{ $datas->embed }}" frameborder="0" allowfullscreen></iframe>
                                                                                                    <h3>{{ $datas->title }}</h3>
                                                                                                    <p>{!! $datas->desc !!}</p>
                                                                                                  </div>
                                                                                                  <div class="modal-footer border-top-0">
                                                                                                    {{-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button> --}}
                                                                                                  </div>
                                                                                                </div>
                                                                                              </div>
                                                                                            </div> -->
                    @endforeach
                    {{-- <div class="col-md-5 p-3">
                  <iframe class="w-100" width="440" height="263"
                  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0" 
                  allowfullscreen></iframe>
                </div>
                <div class="col-md-7 p-4">
                    <p class="getStarted">GETTING STARTED</p>
                    <p class="title">How to Change the Batterys on your Safe Electronic Fire Safe</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Minima ad ab cum nam natus, quasi, accusantium iure aliquid, quia id corporis! 
                        Temporibus optio rerum tempora est earum consequuntur quas accusantium.</p>
                    <p class="text-decoration-underline text-red pe-auto" data-bs-toggle="modal" data-bs-target="#exampleModal" style="cursor: pointer;">View More</p>
                </div>
                 
                <div class="col-md-5 p-3">
                  <iframe class="w-100" width="440" height="263"
                  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0" 
                  allowfullscreen></iframe>
                </div>
                <div class="col-md-7 p-3">
                    <p class="getStarted">SELF HELP</p>
                    <p class="title">How to Open a Sentry Safe Electronic Lock and Dual Key Fire Safe</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Minima ad ab cum nam natus, quasi, accusantium iure aliquid, quia id corporis! 
                        Temporibus optio rerum tempora est earum consequuntur quas accusantium.</p>
                </div>
                 
                <div class="col-md-5 p-3">
                  <iframe class="w-100" width="440" height="263"
                  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0" 
                  allowfullscreen></iframe>
                </div>
                <div class="col-md-7 p-3">
                    <p class="getStarted">SELF HELP</p>
                    <p class="title">How to Program User Codes on your Sentry Safe Pistol Safe</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Minima ad ab cum nam natus, quasi, accusantium iure aliquid, quia id corporis! 
                        Temporibus optio rerum tempora est earum consequuntur quas accusantium.</p>
                </div>
                 
                <div class="col-md-5 p-3">
                  <iframe class="w-100" width="440" height="263"
                  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0" 
                  allowfullscreen></iframe>
                </div>
                <div class="col-md-7 p-4">
                    <p class="getStarted">GETTING STARTED</p>
                    <p class="title">How to Change the Batterys on your Safe Electronic Fire Safe</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Minima ad ab cum nam natus, quasi, accusantium iure aliquid, quia id corporis! 
                        Temporibus optio rerum tempora est earum consequuntur quas accusantium.</p>
                </div>
                 
                <div class="col-md-5 p-3">
                  <iframe class="w-100" width="440" height="263"
                  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0" 
                  allowfullscreen></iframe>
                </div>
                <div class="col-md-7 p-3">
                    <p class="getStarted">SELF HELP</p>
                    <p class="title">How to Open a Sentry Safe Electronic Lock and Dual Key Fire Safe</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Minima ad ab cum nam natus, quasi, accusantium iure aliquid, quia id corporis! 
                        Temporibus optio rerum tempora est earum consequuntur quas accusantium.</p>
                </div>
                 
                <div class="col-md-5 p-3">
                  <iframe class="w-100" width="440" height="263"
                  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"frameborder="0" 
                  allowfullscreen></iframe>
                </div>
                <div class="col-md-7 p-4">
                    <p class="getStarted">SELF HELP</p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Minima ad ab cum nam natus, quasi, accusantium iure aliquid, quia id corporis! 
                        Temporibus optio rerum tempora est earum consequuntur quas accusantium.</p>
                </div> --}}
                </div>
            </div>
            <div class="col-md-3 ">
                <div class="bar">
                    <div class="row justify-content-between">
                        <div class="col-10">
                            <p class="recent">Recent Uploads</p>
                        </div>
                        <div class="col-2">
                            {{-- <i class="fa-solid fa-ellipsis"></i> --}}
                        </div>
                    </div>
                </div>
                <div class="side-border">
                    <div class="row">
                        @foreach ($vidlatest as $vidlatests)
                            <div class="col-5 pt-4">
                                <div class="box1 bg-light h-50">
                                    {{-- <img src="{{ asset('img/product-main-bg.jpg') }}" class="img-fluid" alt=""> --}}
                                    <iframe class="w-100" width="440" height="80" src="{{ $vidlatests->embed }}"
                                        frameborder="0" allowfullscreen></iframe>
                                </div>
                            </div>
                            <div class="col-7">
                                <p class="side-text">{{ $vidlatests->title }}</p>
                                <a href="{{ $vidlatests->embed }}" class="text-decoration-none">
                                    <p class="watch">WATCH NOW</p>
                                </a>
                            </div>
                        @endforeach
                        {{-- <div class="col-5 pt-4">
            <div class="box1 bg-light h-50">
              <img src="{{ asset('img/product-main-bg.jpg') }}" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-7">
            <p class="side-text">How to Remove Shipping Screw On Your Sentry Safe Fire Safe</p>
            <p class="watch">WATCH NOW</p>
          </div> --}}

                        {{-- <div class="col-5 pt-4">
            <div class="box1 bg-light h-50">
              <img src="{{ asset('img/product-main-bg.jpg') }}" class="img-fluid" alt="">
            </div>
          </div>
          <div class="col-7">
            <p class="side-text">How to Remove Shipping Screw On Your Sentry Safe Fire Safe</p>
            <p class="watch">WATCH NOW</p>
          </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-lg-block d-block d-sm-block">
        <br><br>
    </div>
    <div class="d-flex justify-content-center">
        @if ($data->hasPages())
            <ul class="pagination pagination">

                @if ($data->currentPage() == 1)
                    <a class="linkers px-3" href="#" aria-label="Previous">
                        <i class="fa-solid fa-chevron-left"></i>
                    </a>
                @else
                    <li class="page-item"><a class="linkers py-1 px-3" href="{{ $data->previousPageUrl() }}"
                            rel="prev"><i class="fa-solid fa-chevron-left"></i></a></li>
                @endif

                @if ($data->currentPage() > 3)
                    <li class="page-item hidden-xs"><a class="linkers py-1 px-3" href="{{ $data->url(1) }}">1</a></li>
                @endif
                @if ($data->currentPage() > 4)
                    <li><span>...</span></li>
                @endif
                @foreach (range(1, $data->lastPage()) as $i)
                    @if ($i >= $data->currentPage() - 2 && $i <= $data->currentPage() + 2)
                        @if ($i == $data->currentPage())
                            <li class="page-item"><span class="linkers py-1 px-3 active">{{ $i }}</span></li>
                        @else
                            <li><a class="linkers py-1 px-3" href="{{ $data->url($i) }}">{{ $i }}</a></li>
                        @endif
                    @endif
                @endforeach
                @if ($data->currentPage() < $data->lastPage() - 3)
                    <li class="linkers py-1 px-3"><span>...</span></li>
                @endif
                @if ($data->currentPage() < $data->lastPage() - 2)
                    <li class="page-item hidden-xs"><a class="linkers py-1 px-3"
                            href="{{ $data->url($data->lastPage()) }}">{{ $data->lastPage() }}</a></li>
                @endif


                @if ($data->hasMorePages())
                    <li class="page-item"><a class="linkers py-1 px-3" href="{{ $data->previousPageUrl() }}"
                            rel="prev"><i class="fa-solid fa-chevron-right"></i></a></li>
                @else
                    <a class="linkers px-3" href="#" aria-label="Next">
                        <i class="fa-solid fa-chevron-right"></i>
                    </a>
                @endif
            </ul>
        @endif
    </div>

    <div class="container box d-lg-none d-block d-sm-block">
        <div class="container contact-mob p-5">
            <div class="bg-light">
                <div class="container p-5">
                    <p class="footer-contact">CONTACT US</p>
                    <p class="footer-context">We'd love to hear from you</p>
                    <div class="containers">
                        <div class="row gy-4 align-items-start">
                            <div class="col-md-4">
                                <input class="form-control" placeholder="Name *" type="text" required="">
                            </div>
                            <div class="col-md-4">
                                <input class="form-control" placeholder="Phone No. *" type="text" required="">
                            </div>
                            <div class="col-md-4">
                                <input class="form-control" placeholder="Email Address *" type="text"
                                    required="">
                            </div>
                        </div>
                        <br>
                        <textarea class="form-control textarea" placeholder="Write a Message"></textarea>
                        <br>
                          <button class="findAbout btns" style="width: 90% !important;">
    SEND MESSAGE
</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      <li class="page-item">
        <a class="linkers" href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="page-item"><a class="linkers" href="#">1</a></li>
      <li class="page-item"><a class="linkers" href="#">2</a></li>
      <li class="page-item"><a class="linkers" href="#">3</a></li>
      <li class="page-item"><a class="linkers" href="#">4</a></li>
      <li class="page-item"><a class="linkers" href="#">5</a></li>
      <li class="page-item">
        <a class="linkers" href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav> --}}

    <div class="d-lg-block d-none d-sm-none">
        <br><br><br><br><br><br>
    </div>

    <div class="mt-5 d-lg-none d-block d-sm-block">
        <div class="mt-5"></div>
    </div>

    {{-- <div class="container">
    <div class="container box d-lg-none d-block d-sm-block">
      <div class="container contact-mob p-5">
        <div class="bg-light">
          <div class="container p-5">
            <p class="footer-contact">CONTACT US</p>
            <p class="footer-context">We'd love to hear from you</p>
            <div class="containers">
              <div class="row gy-4 align-items-start">
                <div class="col-md-4">
                  <input class="form-control" placeholder="Your Name. *" type="text" required="">
                </div>
                <div class="col-md-4">
                  <input class="form-control" placeholder="Phone No. *" type="text" required="">
                </div>
                <div class="col-md-4">
                  <input class="form-control" placeholder="Email Address *" type="text" required="">
                </div>
              </div>
              <br>
              <textarea class="form-control textarea" placeholder="Write a Message"></textarea>
              <br>
              <button class="findAbout w-50 btns">
                SEND MESSAGE
              </button>
            </div>
          </div>
        </div> 
      </div>    
  </div>
  </div> --}}

    <br><br>


    <style>
        .footer-mt {
            margin-top: 20rem;
        }

        @media (max-width: 768px) {
            .shadow-custom {
                text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7);
            }
        }
    </style>

@endsection