@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

      <div class="container">

        <h2>Klasyfikacje zawodników</h2>
        @forelse ($categories as $category)
        @forelse ($category->classification as $categoryClassification)
        @if ($loop->first)
        <div class="h6">
          Klasyfikacje:
        </div>
        @endif
        <div class="">
          {{ $categoryClassification->name }}
        </div>
        @empty
        <h6>Brak klasyfikacji</h6>
        @endforelse
        @empty
        <h6>Brak kategorii</h6>
        @endforelse
      </div>
      <div class="container mb-4">
        <div class="row">

          <div class="col">
            <!-- Button trigger modal -> add new classification-->
            <button type="button" class="btn btn-success btn-lg btn-block" data-toggle="modal" data-target="#addClassificationModal">
              Dodaj nową klasyfikację
            </button>

            <!-- Modal add new classification-->
            <div class="modal fade" id="addClassificationModal" tabindex="-1" role="dialog" aria-labelledby="addClassificationModalTitle" 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="addClassificationModalTitle">Dodaj nową klasyfikację</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->path() }}/classifications" id="addClassificationForm">
                      @csrf
                      <div class="row">
                        <div class="col">

                          <div class="form-group">
                            <label for="name">Nazwa klasyfikacji</label>
                            <input type="text" class="form-control" name="name" placeholder="Podaj nazwę kategorii">
                          </div>
                          <div class="form-group">
                            <label for="ageFrom">Wiek od</label>
                            <input type="number" class="form-control" id="ageFrom" name="ageFrom" placeholder="Wiek od">
                          </div>
                          <div class="form-group">
                            <label for="ageTo">Wiek do</label>
                            <input type="number" class="form-control" id="ageTo" name="ageTo" placeholder="Wiek do">
                          </div>
                          <select name="gender" id="gender" class="form-control">
                            <option>Wybierz płeć</option>
                            <option value="K">Kobieta</option>
                            <option value="M">Mężczyzna</option>
                          </select>
                        </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="addClassificationForm">Dodaj kategorię</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 class="card mt-3">
        <h4 class="card-header" style="font-family: 'Oxanium', cursive;">
          Organizator
        </h4>
        <div class="card-body">
          @if (count($competition->organizers()->get()) > 0)
          <h5 class="card-title font-weight-bolder">{{ $competition->organizers->name }}</h5>
          <p class="card-text">{{ $competition->organizers->telephone }}</p>
          <p class="card-text">{{ $competition->organizers->contact_person }}</p>
          <p class="card-text">{{ $competition->organizers->email }}</p>
          <p class="card-text">{{ $competition->organizers->website }}</p>
          @endif
          <a href="#" class="btn btn-primary">Edytuj organizatora</a>
        </div>
      </div>

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

@endsection