@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>LST - Lista wyboru. </h2>

            <p>Można dodać dowolną ilość list wyboru. Z listy wyboru zawodnik podczas rejestracji może wybrać tylko
                jedną pozycję.</p>

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

                <div class="row">

                    <div class="col">

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


                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1">{{ $lst->name }}</span>
                            </div>

                            <input type="text" class="form-control" placeholder=""
                                value="@foreach($lst->elements as $el){{trim($el->name).';'}}@endforeach"
                                aria-label="Lstname" aria-describedby="basic-addon1" name="elements">
                            <!-- <div class="input-group-append">
                                    <a class="btn btn-outline-primary" href="#dellst{{$lst->id}}"><i class="fas fa-sync text-primary"></i></a>
                                </div> -->
                            <div class="input-group-append">
                                <a class="btn btn-outline-danger" href="#dellst{{$lst->id}}" data-toggle="modal"
                                    data-target="#dellst{{$lst->id}}"><i class="far fa-trash-alt text-danger"></i></a>
                                <div class="modal fade" id="dellst{{$lst->id}}" tabindex="-1" role="dialog"
                                    aria-labelledby="dellst{{$lst->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="dellst{{$lst->id}}Title">Potwierdź
                                                    usunięcie listy wybory LST</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().'/lst/'.$lst->id }}"
                                                    method="POST" id="dellst{{$lst->id}}Form">
                                                    @method('DELETE')
                                                    @csrf
                                                    <div class="alert alert-danger text-center" role="alert">
                                                        Potwierdź usunięcie listy wyboru LST <span
                                                            class="font-text-bold">{{$lst->name}}</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="dellst{{$lst->id}}Form">Usuń
                                                    listę wyboru LST</button>
                                            </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @livewire('checkbox-l-s-t', ['competition' => $competition, 'lst' => $lst])
                        </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="#addLSTModal">
                            Dodaj nową listę wyboru LST
                        </button>

                        <!-- Modal add new category-->
                        <div class="modal fade" id="addLSTModal" tabindex="-1" role="dialog"
                            aria-labelledby="addLSTModalTitle" 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="addLSTModalTitle">Dodaj nową listę wyboru LST</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().'/lst' }}"
                                            id="addLSTForm">
                                            @csrf
                                            <div class="row">
                                                <div class="col">
                                                    <div class="form-group">
                                                        <label for="lst_name">Nazwa listy wyboru</label>
                                                        <input type="text" class="form-control" name="lst_name"
                                                            placeholder="Nazwa listy wyboru">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="lst_elements">Elementy listy rozdzielone średnikiem
                                                            - ;</label>
                                                        <input type="text" class="form-control" name="lst_elements"
                                                            placeholder="Elementy listy">
                                                    </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="addLSTForm">Dodaj nową listę
                                            wyboru LST</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>
                </ul>
            </div>


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

@endsection