{{--
 *
 * @version     1.0.$Revision:$
 * @version     SVN: $Id:$
 * @package     bplan-base/globals
 * @subpackage  Views
 * @author      Wassilios Meletiadis <wassilios.meletiadis@bplan-solutions.de>
 * @copyright   Copyright (C) 2025, 2026 bplan-solutions GmbH & Co. KG <https://www.bplan-solutions.de/>
 * /Δ\
 --}}

    <div x-data="{ gridName: '{!! $grid->getName() !!}' }" wire:init="init">

@php

    $actions           = $grid->getActions();
    $buttonAlign       = '';
    $dummyId           = 0;
    $hasFirstRow       = false;
    $identifyingColumn = $grid->getIdentifyingColumn();
    $data              = $grid->getData();
    $sorting           = $grid->getSorting();

    if ($grid->hasToggleCallBack()) {
        $toggleCallback    = $grid->getToggleCallback();
        $toggleField       = $grid->getToggleField();
    }

@endphp

        <div class="my-4">
            <h2 class="text-4xl font-extrabold dark:text-white">
                @lang($grid->lc('heading'))
            </h2>

@if ($grid->lc('description') !== 'description')

            <p class="my-4 text-lg text-gray-500">
                @lang($grid->lc('description'))
            </p>

@endif

        </div>
        <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
            <div class="p-3">

@if (isset($search) || isset($additional) || isset($button) || $grid->useDefaultSearch() === true)
    @php
        $hasFirstRow = true;
    @endphp

                {{-- Erste Zeile: Suchfeld(er) + Action-Button --}}
                <div class="flex flex-col items-center justify-between space-y-3 md:flex-row md:space-y-0 md:space-x-4">

    @if (isset($search) || $grid->useDefaultSearch() === true)
        @php
            $buttonAlign = 'margin-top:1.5rem;';
        @endphp

        @if ($grid->useDefaultSearch() === true)

                    {{-- DEFAULT-SEARCH --}}
                    <div class="w-full md:w-1/2">
                        <label for="search" class="invisible">
                            @lang($grid->lc('search-label'))
                        </label>
                        <div class="flex items-center">
                            <div class="relative w-full">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                        <path clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" fill-rule="evenodd" />
                                    </svg>
                                </div>
                                <input wire:model.live.debounce.500ms="search" type="text" id="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 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
                                    placeholder="@lang($grid->lc('search-placeholder'))" />
                            </div>
                        </div>
                    </div>

        @else

                    <div class="w-full md:w-1/2">
                        {{-- Optionaler Slot für das Suchfeld --}}
                        {{ $search ?? '' }}
                    </div>

        @endif

    @else
        @if (!isset($additional))

                    <div class="w-full md:w-1/2"></div>

        @endif
    @endif

    @if (isset($additional))
        @php
            $buttonAlign = 'margin-top:1.5rem;';
        @endphp

                    <div class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3">
                        {{-- Optionaler Slot für zusätzliche Suchfelder --}}
                        {{ $additional ?? '' }}
                    </div>

    @endif

    @if (isset($button) || $grid->useDefaultCreateButton() === true)
        @if ($grid->useDefaultCreateButton() === true)

                    <div style="{{ $buttonAlign }}" class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3">

            @if (isset($buttonBeforeDefault))

                        {{ $buttonBeforeDefault ?? '' }}

            @endif

                        <button x-on:click="$dispatch('show-create-{{ $grid->getType() }}-modal')" type="button"
                            class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
                            <svg aria-hidden="true" class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path clip-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" fill-rule="evenodd" />
                            </svg>
                            @lang($grid->lc('create-button'))
                        </button>

            @if (isset($buttonAfterDefault))

                        {{ $buttonAfterDefault ?? '' }}

            @endif

                    </div>

        @else

                    <div style="{{ $buttonAlign }}" class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3">

                        {{-- Optionaler Slot für Button --}}
                        {{ $button ?? '' }}
                    </div>

        @endif

    @endif

                </div>

@endif

@if (isset($filters) && $filters->isNotEmpty() || !empty($sorting['columns']))
    @if ($hasFirstRow === true)

                {{-- Zweite Zeile: Filter --}}
                <hr class="my-4">

    @endif

                <div class="flex flex-row items-center justify-between w-full space-x-3 leading-3">
                    <div class="flex flex-row items-center space-x-3">{{ $filters ?? '' }}</div>

    @if (!empty($sorting['columns']))

                    <div class="flex flex-col">
                        <livewire:globals::global.sort-select
                            :columns="$sorting['columns']"
                            :selected-column="$sorting['column']"
                            :direction="$sorting['direction']"
                        />
                    </div>

    @endif

                </div>

