@props(['route'=>'','params'=>null, 'active'=>null, 'icon'=>'', 'text'=>'', 'type'=>''])
@php
    // アクティブ条件
    $isActive = false;
    if (isset($active)) {
        $checks = explode('|', $active);
        foreach($checks as $check) {
            if (request()->routeIs($check)) $isActive = true;
        }
    }

    // デバッグ出力（一時的）- 全てのメニューで出力
    //\Log::debug("SIDEBAR DEBUG", [
    //    'text' => $text,
    //    'type' => $type,
    //    'active' => $active ?? 'NULL',
    //    'isActive' => $isActive,
    //    'route' => request()->route() ? request()->route()->getName() : 'NULL'
    //]);
    // 階層別スタイル定義（整理済み）
    $styles = [
        'parent' => [
            // 1階層目：背景色あり、太字、標準パディング
            'wrapper' => 'group flex items-center relative pt-2.5 pb-1.5 px-4 cursor-pointer bg-gray-50
                        transition duration-500 whitespace-nowrap hover:transition hover:duration-500
                        before:transition before:duration-500 before:content-[\'\'] before:absolute before:left-0 before:h-full
                        before:border-l-4 before:border-base-700 before:rounded-sm before:opacity-0 before:invisible
                        hover:before:opacity-100 hover:before:visible',
            'icon' => 'w-6 h-6 flex items-center justify-center text-lg',
            'text' => 'tracking-wider text-sm ml-2 cursor-pointer font-semibold'  // font-boldからfont-semiboldに変更
        ],
        'sub' => [
            // 2階層目：インデント追加、通常フォント
            'wrapper' => 'group flex items-center relative pt-2.5 pb-1.5 px-4 cursor-pointer
                        transition duration-500 whitespace-nowrap hover:transition hover:duration-500
                        before:transition before:duration-500 before:content-[\'\'] before:absolute before:left-0 before:h-full
                        before:border-l-4 before:border-base-700 before:rounded-sm before:opacity-0 before:invisible
                        hover:before:opacity-100 hover:before:visible',
            'icon' => 'w-6 h-6 flex items-center justify-center text-xs mr-0.5',
            'text' => 'tracking-wider text-sm ml-3 cursor-pointer'  // font-normalを削除（デフォルトで通常）
        ],
        'child' => [
            // 3階層目：深いインデント、背景色、細字
            'wrapper' => 'group flex items-center relative pt-2.5 pb-1.5 px-4 cursor-pointer bg-gray-100 border-b border-gray-200
                        transition duration-500 whitespace-nowrap hover:transition hover:duration-500
                        before:transition before:duration-500 before:content-[\'\'] before:absolute before:left-0 before:h-full
                        before:border-l-4 before:border-base-700 before:rounded-sm before:opacity-0 before:invisible
                        hover:before:opacity-100 hover:before:visible',
            'icon' => 'w-6 h-6 flex items-center justify-center text-xs mr-0.5',
            'text' => 'tracking-wider text-sm ml-4 cursor-pointer text-gray-700'  // font-lightを削除、text-gray-700追加
        ]
    ];

    $currentStyle = $styles[$type] ?? $styles['child'];

    // アイコン設定
    if ($type=='child') $icon = "fa-regular fa-circle";
    if ($type=='sub') $icon = "fa-solid fa-caret-down";

    // アクティブ時の色設定
    $iconColor = ($isActive) ? 'text-base-700' : 'text-secondary-600';
    $textColor = ($isActive) ? 'text-base-800 font-semibold' : 'text-secondary-900';
    $activeStyles = ($isActive) ? 'before:opacity-100 before:visible bg-secondary-50' : '';
    $currentStyle['icon'] .= " {$iconColor} group-hover:opacity-60";
    $currentStyle['text'] .= " {$textColor} group-hover:opacity-60";
    $currentStyle['wrapper'] .= " {$activeStyles}";
    $url = ($route == '')? '': (isset($params)? route($route, $params):route($route)); 
@endphp

{{-- 親レベル --}}
@if($type=='parent')
<li x-data="{ open: {{ $isActive ? 'true' : 'false' }} }" class="mb-1 flex flex-col">
    <div x-on:click="open = !open">
        <div class="{{$currentStyle['wrapper']}}">
            <span class="{{$currentStyle['icon']}}">
                <i class="{{$icon}} fa-fw" x-bind:class="{'text-base-700':open}"></i>
            </span>
            <span class="{{$currentStyle['text']}}">{{$text}}</span>
            <span class="absolute left-52 group-hover:opacity-60 text-sm">
                <i x-show="!open" class="fa-solid fa-chevron-left fa-fw"></i>
                <i x-show="open"  class="fa-solid fa-chevron-down fa-fw"></i>
            </span>
        </div>
    </div>
    <div x-show="open" class="mt-1">{{$slot}}</div>
</li>
@elseif($type=='sub')
<li x-data="{ open: {{ $isActive ? 'true' : 'false' }} }" class="mb-1 flex flex-col">
    <div x-on:click="open = !open">
        <div class="{{$currentStyle['wrapper']}}">
            <span class="{{$currentStyle['icon']}}">
                <i class="{{$icon}} ml-0.5 fa-fw"></i>
            </span>
            <span class="{{$currentStyle['text']}}">{{$text}}</span>
            <span class="absolute left-52 group-hover:opacity-60 text-sm">
                <i x-show="!open" class="fa-solid fa-chevron-left fa-fw"></i>
                <i x-show="open"  class="fa-solid fa-chevron-down fa-fw"></i>
            </span>
        </div>
    </div>
    <div x-show="open" class="mt-1">{{$slot}}</div>
</li>
{{-- 区切り線 --}}
@elseif($type=='divide')
<li class="pb-1 mb-2 border-b"></li>
{{-- 子レベル or レベルなし --}}
@else
<li class="pb-1">
    <a href="{{$url}}" class="block">
        <div class="{{$currentStyle['wrapper']}}">
            <span class="{{$currentStyle['icon']}}">
                <i class="{{$icon}} ml-0.5 fa-fw"></i>
            </span>
            <span class="{{$currentStyle['text']}}">
                {{$text}}
            </span>
        </div>
    </a>
</li>
@endif