@php
    $key = $key ?? 'key';
@endphp
@if(isset($lgTitle))
    <div>
        <h3 class="mb-1 text-3xl font-bold">{{$lgTitle}}</h3>
    </div>
@endif
@if(isset($statistics))
    <div class="rounded-lg">
        <dl class="grid gap-8 p-2 mx-auto text-gray-900 grid-cols-6">
            @if(isset($supplierInfo))
                <x-design.info-card header="" :items="$supplierInfo"/>
            @endif
            @foreach($statistics as $index => $value)
                <x-design.statistic-card
                    :value="$value"
                    :title="$index"
                />
            @endforeach
        </dl>
    </div>
@endif
<div class="flex items-center justify-between space-x-4 pt-3">
    <div class="justify-center flex-1 flex items-center space-x-3 py-2">
        <h1 class="ml-14 justify text-2xl font-semibold">{{$title}}</h1>
    </div>
    <div
        class="w-full md:w-auto flex flex-col md:flex-row mb-0 items-stretch items-center justify-end space-x-3 flex-shrink-0">
        @if(isset($hasUploadBtn))
            <button type="button" id="uploadButton-{{$key}}" data-modal-toggle="uploadModal-{{$key}}"
                    class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 focus:outline-none">
                {{ $uploadBtnName ?? 'データ取込'  }}
            </button>
        @endif
        @if (isset($addBtn))
            <a type="button" href="{{ $addBtnRoute }}"
               class="flex items-center justify-center text-white bg-vivid-500 hover:bg-vivid-800 focus:ring-4 focus:ring-vivid-300 font-medium rounded-lg text-sm px-4 py-2 focus:outline-none"
               target="_blank" rel="noopener noreferrer">
                <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20"
                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path clip-rule="evenodd" fill-rule="evenodd"
                          d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
                </svg>
                {{$addBtn}}
            </a>
        @endif
    </div>
