@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">Earnings</h1>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
            onclick="openModal('addModal')">Add Earning</button>
        <table id="earningsTable" class="table-auto w-full mt-4 text-center">
            <thead>
                <tr>
                    <th class="px-4 py-2">ID</th>
                    <th class="px-4 py-2">Employee</th>
                    <th class="px-4 py-2">Hours Worked</th>
                    <th class="px-4 py-2">Total Pay</th>
                    <th class="px-4 py-2">Bonus</th>
                    <th class="px-4 py-2">Gross Earnings</th>
                    <th class="px-4 py-2">Actions</th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- Add Modal -->
    <div id="addModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
        <div class="flex items-end justify-center min-h-screen pt-4 px-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>
            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
            <div
                class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                Add Earning
                            </h3>
                            <div class="mt-2">
                                <form action="{{ route('earnings.store') }}" method="POST" id="earningsForm">
                                    @csrf
                                    <div class="mb-4">
                                        <label for="employee_id" class="block text-gray-700">Employee</label>
                                        <select name="employee_id" id="employee_id" class="form-select mt-1 block w-full">
                                            @foreach ($employees as $employee)
                                                <option value="{{ $employee->id }}">{{ $employee->complete_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-4">
                                        <label for="hours_worked" class="block text-gray-700">Hours Worked</label>
                                        <input type="number" name="hours_worked" id="hours_worked"
                                            class="form-input mt-1 block w-full" oninput="calculateGrossEarnings()">
                                    </div>
                                    <div class="mb-4">
                                        <label for="total_pay" class="block text-gray-700">Total Pay per Hour</label>
                                        <input type="number" name="total_pay" id="total_pay"
                                            class="form-input mt-1 block w-full" oninput="calculateGrossEarnings()">
                                    </div>
                                    <div class="mb-4">
                                        <label for="bonus" class="block text-gray-700">Bonus</label>
                                        <input type="number" name="bonus" id="bonus"
                                            class="form-input mt-1 block w-full" oninput="calculateGrossEarnings()">
                                    </div>
                                    <div class="mb-4">
                                        <label for="gross_earnings" class="block text-gray-700">Gross Earnings</label>
                                        <input type="number" name="gross_earnings" id="gross_earnings"
                                            class="form-input mt-1 block w-full" readonly>
                                    </div>
                                    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                        <button type="submit"
                                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 sm:ml-3 sm:w-auto sm:text-sm">
                                            Save
                                        </button>
                                        <button type="button"
                                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                            onclick="closeModal('addModal')">
                                            Cancel
                                        </button>
                                    </div>
                                </form>

                                <script>
                                    function calculateGrossEarnings() {
                                        // Retrieve values from input fields
                                        let hoursWorked = parseFloat(document.getElementById('hours_worked').value) || 0;
                                        let totalPay = parseFloat(document.getElementById('total_pay').value) || 0;
                                        let bonus = parseFloat(document.getElementById('bonus').value) || 0;

                                        // Calculate gross earnings
                                        let grossEarnings = (hoursWorked * totalPay) + bonus;

                                        // Update the gross earnings input field
                                        document.getElementById('gross_earnings').value = grossEarnings.toFixed(2); // Round to 2 decimal places
                                    }
                                </script>

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

    @foreach ($earnings as $earning)
        <!-- Edit Modal for each earning -->
        <div id="editModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
            <div class="flex items-end justify-center min-h-screen pt-4 px-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>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div
                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                    Edit Earning
                                </h3>
                                <div class="mt-2">
                                    <form action="{{ route('earnings.update', $earning->id) }}" method="POST">
                                        @csrf
                                        @method('PUT')
                                        <div class="mb-4">
                                            <label for="edit_employee_id" class="block text-gray-700">Employee</label>
                                            <select name="employee_id" id="edit_employee_id"
                                                class="form-select mt-1 block w-full">
                                                @foreach ($employees as $employee)
                                                    <option value="{{ $employee->id }}"
                                                        {{ $employee->id == $earning->employee_id ? 'selected' : '' }}>
                                                        {{ $employee->complete_name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-4">
                                            <label for="edit_hours_worked" class="block text-gray-700">Hours
                                                Worked</label>
                                            <input type="number" name="hours_worked" id="edit_hours_worked"
                                                class="form-input mt-1 block w-full" value="{{ $earning->hours_worked }}">
                                        </div>
                                        <div class="mb-4">
                                            <label for="edit_total_pay" class="block text-gray-700">Total Pay</label>
                                            <input type="number" name="total_pay" id="edit_total_pay"
                                                class="form-input mt-1 block w-full" value="{{ $earning->total_pay }}">
                                        </div>
                                        <div class="mb-4">
                                            <label for="edit_bonus" class="block text-gray-700">Bonus</label>
                                            <input type="number" name="bonus" id="edit_bonus"
                                                class="form-input mt-1 block w-full" value="{{ $earning->bonus }}">
                                        </div>
                                        <div class="mb-4">
                                            <label for="edit_gross_earnings" class="block text-gray-700">Gross
                                                Earnings</label>
                                            <input type="number" name="gross_earnings" id="edit_gross_earnings"
                                                class="form-input mt-1 block w-full"
                                                value="{{ $earning->gross_earnings }}">
                                        </div>
                                        <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                            <button type="submit"
                                                class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 sm:ml-3 sm:w-auto sm:text-sm">
                                                Save
                                            </button>
                                            <button type="button"
                                                class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                                onclick="closeModal('editModal')">
                                                Cancel
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Delete Modal for each earning -->
        <div id="deleteModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
            <div class="flex items-end justify-center min-h-screen pt-4 px-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>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div
                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                                <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
                                    Delete Earning
                                </h3>
                                <div class="mt-2">
                                    <p class="text-gray-700">Are you sure you want to delete this earning?</p>
                                </div>
                                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                                    <form action="{{ route('earnings.destroy', $earning->id) }}" method="POST"
                                        id="deleteForm{{ $earning->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 sm:ml-3 sm:w-auto sm:text-sm">
                                            Delete
                                        </button>
                                        <button type="button"
                                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm"
                                            onclick="closeModal('deleteModal')">
                                            Cancel
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

    <script>
        $(document).ready(function() {
            $('#earningsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('earnings.index') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'employee_name',
                        name: 'employee_name'
                    },
                    {
                        data: 'hours_worked',
                        name: 'hours_worked'
                    },
                    {
                        data: 'total_pay',
                        name: 'total_pay'
                    },
                    {
                        data: 'bonus',
                        name: 'bonus'
                    },
                    {
                        data: 'gross_earnings',
                        name: 'gross_earnings'
                    },
                    {
                        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