@extends('client.layout.master')
<style>
    /*----  Main Style  ----*/
    #cards_landscape_wrap-2 {
        text-align: center;
        background: #F7F7F7;
    }

    #cards_landscape_wrap-2 .container {
        padding-top: 80px;
        padding-bottom: 100px;
    }

    #cards_landscape_wrap-2 a {
        text-decoration: none;
        outline: none;
    }

    #cards_landscape_wrap-2 .card-flyer {
        border-radius: 5px;
    }

    #cards_landscape_wrap-2 .card-flyer .image-box {
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.50);
        border-radius: 5px;
    }

    #cards_landscape_wrap-2 .card-flyer .image-box img {
        -webkit-transition: all .9s ease;
        -moz-transition: all .9s ease;
        -o-transition: all .9s ease;
        -ms-transition: all .9s ease;
        width: 100%;
        height: 200px;
    }

    #cards_landscape_wrap-2 .card-flyer:hover .image-box img {
        opacity: 0.7;
        -webkit-transform: scale(1.15);
        -moz-transform: scale(1.15);
        -ms-transform: scale(1.15);
        -o-transform: scale(1.15);
        transform: scale(1.15);
    }

    #cards_landscape_wrap-2 .card-flyer .text-box {
        text-align: center;
    }

    #cards_landscape_wrap-2 .card-flyer .text-box .text-container {
        padding: 30px 18px;
    }

    #cards_landscape_wrap-2 .card-flyer {
        background: #FFFFFF;
        margin-top: 50px;
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.40);
    }

    #cards_landscape_wrap-2 .card-flyer:hover {
        background: #fff;
        box-shadow: 0px 15px 26px rgba(0, 0, 0, 0.50);
        -webkit-transition: all 0.2s ease-in;
        -moz-transition: all 0.2s ease-in;
        -ms-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
        margin-top: 50px;
    }

    #cards_landscape_wrap-2 .card-flyer .text-box p {
        margin-top: 10px;
        margin-bottom: 0px;
        padding-bottom: 0px;
        font-size: 14px;
        letter-spacing: 1px;
        color: #000000;
    }

    #cards_landscape_wrap-2 .card-flyer .text-box h6 {
        margin-top: 0px;
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: bold;
        text-transform: uppercase;
        font-family: 'Roboto Black', sans-serif;
        letter-spacing: 1px;
        color: #36731F;
          overflow: hidden;
  text-overflow: ellipsis; 
    }

    .buttonDownload {
        display: inline-block;
        position: relative;
        padding: 10px 25px;

        background-color: #36731F;
        color: white;

        font-family: sans-serif;
        text-decoration: none;
        font-size: 0.9em;
        text-align: center;
        text-indent: 15px;
    }

    .buttonDownload:hover {
        background-color: #288a04;
        color: white;
    }

    .buttonDownload:before,
    .buttonDownload:after {
        content: ' ';
        display: block;
        position: absolute;
        left: 15px;
        top: 52%;
    }

    /* Download box shape  */
    .buttonDownload:before {
        width: 10px;
        height: 2px;
        border-style: solid;
        border-width: 0 2px 2px;
    }

    /* Download arrow shape */
    .buttonDownload:after {
        width: 0;
        height: 0;
        margin-left: 1px;
        margin-top: -7px;

        border-style: solid;
        border-width: 4px 4px 0 4px;
        border-color: transparent;
        border-top-color: inherit;

        animation: downloadArrow 2s linear infinite;
        animation-play-state: paused;
    }

    .buttonDownload:hover:before {
        border-color: #36731F;
    }

    .buttonDownload:hover:after {
        border-top-color: #36731F;
        animation-play-state: running;
    }

    /* keyframes for the download icon anim */
    @keyframes downloadArrow {

        /* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
        0% {
            margin-top: -7px;
            opacity: 1;
        }

        0.001% {
            margin-top: -15px;
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            margin-top: 0;
            opacity: 0;
        }
    }

</style>
@section('content')
    @include('client.layout.navbar')
    <div class="container mt-5">
        <div id="cards_landscape_wrap-2">
            <div class="container">
                <div class="row">
                    @forelse ($folders as $folder)
                    {{-- @dd($folder) --}}
                            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                                <a title="{{!$folder->hasFolder && $folder->file->isEmpty() ? 'Folder Is Empty' : 'View Files'}}" href="{{ $folder->hasFolder || !$folder->file->isEmpty() ? route('client.sub_app', ['id' => $folder->id]) : 'javascript:void(0)' }}">
                                    <div class="card-flyer">
                                        <div class="text-box">
                                            <div class="image-box">
                                                <img src="{{ asset('assets/img/png-clipart-next-folders-icon-documents-blue-file-folder-thumbnail.png') }}"
                                                    alt="Folder Image" />
                                            </div>
                                            <div class="text-container">
                                                <h6>{{ $folder->name }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                    @empty
                    @endforelse

                    @forelse ($files as $file)
                        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                            <a href="">
                                <div class="card-flyer">
                                    <div class="text-box">
                                        <div class="image-box">
                                            <img src="{{ asset('assets/img/file.png') }}" alt="" />
                                        </div>
                                        <div class="text-container">
                                            <h6>{{ $file->file_name }}</h6>
                                            <p>File Details</p>
                                            <a href="{{ asset('storage/Admin-File/' . $file->file_name) }}"
                                                class="buttonDownload" target="_blank">Download</a>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @empty
                    @endforelse
                </div>
            </div>
        </div>

    </div>
    @if (!auth('borrower')->check() && !auth('lender')->check())
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <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();
    </script>
@endpush