@extends('frontend.layouts.app')
@section('content')
    <div class="search-overlay">
        <div class="d-table">
            <div class="d-table-cell">
                <div class="search-layer"></div>
                <div class="search-layer"></div>
                <div class="search-layer"></div>
                <div class="search-close">
                    <span class="search-close-line"></span>
                    <span class="search-close-line"></span>
                </div>
                <div class="search-form">
                    <form>
                        <input type="text" class="input-search" placeholder="Search here...">
                        <button type="submit"><i class="bx bx-search"></i></button>
                    </form>
                </div>
            </div>
        </div>
    </div>


    <div class="inner-banner" id="banner-opc">
        <div class="container">
            <div class="inner-title text-center">
                <h3>Sites</h3>
                <ul>
                    <li>
                        <a href="{{ route('home') }}">Home</a>
                    </li>
                    <li>
                        <i class="bx bx-chevrons-right"></i>
                    </li>
                    <li>Sites</li>
                </ul>
            </div>
        </div>
        <div class="inner-shape">
            <img src="{{ asset('frontend/images/shape/inner-shape.png') }}" alt="Images">
        </div>
    </div>


    <section class="services-style-area pt-100 pb-70">
        <div class="container">
            <div class="section-title text-center">
                <span class="sp-color2">Our Sites</span>
                <h2>Check Our Recent Sites</h2>
            </div>
            <div class="row pt-45">
                @foreach ($sites as $data)
                    <div class="col-lg-3 col-sm-6">
                        <div class="site-aspect services-card services-style-bg aspect-site-two">
                            <img src="{{ asset('backend/images/site/' . $data->image) }}"
                                onerror="this.onerror=null; this.src='{{ asset('frontend/images/no_image.jpg') }}'"
                                alt="" />
                            <h3><a href="{{route('showsite', $data->slug)}}">{{ $data->name }}</a></h3>
                            <div class="blog-style-card">
                                <div class="content">
                                    <ul>
                                        <li><i class="bx bx-location-plus"></i>
                                            @isset($data->location)
                                                {{ $data->location }}
                                            @else
                                                Not Found
                                            @endisset
                                        </li>
                                        <li><i class="bx bx-show-alt"></i>{{ $data->study_indications }}</li>
                                    </ul>
                                </div>
                            </div>
                            <a href="{{route('showsite', $data->slug)}}" class="learn-btn">Learn More <i
                                    class="bx bx-chevron-right"></i></a>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="pagination-wrapper text-center">
                {{ $sites->links() }}
            </div>
        </div>
    </section>
@endsection