<x-admin-layout>

    <x-page-heading :title="'Commune: '.$commune->name" :breadcrumbs="['Communes', $commune->name]" />

    <section class="section">
        <div class="row">
            <div class="col-lg-12">

                <x-card>
                    <x-slot name="header">
                        <img src="{{ asset('images/communes/banners/' . Str::slug($commune->name, '-') .'.jpg') }}">
                    </x-slot>
  
                    <div class="user-profile-header d-flex flex-column flex-sm-row text-sm-start text-center mb-4">
                        <div class="flex-shrink-0 mt-n2 mx-sm-0 mx-auto">
                            <img src="{{ asset('images/communes/logos/' . Str::slug($commune->name, '-') . '.jpg') }}" class="d-block h-auto ms-0 ms-sm-4 rounded user-profile-img">
                        </div>
                        <div class="flex-grow-1 mt-3 mt-sm-5">
                            <div class="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-4 flex-md-row flex-column gap-4">
                                <div class="user-profile-info">
                                    <h5 class="card-title">Point focal</h5>
                                    <ul class="list-unstyled mb-2 mt-3">
                                        <li class="d-flex align-items-center mb-2"><i class="bx bx-user"></i><span class="fw-semibold mx-2">Nom:</span> <span>{{ $commune->pf_name }}</span></li>
                                        <li class="d-flex align-items-center mb-2"><i class="bx bx-star"></i><span class="fw-semibold mx-2">Poste:</span> <span>{{ $commune->pf_poste }}</span></li>
                                        
                                    </ul>
                                    <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
                                        <li class="d-flex align-items-center mb-3"><i class="bx bx-phone"></i><span class="fw-semibold mx-2">Téléphone:</span> <span>{{ $commune->pf_phone }}</span></li>
                                        <li class="d-flex align-items-center mb-3"><i class="bx bx-email"></i><span class="fw-semibold mx-2">Email:</span> <span>{{ $commune->pf_email }}</span></li>
                                    </ul>
                                </div>

                                {{--a href="{{ route('participations.create') }}" class="btn btn-secondary">
                                    Nouvelle participation
                                </a--}}
                                <x-button :href="route('communes.edit', $commune)" :label="__('Modifier la commune')" primary />
                            </div>
                        </div>
                    </div>

                    <ul class="nav nav-tabs nav-tabs-bordered" id="borderedTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="target-tab" data-bs-toggle="tab" data-bs-target="#bordered-target" type="button" role="tab" aria-controls="target" aria-selected="true">Cibles spartialisées</button>
                        </li>
                        @foreach ($participations as $participation)
                            @php($forum = $participation->forum)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="{{ $forum->annee }}-tab" data-bs-toggle="tab" data-bs-target="#bordered-{{ $forum->annee }}" type="button" role="tab" aria-controls="{{ $forum->annee }}" aria-selected="true">Forum {{ $forum->annee }}</button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content pt-2" id="borderedTabContent">
                        <div class="tab-pane fade show active" id="bordered-target" role="tabpanel" aria-labelledby="target-tab">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                      <tr>
                                        <th scope="col">Code</th>
                                        <th scope="col">Name</th>
                                        <!--th scope="col">Odd</th-->
                                      </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($targets as $target)
                                            <tr>
                                                <th scope="row">
                                                    {{ $target->code }}
                                                </th>
                                                <td>
                                                    {{ $target->name }}
                                                </td>
                                                <!--td>
                                                    {{ $target->pivot->target_id }}
                                                </td-->
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        @foreach ($participations as $participation)
                            @php($forum = $participation->forum)
                            <div class="tab-pane fade" id="bordered-{{ $forum->annee }}" role="tabpanel" aria-labelledby="{{ $forum->annee }}-tab">
                                
                                <div class="d-flex justify-content-md-between justify-content-start flex-md-row flex-column gap-4">
                                    <div>
                                        @if ($forum->enabled)
                                            <span class="badge bg-success">Forum ouvert</span>
                                        @else
                                            <span class="badge bg-warning">Forum fermé</span>
                                        @endif

                                        @if ($participation->confirmed == 1)
                                            <span class="badge bg-success">Participation confirmé</span>
                                        @else
                                            <span class="badge bg-warning">Participation non confirmé</span>
                                        @endif
                                    </div>
                                    <div>
                                        @if($forum->enabled)
                                            <a class="btn btn-secondary btn-sm" href="{{ route('participations.edit', $participation) }}"> Modifier {{ $forum->annee }}</a>
                                        @endif

                                        @if($forum->enabled)
                                            <a class="btn btn-danger btn-sm" href="{{ route('participations.destroy', $participation) }}"> Supprimer {{ $forum->annee }}</a>
                                        @endif
                                    </div>
                                </div>

                                <div class="mt-3">
                                    <div class="divider text-start">
                                        <div class="divider-text"><b>Point focal</b></div>
                                    </div>
                                
                                    <ul class="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-2">
                                        <li class="d-flex align-items-center mb-3"><i class="bx bx-user"></i><span class="fw-semibold mx-2">Nom:</span> <span>{{ $participation->pf_name }}</span></li>
                                        <li class="d-flex align-items-center mb-3 ms-5"><i class="bx bx-phone"></i><span class="fw-semibold mx-2">Téléphone:</span> <span>{{ $participation->pf_phone }}</span></li>
                                        <li class="d-flex align-items-center mb-3 ms-5"><i class="bx bx-email"></i><span class="fw-semibold mx-2">Email:</span> <span>{{ $participation->pf_email }}</span></li>
                                    </ul>
                                    <ul class="list-unstyled mb-2 ">
                                        <li class="d-flex align-items-center mb-2"><i class="bx bx-star"></i><span class="fw-semibold mx-2">Poste:</span> <span>{{ $participation->pf_poste }}</span></li>
                                    </ul>
                                </div>

                                <div class="accordion accordion-flush" id="accordion-{{ $participation->id }}">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingOne-{{ $participation->id }}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-{{ $participation->id }}" aria-expanded="false" aria-controls="collapseOne-{{ $participation->id }}">
                                                <b>Messages clés</b>
                                            </button>
                                        </h2>
                                        <div id="collapseOne-{{ $participation->id }}" class="accordion-collapse collapse show" aria-labelledby="headingOne-{{ $participation->id }}" data-bs-parent="#accordion-{{ $participation->id }}">
                                            <div class="accordion-body">{!! $participation->messages !!}</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingTwo-{{ $participation->id }}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo-{{ $participation->id }}" aria-expanded="false" aria-controls="collapseTwo-{{ $participation->id }}">
                                                <b>Rapports</b>
                                            </button>
                                        </h2>
                                        <div id="collapseTwo-{{ $participation->id }}" class="accordion-collapse collapse" aria-labelledby="headingTwo-{{ $participation->id }}" data-bs-parent="#accordion-{{ $participation->id }}">
                                            <div class="accordion-body">{!! $participation->rapports !!}</div>
                                        </div>
                                    </div>
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="headingThree-{{ $participation->id }}">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree-{{ $participation->id }}" aria-expanded="false" aria-controls="collapseThree-{{ $participation->id }}">
                                                <b>Engagements</b>
                                            </button>
                                        </h2>
                                        <div id="collapseThree-{{ $participation->id }}" class="accordion-collapse collapse" aria-labelledby="headingThree-{{ $participation->id }}" data-bs-parent="#accordion-{{ $participation->id }}">
                                            <div class="accordion-body">{!! $participation->engagements !!}</div>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        @endforeach
                    </div>
                </x-card>

            </div>
        </div>
    </section>

</x-admin-layout>