@extends('web.template.master')

@section('content')

<!-- WORK RESULT -->
<section class="section" id="schedule">
    <div class="container">
        <div class="row">
            @foreach($workresults as $index => $workresult)
            <div class="col-lg-3 col-md-6 col-12 text-center" data-aos="fade-up" data-aos-delay="{{($workresult->delay+50)}}" style="padding-bottom:20px;">

                <a data-toggle="modal" data-target="#workresult{{($workresult->id)}}">
                    <div class="team-thumb">
                        <img src="{{url('/images/image').'/'.$workresult->image}}" class="img-fluid" style="min-height: 200px;" alt="Trainer">

                        <div class="team-info d-flex flex-column">
                            <span>{{$workresult->title}}</span>
                        </div>
                    </div>
                </a>
            </div>

            <!-- modal -->
            <div class="modal fade" id="workresult{{($workresult->id)}}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body" style="background-image:url('../../images/image/{{$workresult->image}}');background-size: cover;background-size: 100% 100%;background-repeat: no-repeat;height:400px;">

                        </div>
                        <div class="text-center" style="text-align: justify;">
                            <p>
                                {{($workresult->description)}}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endsection