@extends('layouts.manage')

@section('content') 

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

<form method="post" action="{{ $action }}" enctype="multipart/form-data">
@csrf

@isset($achievement) 
    @method('PUT') 
@endisset 

@include('includes.errors') 

<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">Edit Achievement</h1>
        <hr class="w-24 mx-auto h2-line pb-5 mb-5" />
        @isset($achievement->preset)
        <div class="flex flex-row">
            <div class="w-1/5 p-3"></div>
            <div class="preset p-3 w-1/5 text-center font-medium">Default</div>
            <div class="w-3/5 p-3 text-center font-medium">Custom</div>
        </div>
        @endisset
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Achievement Name</div>
            @isset($achievement->preset)
            <div class="preset w-1/5 p-3 text-center">{{ $achievement->preset->achievement_preset_name ?? '' }}</div>
            @endisset
            <div class="w-3/5 p-3">
                <input class="w-full" type="text" name="achievement_name" value="{{ $achievement->achievement_name ?? '' }}" placeholder="Enter name" />
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3">
                <span class="font-medium">Achievement Logo (Unselected)</span><br />
                <span class="text-sm">(Image should be 100 x 100 px)</span>
            </div>
            @isset($achievement->preset)
            <div class="preset w-1/5 p-3 text-center flex flex-wrap content-center">
                <img class="mx-auto" src="{{ $achievement->preset->achievement_preset_logo ?? '' }}" />
            </div>
            @endisset
            <div class="w-3/5 p-3 flex flex-wrap content-center">
                @isset($achievement->achievement_logo) 
                <div class="mx-3 flex flex-wrap content-center">
                    <img class="prev_logo mx-auto" src="{{ $achievement->achievement_logo ?? '' }}" />
                </div>
                @endisset 
                <div class="mx-3 flex flex-wrap content-center">
                    <x-upload-image button="Upload" field="achievement_logo" />
                </div>
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3">
                <span class="font-medium">Achievement Logo (Selected)</span><br />
                <span class="text-sm">(Image should be 100 x 100 px)</span>
            </div>
            @isset($achievement->preset)
            <div class="preset w-1/5 p-3 text-center flex flex-wrap content-center">
                <img class="mx-auto" src="{{ $achievement->preset->achievement_preset_logo_selected ?? '' }}" />
            </div>
            @endisset
            <div class="w-3/5 p-3 flex flex-wrap content-center">
                @isset($achievement->achievement_logo_selected) 
                <div class="mx-3 flex flex-wrap content-center">
                    <img class="prev_logo mx-auto" src="{{ $achievement->achievement_logo_selected ?? '' }}" />
                </div>
                @endisset 
                <div class="mx-3 flex flex-wrap content-center">
                    <x-upload-image button="Upload" field="achievement_logo_selected" />
                </div>
            </div>
        </div>
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Achievement Description</div>
            @isset($achievement->preset)
            <div class="preset w-1/5 p-3 text-center">{{ $achievement->preset->achievement_preset_description ?? '' }}</div>
            @endisset
            <div class="w-3/5 p-3">
                <textarea class="w-full" name="achievement_description" rows="5" placeholder="Enter description">{{ $achievement->achievement_description ?? '' }}</textarea>
            </div>
        </div>
        @isset($achievement) 
        <div class="flex flex-row">
            <div class="w-1/5 p-3 font-medium">Enable/ Disable</div>
            <div class="preset w-1/5 p-3 text-center"></div>
            <div class="w-3/5 p-3 ml-5">
                <label for="achievement" class="flex items-center cursor-pointer">
                    <div class="relative">
                        <input class="hidden" id="achievement" name="achievement_active" type="checkbox" 
                            @isset($achievement) 
                                @if($achievement->achievement_active == 1) 
                                    checked="checked"
                                @endif
                            @endisset
                        />
                        <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>
        @endisset
        <div class="flex flex-row text-center p-3">
            <input class="mx-auto btn" type="submit" value="Save" />
        </div>
    </div>
</div>

</form>

@stop