@extends('sistema.sistema')
@section('content')
    <div class="bg-white max-w-screen max-h-auto max-w-auto mx-auto sm:w-full xl:w-11/12  rounded-lg mt-16 mb-16 pb-8 pt-8">
        <h1 class="text-orangeblack text-lg font-bold flex text-center justify-center m-3 mt-3 mb-3 p-3">Sistema - <span class="text-lg">Usuários</span> </h1>

        <div class="">
            <a href="/register" target="_blank">
                <button class="mx-3 rounded-md px-2 py-1 mr-2 bg-blueblack hover:to-blueb text-white font-semibold"
                >Cadastrar Usuário</button>
            </a>
        </div>

           <!-- Modal Update -->
           <div id="modalUpdateUser" tabindex="-1" aria-hidden="true" class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-black/40 backdrop-blur-sm">
            <div class="relative w-full max-w-4xl max-h-[700px] overflow-x-hidden bg-white rounded-2xl shadow-md dark:bg-gray-800">
            <!-- Header -->
            <div class="flex items-center justify-between p-5 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
                    Atualizar cadastro de usuário
                </h3>
                <button type="button"
                    class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                    data-modal-hide="modalUpdateUser">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <!-- Body -->
            <form id="formUpdateEmployee" class="p-5 space-y-6">
                <input type="hidden" id="employee_id" name="employee_id">
                <div class="flex flex-col">
                    <label for="bind_employee" class="labelModal">Vincular ao cadastro de funcionário</label>
                    <select id="bind_employee" name="bind_employee" class="inputModal w-40">
                        <option value="" disabled selected>Selecione</option>
                        <option value="0">Nenhum</option>
                        @foreach ($employees as $employee)
                        <option value="{{$employee->id}}">{{$employee->full_name}}</option>
                        @endforeach
                    </select>
                </div>
                <!-- Linha 1 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="update_full_name" class="labelModal">Nome completo</label>
                        <input type="text" id="update_full_name" name="update_full_name" class="inputModal" placeholder="Nome completo">
                    </div>
                    <div>
                        <label for="update_email" class="labelModal">E-mail</label>
                        <input type="email" id="update_email" name="update_email" class="inputModal" placeholder="E-mail">
                    </div>
                    <div>
                        <label for="update_phone" class="labelModal">Telefone</label>
                        <input type="tel" id="update_phone" name="update_phone" class="inputModal" placeholder="Telefone">
                    </div>
                </div>


                <!-- Linha 2 -->

                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="flex flex-col">
                        <label for="update_cpf" class="labelModal">Unidade</label>
                        <select type="text" id="update_cpf" name="update_cpf" class="inputFilter text-black" placeholder="CPF">
                            <option value="">Selecione</option>
                            @foreach ($unidades as $unidade)
                                <option value="{{$unidade->id}}">{{ucfirst($unidade->nome)}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col">
                        <label for="update_company_code" class="labelModal">Setor</label>
                        <select type="text" id="update_cpf" name="update_cpf" class="inputFilter text-black" placeholder="CPF">
                            <option value="">Selecione</option>
                            @foreach ($grupos as $grupo)
                                <option value="{{$grupo->id}}">{{ucfirst($grupo->nome)}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="update_drt_number" class="labelModal">Nível de acesso</label>
                        <input type="text" id="update_drt_number" name="update_drt_number" class="inputModal" placeholder="Número DRT">
                    </div>
                </div>
                <!-- Linha 3  -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="update_cpf" class="labelModal">Nova senha</label>
                        <input type="password" id="update_cpf" name="update_cpf" class="inputModal" placeholder="Nova senha">
                    </div>
                    <div>
                        <label for="update_company_code" class="labelModal">Confirme a senha</label>
                        <input type="password" id="update_company_code" name="update_company_code" class="inputModal" placeholder="Confirme a senha">
                    </div>
                  
                </div>
 
                <!-- Status -->

                <!-- Footer -->
                <div class="flex items-center justify-start gap-3 border-t border-gray-200 pt-4">
                    <button type="submit" id="btnUpdateEmployee" class="btn btnUpdate w-full md:w-auto px-6">Salvar</button>
                    <button type="button"
                            data-modal-hide="modalUpdateUser"
                            class="btnCancel">
                        Cancelar
                    </button>
                </div>
            </form>
            </div>
        </div>

        <div class="rounded-lg mb-10 m-3 sm:p-2 p-1 lg:m-3 flex justify-center ">
                  
            <form method="GET" action="" class=" bg-gray-200 rounded-md p-3 max-w-full mx-auto m-0 mt-5 mb-3 sm:grid grid-flow-col">
                <select id="selectNome" name="nome" class="bg-gray-50 border  border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2">
                    <option value="">Nome</option>
                    @foreach ($users as $user)
                        <option value="{{$user->id}}">{{$user->name}}</option>
                    @endforeach
                </select>
                <select name="empresa" id="selectEmpresa" class="bg-gray-50 border  border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2">
                    <option value="">Grupo</option>
                       @foreach ($grupos as $grupo)
                        <option value="{{$grupo->id}}">{{ucfirst($grupo->nome)}}</option>
                    @endforeach
                </select>
                <select name="unidade" id="selectUnidade" class="bg-gray-50 border  border-gray-300 text-blueblack text-sm rounded-lg focus:ring-gray-50 sm:w-5/6 lg:w-auto w-11/12 p-2 m-2">
                    <option value="">Unidade</option>
                    @foreach ($unidades as $unidade)
                    <option value="{{$unidade->id}}">{{ucfirst($unidade->sigla)}}</option>
                @endforeach
                </select>
                <button type="submit" class="text-white bg-blueblack hover:bg-orangeblack
                    text-base lg:rounded-lg rounded-md p-1 sm:w-5/6 m-2 lg:max-w-28 ">Pesquisar
                </button>
            </form>
        </div>
        <div class="relative overflow-x-auto shadow-md rounded m-3">
            <table class="w-full text-sm text-left rtl:text-right text-blueblack">
                <thead class="text-xs text-white  uppercase bg-blueblack rounded-lg">
                    <tr>
                        <th scope="col" class="px-4 py-3 text-center">
                            Nome
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Email
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Criado
                        </th>
                        <th scope="col" class="px-4 py-3 text-center">
                            Unidade
                        </th>
                        <th scope="col" class="px-4 py-3  text-center">
                            Grupo
                        </th>
                        <th scope="col" class="px-4 py-3  text-center">
                            Editar
                        </th>
                        
                    </tr>
                </thead>
                <tbody>
                @foreach ($users as $user)
                    <tr class="bg-white border-b  hover:bg-gray-200 text-blueblack  ">
                        <th scope="row" class="px-2 py-2 text-center font-bold whitespace-nowrap ">
                            {{ $user->name }}
                        </th>
                        <td class="px-6 py-4 text-center">
                            {{ $user->email }}

                        </td>
                        <td class="px-6 py-4 text-center">
                            {{ $user->created_at->format('d/m/Y H:i:s')}}

                        </td>
                        <td class="px-6 py-4 text-center">
                            @foreach ($unidades as $unidade)
                                @if ($unidade->id == $user->id_unidade)
                                    {{$unidade->sigla}}
                                    
                                @endif
                                
                            @endforeach
                        </td>
                        <td class="px-6 py-4 text-center">
                            @foreach ($grupos as $grupo)
                                @if($grupo->id == $user->id_grupo)
                                    {{ucfirst($grupo->nome)}}
                              
                                @endif
                            @endforeach
                        </td>
                        <td class="py-2 px-4 border-b "><button id="modalUpdateUser" name="modalUpdateUser" class="editEmployee w-full  flex justify-center" data-modal-target="modalUpdateUser" data-modal-toggle="modalUpdateUser" data-edit="{{json_encode($user)}}" ><svg class="w-[25px] h-[25px]  text-blue-800 rounded-lg" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.779 17.779 4.36 19.918 6.5 13.5m4.279 4.279 8.364-8.643a3.027 3.027 0 0 0-2.14-5.165 3.03 3.03 0 0 0-2.14.886L6.5 13.5m4.279 4.279L6.499 13.5m2.14 2.14 6.213-6.504M12.75 7.04 17 11.28"/>
                        </svg>
                        </button></td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

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





@endsection