</div>
<div class="flex flex-col-reverse md:flex-row items-center justify-between md:space-x-4 py-3">
    <div
        class="w-full lg:w-2/3 flex flex-col space-y-3 md:space-y-0 md:flex-row md:items-center">
        <form class="w-full md:max-w-sm flex-1 md:mr-4">
            <label for="default-search"
                   class="text-sm font-medium text-gray-900 sr-only">Search</label>
            <div class="relative">
                <div
                    class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <svg aria-hidden="true" class="w-4 h-4 text-gray-500"
                         fill="none" stroke="currentColor" viewbox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <input type="search" id="default-search"
                       class="block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500"
                       placeholder="Search..." required="">
            </div>
        </form>
        @if(isset($tableTypeButton))
            <button id="tableDropdownButton-{{$key}}" data-dropdown-toggle="tableDropdown-{{$key}}"
                    class="w-full md:w-auto flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200"
                    type="button">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                     class="h-4 w-4 mr-2 text-gray-400" viewbox="0 0 20 20"
                     fill="currentColor">
                    <path fill-rule="evenodd"
                          d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
                          clip-rule="evenodd"/>
                </svg>
                {{$tableTypeButton}}
                <svg class="-mr-1 ml-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20"
                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path clip-rule="evenodd" fill-rule="evenodd"
                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                </svg>
            </button>
            <div id="tableDropdown-{{$key}}"
                 class="z-10 hidden w-48 p-3 bg-white rounded-lg shadow">
                <h6 class="mb-3 text-sm font-medium text-gray-900">{{$tableTypeTitle}}</h6>
                <ul class="space-y-2 text-sm" aria-labelledby="tableDropdownButton-{{$key}}">
                    @foreach($tableTypes as $index => $type)
                        <li class="flex items-center">
                            <input id="type-{{$index}}-{{$key}}" type="checkbox" value=""
                                   class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 focus:ring-2">
                            <label for="type-{{$index}}-{{$key}}"
                                   class="ml-2 text-sm font-medium text-gray-900 cursor-pointer">{{$type}}</label>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div class="flex items-center space-x-4">
            <div>
                <div class="flex items-center justify-center p-4">
                    <button id="filterDropdownButton-{{$key}}" data-dropdown-toggle="filterDropdown-{{$key}}"
                            class="w-full md:w-auto flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200"
                            type="button">
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                             class="h-4 w-4 mr-2 text-gray-400" viewbox="0 0 20 20"
                             fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
                                  clip-rule="evenodd"/>
                        </svg>
                        絞込み
                        <svg class="-mr-1 ml-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path clip-rule="evenodd" fill-rule="evenodd"
                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                        </svg>
                    </button>
                    <!-- Dropdown menu -->
                    <div id="filterDropdown-{{$key}}"
                         class="z-10 hidden px-3 pt-1 bg-white rounded-lg shadow w-96">
                        <div class="flex items-center justify-between pt-2">
                            <h6 class="text-sm font-medium text-black">絞込み</h6>
                            <div class="flex items-center space-x-3">
                                <a href="#"
                                   class="flex items-center text-sm font-medium text-blue-600 hover:underline">
                                    保存
                                </a>
                                <a href="#"
                                   class="flex items-center text-sm font-medium text-blue-600 hover:underline">
                                    クリア
                                </a>
                            </div>
                        </div>
                        <div data-accordion="open"
                             data-active-classes="text-black"
                             data-inactive-classes="text-gray-500">
                            <div>
                                <h2 id="category-heading">
                                    @if(isset($filterStatus))
                                        <button type="button"
                                                class="flex items-center justify-between w-full py-2 px-1.5 text-sm font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-50"
                                                data-accordion-target="#category-body-{{$key}}"
                                                aria-expanded="true"
                                                aria-controls="category-body-{{$key}}">
                                            <span>{{$filterStatus}}</span>
                                            <svg aria-hidden="true" data-accordion-icon
                                                 class="w-5 h-5 rotate-180 shrink-0" fill="currentColor"
                                                 viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z">
                                                </path>
                                            </svg>
                                        </button>
                                </h2>
                                <div id="category-body-{{$key}}" class="hidden"
                                     aria-labelledby="category-heading">
                                    <div
                                        class="py-2 font-light border-b border-gray-200">
                                        <ul class="space-y-2">
                                            @foreach($filterSelectors as $index => $status)
                                                <li class="flex items-center">
                                                    <input id="status-{{$index}}-{{$key}}" type="checkbox"
                                                           value=""
                                                           class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 focus:ring-2"/>
                                                    <label for="status-{{$index}}-{{$key}}"
                                                           class="ml-2 text-sm font-medium text-gray-900 cursor-pointer">
                                                        {{$status}}
                                                    </label>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                @endif
                                @if(isset($filterDate))
                                    <h2 id="date-heading-{{$key}}">
                                        <button type="button"
                                                class="flex items-center justify-between w-full py-2 px-1.5 text-sm font-medium text-left text-gray-500 border-b border-gray-200 hover:bg-gray-50"
                                                data-accordion-target="#date-body-{{$key}}" aria-expanded="true"
                                                aria-controls="date-body-{{$key}}">
                                            <span>{{$filterDate}}</span>
                                            <svg aria-hidden="true" data-accordion-icon
                                                 class="w-5 h-5 rotate-180 shrink-0" fill="currentColor"
                                                 viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z">
                                                </path>
                                            </svg>
                                        </button>
                                    </h2>
                                    <div id="date-body-{{$key}}" class="hidden py-2"
                                         aria-labelledby="date-heading-{{$key}}">
                                        <div date-rangepicker class="flex items-center w-full">
                                            <div class="relative flex-1">
                                                <x-design.forms.text-field type="date"/>
                                            </div>
                                            <span
                                                class="mx-4 font-medium text-black">to</span>
                                            <div class="relative flex-1">
                                                <x-design.forms.text-field type="date"/>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <button id="colDropdownButton-{{$key}}" data-dropdown-toggle="colDropdown-{{$key}}"
                        class="w-full md:w-auto flex items-center justify-center py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200"
                        type="button">
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                         class="h-4 w-4 mr-2 text-gray-400" viewbox="0 0 20 20"
                         fill="currentColor">
                        <path fill-rule="evenodd"
                              d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
                              clip-rule="evenodd"/>
                    </svg>
                    表示項目
                    <svg class="-mr-1 ml-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path clip-rule="evenodd" fill-rule="evenodd"
                              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                    </svg>
                </button>
                <div id="colDropdown-{{$key}}"
                     class="z-10 hidden w-48 p-3 bg-white rounded-lg shadow">
                    <h6 class="mb-3 text-sm font-medium text-gray-900">表示項目の選択</h6>
                    <ul class="space-y-2 text-sm" aria-labelledby="filterDropdownButton-{{$key}}">
                        @foreach($headerCols as $index => $col)
                            <li class="flex items-center">
                                <input id="col-{{$index}}-{{$key}}" type="checkbox" value=""
                                       class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 focus:ring-2">
                                <label for="col-{{$index}}-{{$key}}"
                                       class="ml-2 text-sm font-medium text-gray-900 cursor-pointer">{{$col}}</label>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-shrink-0 flex flex-row items-center justify-end space-x-3">

        @if(isset($actions))
            <button id="paymentActionButton-{{$key}}" data-dropdown-toggle="actionDropdown-{{$key}}"
                    class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 focus:outline-none"
                    type="button">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
                     class="h-4 w-4 mr-2 text-white" viewbox="0 0 20 20"
                     fill="currentColor">
                    <path fill-rule="evenodd"
                          d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z"
                          clip-rule="evenodd"/>
                </svg>
                {{  $actionTitle }}
                <svg class="-mr-1 ml-1.5 w-5 h-5" fill="currentColor" viewbox="0 0 20 20"
                     xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path clip-rule="evenodd" fill-rule="evenodd"
                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/>
                </svg>
            </button>
            <div id="actionDropdown-{{$key}}"
                 class="z-10 hidden w-48 p-3 bg-white rounded-lg shadow">
                <h6 class="mb-3 text-sm font-medium text-gray-900">表示項目の選択</h6>
                <ul class="space-y-2 text-sm" aria-labelledby="filterDropdownButton-{{$key}}">
                    @foreach($actions as $index => $action)
                        <li class="flex items-center">
                            <a type="button" href="#"
                               class="flex items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 focus:outline-none">
                                {{$action}}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @elseif(isset($actionTitle))
            <a type="button" id="actionButton-{{$key}}" @if(isset($actionButtonToggleModal)) data-modal-toggle="{{$actionButtonToggleModal}}" @endif
               class="flex flex-shrink-0 items-center justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg h-10 w-auto text-sm px-3 py-2 focus:outline-none">
                {{ $actionTitle }}
            </a>
        @endif
        @if(isset($printCategories))
            <button type="button" id="printButton" data-modal-toggle="printModal-{{$key}}"
                    class="flex-shrink-0 flex items-center justify-center py-2 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200">
                <svg class="mr-2 w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewbox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round"
                          d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/>
                </svg>
                印刷
            </button>
        @endif
    </div>
