@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Create Theme')
@section('content')
    <div class="card">
        <div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">
                Create New Theme
            </h3>
            <p class="text-gray-600 mb-8">
                Use the command below to create a new theme with the theme generator.
            </p>

            <div class="mt-8 flex flex-col md:flex-row items-start md:items-center gap-4">
                <div class="bg-gray-100 p-4 rounded-lg w-full">
                    <pre class="overflow-x-auto text-sm text-gray-800"><code>php artisan theme:create theme_name --author="Your Name" --description="Your theme description"</code></pre>
                </div>
                <div class="flex-shrink-0">
                    <button id="copy-command" class="btn btn-primary">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M8 4V16C8 17.1046 8.89543 18 10 18H18C19.1046 18 20 17.1046 20 16V7.41421C20 6.88378 19.7893 6.37507 19.4142 6L16 2.58579C15.6249 2.21071 15.1162 2 14.5858 2H10C8.89543 2 8 2.89543 8 4Z"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M16 18V20C16 21.1046 15.1046 22 14 22H6C4.89543 22 4 21.1046 4 20V8C4 6.89543 4.89543 6 6 6H8"
                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        Copy
                    </button>
                </div>
            </div>

            <div class="mt-12">
                <h4 class="text-xl font-semibold text-gray-900 mb-6">
                    Theme Structure
                </h4>
                <ul class="space-y-0 bg-white border border-gray-200 rounded-lg overflow-hidden">
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200">
                        <span class="font-mono text-sm text-gray-900 font-medium">cms/themes/your_theme/</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Root directory of your
                            theme</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
                        <span class="font-mono text-sm text-gray-900 font-medium">assets/</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Theme assets (CSS, JS,
                            images)</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200">
                        <span class="font-mono text-sm text-gray-900 font-medium">functions/</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Theme functions and
                            helpers</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
                        <span class="font-mono text-sm text-gray-900 font-medium">layouts/</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Theme layout
                            templates</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200">
                        <span class="font-mono text-sm text-gray-900 font-medium">partials/</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Reusable template
                            parts</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
                        <span class="font-mono text-sm text-gray-900 font-medium">views/</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Theme template files</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 border-b border-gray-200">
                        <span class="font-mono text-sm text-gray-900 font-medium">config.php</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Theme configuration</span>
                    </li>
                    <li class="flex flex-col sm:flex-row sm:justify-between px-4 py-3 bg-gray-50">
                        <span class="font-mono text-sm text-gray-900 font-medium">theme.json</span>
                        <span class="text-sm text-gray-600 mt-1 sm:mt-0">Theme metadata</span>
                    </li>
                </ul>
            </div>

            <div class="mt-8 flex justify-start">
                <a href="{{ route('admin.themes.index') }}" class="btn btn-secondary btn-black text-white">
                    Back to Themes
                </a>
            </div>
        </div>
    </div>
@endsection

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

            $(document).ready(function() {
                // Copy command to clipboard
                $('#copy-command').on('click', function() {
                    const commandText = $('pre code').text();

                    const $temp = $('<textarea>');
                    $('body').append($temp);
                    $temp.val(commandText).select();
                    document.execCommand('copy');
                    $temp.remove();

                    const originalText = $(this).text();
                    $(this).text('Copied!');

                    setTimeout(function() {
                        $('#copy-command').html(`
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8 4V16C8 17.1046 8.89543 18 10 18H18C19.1046 18 20 17.1046 20 16V7.41421C20 6.88378 19.7893 6.37507 19.4142 6L16 2.58579C15.6249 2.21071 15.1162 2 14.5858 2H10C8.89543 2 8 2.89543 8 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M16 18V20C16 21.1046 15.1046 22 14 22H6C4.89543 22 4 21.1046 4 20V8C4 6.89543 4.89543 6 6 6H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Copy
                    `);
                    }, 2000);
                });
            });
        })(jQuery);
    </script>
@endpush