@extends('backEnd.layouts.master')

@section('title', 'Theme Setup')



@section('content')

<div class="page-header">

    <div>

        <h4><i class="fas fa-palette me-2 text-success"></i>Theme Setup — সহজ ২ ধাপ</h4>

        <nav aria-label="breadcrumb">

            <ol class="breadcrumb mb-0">

                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>

                <li class="breadcrumb-item"><a href="{{ route('admin.settings.general') }}">Settings</a></li>

                <li class="breadcrumb-item active">Theme</li>

            </ol>

        </nav>

    </div>

</div>



<div class="row g-3 mb-4">

    <div class="col-md-6">

        <div class="card border-success border-2 h-100 shadow-sm">

            <div class="card-body">

                <div class="d-flex align-items-start gap-3">

                    <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px">

                        <span class="fs-4 fw-bold text-success">1</span>

                    </div>

                    <div>

                        <h5 class="fw-bold mb-1">Theme Layout</h5>

                        <p class="text-muted small mb-0">

                            @if($canManageAllThemes ?? false)

                                Super admin — সব theme layout দেখতে ও switch করতে পারবেন।

                            @else

                                আপনার store-এ শুধু active Ayurvedic/Organic layout আছে। Color customize Step 2 থেকে করুন।

                            @endif

                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

    <div class="col-md-6">

        <div class="card border-primary border-2 h-100 shadow-sm">

            <div class="card-body">

                <div class="d-flex align-items-start gap-3">

                    <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px">

                        <span class="fs-4 fw-bold text-primary">2</span>

                    </div>

                    <div class="flex-grow-1">

                        <h5 class="fw-bold mb-1">Color Customize করুন</h5>

                        <p class="text-muted small mb-2">Preset click করুন বা color picker দিয়ে brand color set করুন — hex code লাগবে না।</p>

                        <a href="{{ route('admin.settings.theme.colors') }}" class="btn btn-success btn-sm">

                            <i class="fas fa-palette me-1"></i> Theme Color Studio

                        </a>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>



<div class="admin-card">

    <div class="admin-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">

        <h5 class="mb-0"><i class="fas fa-th-large me-2"></i>Step 1 — Active Theme Layout</h5>

        <span class="badge bg-light text-dark border">Active: {{ ucfirst($setting?->active_theme ?? 'organic') }}</span>

    </div>

    <div class="admin-card-body">

        @if($canManageAllThemes ?? false)

        <div class="alert alert-dark py-2 small mb-3">

            <i class="fas fa-user-shield me-1"></i>

            <strong>Super Admin:</strong> সব theme layout visible — activate করতে পারবেন।

        </div>

        @else

        <div class="alert alert-info py-2 small mb-3">

            <i class="fas fa-lock me-1"></i>

            অন্য theme layout (Cloth, Jewelry, Gadget…) hidden। Theme change শুধু <strong>super admin</strong> করতে পারবেন।

        </div>

        @endif



        <p class="text-muted mb-4">

            @if($canManageAllThemes ?? false)

                প্রতিটি theme আলাদা product type এর জন্য optimized। Color পরে Step 2 থেকে change করবেন।

            @else

                বর্তমানে শুধু আপনার active store theme দেখানো হচ্ছে।

            @endif

        </p>



        <div class="row g-4 justify-content-center">

            @foreach($themes as $key => $theme)

            <div class="col-md-6 col-lg-{{ ($canManageAllThemes ?? false) ? '3' : '4' }}">

                <div class="card h-100 {{ $setting?->active_theme === $key ? 'border-success border-3 shadow' : 'border' }}"

                     style="overflow:hidden;">

                    <div class="p-4 text-center"

                         style="background: linear-gradient(135deg, {{ $theme['primary'] }}22, {{ $theme['secondary'] }}22); min-height: 130px; display:flex;flex-direction:column;align-items:center;justify-content:center;">

                        <h3 class="fs-1 mb-2">{{ explode(' ', $theme['label'])[0] }}</h3>

                        <div class="d-flex gap-1 mb-2">

                            <span style="width:20px;height:20px;border-radius:50%;background:{{ $theme['primary'] }};display:inline-block;"></span>

                            <span style="width:20px;height:20px;border-radius:50%;background:{{ $theme['secondary'] }};display:inline-block;"></span>

                        </div>

                        <h5 class="fw-bold mb-0">{{ $theme['name'] }}</h5>

                        <small class="text-muted">{{ $theme['description'] }}</small>

                        @if($key === 'organic')

                        <span class="badge bg-success mt-2" style="font-size:10px">Ayurvedic / Active</span>

                        @endif

                    </div>

                    <div class="card-body text-center">

                        @if($setting?->active_theme === $key)

                            <span class="badge bg-success px-3 py-2">

                                <i class="fas fa-check me-1"></i>Active

                            </span>

                        @elseif($canManageAllThemes ?? false)

                            <form method="POST" action="{{ route('admin.settings.theme.change') }}">

                                @csrf

                                <input type="hidden" name="theme" value="{{ $key }}">

                                <button type="submit" class="btn btn-sm btn-outline-success w-100">

                                    Activate {{ $theme['name'] }}

                                </button>

                            </form>

                        @endif

                    </div>

                </div>

            </div>

            @endforeach

        </div>



        <div class="alert alert-success mt-4 mb-0">

            <i class="fas fa-palette me-2"></i>

            <strong>Step 2:</strong> Layout select করার পর

            <a href="{{ route('admin.settings.theme.colors') }}" class="alert-link fw-semibold">Theme Color Studio</a>

            থেকে preset বা custom color apply করুন।

        </div>

    </div>

</div>

@endsection