@props(['thead','tbody','data','route'])

@if ($thead && $tbody)
    <div class="relative border border-slate-600 rounded-lg w-full block overflow-x-auto">
        <table class="table-auto w-full border-collapse">
            <thead>
                <tr> 
                    <th scope="col" class="border-b border-slate-600 text-left py-3 pl-6 pr-3 bg-slate-600">#</th>
                    @foreach ($thead as $key => $th)
                        <th scope="col" class="border-b border-slate-600 text-left py-3 pl-6 pr-3 bg-slate-600">{{$th}}</th>
                    @endforeach
                    <th scope="col" class="border-b border-slate-600 text-left py-3 pl-6 pr-3 bg-slate-600">
                        @if(Route::has($route.'.create') && Gate::check('haveaccess', $route.'.create'))
                            <x-dynamic-button-link :type="'add'" :action="route($route.'.create')" />
                        @endif
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach ($data as $key => $row)
                    <tr>
                        @can('haveaccess',$route.'.show')
                        <td class="text-left py-3 pl-6 pr-3 border-b border-slate-700">{{ $row->id }}</td>
                        @else
                        <td class="text-left py-3 pl-6 pr-3 border-b border-slate-700">{{ ($key+1)+(($data->currentPage()-1)*$data->perPage()) }}</td>
                        @endcan
                        @foreach ($tbody as $key => $td)
                            <td class="text-left py-3 pl-6 pr-3 border-b border-slate-700">
                                @if($td == 'status' || $td == 'full_access')
                                    <x-dynamic-table-switch :id="$row->id" :status="$row[$td]" />
                                @elseif(is_object($row[$td]) && $td != 'created_at' && $td != 'updated_at')
                                    @foreach ($row[$td] as $key => $filaobj)
                                        <span class="bg-slate-700 px-2 py-1 rounded-md text-xs whitespace-nowrap">{{$filaobj->name}}</span>
                                    @endforeach
                                @elseif($td == 'image')
                                    @if($row[$td])
                                        <img class="mx-auto h-12 w-auto" src="{{ asset("image/{$row[$td]}") }}" alt="{{$row[$td]}}">
                                    @else
                                        <x-icon-image />
                                    @endif
                                @else
                                    @php
                                        $rowaux = $row;
                                        foreach ($arrayrow = explode('.', $td) as $key => $elem) {
                                            $rowaux = $rowaux[$elem];
                                        }
                                        echo $rowaux;
                                    @endphp
                                @endif
                            </td>
                        @endforeach
                        <td class="text-left py-3 pl-6 pr-3 border-b border-slate-700">
                            @if(Route::has($route.'.edit') && Gate::check('haveaccess', $route.'.edit'))
                                <x-dynamic-button-link :type="'edit'" :action="route($route.'.edit',$row->id)" />
                            @endif
                            @if(Route::has($route.'.destroy') && Gate::check('haveaccess', $route.'.destroy'))
                                <x-dynamic-button-link :type="'delete'" :action="route($route.'.destroy', $row->id)" />
                            @endif
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div class="px-6 py-2 "> 
            {{$data->withQueryString()->links()}}
        </div>
    </div>
@endif