@extends('client.layout.master')
<style>
    @import url('https://fonts.googleapis.com/css?family=Arvo');

    body {
        font-family: 'Arvo', sans-serif;
        color: #515151;
        background-color: #f1e7b0;
        margin: 3rem;
    }

    /* --------------------------------------------------
|   Gallery Flexbox Grid                             |
|   Original: https://codepen.io/ramenhog/pen/MpORPa |
 ------------------------------------------------- */

    section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    @supports (display: grid) {
        section {
            display: block;
        }
    }

    .message {
        border: 1px solid #d2d0d0;
        padding: 2em;
        font-size: 1.7vw;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
        box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
    }

    @supports (display: grid) {
        .message {
            display: none;
        }
    }

    .section {
        display: none;
        padding: 2rem;
    }

    @media screen and (min-width: 768px) {
        .section {
            padding: 4rem;
        }
    }

    @supports (display: grid) {
        .section {
            display: block;
        }
    }

    .grid {
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: 150px;
        grid-auto-flow: row dense;
    }

    .grid--small {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .item {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        ///////
        background: #0c9a9a;
        color: #fff;
        grid-column-start: auto;
        grid-row-start: auto;
        background-color: teal;
        background-size: cover;
        background-position: center;
        -webkit-box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
        box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
        -webkit-transition: -webkit-transform 0.3s ease-in-out;
        transition: -webkit-transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
        cursor: pointer;
        counter-increment: item-counter;
    }

    .item:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.3;
        -webkit-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }

    .item:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }

    .item:hover:after {
        opacity: 0;
    }

    .item--small {
        grid-row-end: span 1;
    }

    .item--medium {
        grid-row-end: span 2;
    }

    .item--large {
        grid-row-end: span 3;
    }

    .item--full {
        grid-column-end: auto;
    }

    @media screen and (min-width: 768px) {
        .item--full {
            grid-column: 1/-1;
            grid-row-end: span 2;
        }
    }

    .item__details {
        position: relative;
        z-index: 1;
        padding: 15px;
        /*color: #444;
  background: #fff;*/
        text-transform: lowercase;
        letter-spacing: 1px;
        /*color: #828282;*/
        color: #FFF;
        font-size: 1.25em;
    }

    .item__details:before {
        /*content: counter(item-counter);*/
        font-weight: bold;
        font-size: 1.1rem;
        padding-right: 0.5em;
        color: #444;
    }

    .thumbnail {
        max-width: 40%;
    }

    /* ---------------------------------------------------
|   Additional Magnific-Popup                         |
|   Original: https://codepen.io/dimsemenov/pen/zjtbr |
|             https://codepen.io/dimsemenov/pen/GtjBb |
 -------------------------------------------------- */
    /* Override */
    .mfp-title {
        position: absolute;
        font-size: 1em;
        margin: 5px;
        font-weight: 600;
    }

    .custom-popup-class .mfp-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .custom-popup-class .mfp-content {
        width: 100%;
        max-width: 900px;
        height: 80%;
    }

    .popup-iframe {
        width: 100%;
        height: 0;
        overflow: hidden;
        /* This is scale ratio */
        padding-top: 56.25%;
    }

    .popup-iframe .mfp-close {
        color: #FFF;
        text-align: right;
        right: 1px;
        top: -44px;
    }

    .iframe-element {
        background: #EBE8E8;
        position: absolute;
        top: -3px;
        left: 0;
        width: 100%;
        height: auto;
        box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    }

    .written {
        overflow-y: scroll;
        padding: 25px;
        height: 100%;
    }


    /* --------------------
|   Thumbnail Images   |
 -------------------- */

    .image-1 {
        background-image: url("https://images.pexels.com/photos/268261/pexels-photo-268261.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }

    .image-2 {
        background-image: url("https://images.pexels.com/photos/93052/pexels-photo-93052.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }

    .image-3 {
        background-image: url("https://images.pexels.com/photos/442589/pexels-photo-442589.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }

    .image-4 {
        background-image: url("https://images.pexels.com/photos/934059/pexels-photo-934059.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    }

    .image-5 {
        background-image: url("https://images.pexels.com/photos/395132/pexels-photo-395132.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
    }

</style>
@section('content')
    @include('client.layout.navbar')
    <div class="container mb-3">

        <section id="nature-gallery">
            <div class="grid grid--small">
                @forelse ($videos as $video)
                    @if (!empty($video->video_link))
                    <a title="{{$video->file_name}}" href="{{ $video->video_link }}" target="_blank"
                        class="item item--small image-3">{{$video->file_name}}
                        <div class="item__details">
                            <!--Third Item--><i class="fa fa-video-camera" aria-hidden="true"></i>
                        </div>
                    </a>

                    @else
                        <a href="{{ asset('storage/Admin-File/' . $video->file_name) }}" title=""
                            class="magnific-vimeo cap-video item item--small image-3">
                            <div class="item__details">
                                <h6>{{ $video->file_name }}</h6>
                                <p></p>
                                <!--Third Item--><i class="fa fa-video-camera" aria-hidden="true"></i>
                            </div>
                        </a>
                    @endif
                @empty
                @endforelse
            </div>
        </section>
    </div>
    @if (!auth('borrower')->check() && !auth('lender')->check())
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog">
                <div class="modal-content bg-success">
                    <div class="modal-body">
                        <div class="card">
                            <div class="card-header bg-success text-white">
                                <h5 class="mb-0">Account Login</h5>
                            </div>
                            <div class="card-body bg-success2">
                                @if (Session::get('errors'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                            <span class="sr-only">Close</span>
                                        </button>
                                        <strong>{{ Session::get('errors')->first() }}</strong>
                                    </div>
                                    {!! Session::forget('errors') !!}
                                @endif

                                @if (Session::get('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        <button type="button" class="close" data-dismiss="alert"
                                            aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                            <span class="sr-only">Close</span>
                                        </button>
                                        <strong>{{ Session::get('success') }}</strong>
                                    </div>
                                    {!! Session::forget('success') !!}
                                @endif

                                <form action="{{ route('user.attempt', ['client' => true]) }}" method="POST">
                                    @csrf
                                    <div class="form-group mb-2">
                                        <label class="text-white" for="email">Email/Phone Number</label>
                                        <input id="email" type="text" class="form-control" name="email" required>
                                        <div class="invalid-feedback">
                                            Please fill in your email
                                        </div>
                                    </div>
                                    <div class="form-group mb-2">
                                        <div class="d-block">
                                            <label class="text-white" for="password">Password</label>
                                            <input id="password" type="password" placeholder="Enter Your Password"
                                                class="form-control" name="password" required>
                                        </div>
                                    </div>
                                    <div class="form-group mb-2">
                                        <button type="submit" class="btn bg-success text-white w-100">
                                            Login
                                        </button>
                                    </div>
                                    <div class="text-end">
                                        <a href="{{ route('user.forget_password') }}" class="text-white">
                                            Forgot Password?
                                        </a>
                                    </div>
                                    <div class="text-end">
                                        <a href="{{ route('user.membership') }}" class="text-white">
                                            Don't have an account? Subscribe Now
                                        </a>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@push('script')
    <script>
        var myModal = new bootstrap.Modal(document.getElementById('exampleModal'), {})
        myModal.toggle();

        $('#exampleModal').modal({
            backdrop: 'static',
            keyboard: false
        })
    </script>
@endpush