@extends('layouts.app')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <!-- Hero -->
        <div class="bg-dark">
            <div class="bg-black-25">
                <div class="content content-full content-top">
                    <div class="py-4 text-center">
                        <h1 class="font-w700 text-black mb-2">
                            Workshops
                        </h1>
{{--                        <h2 class="h3 font-w400 text-white-75">--}}
{{--                            Education matters, never stop learning new skills--}}
{{--                        </h2>--}}
{{--                        <a class="btn btn-hero-primary" href="javascript:void(0)" data-toggle="click-ripple">--}}
{{--                            Subscribe from $10--}}
{{--                        </a>--}}
                    </div>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <!-- Page Content -->
        <div class="content content-boxed">
            <div class="row row-deck">
                @foreach(\App\Workshop::all() as $workshop)
                <div class="col-md-6">
                    <a class="block block-rounded block-transparent d-md-flex align-items-md-stretch bg-image" style="background-image: url('{{asset($workshop->image)}}');" href="{{route('website.workshops.show',$workshop->id)}}" data-toggle="click-ripple">
                        <div class="block-content block-content-full bg-black-50">
                            @foreach($workshop->skills as $skill)
                                    <span class="d-inline-block py-1 px-2 rounded bg-black-75 font-size-sm font-w700 text-uppercase text-white">
                                        {{$skill}}
                                    </span>
                            @endforeach
                            <div class="py-6">
                                <div class="font-size-sm mb-2">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                </div>
                                <h3 class="font-w700 text-white mb-1">{{$workshop->title}}</h3>
                            </div>
                            <span class="font-size-sm font-w700 text-uppercase text-white-75">
                                        {{$workshop->sub_title}}
                                    </span>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
        </div>
        <!-- END Page Content -->

        <!-- Call to Action -->
{{--        <div class="bg-body-dark">--}}
{{--            <div class="content content-full text-center">--}}
{{--                <div class="py-4">--}}
{{--                    <h3 class="mb-2 text-center">--}}
{{--                        Why Join Us?--}}
{{--                    </h3>--}}
{{--                    <h4 class="font-w400 text-muted text-center">--}}
{{--                        We have the most complete and highest quality courses in the world!--}}
{{--                    </h4>--}}
{{--                    <a class="btn btn-hero-primary" href="javascript:void(0)" data-toggle="click-ripple">--}}
{{--                        Subscribe Today--}}
{{--                    </a>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
        <!-- END Call to Action -->
    </main>
    <!-- END Main Container --
@endsection