@extends('layouts.app', ["title" => "Listagem de credenciados"])

@section('content')
    <style>
        .title[title]:hover::after {

            content: attr(title);
            position: absolute;
            top: -100%;
            left: 0;
            z-index: 999;
        }
        </style>
    <main class="flex flex-1">
        <div class="flex flex-col md:w-full px-5 pb-10 max-w-screen">
            <div class="py-2 flex items-center">
                <div class="p-2 text-zinc-100 rounded-md bg-[#071D41]/75">
                    <x-pepicon-persons class="w-8 h-8 text-zinc-100" />
                </div>
                <h3 class="md:text-4xl text-lg p-5 font-serif">Listagem de credenciados - {{$listagem_nome}}</h3>
            </div>
            <form action={{ route("listar-credenciados", request()->slug) }} method="GET" class="flex items-center md:justify-end ">
                <div class="p-5 pt-6 flex gap-5  items-center bg-zinc-50 rounded-t-lg">

                    Filtrar
                    <div class="flex flex-col gap-2 relative group">

                        <input class="p-2 peer placeholder-transparent border border-gray-500" type="text" name="nome" id="nome_busca" placeholder="Nome" value="{{ app('request')->input('nome') ?? '' }}" />
                        <label class="
                            text-md
                            font-thinz
                            font-serif
                            absolute

                            top-[-1rem]
                            bg-transparent
                            px-1
                            text-zinc-400
                            rounded
                            transition-all
                            duration-300
                            ease-in-out
                            group-focus-within:text-zinc-600
                            peer-placeholder-shown:top-3
                            peer-placeholder-shown:px-3
                            peer-placeholder-shown:left-0
                            group-focus-within:top-[-1rem]
                            " for="nome_busca">
                            Digite o nome
                        </label>
                    </div>

                    <div class="flex flex-col gap-2 relative group">

                        <select class="p-2 border border-gray-500" name="modulo" id="modulo_select" class="text-zinc-100">
                            <option value="" class="text-left">Selecione um Modulo</option>
                            @foreach ($modulos as $modulo)
                                <option
                                    @if (app('request')->input('modulo') == $modulo->id)
                                        selected
                                    @endif

                                value={{$modulo->id}}>
                                    {{ Str::limit($modulo->nome, $limit = 40, $end= "...") }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="flex flex-col gap-2 relative group  max-w-xs">
                        <select class="p-2 border border-gray-500" name="submodulo" id="submodulo_select" class="text-zinc-100  max-w-xs block">
                            <option value="">Selecione um Submodulo</option>
                            @foreach ($submodulos as $submodulo)
                                <option
                                    @if (app('request')->input('submodulo') == $submodulo->id)
                                        selected
                                    @endif
                                    class=""
                                    value={{$submodulo->id}}>{{ Str::limit($submodulo->nome, $limit = 40, $end= "...") }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="p-2 rounded-lg hover:bg-blue-400 transition-colors bg-[#071D41]/75">
                        <x-bi-search class="w-6 h-6 text-white"/>
                    </button>
                </div>

                {{-- <x-bi-search /> --}}
            </form>
            <div class="flex items-center justify-center w-full">
                <div class="w-full mx-auto bg-white shadow-lg rounded-sm border border-gray-200">
                    <table class="table-auto w-full">
                        <thead class="text-xs font-semibold uppercase text-gray-400 bg-gray-50">
                            <tr>
                                <th class="p-4 whitespace-nowrap">
                                    <div class="font-semibold text-center">Posição</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l">
                                    <div class="font-semibold text-left">Nome</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l">
                                    <div class="font-semibold text-center">Chave de Inscrição</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="font-semibold text-center">Modulo</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="font-semibold text-center">Submodulo</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="font-semibold text-center">Tipo de Listagem</div>
                                </th>
                                <th class="p-4 whitespace-nowrap">
                                    <div class="font-semibold text-center">
                                        @if(isset(Auth::user()->name))
                                            Ações
                                        @endif
                                    </div>
                                </th>
                            </tr>
                        </thead>

                        <tbody class="text-sm divide-y divide-gray-100 p-5">

                            @foreach ($credenciados as $credenciado)

                            <tr class="mx-4 my-2 odd:bg-zinc-200">
                                <td class="p-4 whitespace-nowrap">
                                    <div class="font-medium text-gray-800 text-center">{{$credenciado->position ?? '?'}}</div>
                                </td>
                                <td class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="flex items-center flex-1">

                                        <div class="font-medium text-gray-800">{{$credenciado->nome}}</div>
                                    </div>
                                </td>

                                <td class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="font-medium text-gray-800 text-center">{{$credenciado->chave_de_inscricao}}</div>
                                </td>

                                <td class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="text-center">{{$credenciado->moduloInfo->nome ?? '-'}}</div>
                                </td>
                                <td class="p-4 max-w-xs border-l relative group">
                                    <div class="opacity-0 group-hover:opacity-100 group-hover:flex absolute font-semibold items-center justify-center group w-full h-full bg-zinc-50 group-hover:bg-yellow-100 left-0 top-0 transition-all duration-200">
                                        <p class=" text-center">{{$credenciado->submoduloInfo->nome ?? '-'}}</p>
                                    </div>
                                    <div class="text-center font-medium truncate group-hover:opacity-0" >
                                       {{$credenciado->submoduloInfo->nome ?? "-"}}
                                    </div>
                                </td>
                                <td class="p-4 max-w-xs truncate border-l">
                                    <div class="text-center font-medium">{{$credenciado->listagemInfo->nome ?? "-"}}</div>
                                </td>
                                <td class="p-4 whitespace-nowrap">
                                    <div class="flex items-center justify-center gap-1">
                                        @if(isset(Auth::user()->name))
                                        
                                        @if(\App\Models\Setor::where('id', Auth::user()->setor)->first()->slug === 'administrador') 

                                        <a href="{{route('credenciado-edit', ['id' => $credenciado->id])}}" title="Editar" type="button" class="p-2 bg-blue-600 hover:bg-blue-500 w-fit rounded-md transition-colors">
                                            <x-pepicon-pen class="w-3 h-3 text-zinc-100" />
                                        </a>

                                        @endif

                                        <a href="{{route('credenciado-show', ['id' => $credenciado->id])}}" title="Contratar" type="button" class="p-2 bg-green-600 hover:bg-green-500 w-fit rounded-md transition-colors">
                                            <x-bi-person-video2 class="w-3 h-3 text-zinc-100" />
                                        </a>

                                        @if(\App\Models\Setor::where('id', Auth::user()->setor)->first()->slug === 'administrador') 

                                        <form action="{{route('credenciado-delete', ['id' => $credenciado->id])}}" onsubmit="return confirm('Deseja Deletar Este Credenciado?')" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <input type="hidden" name="id" value={{ $credenciado['id'] }}>

                                        <button type="submit" title="Deletar" class="p-2 bg-red-600 hover:bg-red-500 w-fit rounded-md transition-colors"> <x-pepicon-trash class="w-3 h-3 text-zinc-100" /></button>
                                        </form>

                                        @endif
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            
                            @endforeach

                        </tbody>
                    </table>
                    <div class="p-2 pt-4">
                        {{$credenciados->appends(request()->except('page'))->links()}}
                    </div>
                </div>

            </div>
        </div>
    </main>

    {{-- INÍCIO FOOTER --}}
    <footer>

        <x-footer>

        </x-footer>

    </footer>
    {{-- FIM FOOTER --}}

@endsection