@extends('rh.rh')
@section('content');
<div class="bg-white  h-auto  mx-auto w-[90%] rounded-lg my-2">
    <div class="">
        <h1 class="text-2xl font-bold bg-orangeblack text-white rounded-lg w-full p-3">Lista de Funcionários</h1>
        <div class=" p-6 rounded-lg  w-[100%] mx-auto  flex flex-col justify-center items-center">
            {{-- <div class="bg-white shadow-md rounded-lg p-8 w-full max-w-md">
                <h1 class="text-2xl font-semibold text-center mb-6 text-gray-800">Importar Funcionários (CSV)</h1>
        
                @if(session('success'))
                    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                        {{ session('success') }}
                    </div>
                @endif
        
                @if ($errors->any())
                    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                        <ul class="list-disc ml-5">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
        
                <form action="{{ route('employees.import') }}" method="POST" enctype="multipart/form-data">
                    @csrf
        
                    <label class="block text-gray-700 font-sm mb-2" for="file">
                        Escolha o arquivo CSV:
                    </label>
        
                    <input 
                        type="file" 
                        name="file" 
                        id="file" 
                        accept=".csv"
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-400 focus:outline-none mb-4"
                        required
                    >
        
                    <button 
                        type="submit" 
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 rounded-lg transition">
                        Importar
                    </button>
                </form>
            </div> --}}
            <div class="my-4 w-[90%] flex flex-row justify-center items-center gap-2">
                <form action="{{route('employee')}}" method="GET" class="flex flex-col lg:flex-row lg:justify-center lg:items-center ">
                    <input type="text"  name="id" id="id" class="inputFilter w-[10px]" placeholder="Cod">
                    <input type="text"  name="full_name" id="full_name" class="inputFilter w-[10px]" placeholder="Nome">
                    <input type="text"  name="cpf_number" id="cpf_number" class="inputFilter w-[10px]" placeholder="CPF">
                    <input type="text"  name="department" id="department" class="inputFilter w-[10px]" placeholder="Departamento">
                    <select name="status" id="status" class="inputFilter">
                        <option value="" selected disabled>Status</option>
                        <option value="true">Ativo</option>
                        <option value="false">Inativo</option>
                    </select>
                    <button type="submit" class="btn m-2 mx-2 px-2">Pesquisar</button>
                    <a href="{{route('employee')}}" class="btnClear m-2 mx-2 text-center flex justify-center items-center px-2">Limpar</a>
                </form>
                
            </div>
            <div class=" w-full my-2">
                <button data-modal-target="create-employee-modal" data-modal-toggle="create-employee-modal"
                class="btn bg-orange-600 text-white hover:bg-orange-700 font-medium px-4 py-2 rounded-lg">
                Novo Funcionário
            </button>
            </div>


            {{-- Modal Create --}}
            <div id="create-employee-modal" tabindex="-1" aria-hidden="true"
            class="hidden overflow-y-auto overflow-x-hidden fixed inset-0 z-50 flex justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full bg-black/50">
            <div class="relative p-4 w-full max-w-4xl max-h-full">
                <div class="relative bg-white rounded-lg shadow dark:bg-gray-800">
                    <!-- Header -->
                    <div class="flex items-center justify-between p-4 border-b rounded-t dark:border-gray-600">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                            Cadastrar Funcionário
                        </h3>
                        <button type="button" data-modal-hide="create-employee-modal"
                            class="text-gray-400 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
                            aria-label="Fechar">
                            ✕
                        </button>
                    </div>

                    <!-- Body -->
                    <form id="formCreateEmployee" class="p-4 md:p-5">
                        <div class="grid grid-cols-3 gap-4">
                            <div>
                                <label for="full_name" class="block mb-1 font-medium text-gray-700">Nome completo</label>
                                <input type="text" id="full_name" name="full_name" class="inputModal w-full" placeholder="Nome completo">
                            </div>
                            <div>
                                <label for="email" class="block mb-1 font-medium text-gray-700">E-mail</label>
                                <input type="email" id="email" name="email" class="inputModal w-full" placeholder="E-mail">
                            </div>
                            <div>
                                <label for="phone" class="block mb-1 font-medium text-gray-700">Telefone</label>
                                <input type="tel" id="phone" name="phone" class="inputModal w-full" placeholder="Telefone">
                            </div>

                            <div>
                                <label for="cpf_number" class="block mb-1 font-medium text-gray-700">CPF</label>
                                <input type="text" id="cpf_number" name="cpf_number" class="inputModal w-full" placeholder="CPF">
                            </div>
                            <div>
                                <label for="company_code" class="block mb-1 font-medium text-gray-700">Código da Empresa</label>
                                <input type="text" id="company_code" name="company_code" class="inputModal w-full" placeholder="Código da Empresa">
                            </div>
                            <div>
                                <label for="drt_number" class="block mb-1 font-medium text-gray-700">Número DRT</label>
                                <input type="text" id="drt_number" name="drt_number" class="inputModal w-full" placeholder="Número DRT">
                            </div>

                            <div>
                                <label for="position" class="block mb-1 font-medium text-gray-700">Cargo</label>
                                <input type="text" id="position" name="position" class="inputModal w-full" placeholder="Cargo">
                            </div>
                            <div>
                                <label for="department" class="block mb-1 font-medium text-gray-700">Departamento</label>
                                <input type="text" id="department" name="department" class="inputModal w-full" placeholder="Departamento">
                            </div>
                            <div>
                                <label for="sector" class="block mb-1 font-medium text-gray-700">Setor</label>
                                <input type="text" id="sector" name="sector" class="inputModal w-full" placeholder="Setor">
                            </div>

                            <div>
                                <label for="section" class="block mb-1 font-medium text-gray-700">Seção</label>
                                <input type="text" id="section" name="section" class="inputModal w-full" placeholder="Seção">
                            </div>
                            <div>
                                <label for="shift" class="block mb-1 font-medium text-gray-700">Turno</label>
                                <input type="text" id="shift" name="shift" class="inputModal w-full" placeholder="Turno">
                            </div>
                            <div>
                                <label for="cost_center" class="block mb-1 font-medium text-gray-700">Centro de Custo</label>
                                <input type="text" id="cost_center" name="cost_center" class="inputModal w-full" placeholder="Centro de Custo">
                            </div>

                            <div>
                                <label for="hire_date" class="block mb-1 font-medium text-gray-700">Data de Admissão</label>
                                <input type="date" id="hire_date" name="hire_date" class="inputModal w-full">
                            </div>
                            <div>
                                <label for="birthdate" class="block mb-1 font-medium text-gray-700">Data de Nascimento</label>
                                <input type="date" id="birthdate" name="birthdate" class="inputModal w-full">
                            </div>
                            <div>
                                <label for="status" class="block mb-1 font-medium text-gray-700">Status</label>
                                <select id="status" name="status" class="inputModal w-full">
                                    <option value="1">Ativo</option>
                                    <option value="0">Inativo</option>
                                </select>
                            </div>
                        </div>

                        <!-- Footer -->
                        <div class="flex items-center justify-end mt-6 border-t pt-4">
                            <button type="submit" id="btnCreateEmployee"
                                class="btn bg-orange-600 hover:bg-orange-700 text-white w-full px-4 py-2 rounded-lg">
                                Salvar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            </div>


          <!-- Modal Update -->
        <div id="modalUpdateEmployee" 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 funcionário
                </h3>
                <button type="button"
                    class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-300"
                    data-modal-hide="modalUpdateEmployee">
                    <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">

                <!-- 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>
                        <label for="update_cpf" class="labelModal">CPF</label>
                        <input type="text" id="update_cpf" name="update_cpf" class="inputModal" placeholder="CPF">
                    </div>
                    <div>
                        <label for="update_company_code" class="labelModal">Código da Empresa</label>
                        <input type="text" id="update_company_code" name="update_company_code" class="inputModal" placeholder="Código da Empresa">
                    </div>
                    <div>
                        <label for="update_drt_number" class="labelModal">Número DRT</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_position" class="labelModal">Cargo</label>
                        <input type="text" id="update_position" name="update_position" class="inputModal" placeholder="Cargo">
                    </div>
                    <div>
                        <label for="update_department" class="labelModal">Departamento</label>
                        <input type="text" id="update_department" name="update_department" class="inputModal" placeholder="Departamento">
                    </div>
                    <div>
                        <label for="update_sector" class="labelModal">Setor</label>
                        <input type="text" id="update_sector" name="update_sector" class="inputModal" placeholder="Setor">
                    </div>
                </div>

                <!-- Linha 4 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div>
                        <label for="update_section" class="labelModal">Seção</label>
                        <input type="text" id="update_section" name="update_section" class="inputModal" placeholder="Seção">
                    </div>
                    <div>
                        <label for="update_shift" class="labelModal">Turno</label>
                        <input type="text" id="update_shift" name="update_shift" class="inputModal" placeholder="Turno">
                    </div>
                    <div>
                        <label for="update_cost_center" class="labelModal">Centro de Custo</label>
                        <input type="text" id="update_cost_center" name="update_cost_center" class="inputModal" placeholder="Centro de Custo">
                    </div>
                </div>

                <!-- Linha 5 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="flex flex-col">
                        <label for="update_hire_date" class="labelModal">Data de Admissão</label>
                        <input type="date" id="update_hire_date" name="update_hire_date" class="inputModal">
                    </div>
                    <div class="flex flex-col">
                        <label for="update_birthdate" class="labelModal">Data de Nascimento</label>
                        <input type="date" id="update_birthdate" name="update_birthdate" class="inputModal">
                    </div>
                    <div class="flex flex-col">
                        <label for="update_status" class="labelModal">Status</label>
                        <select id="update_status" name="update_status" class="inputModal w-40">
                            <option value="" disabled selected>Selecione</option>
                            <option value="1">Ativo</option>
                            <option value="0">Inativo</option>
                        </select>
                    </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="modalUpdateEmployee"
                            class="btnCancel">
                        Cancelar
                    </button>
                </div>
            </form>
            </div>
        </div>


            {{-- Modal VIEW --}}
            <div id="view-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
                <div class="relative p-4 w-full max-w-3xl max-h-full">
                    <!-- Modal content -->
                    <div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
                        <!-- Modal header -->
                        <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200">
                            <h3 class="text-xl font-semibold text-orangeblack">
                                Dados do Funcionário
                            </h3>
                            <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="view-modal">
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                                </svg>
                                <span class="sr-only">Close modal</span>
                            </button>
                        </div>
                        <!-- Modal body -->
                        <div id="dataView" class=" p-4 md:p-5 flex  flex-col w-full ">
                        </div>
                        <div id="returnMsg" class="">
                        </div>
                        <!-- Modal footer -->
                    
                    </div>
                </div>
            </div>
            <div class="w-full overflow-x-auto">    
                <table class="w-full text-white rounded-lg">
                    <thead class="bg-zinc-700 rounded-lg shadow-lg">
                        <tr class="">
                            <th class="py-2 px-4 ">COD</th>
                            <th class="py-2 px-4 ">Nome</th>
                            <th class="py-2 px-4 ">CPF</th>
                            <th class="py-2 px-4 ">Departamento</th>
                            <th class="py-2 px-4 ">Admissão</th>
                            <th class="py-2 px-4 ">Setor</th>
                            <th class="py-2 px-4 ">Visualizar</th>
                            <th class="py-2 px-4 ">Editar</th>
                        </tr>
                    </thead>
                    <tbody class="text-blueblack shadow-lg rounded-lg">
                       @if ($employees && $employees->count() > 0)
                            @foreach ($employees as $item)
                            <tr>
                                <td class="py-2 px-4 border-b font-extrabold text-center">{{$item->id}}</td>
                                <td class="py-2 px-4 border-b text-center">{{$item->full_name}}</td>
                                <td class="py-2 px-4 border-b text-center">{{ preg_replace('/(\d{3})(\d{3})(\d{3})(\d{2})/', '$1.$2.$3-$4', $item->cpf_number) }}                                </td>
                                <td class="py-2 px-4 border-b text-center">{{ucfirst($item->department)}}</td>
                                <td class="py-2 px-4 border-b text-center">{{$item->hire_date->format('d/m/Y')}}</td>
                                <td class="py-2 px-4 border-b text-center">{{$item->section}}</td>
                                <td class="py-2 px-4 border-b text-center">
                                    <button class="text-blue-800 hover:text-blue-400 btnView" data-view="{{json_encode($item)}}" id="viewEmployee" name="viewEmployee" data-modal-target="view-modal" data-modal-toggle="view-modal">
                                        <svg class="w-6 h-6" 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-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/>
                                            <path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                                        </svg>
                                    </button>
                                  </td>
                                <td class="py-2 px-4 border-b "><button id="modalUpdateEmployee" name="modalUpdateEmployee" class="editEmployee w-full  flex justify-center" data-modal-target="modalUpdateEmployee" data-modal-toggle="modalUpdateEmployee" data-edit="{{json_encode($item)}}" ><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
                        @else
                            <p class="textError">Nenhum funcionário encontrado</p>
                        @endif 
                    </tbody>
                </table>
                {{$employees->links()}}
             
            </div>
        </div>
    </div>
</div>
@vite(['resources/js/rh/view.js']);
@vite(['resources/js/rh/update.js']);
@vite(['resources/js/rh/store.js']);


@endsection