{% extends '@admin/layouts/commonmaster.html.twig' %}

{% block title %} | Dashboard {% endblock %}

{% block content %}

<div class="page-body">
  <div class="container-xl">

    {% if has_season %}

    <div class="col-12">

      {% if app.user.hasRole('ROLE_SUPER_ADMIN') or app.user.hasRole('ROLE_ADMIN') %}

      <div class="row">

        {% for season in seasons %}

        <div class="mt-4 col-md-4 col-xl-4 col-sm-6">

          <div class="card card-link card-link-pop shadow-lg">

            <a href="{{ path('app_show_season', {slug: season.slug}) }}">
              <div class="card-cover card-cover-blurred text-center" style="background-image: url('{{ asset('MatchDayFiles/Season/') }}{{ season.SeasonBannerFile }}');">
                <span class="avatar avatar-xl avatar-thumb rounded" style="background-image: url('{{ asset('MatchDayFiles/Season/') }}{{ season.SeasonBannerFile }}');"></span>
              </div>
            </a>

            {% if season.IsOpen == '0' %}
            <div class="ribbon bg-red">Closed Season</div>
            {% else %}
            <div class="ribbon bg-green">Ongoing</div>
            {% endif %}

            <div class="card-body">
              <div class="card-title">Basic info</div>
              <div class="mb-2">
                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ticket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 5l0 2" /><path d="M15 11l0 2" /><path d="M15 17l0 2" /><path d="M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2" /></svg>
                Season: <strong>
                  {{ season.Name }}
                </strong>
              </div>
              <div class="mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-secondary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>
                Start Date: <strong>{{ season.StartDate|date('Y-m-d') }}</strong>
              </div>
              <div class="mb-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-secondary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>
                End Date: <strong>{{ season.EndDate|date('Y-m-d') }}</strong>
              </div>
            </div>
          </div>
        </div>

        {% endfor %}
      </div>

      {% elseif app.user.hasRole('ROLE_CLERK') %}

      {% embed '@admin/clerk/dashboard.html.twig' %}

      {% endembed %}

      {% else %}

      {% endif %}
    </div>

    {% else %}
    <div class="col-12">
      <div class="card card-md">
        <div class="card-body">
          <div class="row align-items-center">
            <div class="col">
              <h2 class="h3">There are no upcoming seasons in the system</h2>
              <p class="m-0 text-secondary">
                No Upcoming Seasons Scheduled
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container-xl d-flex flex-column justify-content-center">
      <div class="empty">
        <div class="empty-img"><img src="{{ asset('images/static/illustrations/void.svg') }}" height="128" alt="">
        </div>
        <p class="empty-title">No upcoming seasons found</p>
        <p class="empty-subtitle text-secondary">
          Try creating a season to populate your dashboard
        </p>
        <div class="empty-action">
          <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal_create_season">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
            Create Season
          </a>
        </div>
      </div>
    </div>

    {% endif %}
  </div>
</div>

<div class="modal modal-blur fade" id="modal_create_season" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-success"></div>

      <form method="POST" action="{{ path('app_store_season') }}" id="createSeason" enctype="multipart/form-data">

        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

        <div class="modal-body text-center py-4">
          <i style="font-size: 70px;color: green;" class="ti ti-ticket"></i>
          <h3>Season Details</h3>
          <div class="form-group">
            <label for="name"><strong>Season Name</strong></label>
            <input required type="text" class="form-control" placeholder="Enter season name" name="name">
          </div>
          <div class="form-group mt-2">
            <label for="name"><strong>Start Date</strong></label>
            <input required class="form-control datepicker" autocomplete="off" name="start_date" placeholder="Select a date" id="datepicker_icon"/>
          </div>
          <div class="form-group mt-2">
            <label for="name"><strong>End Date</strong></label>
            <input required class="form-control datepicker" autocomplete="off" name="end_date" placeholder="Select a date" id="datepicker_icon"/>
          </div>
          <div class="form-group mt-2">
            <label class="form-label"><strong>Season Banner Image</strong></label>
            <div class="dropzone" id="dropzone-default" autocomplete="off" novalidate>
              <div class="fallback">
                <input name="season_banner_file" type="file" required  />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="w-100">
            <div class="row">
              <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
                Cancel
              </a></div>
              <div class="col">
                <button type="submit" class="btn btn-success w-100" id="createSeasonBtn">
                  Add Season
                </button></div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}

{% endblock %}