@extends('layouts.master')
@section('background-image', '/assets/images/bg-2.png')
@section('bg-y', '-100px')
@section('content')
    <div class="nk-gap-5"></div>
    <div class="container">
        <div class="nk-info-box nk-info-box-sm bg-main-1 rounded">
            <div class="nk-info-box-icon">
                <i class="fal fa-fw fa-exclamation-circle"></i>
            </div>
            {{ __("event.EventDesc") }}
        </div>
        <div class="nk-box-2 ranking-table bg-dark-1 rounded">
            <div class="text-center">
                <h2 class="nk-title">{{ __("event.EventTracking") }}</h2>
                <div class="nk-title-sep-icon" style="margin: 5px auto;">
                    <span class="icon"><span class="ion-ios-game-controller-a text-warning"></span></span>
                </div>
            </div>
            <div class="nk-gap-1"></div>
            <div class="nk-accordion" id="accordion-events" role="tablist" aria-multiselectable="true">
                @forelse ($events as $event)
                    <div class="panel panel-default bg-dark-2 block-border block-shadow p-10 mb-10 rounded">
                        <div class="panel-heading" role="tab" id="accordion-{{ $event->EVT_SRL }}-heading">
                            <a data-toggle="collapse" data-parent="#accordion-events" href="#accordion-{{ $event->EVT_SRL }}" aria-expanded="false" aria-controls="accordion-2" class="collapsed p-0">
                                <div class="d-flex justify-content-between">
                                    <div class="event-img{{ $event->EVT_END_DATE < now()->toDateTimeString() ? " event-img-disabled" : "" }}" style="background-image: url('{{ $event->EVT_IMG_URL ?? '/assets/images/image-1.jpg' }}');"></div>
                                    <div class="pl-10 text-center">
                                        <h5>{{ $event->EVT_TITLE }} &middot; {!! $event->EVT_END_DATE < now()->toDateTimeString() ? "<span class=text-danger>ENCERRADO</span>" : "De " . Helper::date_stringFormat($event->EVT_START_DATE, false) . " até " . Helper::date_stringFormat($event->EVT_END_DATE, false) !!}</h5>
                                        <p>
                                            {{ $event->EVT_DESC }}
                                        </p>
                                        @if ($event->GENERAL_REWARDS)
                                        <p class="mb-0">
                                            <strong class="text-success">RECOMPENSA FINAL:</strong> <span class="text-warning">{{ $event->GENERAL_REWARDS ?? "There is no reward in this event." }}</span>
                                        </p>
                                        @endif
                                    </div>
                                    <div style="font-size: 5rem;">
                                        @if ($event->log != null)
                                            @if ($event->log->RECV_REWARD_YN == 'N')
                                                @if ($event->EVT_END_DATE > now()->toDateTimeString())
                                                    <i class="fa fa-fw fa-clock text-warning" data-tippy="{{ __("event.EventOngoing") }}" data-tippy-arrow="true"></i>
                                                @else
                                                    <i class="fa fa-fw fa-times-circle text-danger" data-tippy="{{ __("event.EventNotFinished") }}" data-tippy-arrow="true"></i>
                                                @endif
                                            @else
                                                <i class="fa fa-fw fa-check-circle text-success" data-tippy="{{ __("event.EventtFinished") }}" data-tippy-arrow="true"></i>
                                            @endif
                                        @elseif ($event->EVT_END_DATE > now()->toDateTimeString())
                                            <i class="fa fa-fw fa-clock text-warning" data-tippy="{{ __("event.EventOngoing") }}" data-tippy-arrow="true"></i>
                                        @else
                                            <i class="fa fa-fw fa-times-circle text-danger" data-tippy="{{ __("event.EventNotFinished") }}" data-tippy-arrow="true"></i>
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div id="accordion-{{ $event->EVT_SRL }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="accordion-2-heading" style="">
                            <hr class="bg-light op-2">
                            @if (!Session::has("userData"))
                                <div class="row">
                                    <div class="col-12 text-center">
                                        <a href="{{ route("auth.login") }}"><strong>{{ __("event.NeedtoLogin") }}</strong></a> {{ __("event.NeedtoLogin2") }}<br>
                                    </div>
                                </div>
                            @else
                                @for ($i = 1; $i <= 5; $i++)
                                    @if ($event->{"STEP" . $i . "_NAME"} != null)
                                        @php $perc = \Helper::math_DivisionByZero($event->log->{"STEP" . $i . "_CNT"} ?? 0, $event->{"STEP" . $i . "_CNT"} ?? 0) * 100; @endphp
                                        <div class="nk-progress nk-count mb-5" data-progress="{{ $perc > 100 ? 100 : $perc }}" data-progress-mask="{$}%" data-nk-mask="{$}%">
                                            <div class="nk-progress-title">{{ $event->{"STEP" . $i . "_NAME"} ?? 0 }}</div>
                                            <div class="d-flex flex-row">
                                                <div class="nk-progress-line bg-main-1" style="max-width: 50%;">
                                                    <div class="bg-main-2">
                                                        <div class="nk-progress-percent"></div>
                                                    </div>
                                                </div>
                                                <div class="position-relative ml-10" style="top: -15px;">
                                                    {{ $event->log->{"STEP" . $i . "_CNT"} ?? 0 }}/{{ $event->{"STEP" . $i . "_CNT"} ?? 0 }} &middot; {!! $event->{"STEP" . $i . "_REWARD"} ? "<span class=text-success>{$event->{"STEP" . $i . "_REWARD"}}</span>" : "<span class=text-muted>". __("event.NoPartialReward") ."</span>" !!}
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endfor
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="bg-dark-2 block-border block-shadow p-10 mb-10 rounded">
                        {{ __("event.NoEvent") }}
                    </div>
                @endforelse
            </div>
        </div>
    </div>
    <div class="nk-gap-5"></div>
@endsection