@extends('layouts.admin')

@section('title', 'Themes Management')
@section('page_title', 'Themes Management')

@section('content')
<div class="mb-4 d-flex justify-content-between align-items-center">
    <h4 class="mb-0">Available Themes</h4>
    <a href="{{ route('admin.themes.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-circle"></i> Add New Theme
    </a>
</div>

<div class="row">
    @forelse($themes as $theme)
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card border-0 shadow-sm h-100">
                <!-- Color Preview -->
                <div class="card-header border-0 p-3">
                    <div class="row g-1">
                        <div class="col-2" style="background-color: {{ $theme->primary_color }}; height: 30px; border-radius: 4px;"></div>
                        <div class="col-2" style="background-color: {{ $theme->secondary_color }}; height: 30px; border-radius: 4px;"></div>
                        <div class="col-2" style="background-color: {{ $theme->success_color }}; height: 30px; border-radius: 4px;"></div>
                        <div class="col-2" style="background-color: {{ $theme->danger_color }}; height: 30px; border-radius: 4px;"></div>
                        <div class="col-2" style="background-color: {{ $theme->warning_color }}; height: 30px; border-radius: 4px;"></div>
                        <div class="col-2" style="background-color: {{ $theme->info_color }}; height: 30px; border-radius: 4px;"></div>
                    </div>
                </div>

                <div class="card-body">
                    <h5 class="card-title">{{ $theme->name }}</h5>
                    
                    @if($theme->is_active)
                        <span class="badge bg-success mb-2">Active</span>
                    @else
                        <span class="badge bg-secondary mb-2">Inactive</span>
                    @endif

                    <!-- Color Info -->
                    <div class="small text-muted mb-3">
                        <div><strong>Primary:</strong> {{ $theme->primary_color }}</div>
                        <div><strong>Secondary:</strong> {{ $theme->secondary_color }}</div>
                    </div>
                </div>

                <div class="card-footer bg-light border-top p-2 d-flex gap-1">
                    <a href="{{ route('admin.themes.edit', $theme) }}" class="btn btn-sm btn-outline-warning flex-grow-1">
                        <i class="bi bi-pencil"></i> Edit
                    </a>
                    @if(!$theme->is_active)
                        <form action="{{ route('admin.themes.activate', $theme) }}" method="POST" class="flex-grow-1">
                            @csrf
                            <button type="submit" class="btn btn-sm btn-outline-success w-100">
                                <i class="bi bi-check-circle"></i> Activate
                            </button>
                        </form>
                    @endif
                    <form action="{{ route('admin.themes.destroy', $theme) }}" method="POST" class="flex-grow-1" onsubmit="return confirm('Are you sure?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger w-100">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    @empty
        <div class="col-12">
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> No themes found. 
                <a href="{{ route('admin.themes.create') }}" class="alert-link">Create your first theme</a>
            </div>
        </div>
    @endforelse
</div>
@endsection