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

@section('content')

    <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 bg-[#071D41]/75 text-zinc-100 rounded-md">
                    <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 Contratados</h3>
            </div>
            <form action="{{ route('listar-contratacao') }}" 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-zinc-100"/>
                    </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-left">Nome</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">Data Contratação</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="font-semibold text-center">Observações</div>
                                </th>
                                <th class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <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 ($contratados as $contratado)

                            <tr class="mx-4 my-2 odd:bg-zinc-200">

                                <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">{{$contratado->credenciado->nome ?? '-'}}</div>
                                    </div>
                                </td>
                                <td class="p-4 whitespace-nowrap border-l border-blue-100">
                                    <div class="text-center">{{$contratado->credenciado->moduloInfo->nome ?? '-'}}</div>
                                </td>
                                <td class="p-4 max-w-xs truncate border-l">
                                    <div class="text-center font-medium">{{$contratado->credenciado->submoduloInfo->nome ?? "-"}}</div>
                                </td>
                                <td class="p-4 max-w-xs truncate border-l">
                                    <div class="text-center font-medium">{{date('d/m/Y', strtotime($contratado->created_at)) ?? "-"}}</div>
                                </td>
                                <td class="p-4 max-w-xs truncate border-l">
                                    <div class="text-center font-medium">{{$contratado->observacoes ?? "-"}}</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' => $contratado->id_credenciado])}}" 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('contratado-show', "$contratado->id") }} 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('contratado-delete', ['id' => $contratado->id])}}" onsubmit="return confirm('Deseja Deletar Este Contratado?')" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <input type="hidden" name="id" value={{ $contratado['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">
                        {{$contratados->appends(request()->except('page'))->links()}}
                    </div>
                </div>

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

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

        <x-footer>

        </x-footer>

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

@endsection