@extends('layouts.app')

@section('header_h')
<h1 class="d-none font-weight-bold  d-lg-block text-light" style="font-family: 'Oxanium', cursive; font-size: 64px;">
    {{ $competition->name }} <a href="{{$competition->path()}}" class="text-white" target="_blank"><i
            class="far fa-eye"></i></a></h1>
<h3 class="d-block font-weight-bold  d-lg-none text-light" style="font-family: 'Oxanium', cursive; font-size: 38px;">
    {{ $competition->name }}
    <a href="{{$competition->path()}}" class="text-white" target="_blank"><i class="far fa-eye"></i></a></h3>
@endsection

@section('content')

<div class="container">
    <div class="row">
        <div class="col">

            @if (session('status'))
            <div class="container ">
                <div class="row">
                    <div class="col">
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <h2>ATF - Dodatkowe pole tekstowe. </h2>

            <p>Można dodać dowolną ilość pól tekstowych w które zawodnik podczas rejestracji może podać dodatkowe
                informacje.</p>

            @if($competition->atf->count() > 0)
            <div class="container mb-4">

                <div class="row">

                    <div class="col">

                        @foreach ($competition->atf as $atf)


                        <div class="input-group mb-3">
                            <!-- <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1">Pole tekstowe: </span>
                </div> -->
                            <input type="text" class="form-control" placeholder="{{ $atf->text_field }}"
                                value="{{ $atf->text_field }}" aria-label="Username" aria-describedby="basic-addon1">
                            @livewire('checkbox-a-t-f', ['competition' => $competition, 'atf' => $atf])
                            @livewire('required-a-t-f', ['competition' => $competition, 'atf' => $atf])
                            <div class="input-group-append">


                                <a class="btn btn-outline-danger" href="#delatf{{$atf->id}}" data-toggle="modal"
                                    data-target="#delatf{{$atf->id}}"><i class="far fa-trash-alt text-danger"></i></a>
                                <div class="modal fade" id="delatf{{$atf->id}}" tabindex="-1" role="dialog"
                                    aria-labelledby="delatf{{$atf->id}}Title" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="delatf{{$atf->id}}Title">Potwierdź
                                                    usunięcie pola tekstowego ATF</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <form class="" action="{{ $competition->adminPath().'/atf/'.$atf->id }}"
                                                    method="POST" id="delatf{{$atf->id}}Form">
                                                    @method('DELETE')
                                                    @csrf
                                                    <div class="alert alert-danger text-center" role="alert">
                                                        Potwierdź usunięcie pola tekstowego ATF <span
                                                            class="font-text-bold">{{$atf->text_field}}</span>.
                                                    </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-outline-danger"
                                                    data-dismiss="modal">Anuluj</button>
                                                <button type="submit" class="btn btn-danger"
                                                    form="delatf{{$atf->id}}Form">Usuń
                                                    pole tekstowe ATF</button>
                                            </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        @endforeach

                    </div>
                </div>
            </div>
            @endif

            <div class="container mb-4">
                <div class="row">

                    <div class="col">
                        <!-- Button trigger modal -> add new category-->
                        <button type="button" class="btn btn-success btn-lg btn-block" data-toggle="modal"
                            data-target="#addATFModal">
                            Dodaj nowe pole ATF
                        </button>

                        <!-- Modal add new category-->
                        <div class="modal fade" id="addATFModal" tabindex="-1" role="dialog"
                            aria-labelledby="addATFModalTitle" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-scrollable" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="addATFModalTitle">Dodaj nowe pole ATF</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <form method="post" action="{{ $competition->adminPath().'/atf' }}"
                                            id="addATFForm">
                                            @csrf
                                            <div class="row">
                                                <div class="col">

                                                    <div class="form-group">
                                                        <label for="text_field">Pole tekstowe</label>
                                                        <input type="text" class="form-control" name="text_field"
                                                            placeholder="Nazwa pola tekstowego">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-primary"
                                            data-dismiss="modal">Anuluj</button>
                                        <button type="submit" class="btn btn-primary" form="addATFForm">Dodaj pole
                                            tekstowe</button>

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

                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 ">
           <x-admin-menu :competition="$competition" />


            <div class="card mt-3">
                <h4 class="card-header" style="font-family: 'Oxanium', cursive;">
                    Uczestnicy
                </h4>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item"><a href="{{ $competition->adminPath() }}/members">Zarejestrowani</a>
                    </li>
                    <li class="list-group-item"><a
                            href="/admin/competitions/{{ $competition->id }}/members/download">Pobierz listę
                            zawodników (XLSX)</a>
                    </li>
                </ul>
            </div>


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

@endsection