@extends('layouts.site')
@section('title')
@foreach ($categorygalleries as $categorygallerie)
{{ $categorygallerie->title ?? 'default Title' }}
@endsection
@section('facebook_meta')
<meta name="keywords" content="{{ $categorygallerie->keywords ?? 'default Title' }}"/>
<meta name="description" content="{{ $categorygallerie->page_desc ?? 'default Title' }}"/>
 <link rel="canonical" href="{{ route('site.upload', $categorygallerie->url ?? 'default Title')}}" /> 
 @endforeach
@endsection
@section('site')
    <div role="main" class="main">
        <section
            class="page-header-modern custom-page-header bg-color-primary"data-bg-src="{{ asset('assets/img/demos/business-consulting-3/backgrounds/background-5.jpg.jpg') }}"
            style="background-size: cover; background-position: center;">
            <div class="container container-xl-custom py-2">
                <div class="row">
                    <div class="col-md-6 order-2 order-md-1 align-self-center p-static">
                        <br>
                        @foreach ($categorygalleries as $categorygallerie)
                            <h1 class="font-weight-extra-bold text-12 appear-animation"
                                data-appear-animation="fadeInRightShorter" data-appear-animation-delay="200"
                                style="color:white;">{{ $categorygallerie->name }}</h1>
                        @endforeach
                    </div>
                    <div class="col-md-4 order-1 order-md-2 align-self-center">
                        <ul class="breadcrumb d-block text-md-end breadcrumb-light appear-animation"
                            data-appear-animation="fadeInRightShorter" data-appear-animation-delay="400">
                            @foreach ($categorygalleries as $categorygallerie)
                                <li><a href="{{ route('home') }}">Home</a></li>
                                <li class="active">{{ $categorygallerie->name }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <section class="section section border-0" style="background-color:#fff;">
                <div class="container">
                    <div class="lightbox"
                        data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                        <div class="row row-gutter-sm">
                            @foreach ($uploads as $upload)
                                <div class="col-lg-4 appear-animation" data-appear-animation="fadeInUpShorterPlus"
                                    data-appear-animation-delay="200">
                                    <br>
                                    <a class="d-inline-block img-thumbnail img-thumbnail-no-borders img-thumbnail-hover-icon rounded-0"
                                        href="{{ asset('storage/uploads/gallery') . '/' . $upload->image }}">
                                        <img src="{{ asset('storage/uploads/gallery') . '/' . $upload->image }}"
                                            class="img-fluid rounded-0" alt="" />
                                    </a>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>
            @endsection