@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Themes List')
@section('content')

    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-semibold">{{ __('translate.Theme Demo') }}</h1>
        <a href="{{ route('admin.themes.create') }}" class="btn btn-primary">
            <i class="fas fa-plus mr-2"></i>
            {{ __('translate.Create Theme') }}
        </a>
    </div>

    <!-- content  -->
    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
        @if (count($themes) > 0)
            @foreach ($themes as $theme_name => $theme_info)
                <div class="bg-opacity border border-border rounded-lg p-3 h-fit">
                    <div class="w-full aspect-[253/287] rounded overflow-hidden">
                        @if (file_exists(public_path('backend/assets/img/theme/' . $theme_name . '.png')))
                            <img src="{{ asset('backend/assets/img/theme/' . $theme_name . '.png') }}"
                                alt="{{ $theme_info['name'] ?? $theme_name }}" class="w-full h-auto">
                        @else
                            <img src="{{ asset('backend/assets/img/placeholder-image.png') }}"
                                alt="{{ $theme_info['name'] ?? $theme_name }}" class="w-full h-full">
                        @endif
                    </div>

                    <div class="mt-5">
                        <div class="flex items-center gap-2">
                            <h4>
                                {{ $theme_info['name'] ?? ucfirst($theme_name) }}</h4>
                            @if ($active_theme == $theme_name)
                                <span
                                    class="bg-green-400 text-white text-xs px-2 py-1 rounded">{{ __('translate.Active') }}</span>
                            @endif
                        </div>

                        <p class="crancy-theme-card__text mt-2 text-gray-600">
                            {{ $theme_info['description'] ?? 'No description available' }}
                        </p>

                        <div class="flex items-center gap-2">
                            <span>{{ __('translate.Version') }}:
                                {{ $theme_info['version'] ?? '1.0.0' }}</span>
                            <span>{{ __('translate.Author') }}:
                                {{ $theme_info['author'] ?? 'Unknown' }}</span>
                        </div>

                        <div class="flex mt-4 gap-2.5">
                            <form action="{{ route('admin.themes.activate', $theme_name) }}" method="POST" class="inline">
                                @csrf

                                <button {{ $active_theme == $theme_name ? 'disabled' : '' }} type="submit"
                                    class="btn-primary text-12 font-medium py-2 px-3 rounded {{ $active_theme == $theme_name ? 'opacity-40' : '' }}">
                                    <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M2.5 7L4.26321 8.41057C4.67687 8.74149 5.27682 8.69242 5.6312 8.29867L9.5 4"
                                            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>

                                    <span> {{ __('translate.Active') }}</span>
                                </button>
                            </form>

                            @if ($active_theme != $theme_name)
                                <form action="{{ route('admin.themes.destroy', $theme_name) }}" method="POST">
                                    @csrf
                                    @method('DELETE')

                                    <button {{ $active_theme == $theme_name ? 'disabled' : '' }} type="submit"
                                        class="btn-border text-12 font-medium py-2 px-3 text-headline hover:border-error hover:text-error rounded">
                                        <svg width="12" height="13" viewBox="0 0 12 13" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M9.5 5L9.14205 9.65339C9.06189 10.6954 8.19301 11.5 7.14794 11.5H4.85206C3.80699 11.5 2.93811 10.6954 2.85795 9.65339L2.5 5M10.5 4C9.20104 3.36699 7.65683 3 6 3C4.34317 3 2.79896 3.36699 1.5 4M5 3V2.5C5 1.94772 5.44772 1.5 6 1.5C6.55228 1.5 7 1.94772 7 2.5V3M5 6V9M7 6V9"
                                                stroke="currentColor" stroke-linecap="round" />
                                        </svg>

                                        <span>{{ __('translate.Remove') }}</span>
                                    </button>
                                </form>
                            @endif
                        </div>

                    </div>
                </div>
            @endforeach
        @else
            <div class="bg-opacity border border-border rounded-lg p-8 h-fit">
                <div class="text-center">
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">
                        No Themes Found
                    </h3>
                    <p class="text-gray-600 mt-2 mb-4 max-w-md mx-auto">
                        You have not created any themes yet. Click the button below to create your first theme.
                    </p>
                    <a href="{{ route('admin.themes.create') }}" class="btn btn-primary">
                        Create Theme
                    </a>
                </div>
            </div>
        @endif
    </div>

@endsection

@push('scripts')
    <script>
        (function($) {
            "use strict";

            $(document).ready(function() {
                // Confirm before deleting a theme
                $('.theme-delete-form').on('submit', function(e) {
                    e.preventDefault();

                    if (confirm(
                            "Are you sure you want to delete this theme? This action cannot be undone."
                        )) {
                        this.submit();
                    }
                });
            });
        })(jQuery);
    </script>
@endpush