<x-dynamic-component :component="$layout">
    <x-slot name="header">
        <div class="mb-4">
            <x-admin-crud::linkbutton href="{{ admin_crud_route('crud', ['table' => $tableName]) }}" color="gray"
                size="sm">
                &larr; {{ $tableName }} に戻る
            </x-admin-crud::linkbutton>
            <x-admin-crud::linkbutton href="{{ admin_crud_route('crud') }}" color="gray" size="sm">
                &larr; Crud Tables に戻る
            </x-admin-crud::linkbutton>
        </div>

        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Edit') }} id={{ $data[0]->id ?? '' }} of {{ $tableName }}
        </h2>
    </x-slot>

    @if (session('feedback.success'))
        <x-admin-crud::alert.success>{{ session('feedback.success') }}</x-admin-crud::alert.success>
    @endif
    @if (session('feedback.error'))
        <x-admin-crud::alert.error>{{ session('feedback.error') }}</x-admin-crud::alert.error>
    @endif
    @push('localcss')
        <link rel="stylesheet" href="{{ asset('vendor/admin-crud/css/localflash.css') }}">
    @endpush

    <div class="py-4">
        <div class="sm:mx-auto mx-6 sm:px-6 lg:px-8">
            @foreach ($data as $d)
                <table class="divide-y divide-gray-400  dark:text-gray-300">
                    <thead>
                        <tr>
                            @foreach (['field', 'data', 'type'] as $th)
                                <th class="bg-gray-300 dark:bg-gray-600">
                                    {{ $th }}
                                </th>
                            @endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($coldetails as $nam => $typ)
                            <tr class="">
                                <td class="border-b border-gray-400 px-4 py-2 text-center">{{ $nam }}</td>

                                <td class="border-b border-gray-400 px-4 py-2 hover:text-blue-600 hover:bg-slate-200 clicktoedit break-all"
                                    id="{{ $nam }}__{{ $d->id }}__{{ $typ }}"
                                    data-orig="{{ $d->$nam }}"
                                    data-scheduled-update-cell="1"
                                    data-field="{{ $nam }}"
                                    data-target-id="{{ $d->id }}">
                                    {!! nl2br(e($d->$nam)) !!}
                                </td>

                                <td class="border-b border-gray-400 px-4 py-2 text-center">{{ $coldetails[$nam] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endforeach

            @if (strlen($row ?? '') > 0)
                <div class="mt-4">
                    <x-admin-crud::linkbutton
                        href="{{ admin_crud_route('crudcopy', ['table' => $tableName, 'row' => $row]) }}"
                        color="yellow" size="sm">
                        この行 (id={{ $row }}) をコピーして編集
                    </x-admin-crud::linkbutton>
                    <span class="px-20"></span>
                    <x-admin-crud::linkbutton
                        href="{{ admin_crud_route('cruddelete', ['table' => $tableName, 'row' => $row]) }}"
                        color="red" size="sm" confirm="本当に削除する？">
                        この行 (id={{ $row }}) を削除
                    </x-admin-crud::linkbutton>
                </div>
            @endif

            <div class="mt-4">
                <x-admin-crud::linkbutton href="{{ admin_crud_route('crud', ['table' => $tableName]) }}"
                    color="gray" size="sm">
                    &larr; {{ $tableName }} に戻る
                </x-admin-crud::linkbutton>
                <x-admin-crud::linkbutton href="{{ admin_crud_route('crud') }}" color="gray" size="sm">
                    &larr; Crud Tables に戻る
                </x-admin-crud::linkbutton>

            </div>

        </div>


    </div>
    <form action="{{ admin_crud_route('crudpost') }}" method="post" id="admincrudpost">
        @csrf
        @method('post')
    </form>

    @if ($scheduledUpdateCreateUrl)
        <div id="scheduled-update-context-menu"
            class="hidden fixed z-50 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 shadow-lg rounded-md py-1 text-sm">
            <a id="scheduled-update-context-link" href="#"
                class="block px-3 py-2 text-slate-700 dark:text-slate-200 hover:bg-pink-100 dark:hover:bg-slate-700">
                このセルを予約更新
            </a>
        </div>
    @endif

    @push('localjs')
        <script src="{{ $jqueryUrl }}"></script>
        <script src="{{ asset('vendor/admin-crud/js/crud_table.js') }}"></script>
        <script src="{{ asset('vendor/admin-crud/js/crud_where.js') }}"></script>
    @endpush

    <script>
        var table = "{{ $tableName }}";
        var origData = {};
        var mode_br = true; // 改行反映する
        var sizecols = 80; // 横幅
        @if ($scheduledUpdateCreateUrl)
            var scheduledUpdateCreateUrl = "{{ $scheduledUpdateCreateUrl }}";
            var scheduledUpdateTargetType = @json($scheduledUpdateTargetType);
        @endif
    </script>

    @if ($scheduledUpdateCreateUrl)
        <script>
            (() => {
                const menu = document.getElementById('scheduled-update-context-menu');
                const link = document.getElementById('scheduled-update-context-link');

                document.querySelectorAll('[data-scheduled-update-cell="1"]').forEach((cell) => {
                    cell.addEventListener('contextmenu', (event) => {
                        const field = cell.dataset.field;
                        if (!field || field === 'id') {
                            return;
                        }

                        event.preventDefault();
                        const params = new URLSearchParams({
                            target_type: scheduledUpdateTargetType,
                            target_id: cell.dataset.targetId,
                            field_name: field,
                        });
                        link.href = `${scheduledUpdateCreateUrl}?${params.toString()}`;
                        menu.style.left = `${event.clientX}px`;
                        menu.style.top = `${event.clientY}px`;
                        menu.classList.remove('hidden');
                    });
                });

                document.addEventListener('click', () => {
                    menu.classList.add('hidden');
                });
                document.addEventListener('keydown', (event) => {
                    if (event.key === 'Escape') {
                        menu.classList.add('hidden');
                    }
                });
            })();
        </script>
    @endif

</x-dynamic-component>