<x-portal-layout>

    <section id="breadcrumbs" class="breadcrumbs">
        <div class="container">
  
            <div class="d-flex justify-content-between align-items-center">
                <h2>Communes</h2>
                <ol>
                    <li><a href="{{ route('portal.home') }}">Accueil</a></li>
                    <li>Communes</li>
                </ol>
            </div>
  
        </div>
    </section>
  
    <div id="heading" class="d-flex flex-column justify-content-center align-items-center"
        style="background-image: url({{ asset('images/communes/banners/' . Str::slug($commune->name, '-') . '.jpg') }});"
    ></div>

    <section id="why-us" class="why-us">
        <div class="container">
  
            <div class="row">
                <div class="col-xl-4 col-lg-5" data-aos="fade-up">
                    <div class="content text-center bg-heading">
                        <h3>{{ $commune->name }}</h3>
                        <img src="{{ asset('images/communes/logos/' . Str::slug($commune->name, '-') . '.jpg') }}" class="rounded-circle commune-img" alt="">
                    </div>
                </div>
                <div class="col-xl-8 col-lg-7 d-flex">
                    <div class="icon-boxes w-100 d-flex flex-column justify-content-end">
                        <div class="row">
                            <div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
                                <div class="icon-box mt-4 mt-xl-0">
                                    <h1>{{ count($commune->targets) }}</h1>
                                    <h4>Cibles spatialisées</h4>
                                </div>
                            </div>
                            <div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
                                <div class="icon-box mt-4 mt-xl-0">
                                    <h1>{{ count($commune->getConfirmedParticipations()) }}</h1>
                                    <h4>Participations</h4>
                                </div>
                            </div>
                            <div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
                                <div class="icon-box mt-4 mt-xl-0">
                                    <h1>{{ count($commune->getPublications()) }}</h1>
                                    <h4>Publications</h4>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="d-flex">
                                <select name="commune_id" class="form-select" onchange="window.location.assign('{{ route('portal.communes').'/' }}'+this.value)" >
                                    <option value="">Toutes les communes</option>
                                    @foreach ($communes as $option)
                                        <option value="{{ $option->id }}" @if($option->id==$commune->id) selected @endif>{{ $option->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
  
        </div>
    </section>
    
    <section class="info-box pt-0">
        <div class="container">
            
            <ul class="nav nav-pills mb-3">
                <li><a class="nav-link active" data-bs-toggle="pill" href="#tab-target">Cibles spatialisées</a></li>
                @foreach ($commune->getConfirmedParticipations() as $participation)
                    @php($forum = $participation->forum)
                    <li>
                        <a class="nav-link" data-bs-toggle="pill" href="#tab-{{ $forum->annee }}">Forum {{ $forum->annee }}</a>
                    </li>
                @endforeach
            </ul>

            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-target">
                    <div class="row">
                        <div class="content">
                            <table class="w-100">
                                <tr>
                                    <th class="p-3">ODD</th>
                                    <th class="w-50 p-3">Cibles prioritaires</th>
                                    <th class="w-40 p-3">Actions prioritaires</th>
                                </tr>
                                @foreach ($commune->spatialisations as $spatialisation)
                                <tr class="">
                                    <td class="p-3 text-white text-center bg-{{$spatialisation->target->goal->code}}"><h1>{!! $spatialisation->target->goal->code !!}</h1></td>
                                    <td class="p-3">
                                        <b>{{$spatialisation->target->code}}</b> - {!! $spatialisation->target->content !!}
                                    </td>
                                    <td class="p-3">{!! $spatialisation->actions !!}</td>
                                </tr>
                                @endforeach
                            </table>
                        </div>
                    </div>
                </div>
                @foreach ($commune->getConfirmedParticipations() as $participation)
                    @php($forum = $participation->forum)
                    <div class="tab-pane fade" id="tab-{{ $forum->annee }}">

                        <div class="content">
                            <h3>Information sur la participation de la commune au <strong>Forum {{ $forum->annee }}</strong></h3>
                            <p>
                                <b>Point focal:</b> <br>
                                {{ $participation->pf_name }} (Tél: {{ $participation->pf_phone }} - Email: {{ $participation->pf_email }})<br>
                                {{ $participation->pf_poste }}
                            </p>
                        </div>

                        <div class="row">
                            <div class="col-lg-8 ">

                                <div class="accordion-list">
                                    <ul>
                                        <li>
                                            <a data-bs-toggle="collapse" class="collapse" data-bs-target="#accordion-list-1">
                                                <span>01</span> Rapport de participation 
                                                <i class="bx bx-chevron-down icon-show"></i>
                                                <i class="bx bx-chevron-up icon-close"></i>
                                            </a>
                                            <div id="accordion-list-1" class="collapse show" data-bs-parent=".accordion-list">
                                                {!! $participation->rapports !!}
                                            </div>
                                        </li>
                        
                                        <li>
                                            <a data-bs-toggle="collapse" class="collapsed" data-bs-target="#accordion-list-2">
                                                <span>02</span> Messages clés 
                                                <i class="bx bx-chevron-down icon-show"></i>
                                                <i class="bx bx-chevron-up icon-close"></i>
                                            </a>
                                            <div id="accordion-list-2" class="collapse" data-bs-parent=".accordion-list">
                                                {!! $participation->messages !!}
                                            </div>
                                        </li>
                        
                                        <li>
                                            <a data-bs-toggle="collapse" class="collapsed" data-bs-target="#accordion-list-3">
                                                <span>03</span> Engagements 
                                                <i class="bx bx-chevron-down icon-show"></i>
                                                <i class="bx bx-chevron-up icon-close"></i>
                                            </a>
                                            <div id="accordion-list-3" class="collapse" data-bs-parent=".accordion-list">
                                                {!! $participation->engagements !!}
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                    
                            </div>
                
                            <div class="col-lg-4">
                                <div class="sidebar">
                                    <div class="sidebar-title">Publications</div>
                                    <div class="sidebar-item">
                                        @foreach ($participation->publications as $publication)
                                            <div class="d-flex mb-2">
                                                <i class="bi bi-file-earmark-pdf-fill"></i>
                                                <a href="{{ asset('storage/publications/' . $publication->filename) }}">{{ $publication->title }}</a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                @endforeach
            </div>

        </div>
    </section>

</x-portal-layout>