@extends('layouts.app')
@section('title', 'User List')
@section('content')
<div class="container page-content">
    <div class="row page-col">
        <div class="col-12">
            <h1 class="font-weight-bold typography-4 mb-0">Digital Health Cert</h1>
        </div>
    </div>
    <div class="row justify-content-center page-col">
        <div class="col-12">
            @if ( $users->isEmpty() )
                <h4 class="typography-2 font-weight-semibold text-grey text-center mb-0">- N/A -</h4>
            @else
                <div class="grid">
                    @foreach ($users as $index => $user)
                        <div class="grid-item" data-target="#health_cert_carousel" data-slide-to="{{ $index }}">
                            <div class="grid-wrapper">
                            @if ($user->details->health_cert_url)
                                <img class="img_placeholder" src="{{ $user->details->pdf_thumbnail ? Storage::disk('public')->url($user->details->pdf_thumbnail) : Storage::disk('public')->url($user->details->health_cert_url) }}" alt="{{ $user->getName() }}'s Digital Health Cert" title="{{ $user->getName() }}'s Digital Health Cert" />
                                <div class="hover-grid-effect"><h3 class="">{{ $user->getName() }}</h3></div>
                            @else
                                <div class="empty-grid">
                                    <div class="empty-grid-inner"><h3 class="">{{ $user->getName() }}</h3></div>
                                </div>
                            @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>
</div>    
@endsection
@push('modal')
    <!-- Modal -->
    <div class="modal fade" id="health_cert_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="health_cert_modal_label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg modal-fullscreen-sm-down">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pb-5">
                    <div id="health_cert_carousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach ($users as $index => $modal_user)
                                <div class="carousel-item{{ $index == 0 ? ' active' : '' }}">
                                    @if ($modal_user->details->health_cert_url)
                                        <img class="d-block w-100" src="{{ $modal_user->details->pdf_thumbnail ? Storage::disk('public')->url($modal_user->details->pdf_thumbnail) : Storage::disk('public')->url($modal_user->details->health_cert_url) }}" alt="{{ $modal_user->getName() }}'s Digital Health Cert" title="{{ $modal_user->getName() }}'s Digital Health Cert" />
                                    @else
                                        <img class="d-block w-100" src="{{ asset('images/empty_images.png') }}" alt="{{ $modal_user->getName() }}'s empty image" title="{{ $modal_user->getName() }}'s empty image" />
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#health_cert_carousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#health_cert_carousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>                
            </div>
        </div>
    </div>
@endpush