@extends('layouts.public')
@section('infosradio', 'Concours')
@section('radio_name', $radio->name)
@section('radio_description', $radio->description)
@section('radio_contact', $radio->phone)
@section('radio_adresse', $radio->address)
@section('radio_email', $radio->email)

@section('content')
    <main class="main-content h-100">
        <div class="position-relative overflow-hidden" style="height: 200px;">
            <img src="{{ asset('images/G7.jpg') }}" class="w-100 h-100 position-absolute top-0 start-0 object-fit-cover"
                style="filter: blur(5px); z-index: 0;" alt="Background flou">

            <div class="position-relative z-1 text-white d-flex align-items-center justify-content-center h-100">
                <div class="p-5 rounded">
                    <h2 class="mb-3">{!! nl2br('Jeux concours : ' . $radio->name) !!}</h2>
                </div>
            </div>
        </div>
        <section class="bg-color2 p-md-5 p-1 h-100">
            <div class="bg-white p-4 container-xxl rounded-4 shadow-sm">
                <div class="p-4 bg-white rounded row gy-4 h-100">
                    @if (count($concours))
                        <div class="accordion" id="accordionExampleSurvey">
                                                        @foreach ($concours as $concour)
                                <div class="accordion-item border border-black survey-content-div mb-3">
                                    <h2 class="accordion-header" id="headingConcours-{{ $concour->id }}">
                                        <button class="accordion-button collapsed fs-15 fw-bold" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#collapseConcours-{{ $concour->id }}"
                                            aria-expanded="false" aria-controls="collapseConcours-{{ $concour->id }}">
                                            {{ $concour->title }}
                                        </button>
                                    </h2>
                                    <div id="collapseConcours-{{ $concour->id }}" class="accordion-collapse collapse"
                                        aria-labelledby="headingConcours-{{ $concour->id }}"
                                        data-bs-parent="#accordionExampleConcours">
                                        <div class="accordion-body">
                                            <label for="" class="fw-bold"> Démarrage :</label>
                                            <label for=""
                                                class="fw-medium">{{ \Carbon\Carbon::parse($concour->start_at)->translatedFormat('l d F Y') }}</label>

                                            <br>

                                            <label for="" class="fw-bold"> Date limite : </label>
                                            <label for=""
                                                class="fw-medium">{{ \Carbon\Carbon::parse($concour->end_at)->translatedFormat('l d F Y') }}</label>

                                            <br>

                                            <a href="{{ route('concours.attend', [$radio->id, $concour->id]) }}"
                                                class="btn bg-linear-gradient text-white btn-sm p-2 mt-2">
                                                Voir le concours
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="col-lg-12">
                            <div class="text-center mx-auto font-weight-bold">
                                <i class="fa fa-inbox fa-4x text-black"></i> <br>
                                <h3>Aucun concours disponible pour le moment !</h3>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </section>
    </main>
@endsection