@extends('layouts.sidebar')

@section('content')
    <div class="container px-4 py-8 mx-auto">
        <div class="relative flex flex-col items-end justify-end pb-10 mr-10 text-center">
            <div>
                <button type="button"
                    class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                    id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                    Menu
                    <!-- Dropdown icon -->
                    <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                    role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                    id="dropdown-menu">
                    <div class="py-1" role="none">
                        <a href="{{ url('sample') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            Payroll Report</a>

                        <a href="{{ url('payslip') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                            Payslip</a>


                    </div>
                </div>
            </div> <!-- Dropdown menu, show/hide based on menu state -->

        </div>
        <script>
            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        </script>
        <div class="flex justify-between ">
            <div>
                <h1 class="mb-4 text-2xl font-bold">Payroll Management</h1>
            </div>

            <div> <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="openModal('addPayrollModal')">Individual Payroll</button>
                <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="openModal('addallModal')">Payroll</button>

            </div>

        </div>

        @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
        <!-- Payroll Table -->
        <div class="mt-4">
            <table id="payrollTable" class="min-w-full text-center divide-y divide-gray-200">
                <thead class="">

                    <tr>
                        <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                            ID</th>
                        <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Employee
                        </th>
                        <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Type
                        </th>
                        <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Start Date</th>
                        <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                            End Date
                        </th>
                        <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-gray-500 uppercase">
                            Net Pay
                        </th>
                        <th scope="col" <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>
        </div>
    </div>


    <div id="addallModal" class="fixed inset-0 z-10 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <!-- Modal Content -->
            <div
                class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900">Generate Payroll for All Employees</h3>
                    <div class="mt-5">
                        <!-- Add Payroll Form -->
                        <form action="{{ route('employeeall.payroll') }}" method="POST" class="space-y-6">
                            @csrf

                            <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>

                            <!-- Start Date -->
                            <div class="mb-4">
                                <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
                                <input type="date"
                                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('start_date') border-red-500 @enderror"
                                    id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                                @error('start_date')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- End Date -->
                            <div class="mb-4">
                                <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
                                <input type="date"
                                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('end_date') border-red-500 @enderror"
                                    id="end_date" name="end_date" value="{{ old('end_date') }}" required>
                                @error('end_date')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Bonuses -->
                            <div class="mb-4">
                                <label for="bonuses" class="block text-sm font-medium text-gray-700">Bonuses</label>
                                <input type="number" step="0.01"
                                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('bonuses') border-red-500 @enderror"
                                    id="bonuses" name="bonuses" value="{{ old('bonuses') }}">
                                @error('bonuses')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Cash Advances -->
                            <!-- Add Cash Advances input if needed -->

                            <!-- Social Security Contributions -->
                            <fieldset class="mb-4">
                                <legend class="block text-sm font-medium text-gray-700">Social Security Contributions
                                </legend>
                                <div class="mt-4 space-y-4">
                                    <div>
                                        <label for="sss" class="block text-sm font-medium text-gray-700">SSS
                                            Contribution</label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('sss') border-red-500 @enderror"
                                            id="sss" name="sss" value="{{ old('sss') }}">
                                        @error('sss')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="philhealth" class="block text-sm font-medium text-gray-700">PhilHealth
                                            Contribution</label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('philhealth') border-red-500 @enderror"
                                            id="philhealth" name="philhealth" value="{{ old('philhealth') }}">
                                        @error('philhealth')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="pagibig" class="block text-sm font-medium text-gray-700">Pag-IBIG
                                            Contribution</label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('pagibig') border-red-500 @enderror"
                                            id="pagibig" name="pagibig" value="{{ old('pagibig') }}">
                                        @error('pagibig')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    <div>
                                        <label for="dcwd" class="block text-sm font-medium text-gray-700">DCWD
                                        </label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('philhealth') border-red-500 @enderror"
                                            id="dcwd" name="dcwd" value="{{ old('dcwd') }}">
                                        @error('dcwd')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="dlpc" class="block text-sm font-medium text-gray-700">DLPC
                                        </label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('pagibig') border-red-500 @enderror"
                                            id="dlpc" name="dlpc" value="{{ old('dlpc') }}">
                                        @error('dlpc')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                            </fieldset>

                            <!-- Notes -->
                            <div class="mb-4">
                                <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                                <textarea
                                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('notes') border-red-500 @enderror"
                                    id="notes" name="notes">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Buttons -->
                            <div class="flex justify-between mt-6">
                                <button type="submit"
                                    class="px-4 py-2 text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Save
                                    Payroll</button>
                                <button type="button"
                                    class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                                    onclick="closeModal('addallModal')">Cancel</button>
                            </div>
                        </form>

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









    <div id="addPayrollModal" class="fixed inset-0 z-10 hidden overflow-y-auto">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <!-- Modal Content -->
            <div
                class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                    <h3 class="text-lg font-medium leading-6 text-gray-900">Add Payroll</h3>
                    <div class="mt-5">
                        <!-- Add Payroll Form -->
                        <form action="{{ route('payrolls.store') }}" method="POST" class="space-y-6">
                            @csrf
                            <div class="mb-4 ">
                                <label for="employee_id" class="block text-sm font-medium text-gray-700">Employee</label>
                                <select id="employee_id" name="employee_id"
                                    class="block w-full px-3 py-2 mt-1 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                    required>
                                    @foreach ($employees as $employee)
                                        <option value="{{ $employee->id }}"
                                            {{ old('employee_id') == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->complete_name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('employee_id')
                                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            @if ($errors->any())
                                <div class="relative px-4 py-3 text-red-700 border border-red-400 rounded bg-red-50"
                                    role="alert">
                                    <strong class="font-bold">Whoops!</strong>
                                    <span class="block sm:inline">There were some problems with your input.</span>
                                    <ul class="pl-5 mt-2 list-disc">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                                <!-- Start Date -->
                                <div class="form-group">
                                    <label for="start_date" class="block text-sm font-medium text-gray-700">Start
                                        Date</label>
                                    <input type="date"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('start_date') border-red-500 @enderror"
                                        id="start_date" name="start_date" value="{{ old('start_date') }}" required>
                                    @error('start_date')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- End Date -->
                                <div class="form-group">
                                    <label for="end_date" class="block text-sm font-medium text-gray-700">End
                                        Date</label>
                                    <input type="date"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('end_date') border-red-500 @enderror"
                                        id="end_date" name="end_date" value="{{ old('end_date') }}" required>
                                    @error('end_date')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Bonuses -->
                                <div class="form-group">
                                    <label for="bonuses" class="block text-sm font-medium text-gray-700">Bonuses</label>
                                    <input type="number" step="0.01"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('bonuses') border-red-500 @enderror"
                                        id="bonuses" name="bonuses" value="{{ old('bonuses') }}">
                                    @error('bonuses')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <!-- Cash Advances -->

                            </div>

                            <!-- Deductions -->

                            <!-- Social Security Contributions -->
                            <fieldset class="mb-4">
                                <legend class="block text-sm font-medium text-gray-700">Social Security Contributions
                                </legend>
                                <div class="mt-4 space-y-4">
                                    <div>
                                        <label for="sss" class="block text-sm font-medium text-gray-700">SSS
                                            Contribution</label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('sss') border-red-500 @enderror"
                                            id="sss" name="sss" value="{{ old('sss') }}">
                                        @error('sss')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>


                                    <div>
                                        <label for="philhealth" class="block text-sm font-medium text-gray-700">PhilHealth
                                            Contribution</label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('philhealth') border-red-500 @enderror"
                                            id="philhealth" name="philhealth" value="{{ old('philhealth') }}">
                                        @error('philhealth')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>

                                    <div>
                                        <label for="pagibig" class="block text-sm font-medium text-gray-700">Pag-IBIG
                                        </label>
                                        <input type="number" step="0.01"
                                            class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('pagibig') border-red-500 @enderror"
                                            id="pagibig" name="pagibig" value="{{ old('pagibig') }}">
                                        @error('pagibig')
                                            <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                        @enderror
                                    </div>
                                </div>
                                <div>
                                    <label for="dcwd" class="block text-sm font-medium text-gray-700">DCWD
                                    </label>
                                    <input type="number" step="0.01"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('philhealth') border-red-500 @enderror"
                                        id="dcwd" name="dcwd" value="{{ old('dcwd') }}">
                                    @error('dcwd')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="dlpc" class="block text-sm font-medium text-gray-700">DLPC
                                        Contribution</label>
                                    <input type="number" step="0.01"
                                        class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('pagibig') border-red-500 @enderror"
                                        id="dlpc" name="dlpc" value="{{ old('dlpc') }}">
                                    @error('dlpc')
                                        <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                    @enderror
                                </div>
                            </fieldset>

                            <!-- Notes -->
                            <div class="form-group">
                                <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                                <textarea
                                    class="block w-full px-3 py-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm @error('notes') border-red-500 @enderror"
                                    id="notes" name="notes">{{ old('notes') }}</textarea>
                                @error('notes')
                                    <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
                                @enderror
                            </div>

                            <!-- Buttons -->
                            <div class="flex justify-between mt-6">
                                <button type="submit"
                                    class="px-4 py-2 text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Save
                                    Payroll</button>
                                <button type="button"
                                    class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
                                    onclick="closeModal('addPayrollModal')">Cancel</button>
                            </div>
                        </form>

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













    <!-- Edit and Delete Modals (Loop through each payroll) -->
    @foreach ($payrolls as $payroll)
        <div id="editPayrollModal{{ $payroll->id }}" class="fixed inset-0 z-10 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>

                <!-- Modal Content -->
                <div
                    class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">Edit Payroll</h3>
                        <div class="mt-5">
                            <!-- Edit Payroll Form -->
                            <form action="{{ route('payrolls.update', $payroll->id) }}" method="POST"
                                class="max-w-lg p-6 mx-auto bg-white rounded-lg shadow-md">
                                @csrf
                                @method('PUT')

                                <div class="hidden mb-4">

                                    <input type="text" name="employee_id" id="employee_id"
                                        value="{{ old('employee_id', $payroll->employee_id) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('employee_id')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="payroll_date" class="block text-gray-700">Payroll Date</label>
                                    <input type="date" name="payroll_date" id="payroll_date"
                                        value="{{ old('payroll_date', $payroll->payroll_date) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('payroll_date')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="days_worked" class="block text-gray-700">Days Worked</label>
                                    <input type="number" name="days_worked" id="days_worked"
                                        value="{{ old('days_worked', $payroll->days_worked) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('days_worked')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="bonuses" class="block text-gray-700">Bonuses</label>
                                    <input type="number" name="bonuses" id="bonuses"
                                        value="{{ old('bonuses', $payroll->bonuses) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('bonuses')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="cash_advances" class="block text-gray-700">Cash Advances</label>
                                    <input type="number" name="cash_advances" id="cash_advances"
                                        value="{{ old('cash_advances', $payroll->cash_advances) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('cash_advances')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="late_undertime" class="block text-gray-700">Late/Undertime</label>
                                    <input type="text" name="late_undertime" id="late_undertime"
                                        value="{{ old('late_undertime', $payroll->late_undertime) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('late_undertime')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="sss_deduction" class="block text-gray-700">SSS Deduction</label>
                                    <input type="number" name="sss_deduction" id="sss_deduction"
                                        value="{{ old('sss_deduction', $payroll->sss_deduction) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('sss_deduction')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="philhealth_deduction" class="block text-gray-700">PhilHealth
                                        Deduction</label>
                                    <input type="number" name="philhealth_deduction" id="philhealth_deduction"
                                        value="{{ old('philhealth_deduction', $payroll->philhealth_deduction) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('philhealth_deduction')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="pagibig_deduction" class="block text-gray-700">Pag-IBIG Deduction</label>
                                    <input type="number" name="pagibig_deduction" id="pagibig_deduction"
                                        value="{{ old('pagibig_deduction', $payroll->pagibig_deduction) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('pagibig_deduction')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="custom_deductions" class="block text-gray-700">Custom Deductions</label>
                                    <input type="number" name="custom_deductions" id="custom_deductions"
                                        value="{{ old('custom_deductions', $payroll->custom_deductions) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('custom_deductions')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="hidden mb-4">
                                    <label for="status" class="block text-gray-700">Status</label>
                                    <select name="status" id="status" class="w-full p-2 border-2 border-gray-300">
                                        <option value="Unpaid"
                                            {{ old('status', $payroll->status) == 'Unpaid' ? 'selected' : '' }}>Unpaid
                                        </option>
                                        <option value="Paid"
                                            {{ old('status', $payroll->status) == 'Paid' ? 'selected' : '' }}>Paid</option>
                                    </select>
                                    @error('status')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="mb-4">
                                    <label for="gross_earnings" class="block text-gray-700">Gross Earning</label>
                                    <input type="text" name="gross_earnings" id="gross_earnings"
                                        value="{{ old('gross_earnings', $payroll->gross_earnings) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('gross_earnings')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="mb-4">
                                    <label for="net_pay" class="block text-gray-700">Net Pay</label>
                                    <input type="text" name="net_pay" id="net_pay"
                                        value="{{ old('net_pay', $payroll->net_pay) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('net_pay')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="mb-4">
                                    <label for="notes" class="block text-gray-700">Notes</label>
                                    <textarea name="notes" id="notes" class="w-full p-2 border-2 border-gray-300">{{ old('notes', $payroll->notes) }}</textarea>
                                    @error('notes')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="start_date" class="block text-gray-700">Start Date</label>
                                    <input type="datetime-local" name="start_date" id="start_date"
                                        value="{{ old('start_date', $payroll->start_date) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('start_date')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="end_date" class="block text-gray-700">End Date</label>
                                    <input type="datetime-local" name="end_date" id="end_date"
                                        value="{{ old('end_date', $payroll->end_date) }}"
                                        class="w-full p-2 border-2 border-gray-300">
                                    @error('end_date')
                                        <span class="text-red-600">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mt-6">
                                    <button type="submit" class="p-2 text-white bg-blue-500 rounded-lg">Update
                                        Payroll</button>
                                    <button type="button"
                                        class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                        onclick="closeModal('editPayrollModal{{ $payroll->id }}')">
                                        Cancel
                                    </button>
                                </div>
                            </form>


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









        <div id="viewpayroll{{ $payroll->id }}" class="fixed inset-0 z-10 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>

                <div
                    class="inline-block w-full max-w-3xl overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8">
                    <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                        <div class="max-w-2xl p-4 mx-auto bg-white border border-gray-300 rounded-md shadow-md "
                            id="modal-content">
                            <div class="mb-4 text-center">
                                <h1 class="text-xl font-bold">RWEB Solutions.</h1>
                                <p class="text-base font-semibold">Salary Report</p>
                                <p class="text-xs">
                                    Covered Period:
                                    {{ \Carbon\Carbon::parse($payroll->start_date)->format('F j, Y') }} -
                                    {{ \Carbon\Carbon::parse($payroll->end_date)->format('F j, Y') }}
                                </p>
                            </div>

                            <div class="mb-4">
                                <h2 class="text-lg font-semibold">Employee Details</h2>
                                <p><strong>Name:</strong> {{ $payroll->employee->complete_name }}</p>
                            </div>

                            <table class="w-full mb-4 bg-white border border-gray-300 rounded-md">
                                <thead class="text-xs bg-gray-100">
                                    <tr>
                                        <th class="px-2 py-1 text-left"># of Days</th>
                                        <th class="px-2 py-1 text-left">Rate</th>
                                        <th class="px-2 py-1 text-left">Total</th>
                                    </tr>

                                </thead>
                                <tbody class="text-sm">
                                    <tr>
                                        <td class="px-2 py-1 border">{{ $payroll->days_worked }}</td>
                                        <td class="px-2 py-1 border">{{ $payroll->employee->salary_rate }}</td>
                                        <td class="px-2 py-1 border">
                                            {{ $payroll->days_worked * $payroll->employee->salary_rate }}</td>
                                    </tr>
                                    <tr>
                                        <td class="px-2 py-1 font-semibold border">Grand Total</td>
                                        <td class="px-2 py-1 border">
                                        </td>
                                        <td class="px-2 py-1 border">
                                            {{ $payroll->gross_earnings }}</td>
                                    </tr>
                                </tbody>
                            </table>

                            <div class="mb-4">
                                <h3 class="text-base font-semibold">Benefits</h3>

                                <table class="w-full mb-2 text-sm bg-white border border-gray-300 rounded-md">
                                    <thead class="bg-gray-100">
                                        <tr>
                                            <th class="px-2 py-1 text-left">Benefits</th>
                                            <th class="px-2 py-1 text-left">Amount</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="px-2 py-1 border">SSS</td>
                                            <td class="px-2 py-1 border">{{ $payroll->sss_deduction }}</td>
                                        </tr>
                                        <tr>
                                            <td class="px-2 py-1 border">Pag-Ibig</td>
                                            <td class="px-2 py-1 border">{{ $payroll->pagibig_deduction }}</td>
                                        </tr>
                                        <tr>
                                            <td class="px-2 py-1 border">Philhealth</td>
                                            <td class="px-2 py-1 border">{{ $payroll->philhealth_deduction }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            {{-- @php
                                $totalsalary = $payroll->days_worked * $payroll->employee->salary_rate;
                                $totaldeduction =
                                    $payroll->sss_deduction +
                                    $payroll->pagibig_deduction +
                                    $payroll->philhealth_deduction;
                                $total = $totalsalary - $totaldeduction;
                            @endphp
                            <div class="mb-4">

                                <p><strong>Net Income:</strong> {{ $total }}</p>
                                <p class="text-xs italic">Note: {{ $payroll->notes }}</p>
                            </div> --}}
                            <h3 class="text-base font-semibold">Deductions</h3>

                            <table class="w-full text-sm bg-white border border-gray-300 rounded-md">
                                <thead class="bg-gray-100">
                                    <tr>
                                        <th class="px-2 py-1 text-left">Description</th>
                                        <th class="px-2 py-1 text-left">Amount</th>
                                    </tr>

                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="px-2 py-1 border">Lates</td>
                                        <td class="px-2 py-1 border">{{ $payroll->late_undertime }}</td>
                                    </tr>
                                    @foreach ($payroll->employee->deductions->filter(function ($deduction) use ($payroll) {
            return $payroll->start_date <= $deduction->date && $payroll->end_date >= $deduction->date;
        }) as $deduction)
                                        <tr>
                                            <td class="px-2 py-1 border">{{ $deduction->benefit_name }}</td>
                                            <td class="px-2 py-1 border">{{ $deduction->amount }}</td>
                                        </tr>
                                    @endforeach
                                    <tr>
                                        <td class="px-2 py-1 border">DCWD</td>
                                        <td class="px-2 py-1 border">{{ $payroll->dcwd }}</td>
                                    </tr>
                                    <tr>
                                        <td class="px-2 py-1 border">DLPC</td>
                                        <td class="px-2 py-1 border">{{ $payroll->dlpc }}</td>
                                    </tr>

                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td class="px-2 py-1 font-semibold text-right border">Grand Total</td>
                                        <td class="px-2 py-1 border">
                                            {{ $payroll->net_pay }}</td>
                                    </tr>
                                </tfoot>
                            </table>


                        </div>
                        <div class="mt-4 text-center">
                            <button type="button"
                                class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                onclick="closeModal('viewpayroll{{ $payroll->id }}')">
                                Cancel
                            </button>
                            <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600"
                                onclick="printModal('viewpayroll{{ $payroll->id }}')">Print</button>

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

        <div class="flex items-center justify-center" id="print-section" class="hidden"></div>

        <script>
            function printModal(modalId) {
                const modalContent = document.getElementById(modalId).querySelector('#modal-content').innerHTML;
                const printWindow = window.open('', '', 'height=500,width=800');

                printWindow.document.write('<html><head><title>Print Modal</title>');
                printWindow.document.write(
                    '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">');
                printWindow.document.write(
                    '<style>body { margin: 30px; } .container { margin: 0 auto; padding: 20px; }</style>');
                printWindow.document.write('</head><body>');
                printWindow.document.write('<div class="container">' + modalContent + '</div>');
                printWindow.document.write('</body></html>');

                printWindow.document.close();

                printWindow.onload = function() {
                    printWindow.focus();
                    printWindow.print();
                    printWindow.close();
                };
            }
        </script>
        <!-- Delete Payroll Modal -->
        <div id="deletePayrollModal{{ $payroll->id }}" class="fixed inset-0 z-10 hidden overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
                <div class="fixed inset-0 transition-opacity" aria-hidden="true">
                    <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                </div>

                <!-- Modal Content -->
                <div
                    class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                        <h3 class="text-lg font-medium leading-6 text-gray-900">Delete Payroll</h3>
                        <div class="mt-5">
                            <!-- Delete Payroll Form -->
                            <form action="{{ route('payrolls.destroy', $payroll->id) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <p class="text-sm text-gray-500">Are you sure you want to delete payroll for
                                    {{ $payroll->employee->complete_name }}?</p>
                                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                    <button type="submit"
                                        class="inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
                                        Delete
                                    </button>
                                    <button type="button"
                                        class="inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                        onclick="closeModal('deletePayrollModal{{ $payroll->id }}')">
                                        Cancel
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    <!-- JavaScript to Open and Close Modals -->
    <script>
        $(document).ready(function() {
            $('#payrollTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('payrolls.index') }}",
                columns: [{
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    }, {
                        data: 'employee_name',
                        name: 'employee_name'
                    },
                    {
                        data: 'employee_type',
                        name: 'employee_type'
                    },


                    {
                        data: 'start_date',
                        name: 'start_date',
                        render: function(data, type, row) {
                            // Format the date as "Month Day, Year"
                            if (type === 'display' && data) {
                                var date = new Date(data);
                                var options = {
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric'
                                };
                                return date.toLocaleDateString('en-US', options);
                            }
                            return data;
                        }
                    },
                    {
                        data: 'end_date',
                        name: 'end_date',
                        render: function(data, type, row) {
                            // Format the date as "Month Day, Year"
                            if (type === 'display' && data) {
                                var date = new Date(data);
                                var options = {
                                    year: 'numeric',
                                    month: 'long',
                                    day: 'numeric'
                                };
                                return date.toLocaleDateString('en-US', options);
                            }
                            return data;
                        }
                    },
                    {
                        data: 'net_pay',
                        name: 'net_pay'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });

        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
    </script>
@endsection