@extends('template')

@section('content')
    <div class="h-screen pt-5">
        <div class="py-5 "style="background-color:#333;margin-top:53px;">
            <div class="container ">
                <h1 class="text-white text-center fw-bold hidden">SARANA PRASARANA</h1>
            </div>

        </div>
        <div class="container">
            <div class="row pt-5 hidden ">
                @foreach ($fasilitas as $item)
                    <div class="col-md-3 my-2">
                        <div class="card shadow h-100">
                            <img  src="{{ asset('images/fasilitas/' . $item->photo) }}" class="card-img-top"
                                style="min-height: 200px; object-fit:cover" alt="...">
                            <div class="card-body">
                                <h5 class="card-title text-uppercase" style="min-height:40px">{{ $item->nama }}</h5>
                                <p style="min-height: 150px" class="card-text text-muted"><i
                                        class="fas fa-map-marker-alt mr-3"></i>{{ Str::words(strip_tags($item->alamat), 10, ' ...') }}
                                </p>
                                <a href="{{ route('fasilitasDetail', Crypt::encryptString($item->id)) }}"
                                    class="btn btn-outline-dark ">Selengkapnya</a>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="center my-5 text-secondary">
                    {{ $fasilitas->links('pagination::bootstrap-4') }}
                </div>

            </div>
        </div>

    </div>
@endsection