@extends('layouts.sidebar')

@section('content')
    <div class="container px-4 mx-auto">


        @if (session('success'))
            <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                {{ session('success') }}
            </div>
        @endif
        <div class="flex justify-between my-10 ">
            <div>
                <h1 class="mb-4 text-3xl font-bold">Employees</h1>
            </div>
            <div> <button type="button" class="px-4 py-2 mb-3 text-white bg-blue-500 rounded"
                    onclick="toggleModal('addEmployeeModal')">Add Employee</button></div>
        </div>




        <table id="employeesTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
            <thead class="bg-gray-200">
                <tr class="">
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Complete Name</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Type</th>

                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Address</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Salary Rate</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Position</th>
                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Date Hired</th>

                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="text-sm text-gray-600">

            </tbody>
        </table>

        <!-- Edit Employee Modals -->
        @foreach ($employees as $employee)
            <div id="editEmployeeModal{{ $employee->id }}"
                class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-900 bg-opacity-50 modal">
                <div class="w-1/3 bg-white rounded shadow-lg modal-content">
                    <form action="{{ route('employees.update', $employee->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="flex items-center justify-between p-2 mb-4 bg-blue-500 border-b modal-header">
                            <h5 class="text-lg font-bold text-white">Edit Employee</h5>
                            <button type="button" class="text-white hover:text-gray-700"
                                onclick="toggleModal('editEmployeeModal{{ $employee->id }}')">&times;</button>
                        </div>
                        <div class="p-5 space-y-4 modal-body">
                            <div class="form-group">
                                <label for="complete_name">Complete Name</label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="complete_name" value="{{ $employee->complete_name }}" required>
                            </div>
                            <div class="form-group">
                                <label for="employee_type">Employee Type</label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="employee_type" value="{{ $employee->employee_type }}" required>
                            </div>
                            <div class="form-group">
                                <label for="contact_no">Contact No. </label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="contact_no" value="{{ $employee->contact_no }}" required>
                            </div>
                            <div class="form-group">
                                <label for="address">Address</label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="address" value="{{ $employee->address }}">
                            </div>
                            <div class="form-group">
                                <label for="salary_rate">Salary Rate</label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="salary_rate" value="{{ $employee->salary_rate }}" required>
                            </div>
                            <div class="form-group">
                                <label for="position">Position</label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="position" value="{{ $employee->position }}">
                            </div>
                            <div class="form-group">
                                <label for="date_hired">Date Hired</label>
                                <input type="text" class="block w-full mt-1 border-2 border-black rounded form-input"
                                    name="date_hired" value="{{ $employee->date_hired }}" required>
                            </div>

                        </div>
                        <div class="p-4 modal-footer">
                            <button type="button" class="px-2 py-1 text-gray-700 bg-gray-300 rounded"
                                onclick="toggleModal('editEmployeeModal{{ $employee->id }}')">Close</button>
                            <button type="submit" class="px-2 py-1 text-white bg-blue-500 rounded">Save
                                changes</button>
                        </div>
                    </form>
                </div>
            </div>
        @endforeach

        <!-- Add Employee Modal -->
        <div id="addEmployeeModal"
            class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-900 bg-opacity-50 modal">
            <div class="w-1/3 bg-white rounded shadow-lg modal-content">
                <form action="{{ route('employees.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="flex items-center justify-between p-2 mb-4 bg-blue-500 border-b modal-header">
                        <h5 class="text-lg font-bold text-white">Add Employee</h5>
                        <button type="button" class="text-white hover:text-gray-700"
                            onclick="toggleModal('addEmployeeModal')">&times;</button>
                    </div>
                    <div class="p-5 space-y-4 modal-body">
                        <div class="form-group">
                            <label for="id" class="block font-medium text-gray-700">Employee ID</label>
                            <input type="text" id="id"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="id"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="complete_name" class="block font-medium text-gray-700">Complete Name</label>
                            <input type="text" id="complete_name"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="complete_name"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="employee_type" class="block font-medium text-gray-700">Employee Type</label>
                            <select id="employee_type" name="employee_type"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" required>
                                <option value="" disabled selected>Select Employee Type</option>
                                <option value="Contractual">Contractual</option>
                                <option value="Permanent">Permanent</option>
                                <option value="Casual">Casual</option>
                                <option value="Temporary">Temporary</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="contact_no" class="block font-medium text-gray-700">Contact No.</label>
                            <input type="text" id="contact_no"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="contact_no"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="address" class="block font-medium text-gray-700">Address</label>
                            <input type="text" id="address"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="address">
                        </div>
                        <div class="form-group">
                            <label for="salary_rate" class="block font-medium text-gray-700">Salary Rate</label>
                            <input type="text" id="salary_rate"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="salary_rate"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="position" class="block font-medium text-gray-700">Position</label>
                            <input type="text" id="position"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="position">
                        </div>
                        <div class="form-group">
                            <label for="date_hired" class="block font-medium text-gray-700">Date Hired</label>
                            <input type="date" id="date_hired"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="date_hired"
                                required>
                        </div>
                        <div class="form-group">
                            <label for="clearance" class="block font-medium text-gray-700">Police/NBI Clearance</label>
                            <input type="file" id="clearance"
                                class="block w-full mt-1 border-2 border-gray-400 rounded form-input" name="clearance"
                                required>
                        </div>
                    </div>
                    <div class="flex justify-end p-4 pt-4 mt-4 border-t modal-footer">
                        <button type="button" class="px-3 py-1 mr-2 text-gray-700 bg-gray-300 rounded"
                            onclick="toggleModal('addEmployeeModal')">Close</button>
                        <button type="submit" class="px-3 py-1 text-white bg-blue-500 rounded">Add Employee</button>
                    </div>
                </form>


            </div>
        </div>

    </div>

    <script>
        $(document).ready(function() {
            $('#employeesTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('employees.index') }}",
                columns: [{
                        data: 'complete_name',
                        name: 'complete_name'
                    },
                    {
                        data: 'employee_type',
                        name: 'employee_type'
                    },
                    {
                        data: 'address',
                        name: 'address'
                    },
                    {
                        data: 'salary_rate',
                        name: 'salary_rate'
                    },
                    {
                        data: 'position',
                        name: 'position'
                    },
                    {
                        data: 'date_hired',
                        name: 'date_hired'
                    },

                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        function toggleModal(modalId) {
            const modal = document.getElementById(modalId);
            modal.classList.toggle('hidden');
        }
    </script>
@endsection