</div>
<div class="overflow-x-auto">
    <table class="w-full text-sm text-left text-gray-500" x-data="{all_checked: false}">
        <thead
            class="text-xs text-neutral-700 uppercase bg-primary-50 cursor-pointer">
        <tr>
            <th scope="col" class="p-4">
                <div class="flex items-center">
                    <input id="checkbox-all" type="checkbox" @click="all_checked = !all_checked" :checked="all_checked"
                           class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 focus:ring-2 cursor-pointer">
                    <label for="checkbox-all" class="sr-only">checkbox</label>
                </div>
            </th>
            <th scope="col" class="px-4 py-3">
                <span class="sr-only">Expand/Collapse Row</span>
            </th>
            @foreach($headerCols as $header_col)
                <th scope="col" class="px-4 py-3 min-w-[10rem]">
                    {{$header_col}}
                    <svg class="h-4 w-4 ml-1 inline-block" fill="currentColor" viewbox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path clip-rule="evenodd" fill-rule="evenodd"
                              d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"/>
                    </svg>
                </th>
            @endforeach
            @if(isset($tableEndButton))
                <th></th>
            @endif
            @if(isset($isEditable) || isset($editBtns))
                <th>
                    操作
                </th>
            @endif
        </tr>
        </thead>
        <tbody data-accordion="table-column">
        @for($i = 0; $i < 10; $i++)
            <tr

                @click="showSidePanel('/design/delivery')"
                class="border-b @if(isset($detail)) hover:bg-primary-200 0 cursor-pointer @endif"
                id="table-column-header-{{$i}}-{{$key}}" data-accordion-target="#table-column-body-{{$i}}-{{$key}}"
                aria-expanded="false" aria-controls="table-column-body-{{$i}}-{{$key}}">
                <td class="px-4 py-3 w-4">
                    <div class="flex items-center">
                        <input id="checkbox-table-search-1" type="checkbox"
                               @click="$event.stopPropagation()" :checked="all_checked"
                               class="w-4 h-4 text-primary-600 bg-gray-100 rounded border-gray-300 focus:ring-primary-500 focus:ring-2 cursor-pointer">
                        <label for="checkbox-table-search-1" class="sr-only">checkbox</label>
                    </div>
                </td>
                <td class="p-3 w-4">
                    @if(isset($detail))
                        <svg data-accordion-icon="" class="w-6 h-6 shrink-0" fill="currentColor"
                             viewbox="0 0 20 20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                  clip-rule="evenodd"/>
                        </svg>
                    @endif
                </td>
                @php
                    $row_index = $i % count($rows);
                    $row = $rows[$row_index];
                @endphp
                @foreach($row as $value)
                    <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">{{$value}}</td>
                @endforeach
                @if(isset($tableEndButton))
                    <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap">
                        <a type="button" href="{{ $tableEndButtonRoute }}"
                           class="flex items-center justify-center text-white bg-blue-500 hover:bg-blue-700 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm focus:outline-none"
                           target="_blank" rel="noopener noreferrer">
                            {{$tableEndButton}}
                        </a>
                    </td>
                @endif
                @if(isset($isEditable) || isset($editBtns))
                    <td class="px-4 py-2">
                        <button id="edit-dropdown-button-{{$key}}" @click="$event.stopPropagation()"
                                type="button" data-dropdown-toggle="edit-dropdown-{{$key}}"
                                class="inline-flex items-center p-1 text-sm font-medium text-center text-gray-500 hover:text-gray-800 hover:bg-gray-200 rounded-lg focus:outline-none">
                            <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewbox="0 0 20 20"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"/>
                            </svg>
                        </button>
                        <div id="edit-dropdown-{{$key}}"
                             class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow">
                            <ul class="py-1 text-sm text-gray-700"
                                aria-labelledby="edit-dropdown-button-{{$key}}">
                                @if(isset($addBtnRoute) && isset($isEditable))
                                    <li>
                                        <a href="{{ $addBtnRoute }}" @click="$event.stopPropagation()"
                                           class="block py-2 px-4 hover:bg-gray-100"
                                           target="_blank" rel="noopener noreferrer">編集</a>
                                    </li>
                                @endif
                                @foreach($editBtns ?? [] as $edt_btn)
                                    <li>
                                        <a href="" @click="$event.stopPropagation()"
                                           class="block py-2 px-4 hover:bg-gray-100">{{$edt_btn}}</a>
                                    </li>
                                @endforeach
                            </ul>
                            @if(isset($isEditable))
                                <div class="py-1">
                                    <a href="" @click="$event.stopPropagation()"
                                       class="block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100">削除</a>
                                </div>
                            @endif
                        </div>
                    </td>
                @endif
            </tr>
            @if(isset($detail))
                <tr class="hidden flex-1 overflow-x-auto w-full" id="table-column-body-{{$i}}-{{$key}}"
                    aria-labelledby="table-column-header-{{$i}}-{{$key}}">
                    <td class="p-4 border-b" colspan="{{ count($headerCols) + 3}}">
                        {{$detail}}
                    </td>
                </tr>
            @endif
        @endfor
        </tbody>
    </table>
