@extends('layouts.app')

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

@push('styles')
<style>
    /* --- Step Card Styles --- */
    .step-card {
        border: 1px solid #E5E7EB;
        border-radius: 10px;
        padding: 1.25rem;
        margin-bottom: 1.5rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        background: #F9FAFB;
    }

    .step-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    /* Step Icon Circle */
    .step-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: #fff;
        background: #2563EB; /* Primary Blue */
        flex-shrink: 0;
    }

    .step-title {
        font-weight: 600;
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
        color: #1F2937; /* Gray-900 */
    }

    .step-description {
        color: #4B5563; /* Gray-600 */
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .step-list {
        list-style: decimal;
        padding-left: 1.5rem;
        color: #6B7280; /* Gray-500 */
        font-size: 0.875rem;
    }

    .step-list li {
        margin-bottom: 0.5rem;
    }

    .btn-step {
        font-size: 0.875rem;
        padding: 0.4rem 0.8rem;
    }

    /* --- Dark Mode Overrides --- */
    [data-theme="dark"] .step-card {
        background: #1F2937; /* Gray-800 */
        border-color: #374151; /* Gray-700 */
    }

    [data-theme="dark"] .step-title {
        color: #F3F4F6; /* Gray-100 */
    }

    [data-theme="dark"] .step-description {
        color: #D1D5DB; /* Gray-300 */
    }

    [data-theme="dark"] .step-list {
        color: #9CA3AF; /* Gray-400 */
    }

    [data-theme="dark"] .step-card:hover {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    }

    [data-theme="dark"] .btn-primary {
        background-color: #3B82F6;
        border-color: #3B82F6;
        color: #fff;
    }

    [data-theme="dark"] .btn-outline-secondary {
        color: #F3F4F6;
        border-color: #6B7280;
    }

    [data-theme="dark"] .btn-outline-secondary:hover {
        background-color: #374151;
        border-color: #9CA3AF;
    }

    /* Responsive Adjustments */
    @media (max-width: 576px) {
        .step-card {
            padding: 1rem;
        }
        .step-title {
            font-size: 1rem;
        }
        .step-list {
            font-size: 0.8rem;
        }
    }
</style>
@endpush

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">

            {{-- Header --}}
            <div class="mb-4 text-center">
                <h4 class="fw-bold mb-1">
                    <i class="bi bi-cube text-primary me-2"></i>
                    Setup Guide
                </h4>
                <p class="text-muted mb-0">
                    Follow these steps to configure your store for Google Rich Results.
                </p>
            </div>

            {{-- STEP 1 --}}
            <div class="step-card d-flex align-items-start gap-3">
                <div class="step-icon bg-primary">
                    <i class="bi bi-1-circle-fill"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="step-title">Install the App</div>
                    <div class="step-description">
                        Magic Google Schema has been successfully installed on your store.
                    </div>
                </div>
            </div>

            {{-- STEP 2 --}}
            <div class="step-card d-flex align-items-start gap-3">
                <div class="step-icon bg-primary">
                    <i class="bi bi-2-circle-fill"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="step-title">Enable Theme App Extension</div>
                    <ol class="step-list">
                        <li>Go to your Shopline admin panel</li>
                        <li>Navigate to Online Store &gt; Themes</li>
                        <li>Click "Design" on your active theme</li>
                        <li>In the theme editor, click <strong>App embeds</strong> in the left sidebar</li>
                        <li>Find <strong>Magic Google Schema</strong> and click "Enable"</li>
                        <li>Click "Save" to apply the changes</li>
                    </ol>
                    <a href="https://{{ $shop->handle }}.myshopline.com/admin/theme/editor/editing/Home"
                       target="_blank"
                       class="btn btn-primary btn-step mt-2">
                        <i class="bi bi-palette me-2"></i>Open Theme Editor
                    </a>
                </div>
            </div>

            {{-- STEP 3 --}}
            <div class="step-card d-flex align-items-start gap-3">
                <div class="step-icon bg-primary">
                    <i class="bi bi-3-circle-fill"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="step-title">Configure Schema Settings</div>
                    <ol class="step-list">
                        <li>Go to the Dashboard page of this app</li>
                        <li>Use the Schema Settings form to enable/disable different schema types</li>
                        <li>Click "Save Settings" to apply your changes</li>
                    </ol>
                    <a href="{{ route('dashboard', ['handle' => $shop->handle]) }}"
                       class="btn btn-outline-secondary btn-step mt-2">
                        <i class="bi bi-sliders me-1"></i>Configure
                    </a>
                </div>
            </div>

            {{-- STEP 4 --}}
            <div class="step-card d-flex align-items-start gap-3">
                <div class="step-icon bg-primary">
                    <i class="bi bi-4-circle-fill"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="step-title">Verify Schema Markup</div>
                    <ol class="step-list">
                        <!-- <li>Visit Google's Rich Results Test</li> -->
                         <li>Visit <a href="https://search.google.com/test/rich-results" target="_blank" class="text-primary">Google's Rich Results Test</a></li>

                        <li>Enter your store's URL and run the test</li>
                        <li>Review the results to ensure your schema markup is being detected</li>
                    </ol>
                    <!-- <a href="https://search.google.com/test/rich-results"
                       target="_blank"
                       class="btn btn-outline-secondary btn-step mt-2">
                        <i class="bi bi-google me-2"></i>Run Rich Results Test
                    </a> -->
                </div>
            </div>

        </div>
    </div>
</div>
@endsection