@extends('layouts.manage')

@section('content') 

@if ($message = Session::get('success'))
<x-alert type="success" message="{{ $message }}" />
@endif

<form method="post" action="{{ $action }}">
@csrf
@method('PUT') 

<input type="hidden" name="achievement_id" />
<input type="hidden" name="achievement_active" />
</form>

<div class="relative flex flex-col xl:flex-row justify-between gap-10">
    <div class="flex flex-col w-full bg-white rounded-3xl shadow-2xl p-14 md:p-10">
        <h1 class="text-3xl 2xl:text-4xl font-semibold leading-3 text-center p-2">Activate/Modify Achievement</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        @if($achievements->isEmpty())
        <p class="mx-auto text-center">
            <strong>There are currently no Achievements available.</strong><br />
            Please <a href="#" class="preset-achievements font-bold">click here</a> to add the achievements.
        </p>
        <x-modal name="preset-achievements" title="Preset Achievements" content="Do you want to continue using our preset achievements?" link="{{ route('city.achievementPreset', $city->city_id) }}" />
        @endif
        <div class="grid grid-cols-4 gap-10 py-3">
            @foreach ($achievements as $key => $achievement) 
            <div class="p-5 rounded-xl shadow-lg">
                <div class="w-full pt-2">
                    @if(!empty($achievement->achievement_logo_selected)) 
                    <img class="mx-auto" src="
                        @if($achievement->achievement_active == 1) 
                            {{ $achievement->achievement_logo_selected }}
                        @else
                            {{ $achievement->achievement_logo }}
                        @endif
                    " />
                    @endif 
                </div>
                <div class="achievement-name w-full pt-5 font-bold uppercase">{{ $achievement->achievement_name ?? '' }}</div>
                <div class="achievement-desc w-full pt-2">
                    <span class="font-bold">Earned when</span><br />
                    {{ $achievement->achievement_description ?? '' }}
                </div>
                <div class="flex flex-row w-full pt-5">
                    <div class="w-1/2">
                        <label for="achievement{{ $achievement->achievement_id }}" class="flex items-center cursor-pointer">
                            <div class="relative">
                                <input class="achievement-active hidden" id="achievement{{ $achievement->achievement_id }}" name="achievement_active{{ $achievement->achievement_id }}" data-id="{{ $achievement->achievement_id }}" type="checkbox" 
                                    @if($achievement->achievement_active == 1) 
                                        checked="checked"
                                    @endif
                                />
                                <div class="toggle-line w-12 h-7 bg-gray-400 rounded-full shadow-inner"></div>
                                <div class="toggle-dot absolute w-5 h-5 bg-white rounded-full shadow "></div>
                            </div>
                            <div class="ml-3 text-gray-700 font-medium"></div>
                        </label>
                    </div>
                    <div class="achievement-edit w-1/2 text-right font-bold"><a href="{{ route('city.achievementEdit', [$city->city_id, $achievement->achievement_id]) }}">Edit</a></div>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</div>

@stop