@extends('theme::layout.layout_dashboard')

@section('title', ''.env('APP_NAME_DASHBOARD').' | Gerenciar Temas')

@section('content')

@php
    $activeTheme = config('theme.active');
@endphp
<div>
	<div class="container mx-auto">
		<div class="title-drake-fusion-formated">
            <h2 class="text-base font-semibold leading-4 text-gray-900 inline-flex-aliest" style="text-transform: uppercase;">Gerenciar Temas <!-- <a href="{{ url('/admin/pages') }}" class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-2 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[30px] min-w-[30px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
            <i data-feather="arrow-left" class='mr-0'></i> <span>Voltar</span></a> --></h2>
            <p class="mt-0 text-sm leading-0 text-gray-600">O Gerenciar Temas facilita a personalização do visual do seu aplicativo. Com esta ferramenta, você pode ativar, desativar e configurar temas de maneira simples e rápida.</p>
        </div>
        <hr style="margin-top: 1em;">
		<div class="flex flex-wrap -mx-4" style="margin-top: 0em!important;">
			@if (count($themes) > 0)
			    @foreach ($themes as $item)
			        <div class="w-full sm:w-1/2 md:w-1/2 xl:w-1/4 p-4">
				        <a class="c-card block bg-white shadow-md hover:shadow-xl rounded-lg overflow-hidden">
					        <div class="relative pb-48 overflow-hidden">
					          <img class="absolute inset-0 h-full w-full object-cover" src="{{ $item->thumb }}" alt="">
					        </div>
					        <div class="p-4">
					          <span class="inline-block px-2 py-1 leading-none bg-blue-200 text-black-300 rounded-full font-semibold uppercase tracking-wide text-xs">{{ $item->autor }}</span>
					          <h2 class="mt-2 mb-2 font-bold">{{ $item->title }}</h2>
					          <p class="text-sm">{{ Str::limit($item->description, 80, '...') }}</p>
					        </div>
					        <div class="p-4 border-t border-b text-xs text-gray-700">
					          <span class="flex items-center">Versão: {{ $item->version }}</span>        
					        </div>
					        <div class="p-4 flex items-center text-sm text-gray-600" id="html-buttons-{{ $item->id }}">
							    @if ($activeTheme == $item->slug)
								    <button style="background-color: green;" type="button"
								    class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-2 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[38px] min-w-[38px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
									    <i data-feather="check-circle" class='mr-0'></i>
									    <span>ATIVO</span>
								    </button>
								@else
								    <button onclick="UpdateTheme('{{$item->slug}}')" type="button"
								    class="group inline-flex items-center justify-center whitespace-nowrap rounded-lg py-2 align-middle text-sm font-semibold leading-none transition-all duration-300 ease-in-out disabled:cursor-not-allowed bg-blue-700 stroke-white text-white hover:bg-blue-950 h-[38px] min-w-[38px] gap-2 disabled:bg-slate-100 disabled:stroke-slate-400 disabled:text-slate-400 disabled:hover:bg-slate-100 px-4">
									    <i data-feather="plus" class='mr-0'></i>
									    <span>ATIVAR</span>
								    </button>
								@endif
					        </div>
					    </a>
				      </div>
			    @endforeach
			@endif
	    </div>
	    @if (count($themes) == 0)
		    <div style="margin-top: 1.5em;" id="alert-additional-content-2" class="p-4 mb-4 text-red-800 border border-red-300 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800" role="alert">
		        <div class="flex items-center">
		          <svg class="flex-shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
		            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
		          </svg>
		          <span class="sr-only">Info</span>
		          <h3 class="text-lg font-medium">Atenção</h3>
		        </div>
		        <div class="mt-2 mb-4 text-sm">
		          Não foram encontrados itens disponíveis em nosso banco de dados.
		        </div>
		        <div class="flex">
		          <button style="text-transform: uppercase;" type="button" class="text-red-800 bg-transparent border border-red-800 hover:bg-red-900 hover:text-white focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-xs px-3 py-1.5 text-center dark:hover:bg-red-600 dark:border-red-600 dark:text-red-500 dark:hover:text-white dark:focus:ring-red-800" data-dismiss-target="#alert-additional-content-2" aria-label="Close">
		            Fechar
		          </button>
		        </div>
	        </div>
		@endif
	</div>

	<script type="text/javascript">
		function UpdateTheme(slug) {
		  	axios.post('/admin/update-theme', {
			    theme: ''+slug+''
			})
			.then(response => {
				location.reload();
			})
			.catch(error => {
			    alert(error);
			});
		}
	</script>
</div>
@endsection