<div class="grid lg:grid-cols-3">
    <style>
        .onboarding-steps .button-cancel {
            display: none
        }
    </style>


    <div class="bg-gray-100 lg:h-screen p-4 sm:flex items-center dark:bg-gray-800 dark:border-gray-700">

        <section class="py-8  md:py-16 px-6">
            <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
                <div class="mx-auto max-w-3xl space-y-6 sm:space-y-8">

                    <div class="mb-4">
                        <h1 class="text-base font-semibold text-gray-900 dark:text-white">@lang('app.hello')
                            {{ user()->name }}!</h1>
                    </div>

                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">
                        @lang('modules.onboarding.completeSteps')</h2>


                    <ol class="relative border-s border-gray-200 dark:border-gray-700 space-y-8">


                        <li class="ms-6">
                            <span
                                class="absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full bg-green-700 ring-8 ring-white dark:bg-green-800 dark:ring-gray-900">
                                <svg class="h-3 w-3 text-green-50 dark:text-green-400" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                    viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5" />
                                </svg>
                            </span>
                            <h3 class="mb-1.5 text-base font-semibold leading-none text-gray-900 dark:text-white">
                                @lang('modules.onboarding.addBranchHeading')</h3>
                            <p class="text-sm font-normal text-gray-500 dark:text-gray-400 tracking-wide">
                                @lang('modules.onboarding.addBranchInfo')</p>
                        </li>

                        <li class="ms-6">
                            <span @class(['absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full
                                ring-8 ring-white dark:ring-gray-900', 'bg-gray-100 dark:bg-gray-800'=>
                                !$onboardingSteps->add_area_completed, 'bg-green-700 dark:bg-green-800' =>
                                $onboardingSteps->add_area_completed])>
                                <svg aria-hidden="true" @class(['h-3 w-3', 'text-gray-500 dark:text-gray-400'=>
                                    !$onboardingSteps->add_area_completed, 'text-green-50 dark:text-green-400' =>
                                    $onboardingSteps->add_area_completed])
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                    viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5" />
                                </svg>
                            </span>
                            <h3 @class(["mb-1.5 text-base font-semibold leading-none text-gray-900 dark:text-white flex
                                justify-between"])>@lang('modules.onboarding.addAreaHeading')

                                @if ($onboardingSteps->add_area_completed)
                                <a href="javascript:;" wire:click="showAddAreaForm"
                                    class="text-gray-900 bg-gray-300 hover:bg-gray-800 hover:text-white focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-xs px-2.5 py-1 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800 dark:text-gray-100">@lang('app.addMore')</a>
                                @endif
                            </h3>
                            <p class="text-sm font-normal text-gray-500 dark:text-gray-400 tracking-wide">
                                @lang('modules.onboarding.addAreaInfo')</p>
                        </li>

                        <li class="ms-6">
                            <span @class(['absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full
                                ring-8 ring-white dark:ring-gray-900', 'bg-gray-100 dark:bg-gray-800'=>
                                !$onboardingSteps->add_table_completed, 'bg-green-700 dark:bg-green-800' =>
                                $onboardingSteps->add_table_completed])>
                                <svg aria-hidden="true" @class(['h-3 w-3', 'text-gray-500 dark:text-gray-400'=>
                                    !$onboardingSteps->add_table_completed, 'text-green-50 dark:text-green-400' =>
                                    $onboardingSteps->add_table_completed])
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                    viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5" />
                                </svg>
                            </span>
                            <h3 @class(["mb-1.5 text-base font-semibold leading-none text-gray-900 dark:text-white flex
                                justify-between"])>@lang('modules.onboarding.addTableHeading')
                                @if ($onboardingSteps->add_table_completed)
                                <a href="javascript:;" wire:click="showAddTableForm"
                                    class="text-gray-900 bg-gray-300 hover:bg-gray-800 hover:text-white focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-xs px-2.5 py-1 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800 dark:text-gray-100">@lang('app.addMore')</a>
                                @endif
                            </h3>
                            <p class="text-sm font-normal text-gray-500 dark:text-gray-400 tracking-wide">
                                @lang('modules.onboarding.addTableInfo')</p>
                        </li>

                        <li class="ms-6">
                            <span @class(['absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full
                                ring-8 ring-white dark:ring-gray-900', 'bg-gray-100 dark:bg-gray-800'=>
                                !$onboardingSteps->add_menu_completed, 'bg-green-700 dark:bg-green-800' =>
                                $onboardingSteps->add_menu_completed])>
                                <svg aria-hidden="true" @class(['h-3 w-3', 'text-gray-500 dark:text-gray-400'=>
                                    !$onboardingSteps->add_menu_completed, 'text-green-50 dark:text-green-400' =>
                                    $onboardingSteps->add_menu_completed])
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                    viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5" />
                                </svg>
                            </span>
                            <h3 @class(["mb-1.5 text-base font-semibold leading-none text-gray-900 dark:text-white flex
                                justify-between items-center gap-2 flex-wrap"])>@lang('modules.onboarding.addMenuHeading')
                                <span class="flex gap-1.5 shrink-0">
                                @if ($otherBranches->isNotEmpty())
                                <a href="javascript:;" wire:click="showCopyMenuFromBranchForm"
                                    class="text-skin-base bg-skin-base/10 hover:bg-skin-base hover:text-white focus:ring-4 focus:ring-skin-base/30 font-medium rounded-md text-xs px-2.5 py-1 dark:bg-skin-base/20 dark:hover:bg-skin-base dark:focus:ring-skin-base/40">@lang('modules.onboarding.copyFromBranch')</a>
                                @endif
                                @if ($onboardingSteps->add_menu_completed)
                                <a href="javascript:;" wire:click="showAddMenuForm"
                                    class="text-gray-900 bg-gray-300 hover:bg-gray-800 hover:text-white focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-xs px-2.5 py-1 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800 dark:text-gray-100">@lang('app.addMore')</a>
                                @endif
                                </span>
                            </h3>
                            <p class="text-sm font-normal text-gray-500 dark:text-gray-400 tracking-wide">
                                @lang('modules.onboarding.addMenuInfo')</p>
                        </li>

                        <li class="ms-6">
                            <span @class(['absolute -start-2.5 flex h-5 w-5 items-center justify-center rounded-full
                                ring-8 ring-white dark:ring-gray-900', 'bg-gray-100 dark:bg-gray-800'=>
                                !$onboardingSteps->add_menu_items_completed, 'bg-green-700 dark:bg-green-800' =>
                                $onboardingSteps->add_menu_items_completed])>
                                <svg aria-hidden="true" @class(['h-3 w-3', 'text-gray-500 dark:text-gray-400'=>
                                    !$onboardingSteps->add_menu_items_completed, 'text-green-50 dark:text-green-400' =>
                                    $onboardingSteps->add_menu_items_completed])
                                    xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                    viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5" />
                                </svg>
                            </span>
                            <h3 @class(["mb-1.5 text-base font-semibold leading-none text-gray-900 dark:text-white flex
                                justify-between items-center gap-2 flex-wrap"])>@lang('modules.onboarding.addMenuItemHeading')
                                <span class="flex gap-1.5 shrink-0">
                                @if ($otherBranches->isNotEmpty())
                                <a href="javascript:;" wire:click="showCopyMenuFromBranchForm"
                                    class="text-skin-base bg-skin-base/10 hover:bg-skin-base hover:text-white focus:ring-4 focus:ring-skin-base/30 font-medium rounded-md text-xs px-2.5 py-1 dark:bg-skin-base/20 dark:hover:bg-skin-base dark:focus:ring-skin-base/40">@lang('modules.onboarding.copyFromBranch')</a>
                                @endif
                                @if ($onboardingSteps->add_menu_items_completed)
                                <a href="javascript:;" wire:click="showAddMenuItemForm"
                                    class="text-gray-900 bg-gray-300 hover:bg-gray-800 hover:text-white focus:ring-4 focus:ring-gray-300 font-medium rounded-md text-xs px-2.5 py-1 dark:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800 dark:text-gray-100">@lang('app.addMore')</a>
                                @endif
                                </span>
                            </h3>
                            <p class="text-sm font-normal text-gray-500 dark:text-gray-400 tracking-wide">
                                @lang('modules.onboarding.addMenuItemInfo')</p>
                        </li>


                    </ol>

                </div>
            </div>
        </section>

    </div>

    <div class="col-span-2 px-8 lg:px-16 flex items-center w-full onboarding-steps">

        @if ($showCopyMenuPanel)
        <div class="space-y-4 w-full max-w-2xl">
            <div>
                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
                    @lang('modules.onboarding.copyFromBranchHeading')
                </h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    @lang('modules.onboarding.copyFromBranchInfo')
                </p>
            </div>

            @if ($otherBranches->isEmpty())
            <p class="text-sm text-amber-600 dark:text-amber-400">@lang('modules.onboarding.noOtherBranches')</p>
            @else
            <form wire:submit="copyMenuFromBranch" class="space-y-4 p-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700">
                <div>
                    <x-label for="onboarding_source_branch" value="{{ __('modules.settings.getDatafrom') }}" />
                    <x-select id="onboarding_source_branch" class="block mt-1 w-full" wire:model="sourceBranchId">
                        @foreach ($otherBranches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </x-select>
                    <x-input-error for="sourceBranchId" class="mt-2" />
                </div>

                <div>
                    <x-label value="{{ __('modules.settings.cloneOptions') }}" class="mb-2" />
                    <p class="mb-3 text-xs text-gray-500 dark:text-gray-400">@lang('modules.settings.cloneOptionsHint')</p>

                    @if ($showCloneDependencyNote)
                    <div class="mb-3 flex gap-2 rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800 dark:border-blue-800 dark:bg-blue-900/30 dark:text-blue-200" role="status">
                        <svg class="mt-0.5 h-4 w-4 shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
                        </svg>
                        <div class="min-w-0 flex-1">
                            <p>@lang('modules.settings.cloneDependenciesAutoSelected')</p>
                            <button type="button" wire:click="dismissCloneDependencyNote" class="mt-1 text-xs font-medium underline hover:no-underline">@lang('app.close')</button>
                        </div>
                    </div>
                    @endif

                    <div class="space-y-3">
                        <div>
                            <x-checkbox id="onboarding_clone_menu" wire:model="cloneMenu" />
                            <label for="onboarding_clone_menu" class="ml-2 text-sm text-gray-700 dark:text-gray-200">@lang('modules.settings.menu')</label>
                        </div>
                        <div>
                            <x-checkbox id="onboarding_clone_categories" wire:model="cloneCategories" />
                            <label for="onboarding_clone_categories" class="ml-2 text-sm text-gray-700 dark:text-gray-200">@lang('modules.settings.ItemCategories')</label>
                        </div>
                        <div>
                            <x-checkbox id="onboarding_clone_menu_items" wire:model="cloneMenuItems" wire:change="handleCloneMenuItemsChange" />
                            <label for="onboarding_clone_menu_items" class="ml-2 text-sm text-gray-700 dark:text-gray-200">@lang('modules.settings.menuItems')</label>
                            <p class="ml-6 mt-0.5 text-xs text-gray-500 dark:text-gray-400">@lang('modules.settings.cloneMenuItemsRequires')</p>
                        </div>
                        <div>
                            <x-checkbox id="onboarding_clone_modifier_groups" wire:model="cloneModifierGroups" />
                            <label for="onboarding_clone_modifier_groups" class="ml-2 text-sm text-gray-700 dark:text-gray-200">@lang('modules.modifier.modifierGroup')</label>
                        </div>
                        <div>
                            <x-checkbox id="onboarding_clone_item_modifiers" wire:model="cloneItemModifiers" wire:change="handleCloneItemModifiersChange" />
                            <label for="onboarding_clone_item_modifiers" class="ml-2 text-sm text-gray-700 dark:text-gray-200">@lang('modules.modifier.itemModifiers')</label>
                            <p class="ml-6 mt-0.5 text-xs text-gray-500 dark:text-gray-400">@lang('modules.settings.cloneItemModifiersRequires')</p>
                        </div>
                    </div>
                </div>

                <div class="flex gap-2 pt-2">
                    <x-button type="submit">
                        @lang('modules.onboarding.copyFromBranch')
                    </x-button>
                    <x-secondary-button type="button" wire:click="$set('showCopyMenuPanel', false)">
                        @lang('app.cancel')
                    </x-secondary-button>
                </div>
            </form>
            @endif
        </div>
        @elseif (!$onboardingSteps->add_area_completed || $showAddArea)
        <div class="space-y-4 w-full">
            <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
                {{ __("modules.table.addArea") }}
            </div>

            @livewire('forms.addArea')
        </div>
        @elseif (!$onboardingSteps->add_table_completed || $showAddTable)
        <div class="space-y-4 w-full">
            <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
                {{ __("modules.table.addTable") }}
            </div>

            @livewire('forms.addTable')
        </div>
        @elseif (!$onboardingSteps->add_menu_completed || $showAddMenu)
        <div class="space-y-4 w-full">
            <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
                {{ __("modules.menu.addMenu") }}
            </div>

            @livewire('forms.addMenu')
        </div>
        @elseif (!$onboardingSteps->add_menu_items_completed || $showAddMenuItem)
        <div class="space-y-4 w-full mt-4">
            <div class="text-lg font-medium text-gray-900 dark:text-gray-100">
                {{ __("modules.menu.addMenuItem") }}
            </div>

            @livewire('forms.addMenuItem')
        </div>
        @else
        <div class="space-y-4 w-full">
            <div
                class="group flex flex-col h-full bg-white border border-gray-200 shadow-sm rounded-xl dark:bg-neutral-900 dark:border-neutral-700 dark:shadow-neutral-700/70 max-w-md mx-auto">
                <div class="h-52 flex flex-col justify-center items-center bg-skin-base rounded-t-xl">
                    <svg class="size-28 transition duration-75 text-gray-50 dark:text-gray-900 dark:group-hover:text-white"
                        fill="currentColor" viewBox="0 -0.5 25 25" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <path fill-rule="evenodd"
                                d="M16,6 L20,6 C21.1045695,6 22,6.8954305 22,8 L22,16 C22,17.1045695 21.1045695,18 20,18 L16,18 L16,19.9411765 C16,21.0658573 15.1177541,22 14,22 L4,22 C2.88224586,22 2,21.0658573 2,19.9411765 L2,4.05882353 C2,2.93414267 2.88224586,2 4,2 L14,2 C15.1177541,2 16,2.93414267 16,4.05882353 L16,6 Z M20,11 L16,11 L16,16 L20,16 L20,11 Z M14,19.9411765 L14,4.05882353 C14,4.01396021 13.9868154,4 14,4 L4,4 C4.01318464,4 4,4.01396021 4,4.05882353 L4,19.9411765 C4,19.9860398 4.01318464,20 4,20 L14,20 C13.9868154,20 14,19.9860398 14,19.9411765 Z M5,19 L5,17 L7,17 L7,19 L5,19 Z M8,19 L8,17 L10,17 L10,19 L8,19 Z M11,19 L11,17 L13,17 L13,19 L11,19 Z M5,16 L5,14 L7,14 L7,16 L5,16 Z M8,16 L8,14 L10,14 L10,16 L8,16 Z M11,16 L11,14 L13,14 L13,16 L11,16 Z M13,5 L13,13 L5,13 L5,5 L13,5 Z M7,7 L7,11 L11,11 L11,7 L7,7 Z M20,9 L20,8 L16,8 L16,9 L20,9 Z">
                            </path>
                        </g>
                    </svg>
                </div>
                <div class="p-4 md:p-6">

                    <h3 class="text-xl font-semibold text-gray-800 dark:text-neutral-300 dark:hover:text-white">
                        @lang('modules.onboarding.addOrderHeading')
                    </h3>
                    <p class="mt-3 text-gray-500 dark:text-neutral-500">
                        @lang('modules.onboarding.addOrderInfo')
                    </p>
                </div>
                <div
                    class="mt-auto flex border-t border-gray-200 divide-x divide-gray-200 dark:border-neutral-700 dark:divide-neutral-700">
                    <a class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-base font-semibold rounded-es-xl bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 dark:focus:bg-neutral-800"
                        href="{{ route('pos.index') }}" wire:navigate>
                        @lang('modules.order.placeOrder')
                    </a>

                </div>
            </div>
            <!-- End Card -->
        </div>
        @endif

    </div>



</div>