</div>
<x-design.pagination-links/>

<!-- Print modal -->
@if(isset($printCategories))
    <div id="printModal-{{$key}}" tabindex="-1" aria-hidden="true"
         class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
        <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
            <!-- Modal content -->
            <div class="relative p-4 bg-white rounded-lg shadow sm:p-5">
                <!-- Modal header -->
                <div
                    class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5">
                    <h3 class="text-lg font-semibold text-gray-900">
                        印刷を実行します
                    </h3>
                    <button type="button"
                            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
                            data-modal-toggle="printModal-{{$key}}">
                        <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                             xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                  clip-rule="evenodd"></path>
                        </svg>
                        <span class="sr-only">Close modal</span>
                    </button>
                </div>
                <form action="#">
                    <div>
                        <label class="block mb-2 text-sm font-medium text-gray-900">
                            印刷対象の選択
                        </label>
                        @foreach($printCategories as $title => $cols)
                            <h3 class="flex font-semibold text-gray-900">{{$title}}</h3>
                            <ul class="grid w-full grid-cols-{{ count($cols) }} gap-3">
                                @foreach($cols as $index => $text)
                                    <li>
                                        <input type="checkbox" id="print-type-{{$index}}" value="" class="hidden peer">
                                        <label for="print-type-{{$index}}"
                                               class="inline-flex items-center justify-center w-48 p-2 text-sm font-medium text-center bg-white border-2 rounded-lg cursor-pointer text-blue-600 border-blue-600 peer-checked:border-blue-600 peer-checked:bg-blue-600 hover:text-white peer-checked:text-white hover:bg-blue-500 ">
                                            {{$text}}
                                        </label>
                                    </li>
                                @endforeach
                            </ul>
                            <hr class="my-3 h-0.5 border-gray-400 bg-neutral-100 opacity-80"/>
                        @endforeach
                    </div>
                    <div class="text-right">
                        <button type="submit"
                                class="text-white bg-blue-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
                            印刷
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endif

<!-- Upload modal -->
<div id="uploadModal-{{$key}}" tabindex="-1" aria-hidden="true"
     class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-modal md:h-full">
    <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
        <!-- Modal content -->
        <div class="relative p-4 bg-white rounded-lg shadow sm:p-5">
            <!-- Modal header -->
            <div
                class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5">
                <h3 class="text-lg font-semibold text-gray-900">
                    CSVファイル取込み
                </h3>
                <button type="button"
                        class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
                        data-modal-toggle="uploadModal-{{$key}}">
                    <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                              clip-rule="evenodd"></path>
                    </svg>
                    <span class="sr-only">Close modal</span>
                </button>
            </div>
            <div class="flex items-center justify-center w-full">
                <label for="dropzone-file"
                       class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                        <svg class="w-8 h-8 mb-4 text-gray-500" aria-hidden="true"
                             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2"
                                  d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
                        </svg>
                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">クリックしてアップロード</span>
                            もしくはドラッグ&ドロップ</p>
                        <p class="text-xs text-gray-500">CSVのみ対応</p>
                    </div>
                    <input id="dropzone-file" type="file" class="hidden"/>
                </label>
            </div>
        </div>
    </div>
</div>