@extends('layouts.admin')
@section('title', 'Concours - ' . getRadioUsers()->name)

@section('content')
    <div class="row g-4 mb-4">

        <div class="p-5 bg-linear-gradient mt-0">
            <div class="container-fluid text-white text-center">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <h2 class="fw-bold mb-4" style="font-size: clamp(1.1rem, 2.5vw + 0.7rem, 2.1875rem);">Jeux Concours</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-custom px-4">
            <div class="bg-white rounded-4 shadow-sm p-4">
                <div class="header-section">
                    <div
                        class="d-flex flex-column flex-md-row justify-content-between align-items-stretch align-items-md-center mb-4">
                        <button class="btn gradient-btn mb-3 mb-md-0" data-bs-toggle="modal" data-bs-target="#add">
                            Créer un concours
                        </button>
                    </div>
                </div>
                @if (count($concours) > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped align-middle w-100" id="datatable-buttons">
                            <thead class="table-white">
                                <tr>
                                    <th>#</th>
                                    <th >Titre</th>
                                    <th >Fin (Durée)</th>
                                    <th >Questions</th>
                                    <th >Participants</th>
                                    <th >Statut</th>
                                    <th >Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($concours as $key => $unConcours)
                                    <tr>
                                        <td> {{ $key + 1 }}</td>
                                        <td> {{ Str::length($unConcours->title) > 20 ? Str::substr($unConcours->title, 0, 20) . '...' : $unConcours->title }}
                                        </td>
                                        <td> {{ formattedDate($unConcours->end_at) }}</td>
                                        <td> {{ $unConcours->quizzes->count() }} question(s)</td>
                                        <td> {{ $unConcours->participants->count() }} participant(s)</td>
                                        <td>
                                            @switch($unConcours->status)
                                                @case('PENDING')
                                                    <span class="badge text-bg-info">En attente</span>
                                                @break

                                                @case('ACTIVE')
                                                    <span class="badge text-bg-warning">En cours</span>
                                                @break

                                                @case('SUSPENDED')
                                                    <span class="badge text-bg-danger">Suspendu</span>
                                                @break

                                                @default
                                                    <span class="badge text-bg-success">Terminé</span>
                                            @endswitch
                                        </td>
                                        <td class="action-col" style="z-index: 9999 !important;">
                                            <div class="dropdown">
                                                <button class="btn p-0 border-0 bg-transparent" type="button"
                                                    id="dropdownMenu{{ $key }}" data-bs-toggle="dropdown"
                                                    aria-expanded="false">
                                                    <i class="bi bi-three-dots-vertical fs-5"></i>
                                                </button>
                                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu{{ $key }}">
                                                    <li>
                                                        <a href="{{ route('user.showConcours', ['concoursId' => $unConcours->id]) }}"
                                                            class="dropdown-item">
                                                            Voir détails concours
                                                        </a>
                                                    </li>
                                                    @switch($unConcours->status)
                                                        @case('ACTIVE')
                                                            <form id="suspendConcours-{{ $unConcours->id }}"
                                                                action="{{ route('user.suspendConcours') }}" method="POST"
                                                                style="display: none">
                                                                @csrf
                                                                <input type="hidden" name="concours_id" value="{{ $unConcours->id }}">
                                                            </form>
                                                            <li>
                                                                <button href="javascript:void(0);" type="button"
                                                                    class="btn dropdown-item"
                                                                    onclick="submit(this, 'suspendConcours-{{ $unConcours->id }}')">
                                                                    Désactiver ce concours
                                                                </button>
                                                            </li>
                                                        @break

                                                        @default
                                                            <li>
                                                                <a href="javascript:void(0);" type="button" data-bs-toggle="modal"
                                                                    data-bs-target="#add-question{{ $unConcours->id }}"
                                                                    class="dropdown-item">
                                                                    Ajouter des questions
                                                                </a>
                                                            </li>

                                                            <form id="publishConcours-{{ $unConcours->id }}"
                                                                action="{{ route('user.publishConcours') }}" method="POST"
                                                                style="display: none">
                                                                @csrf
                                                                <input type="hidden" name="concours_id" value="{{ $unConcours->id }}">
                                                            </form>
                                                            <li>
                                                                <button href="javascript:void(0);" type="button" class="dropdown-item"
                                                                    onclick="submit(this, 'publishConcours-{{ $unConcours->id }}')">
                                                                    Publier ce concours
                                                                </button>
                                                            </li>

                                                            <li>
                                                                <a href="javascript:void(0);" type="button" data-bs-toggle="modal"
                                                                    data-bs-target="#edit{{ $unConcours->id }}" class="dropdown-item">
                                                                    Modifier ce concours
                                                                </a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:void(0);" type="button" data-bs-toggle="modal"
                                                                    data-bs-target="#delete_modal{{ $unConcours->id }}"
                                                                    class="dropdown-item text-danger">
                                                                    Supprimer ce concours
                                                                </a>
                                                            </li>
                                                    @endswitch
                                                </ul>
                                            </div>
                                            <div class="modal fade" id="add-question{{ $unConcours->id }}" tabindex="-1"
                                                aria-hidden="true">
                                                <div class="modal-dialog">
                                                    <div class="modal-content shadow rounded-4">
                                                        <form id="addQuestion-{{ $unConcours->id }}" method="POST"
                                                            action="{{ route('user.addQuiz') }}">
                                                            <div class="modal-header bg-light rounded-top-4 px-4 py-3">
                                                                <h5 class="modal-title mx-auto">
                                                                    Ajouter une question</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                                    aria-label="Fermer"></button>
                                                            </div>

                                                            @csrf
                                                            <div class="modal-body">
                                                                <input type="hidden" name="concours_id"
                                                                    value="{{ $unConcours->id }}">

                                                                <div class="mb-4">
                                                                    <label for="question_name"
                                                                        class="form-label fw-semibold text-dark">Question</label>
                                                                    <input type="text"
                                                                        class="form-control border-dark rounded-3"
                                                                        id="question_name" name="question_name"
                                                                        placeholder="Entrez une question">
                                                                </div>

                                                                <div class="email-repeater" style="padding: 1%;">
                                                                    <div data-repeater-list="responses">
                                                                        <div data-repeater-item
                                                                            class="row g-2 align-items-center mb-3">
                                                                            <div class="col-9">
                                                                                <input type="text"
                                                                                    class="form-control border-dark rounded-3"
                                                                                    id="customFile" name="response_name"
                                                                                    placeholder="Entrez une réponse">
                                                                            </div>
                                                                            <div class="col-1">
                                                                                <input type="checkbox" name="response_status"
                                                                                    id="response_status"
                                                                                    title="Cette réponse est-elle juste ? Si oui, cochez"
                                                                                    class="form-check-input border-dark rounded-3">
                                                                            </div>
                                                                            <div class="col-2 d-flex justify-content-center">
                                                                                <button data-repeater-delete="" type="button"
                                                                                    class="btn btn-outline-danger btn-sm rounded-circle"
                                                                                    title="Supprimer">
                                                                                    <i class="bi bi-x-lg"></i>
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="text-end mt-3">
                                                                        <button type="button" data-repeater-create=""
                                                                            class="btn btn-dark btn-sm rounded-pill">
                                                                            <i class="bi bi-plus me-1"></i> Ajouter une réponse
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="modal-footer bg-light rounded-bottom-4">
                                                                <button type="button" class="btn btn-secondary button-none"
                                                                    data-bs-dismiss="modal">
                                                                    Fermer
                                                                </button>
                                                                <button type="button" class="btn gradient-btn button-none"
                                                                    onclick="submit(this, 'addQuestion-{{ $unConcours->id }}')">
                                                                    Valider
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>

                                    <div class="modal fade" id="edit{{ $unConcours->id }}" data-bs-backdrop="static"
                                        data-bs-keyboard="false" tabindex="-1" aria-labelledby="editLabel"
                                        aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form id="update-{{ $unConcours->id }}" method="POST"
                                                    action="{{ route('user.updateConcours', ['concoursId' => $unConcours->id]) }}">
                                                    @csrf
                                                    @method('PATCH')
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="editMediaModalLabel">
                                                            Modification de concours
                                                        </h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <input type="hidden" name="radio_id" value="{{ $radio->id }}">
                                                        <div class="mb-3">
                                                            <label for="title" class="form-label">Titre</label>
                                                            <input type="text" name="title" id="title"
                                                                class="form-control @error('title') is-invalid @enderror"
                                                                placeholder="Entrer le titre du concours"
                                                                value="{{ $unConcours->title }}" />
                                                            @error('title')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="description" class="form-label">Description</label>
                                                            <textarea name="description" class="form-control @error('description') is-invalid @enderror" id="description"
                                                                cols="30" rows="5" placeholder="Description du jeu concours">{{ $unConcours->description }}</textarea>
                                                            @error('description')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="start_at" class="form-label">Date de début</label>
                                                            <input class="form-control @error('start_at') is-invalid @enderror"
                                                                type="datetime-local" name="start_at"
                                                                value="{{ $unConcours->start_at }}">
                                                            @error('start_at')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="mb-3">
                                                            <label for="end_at" class="form-label">Date de fin</label>
                                                            <input class="form-control @error('end_at') is-invalid @enderror"
                                                                type="datetime-local" name="end_at"
                                                                value="{{ $unConcours->end_at }}">
                                                            @error('end_at')
                                                                <div class="invalid-feedback">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="reset" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">
                                                            Annuler
                                                        </button>
                                                        <button type="button"
                                                            onclick="submit(this, 'update-{{ $unConcours->id }}')"
                                                            class="btn gradient-btn">
                                                            Modifier
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="delete_modal{{ $unConcours->id }}" data-bs-backdrop="static"
                                        data-bs-keyboard="false" tabindex="-1"
                                        aria-labelledby="deleteSurveyLabel{{ $unConcours->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content shadow rounded-4">
                                                <form id="delete-{{ $unConcours->id }}" method="POST"
                                                    action="{{ route('user.deleteConcours', ['concoursId' => $unConcours->id]) }}">
                                                    @csrf
                                                    @method('DELETE')

                                                    <div class="modal-header bg-light rounded-top-4 px-4 py-3">
                                                        <h5 class="modal-title mx-auto"
                                                            id="deleteSurveyLabel{{ $unConcours->id }}">
                                                            Suppression de concours
                                                        </h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Fermer"></button>
                                                    </div>

                                                    <div class="modal-body text-center">
                                                        <p class="mb-0 fw-semibold">
                                                            Êtes-vous sûr de vouloir supprimer le concours intitulé :
                                                        </p>
                                                        <p class="text-danger mt-2">
                                                            <strong>« {{ $unConcours->title }} »</strong>
                                                        </p>
                                                    </div>

                                                    <div
                                                        class="modal-footer bg-light rounded-bottom-4 d-flex justify-content-between px-4 py-3">
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">
                                                            Annuler
                                                        </button>
                                                        <button type="button" class="btn btn-danger"
                                                            onclick="submit(this, 'delete-{{ $unConcours->id }}')">
                                                            Supprimer
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="main-content-card">
                        <div>
                        <img src="{{ asset('assets/images/not-content.svg') }}" alt="aucun" />
                        </div>
                        <div>
                        <p class="h5">Pas de concours</p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="modal fade" id="add" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="addLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="addConcours" method="POST" action="{{ route('user.addConcours') }}">
                    @csrf
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="addLabel">
                            Création de concours
                        </h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="radio_id" value="{{ $radio->id }}">
                        <div class="mb-3">
                            <label for="title" class="form-label">Titre</label>
                            <input type="text" name="title" id="title"
                                class="form-control @error('title') is-invalid @enderror"
                                placeholder="Entrer le titre du concours" />
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea name="description" class="form-control @error('description') is-invalid @enderror" id="description"
                                cols="30" rows="5" placeholder="Description du jeu concours"></textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="start_at" class="form-label">Date de début</label>
                            <input class="form-control @error('start_at') is-invalid @enderror" type="datetime-local"
                                name="start_at">
                            @error('start_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="end_at" class="form-label">Date de fin</label>
                            <input class="form-control @error('end_at') is-invalid @enderror" type="datetime-local"
                                name="end_at">
                            @error('end_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">
                            {{ __('adminWords.reset') }}
                        </button>
                        <button type="button" class="btn gradient-btn" onclick="submit(this, 'addConcours')">
                            Créer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('dist/libs/jquery.repeater/jquery.repeater.min.js') }}" defer></script>
    <script src="{{ asset('dist/extra-libs/jquery.repeater/repeater-init.js') }}" defer></script>
    <script src="{{ asset('dist/extra-libs/jquery.repeater/dff.js') }}" defer></script>

    <script>
        function submit(btn, formId) {
            btn.disabled = true;
            $('#' + formId).submit();
        }
    </script>
@endsection