@extends('front.layouts.app')
@section('title','Nos Paroisses')

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/sector.jpg" page="Nos Paroisses"/>
    <!--== End Page Title Area ==-->

    <!-- Start Popular Causes
     ============================================= -->
    <div class="popular-causes-area bg-gray default-padding bottom-less">
        <div class="container">
            <div class="row">
                <div class="site-heading text-center">
                    <div class="col-md-8 col-md-offset-2">
                        <h2>Les secteurs du Diocèse </h2>
                        <p>
                            Notre Diocèse est divisé en plusieurs secteurs. Chaque secteur abrite plusieurs paroisses
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="popular-causes-items">
                    @foreach($sectors as $sector)
                    <div class="col-md-4 col-sm-6 equal-height">
                        <div class="item">
                            <div class="thumb">
                                <img src="{{asset('assets/img/sector.jpg')}}" alt="Thumb">
                            </div>
                            <div class="info">
                                <h4 class="text-center">{{$sector['name']}}</h4>
                                <ul>
                                    <li>nombre de paroisse<span> <i class="fas fa-church"></i>{{$sector->church->count()}}</span></li>
                                </ul>
                                <div class="text-center">
                                    <a class="btn btn-theme effect btn-sm {{$sector->church->count() == 0 ? "disabled" : "" }}" href="{{route('details',$sector->id)}}">Consuter les paroisses</a>
                                </div>

                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <!-- End Popular Causes -->


@endsection