@php($tabTitles = ['販売履歴', '特単履歴', '商品単価履歴'])
<ul class="bg-secondary-200 flex flex-wrap text-sm">
    @foreach($tabTitles as $idx => $tabTitle)
    @php($buttonCss = ($idx == $tabIndex)? 'bg-white': 'hover:bg-secondary-260')
    <li class="border-r border-secondary-260">
        <button type="button" class="py-2 px-5 border-transparent {{$buttonCss}}" onclick="changeTab({{$idx}})">
            @if($idx == $tabIndex)
                <i class="fa-solid fa-bars opacity-50 mr-1"></i>
            @endif
            {{$tabTitle}}
        </button>
    </li>
    @endforeach
</ul>
<form id="link" method="GET" 
    data-action-type0="{{ route('orders.price.index') }}"
    data-action-type1="{{ route('orders.price.special') }}"
    data-action-type2="{{ route('orders.price.normal') }}" >
    <input type="hidden" name="customer_id" value="{{$params->customer_id}}" />
    <input type="hidden" name="delivery_id" value="{{$params->delivery_id}}" />
    <input type="hidden" name="product_id" value="{{$params->product_id}}" />
</form>
<script>
    const changeTab = (index) => {
        if (index == {{$tabIndex}}) return false;
        $('#link').action = $('#link').dataset['actionType' + index];
        $('#link').submit();
    }
</script>