@endif

            </div>

@if ($grid->hasData())

                {{-- Grid --}}
                <div class="overflow-x-auto">
                    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">

    @if ($grid->useCaptions() === true)

                        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                            <tr>

        @foreach ($grid->getCaptions() as $caption)

                                <th scope="col" class="px-4 py-3">
                                    {{ $caption }}
                                </th>

        @endforeach
        @if (!empty($actions) || $grid->hasToggleCallBack())

                                <th scope="col" class="px-4 py-3">
                                    @lang('globals::global.caption.action')
                                </th>

        @endif

                            </tr>
                        </thead>

    @endif

                        <tbody>

    @foreach ($data as $item)
        @if (is_array($item))
            @php
                $item = (object) $item;
            @endphp
        @endif
        @php
            $dummyId++;
        @endphp

                            <tr id="item-{{ $item->id ?? $dummyId }}" class="border-t dark:border-gray-700 {{ $grid->getRowClass($item) }}">

        @foreach ($grid->getVisibleColumns() as $column)
            @if ($column === $identifyingColumn)

                                <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                    {!! $grid->getDisplayValue($item, $column) !!}
                                </th>

            @else

                                <td class="border-gray-300 px-4 py-2 {{ $grid->getColumnClass($column) }}">
                                    {!! $grid->getDisplayValue($item, $column) !!}
                                </td>

            @endif
        @endforeach

        @if (!empty($actions) || $grid->hasToggleCallBack())

                                <td class="flex py-3">

            @if ($grid->hasToggleCallBack())

                                    <label wire:loading.remove wire:target="{{ $toggleCallback }}({{ $item->{$identifyingColumn} }})" class="inline-flex items-center cursor-pointer mr-4">
                                        <input type="checkbox" wire:click="{{ $toggleCallback }}({{ $item->{$identifyingColumn} }})" class="sr-only peer" @if ($item->{$toggleField}) checked @endif />
                                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary-600 dark:peer-checked:bg-primary-600">
                                        </div>
                                    </label>
                                    <x-globals::global.loading-spinner wire:loading wire:target="{{ $toggleCallback }}({{ $item->{$identifyingColumn} }})" />

            @endif

            @if (!empty($actions))

                @foreach ($actions as $action)

                                    <button data-tippy-content="{{ $grid->lc('actions.'.$action) }}" type="button"
                                        x-on:click="$dispatch('show-{!! $action !!}-modal', { {!! $grid->getType(\BplanBase\Globals\Enums\CaseStyle::Camel, \BplanBase\Globals\Enums\Number::Singular) !!}: @js($item) })"
                                        class="bg-white text-primary-700 border border-primary-700 hover:bg-primary-700 hover:text-white focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:focus:ring-primary-800 dark:hover:bg-primary-500">
                                        {!! $grid->getActionSvgIcon($action) !!}
                                    </button>


                @endforeach
            @endif

                                </td>

        @endif

                            </tr>

    @endforeach

                        </tbody>
                    </table>
                </div>
                {{-- /Grid --}}

    @if ($data instanceof \Illuminate\Pagination\LengthAwarePaginator && $data->lastPage() > 1)

                <div class="p-4">
                    {{ $data->links() }}
                </div>

    @endif

@else {{-- !$grid->hasData() --}}

            <div class="max-w-screen-xl px-4 py-8 mx-auto lg:py-16 lg:px-6">

                <div class="max-w-screen-sm mx-auto text-center">
                    <div class="flex justify-center">
                        <svg aria-hidden="true" class="w-24 h-24 mb-4 font-extrabold tracking-tight lg:text-9xl text-primary-600 dark:text-primary-500" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                        </svg>
                    </div>

                    <p class="mb-4 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl dark:text-white">
                        @lang($grid->lc('no-data'))
                    </p>
                    <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">

    @if ($grid->hasActiveFilters())

        @lang($grid->lc('search-result-info'))

    @else

        @lang($grid->lc('no-data-info'))

    @endif

                    </p>
                </div>
            </div>

@endif {{-- !$grid->hasData() --}}

        </div>


@if (isset($subViews))

        {{ $subViews ?? '' }}

@endif

        <script>

            if (document.getElementById('search')) {
                document.getElementById('search').focus();
            }

            {{ $script ?? '' }}

        </script>
    </div>
