@extends('layout.main')

@section('main-section')
        <!-- subheader -->
        <section id="subheader">
            <div class="container-fluid m-5-hor">
                <div class="row">
                    <div class="col-md-12">
                        <h1 class="big-heading">Services</h1>
                        <p>Varius blandit sit amet</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- subheader end -->


    <!-- section list end -->
    <section id="content-commerce">
        <div class="container-fluid m-5-hor onStep animated fadeInUp" data-animation="fadeInUp" data-time="300">
            <div class="row">
                <div class="table-responsive">          
                    <table class="table">
                        <thead>
                            <tr>
                                <th><h2 class="big-heading">Popular Services</h2></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($serviceData as $serviceRow)
                            <tr>
                                <td><img alt="commerce" src="{{ asset('public/storage/'.$serviceRow->image) }}" style="width: 100%"></td>
                                <td>
                                    <div class="flexCont">
                                        <h3 class="type big-heading">{{ $serviceRow->name }}</h3>
                                        <div class="subtype">{{ $serviceRow->description }}</div>
                                        <div class="btn-commerce">
                                            <span class="shine"></span>
                                            <a href="{{ url('/service/'.$serviceRow->id) }}">Read More</a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

@endsection