@extends('layouts.sidebar')

@section('content')
    <div class="container px-4 py-8 mx-auto">
        <h1 class="mb-4 text-2xl font-bold">Payroll Management</h1>
        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
            <!-- Employee Information -->
            <div class="overflow-hidden bg-white rounded-lg shadow-md lg:col-span-1">
                <div class="px-6 py-4  border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-800">Employee Information</h3>
                </div>
                <div class="grid grid-cols-1 gap-6 p-6 md:grid-cols-2">
                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Employee Name:</p>
                        <p class="text-base font-semibold text-gray-800">{{ $employee->complete_name }}</p>
                    </div>
                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Contract Type:</p>
                        <p class="text-base font-semibold text-gray-800">{{ $employee->employee_type }}</p>
                    </div>
                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Contact No.:</p>
                        <p class="text-base font-semibold text-gray-800">{{ $employee->contact_no }}</p>
                    </div>
                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Address:</p>
                        <p class="text-base font-semibold text-gray-800">{{ $employee->address }}</p>
                    </div>
                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Salary Rate:</p>
                        <p class="text-base font-semibold text-gray-800">{{ $employee->salary_rate }}</p>
                    </div>
                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Position:</p>
                        <p class="text-base font-semibold text-gray-800">{{ $employee->position }}</p>
                    </div>
                    <div class="flex flex-col mb-4">
                        <p class="mb-3 text-sm font-medium text-gray-600">Police/NBI Clearance:</p>
                        <a class="w-32 px-4 py-2 text-center text-white bg-blue-500 rounded"
                            href="{{ asset('uploads/' . $employee->clearance) }}" target="_blank">
                            View
                        </a>
                    </div>



                    <div class="flex flex-col mb-4">
                        <p class="text-sm font-medium text-gray-600">Date Hired:</p>
                        <p class="text-base font-semibold text-gray-800">
                            {{ \Carbon\Carbon::parse($employee->date_hired)->format('F j, Y') }}</p>
                    </div>
                </div>
            </div>


            <!-- Payroll Table -->
            <div class="lg:col-span-2">
                <div class="grid grid-cols-1 gap-4 py-5 md:grid-cols-3">
                    <button type="button" class="px-4 py-2 text-white bg-blue-500 rounded"
                        onclick="toggleTable('payrolldiv')">Payroll</button>
                    <button type="button" class="px-4 py-2 mx-4 text-white bg-blue-500 rounded"
                        onclick="toggleTable('deductionsdiv')">Deductions</button>

                    <button type="button" class="px-4 py-2 text-white bg-blue-500 rounded"
                        onclick="toggleTable('attendancediv')">Attendance</button>
                </div>

                <div id="payrolldiv" class="overflow-hidden bg-white rounded-lg shadow-md">
                    <div class="flex items-center justify-between px-4 py-2  border-b">
                        <h3 class="text-lg font-semibold text-gray-800">Payroll List</h3>
                        <div class="">
                            <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                                onclick="openModal('addPayrollModal')">Add Payroll</button>
                        </div>
                    </div>
                    <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">
                                        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="deductionsdiv" class="hidden overflow-hidden bg-white rounded-lg shadow-md">
                    <div class="flex items-center justify-between px-4 py-2  border-b">
                        <h3 class="text-lg font-semibold text-gray-800">Deduction List</h3>
                        <div class="">
                            <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                                onclick="openModal('addModal')">Add Deduction</button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <table id="deductionstable" class="min-w-full text-center divide-y divide-gray-200">
                            <thead class="">
                                <tr>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> ID
                                    </th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">
                                        Partiucular Name</th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Amount
                                    </th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Date
                                    </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>
                    </div>
                </div>



                <div id="attendancediv" class="hidden overflow-hidden bg-white rounded-lg shadow-md">
                    <div class="flex items-center justify-between px-4 py-2  border-b">
                        <h3 class="text-lg font-semibold text-gray-800">Attendance List</h3>
                        <div class="">
                            <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                                onclick="openModal('addattendanceModal')">Add Attendance</button>
                        </div>
                    </div>
                    <div class="mt-4">
                        <input class="px-5 py-1 border-2 " type="date" id="start_date" name="start_date">
                        <input class="px-5 py-1 border-2 " type="date" id="end_date" name="end_date">
                        <button class="px-5 py-1 text-white bg-blue-500 border-2 rounded-sm "
                            id="filterButton">Filter</button>
                        <table id="attendancetable" class="min-w-full text-center divide-y divide-gray-200">
                            <thead class="">
                                <tr>

                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Date
                                    </th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Time
                                        In</th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Time
                                        Out</th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Hours
                                        Worked
                                    </th>
                                    <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase"> Notes
                                    </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>
                    </div>
                </div>
            </div>


            <!-- Add Payroll Modal -->
            <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
                                    <input type="hidden" name="employee_id" value="{{ $employee->id }}">

                                    <!-- General Error Message -->

                                    @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)
                <!-- Edit Payroll Modal -->
                <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">San Roque Hermanas, Inc.</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">Gross Earnings</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

                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td class="px-2 py-1 font-semibold text-right border">Net Income</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

            @foreach ($deductions as $deduct)
                <div id="deletedeductionModal{{ $deduct->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 Deductions</h3>
                                <div class="mt-5">
                                    <!-- Delete Payroll Form -->
                                    <form action="{{ route('deduction.delete', $deduct->id) }}" method="POST">
                                        @csrf

                                        <p class="text-sm text-gray-500">Are you sure you want to delete this data?</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('deletedeductionModal{{ $deduct->id }}')">
                                                Cancel
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach



            @foreach ($attendances as $attendance)
                <div id="editAttendanceModal{{ $attendance->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">
                        <h2 class="p-2 mb-4 text-xl font-bold text-white bg-blue-600">Edit Attendance</h2>
                        <form method="POST" action="{{ route('attendance.update', $attendance->id) }}" class="p-10 ">
                            @csrf
                            @method('PUT')

                            <!-- Hidden input for employee_id -->
                            <input type="hidden" name="employee_id" value="{{ $attendance->employee_id }}">

                            <div class="mb-4">
                                <label for="edit_date{{ $attendance->id }}" class="block text-gray-700">Date</label>
                                <input id="edit_date{{ $attendance->id }}" name="date" type="date"
                                    class="w-full p-2 border border-gray-300 rounded" value="{{ $attendance->date }}"
                                    required>
                            </div>

                            <div class="mb-4">
                                <label for="edit_clock_in{{ $attendance->id }}" class="block text-gray-700">Clock
                                    In</label>
                                <input id="edit_clock_in{{ $attendance->id }}" name="clock_in" type="time"
                                    class="w-full p-2 border border-gray-300 rounded" value="{{ $attendance->clock_in }}"
                                    required>
                            </div>

                            <div class="mb-4">
                                <label for="edit_clock_out{{ $attendance->id }}" class="block text-gray-700">Clock
                                    Out</label>
                                <input id="edit_clock_out{{ $attendance->id }}" name="clock_out" type="time"
                                    class="w-full p-2 border border-gray-300 rounded"
                                    value="{{ $attendance->clock_out }}">
                            </div>
                            <div class="mb-4">
                                <label for="edit_hours_worked{{ $attendance->id }}" class="block text-gray-700">Hours
                                    Worked</label>
                                <input id="edit_hours_worked{{ $attendance->id }}" name="hours_worked" type="text"
                                    class="w-full p-2 border border-gray-300 rounded"
                                    value="{{ $attendance->hours_worked }}">
                            </div>

                            <div class="mb-4">
                                <label for="edit_notes{{ $attendance->id }}" class="block text-gray-700">Notes</label>
                                <textarea id="edit_notes{{ $attendance->id }}" name="notes" class="w-full p-2 border border-gray-300 rounded">{{ $attendance->notes }}</textarea>
                            </div>

                            <div class="text-right">
                                <button type="submit"
                                    class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                                    Update
                                </button>
                                <button type="button"
                                    class="px-4 py-2 font-bold text-white bg-gray-500 rounded hover:bg-gray-700"
                                    onclick="closeModal('editAttendanceModal{{ $attendance->id }}')">
                                    Cancel
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="deleteAttendanceModal{{ $attendance->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('attendance.destroy', $attendance->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <p class="text-sm text-gray-500">Are you sure you want to delete this data? </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('deleteAttendanceModal{{ $attendance->id }}')">
                                                Cancel
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach


            <!-- JavaScript to Open and Close Modals -->
            <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>


            <script>
                $(document).ready(function() {
                    var id = {{ $employee->id }};

                    // Initialize DataTable for Payroll Table
                    $('#payrolltable').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ url('employeepayroll', $employee->id) }}", // Replace with actual route
                            data: function(d) {
                                d.employee = id;
                                d.table = 'payroll';
                            }
                        },
                        columns: [{
                                data: 'view',
                                name: 'view',
                                orderable: false,
                                searchable: false
                            }, {
                                data: 'employee_name',
                                name: 'employee_name'
                            },


                            {
                                data: 'start_date',
                                name: 'start_date',

                            },
                            {
                                data: 'end_date',
                                name: 'end_date',

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

                    // Initialize DataTable for Deductions Table
                    $('#deductionstable').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ url('employeepayroll', $employee->id) }}", // Replace with actual route
                            data: function(d) {
                                d.employee = id;
                                d.table = 'deductions';
                            }
                        },
                        columns: [{
                                data: 'id',
                                name: 'id'
                            },
                            {
                                data: 'benefit_name',
                                name: 'benefit_name'
                            },
                            {
                                data: 'amount',
                                name: 'amount'
                            },

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

                    // Initialize DataTable for Earnings Table

                    var attendanceTable = $('#attendancetable').DataTable({
                        processing: true,
                        serverSide: true,
                        ajax: {
                            url: "{{ url('employeepayroll', $employee->id) }}",
                            data: function(d) {
                                d.employee = id;
                                d.table = 'attendance';
                                d.start_date = $('#start_date').val();
                                d.end_date = $('#end_date').val();
                            }
                        },
                        columns: [{
                                data: 'date',
                                name: 'date',
                                render: function(data) {
                                    // Format date as 'Day, Month Date, Year'
                                    return moment(data).format('dddd, MMMM D, YYYY');
                                }
                            },
                            {
                                data: 'clock_in',
                                name: 'clock_in',
                                render: function(data) {
                                    // Format time as 'hh:mm A'
                                    return data ? moment(data, 'HH:mm:ss').format('h:mm A') : '';
                                }
                            },
                            {
                                data: 'clock_out',
                                name: 'clock_out',
                                render: function(data) {
                                    // Format time as 'hh:mm A'
                                    return data ? moment(data, 'HH:mm:ss').format('h:mm A') : '';
                                }
                            },
                            {
                                data: 'hours_worked',
                                name: 'hours_worked'
                            },
                            {
                                data: 'notes',
                                name: 'notes'
                            },
                            {
                                data: 'actions',
                                name: 'actions',
                                orderable: false,
                                searchable: false
                            }
                        ]
                    });

                    // Handle the filter button click
                    $('#filterButton').on('click', function() {
                        attendanceTable.ajax.reload(); // Reload the DataTable with new filter values
                    });
                });
                // Function to open modal by ID
                function openModal(modalId) {
                    document.getElementById(modalId).classList.remove('hidden');
                }

                // Function to close modal by ID
                function closeModal(modalId) {
                    document.getElementById(modalId).classList.add('hidden');
                }

                // Function to toggle visibility of tables
                function toggleTable(tableId) {
                    const tables = ['payrolldiv', 'deductionsdiv', 'attendancediv'];
                    tables.forEach(table => {
                        const element = document.getElementById(table);
                        if (table === tableId) {
                            element.classList.remove('hidden');
                        } else {
                            element.classList.add('hidden');
                        }
                    });
                }
            </script>




            <div id="addModal" 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" id="modal-title">
                                Add Deduction
                            </h3>
                            <div class="mt-2">
                                <form action="{{ route('deductions.store') }}" method="POST">
                                    @csrf

                                    <div class="mb-4">

                                        <input type="hidden" name="employee_id" id="employee_id"
                                            class="block w-full mt-1 form-input" value="{{ $employee->id }}">
                                    </div>
                                    <div class="mb-4">
                                        <label for="benefit_name" class="block text-gray-700">Particular Name</label>
                                        <input type="text" name="benefit_name" id="benefit_name"
                                            class="block w-full mt-1 form-input">
                                    </div>
                                    <div class="mb-4">
                                        <label for="date" class="block text-gray-700">Date</label>
                                        <input type="date" name="date" id="date"
                                            class="block w-full mt-1 form-input">
                                    </div>
                                    <div class="mb-4">
                                        <label for="amount" class="block text-gray-700">Amount</label>
                                        <input type="number" name="amount" id="amount"
                                            class="block w-full mt-1 form-input">
                                    </div>
                                    <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-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 sm:ml-3 sm:w-auto sm:text-sm">
                                            Save
                                        </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('addModal')">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
















            <div id="addattendanceModal" 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">
                            <h2 class="mb-4 text-xl font-bold">Add Attendance</h2>
                            <div class="mt-5">

                                <form method="POST" action="{{ route('attendance.store') }}">
                                    @csrf
                                    <input id="hidden" name="employee_id" type="text"
                                        value="{{ $employee->id }}" class="w-full p-2 border border-gray-300 rounded">
                                    <div class="mb-4">
                                        <label for="date" class="block text-gray-700">Date</label>
                                        <input id="date" name="date" type="date"
                                            class="w-full p-2 border border-gray-300 rounded" required>
                                    </div>
                                    <div class="mb-4">
                                        <label for="clock_in" class="block text-gray-700">Clock In</label>
                                        <input id="clock_in" name="clock_in" type="time"
                                            class="w-full p-2 border border-gray-300 rounded" required>
                                    </div>
                                    <div class="mb-4">
                                        <label for="clock_out" class="block text-gray-700">Clock Out</label>
                                        <input id="clock_out" name="clock_out" type="time"
                                            class="w-full p-2 border border-gray-300 rounded">
                                    </div>
                                    <div class="mb-4">
                                        <label for="notes" class="block text-gray-700">Notes</label>
                                        <textarea id="notes" name="notes" class="w-full p-2 border border-gray-300 rounded"></textarea>
                                    </div>
                                    <div class="text-right">
                                        <button type="submit"
                                            class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                                            Save
                                        </button>
                                        <button type="button" id="addattendanceModal"
                                            class="px-4 py-2 font-bold text-white bg-gray-500 rounded hover:bg-gray-700">
                                            Cancel
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @endsection