@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto">
        <div class="flex justify-between mt-10">
            <h2 class="mb-4 text-2xl font-semibold">Penalties and Additional Fees</h2>
            <button id="openModalButton"
                class="px-4 py-2 text-white transition duration-300 bg-blue-600 rounded-lg hover:bg-blue-700">
                Add Additional Fee
            </button>
        </div>

        <div class="mt-12">

            <div class="overflow-x-auto">
                <table id="payablesTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="bg-gray-200">
                        <tr>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing ID</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Charge Type
                            </th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Amount (PHP)
                            </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">Date of Payable
                            </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>
    @endsection
</div>


@section('scripts')
    <div id="payableModal" class="fixed inset-0 flex items-center justify-center hidden bg-gray-800 bg-opacity-75">
        <div class="relative w-full max-w-3xl p-6 bg-white rounded-lg shadow-lg">
            <div class="flex items-center justify-between pb-4 mb-4 border-b">
                <h2 class="text-2xl font-semibold">Additional Fee Form</h2>
                <button id="closeModalButton" class="text-2xl text-gray-500 hover:text-gray-700">&times;</button>
            </div>

            <form action="{{ route('additionalfees.store') }}" method="POST">
                @csrf

                <!-- Billing ID -->
                <div class="mb-10">
                    <label for="billing_id" class="block font-medium text-gray-700">Billing ID</label>
                    <select id="billing_id" name="billing_id"
                        class="w-full h-32 px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow-sm appearance-none focus:outline-none focus:shadow-outline"
                        required>
                        <option value="">Select Billing</option>
                        @foreach ($payments as $payment)
                            <option value="{{ $payment->payment_id }}">Billing No. {{ $payment->payment_id }}, for
                                {{ $payment->lease->client->owners_name }}, Billing Date
                                {{ \Carbon\Carbon::parse($payment->payment_date)->format('F j, Y') }}, Unit Name:
                                {{ $payment->lease->unit->property->property_name }}{{ $payment->lease->unit->unit_name }},
                            </option>
                        @endforeach
                    </select>
                </div>

                <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

                <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

                <script>
                    $(document).ready(function() {
                        $('#billing_id').select2({
                            placeholder: 'Select Billing',
                            allowClear: true, // Option to clear selection
                            width: '100%', // Adjust width as needed
                        });
                    });
                </script>



                <div class="mb-4">
                    <label for="charge_type" class="block font-medium text-gray-700">Charge Type</label>
                    <div class="relative">
                        <select id="charge_type" name="charge_type"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            required onchange="toggleCustomInput(this)">
                            <option value="">Select a Charge Type</option>
                            <option value="storage_fee">Storage Fee (if confiscated items are placed in storage)</option>
                            <option value="annual_transportation_fee">Annual Transportation Fee (if items are moved to
                                storage)</option>
                            <option value="admin_fee">Admin Fee (if there is a change of mind and deposit is refunded)
                            </option>
                            <option value="janitorial_fee">Janitorial Fee (if the unit is left dirty)</option>
                            <option value="revert_back">Revert Back (if there is an excess allocation)</option>
                            <option value="shared_expense">Shared Expense (tenant & landlord, 50%)</option>
                            <option value="miscellaneous_income">Miscellaneous Income (CR fee, temporary lease, mango
                                harvest, scrap)</option>
                            <option value="custom">Other (Specify below)</option>
                        </select>
                        <input type="text" id="custom_charge_type" name="custom_charge_type"
                            class="hidden block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            placeholder="Specify custom charge type">
                    </div>
                </div>

                <script>
                    function toggleCustomInput(selectElement) {
                        const customInput = document.getElementById('custom_charge_type');
                        if (selectElement.value === 'custom') {
                            customInput.classList.remove('hidden');
                            customInput.focus();
                        } else {
                            customInput.classList.add('hidden');
                            customInput.value = ''; // Clear custom input value when not selected
                        }
                    }
                </script>



                <!-- Amount -->
                <div class="mb-4">
                    <label for="amount" class="block font-medium text-gray-700">Amount (PHP)</label>
                    <input type="number" id="amount" name="amount"
                        class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                        step="0.01" min="0" required>
                </div>

                <!-- Notes -->
                <div class="mb-4">
                    <label for="notes" class="block font-medium text-gray-700">Notes</label>
                    <textarea id="notes" name="notes"
                        class="block w-full h-32 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"></textarea>
                </div>

                <!-- Date of Payable -->
                <div class="mb-4">
                    <label for="date_of_payable" class="block font-medium text-gray-700">Date of Payable</label>
                    <input type="date" id="date_of_payable" name="date_of_payable"
                        class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                        required>
                </div>

                <div class="mt-6 text-center">
                    <button type="submit"
                        class="px-6 py-2 text-white transition duration-300 bg-blue-600 rounded-lg hover:bg-blue-700">Submit</button>
                </div>
            </form>
        </div>
    </div>



    @foreach ($additionalFees as $additionalfee)
        <div id="editPayableModal{{ $additionalfee->id }}"
            class="fixed inset-0 flex items-center justify-center hidden bg-gray-800 bg-opacity-75">
            <div class="relative w-full max-w-3xl p-6 bg-white rounded-lg shadow-lg">
                <div class="flex items-center justify-between pb-4 mb-4 border-b">
                    <h2 class="text-2xl font-semibold">Edit Additional Fee</h2>
                    <button class="text-2xl text-gray-500 hover:text-gray-700"
                        onclick="closeModal('editPayableModal{{ $additionalfee->id }}')">&times;</button>
                </div>

                <form action="{{ route('additionalfees.update', $additionalfee->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <!-- Billing ID -->
                    <div class="mb-10">
                        <label for="billing_id_{{ $additionalfee->id }}" class="block font-medium text-gray-700">Billing
                            ID</label>
                        <select id="billing_id_{{ $additionalfee->id }}" name="billing_id"
                            class="w-full h-32 px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow-sm appearance-none focus:outline-none focus:shadow-outline"
                            required>
                            <option value="">Select Billing</option>
                            @foreach ($payments as $payment)
                                <option value="{{ $payment->payment_id }}"
                                    {{ $additionalfee->billing_id == $payment->payment_id ? 'selected' : '' }}>
                                    Billing No. {{ $payment->payment_id }}, for
                                    {{ $payment->lease->client->owners_name }}, Billing Date
                                    {{ \Carbon\Carbon::parse($payment->payment_date)->format('F j, Y') }}, Unit Name:
                                    {{ $payment->lease->unit->property->property_name }}{{ $payment->lease->unit->unit_name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Select2 Integration -->
                    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
                        rel="stylesheet" />
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
                    <script>
                        $(document).ready(function() {
                            $('#billing_id_{{ $additionalfee->id }}').select2({
                                placeholder: 'Select Billing',
                                allowClear: true,
                                width: '100%',
                            });
                        });
                    </script>

                    <!-- Charge Type -->
                    <div class="mb-4">
                        <label for="charge_type_{{ $additionalfee->id }}" class="block font-medium text-gray-700">Charge
                            Type</label>
                        <div class="relative">
                            <select id="charge_type_{{ $additionalfee->id }}" name="charge_type"
                                class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                                required
                                onchange="toggleCustomInput(this, 'custom_charge_type_{{ $additionalfee->id }}')">
                                <option value="">Select a Charge Type</option>
                                <option value="storage_fee"
                                    {{ $additionalfee->charge_type == 'storage_fee' ? 'selected' : '' }}>Storage Fee (if
                                    confiscated items are placed in storage)</option>
                                <option value="annual_transportation_fee"
                                    {{ $additionalfee->charge_type == 'annual_transportation_fee' ? 'selected' : '' }}>
                                    Annual Transportation Fee (if items are moved to storage)</option>
                                <option value="admin_fee"
                                    {{ $additionalfee->charge_type == 'admin_fee' ? 'selected' : '' }}>Admin Fee (if there
                                    is a change of mind and deposit is refunded)</option>
                                <option value="janitorial_fee"
                                    {{ $additionalfee->charge_type == 'janitorial_fee' ? 'selected' : '' }}>Janitorial Fee
                                    (if the unit is left dirty)
                                </option>
                                <option value="revert_back"
                                    {{ $additionalfee->charge_type == 'revert_back' ? 'selected' : '' }}>Revert Back (if
                                    there is an excess allocation)</option>
                                <option value="shared_expense"
                                    {{ $additionalfee->charge_type == 'shared_expense' ? 'selected' : '' }}>Shared Expense
                                    (tenant & landlord, 50%)</option>
                                <option value="miscellaneous_income"
                                    {{ $additionalfee->charge_type == 'miscellaneous_income' ? 'selected' : '' }}>
                                    Miscellaneous Income (CR fee, temporary lease, mango harvest, scrap)</option>
                                <option value="custom" {{ $additionalfee->charge_type == 'custom' ? 'selected' : '' }}>
                                    Other (Specify below)</option>
                            </select>
                            <input type="text" id="custom_charge_type_{{ $additionalfee->id }}"
                                name="custom_charge_type"
                                class="mt-1 block h-10 w-full border-gray-300 border rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 {{ $additionalfee->charge_type != 'custom' ? 'hidden' : '' }}"
                                placeholder="Specify custom charge type"
                                value="{{ $additionalfee->custom_charge_type }}">
                        </div>
                    </div>

                    <script>
                        function toggleCustomInput(selectElement, inputId) {
                            const customInput = document.getElementById(inputId);
                            if (selectElement.value === 'custom') {
                                customInput.classList.remove('hidden');
                                customInput.focus();
                            } else {
                                customInput.classList.add('hidden');
                                customInput.value = '';
                            }
                        }
                    </script>

                    <!-- Amount -->
                    <div class="mb-4">
                        <label for="amount_{{ $additionalfee->id }}" class="block font-medium text-gray-700">Amount
                            (PHP)</label>
                        <input type="number" id="amount_{{ $additionalfee->id }}" name="amount"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            step="0.01" min="0" required value="{{ $additionalfee->amount }}">
                    </div>

                    <!-- Notes -->
                    <div class="mb-4">
                        <label for="notes_{{ $additionalfee->id }}" class="block font-medium text-gray-700">Notes</label>
                        <textarea id="notes_{{ $additionalfee->id }}" name="notes"
                            class="block w-full h-32 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">{{ $additionalfee->notes }}</textarea>
                    </div>

                    <!-- Date of Payable -->
                    <div class="mb-4">
                        <label for="date_of_payable_{{ $additionalfee->id }}"
                            class="block font-medium text-gray-700">Date of Payable</label>
                        <input type="date" id="date_of_payable_{{ $additionalfee->id }}" name="date_of_payable"
                            class="block w-full h-10 mt-1 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                            required value="{{ $additionalfee->date_of_payable }}">
                    </div>

                    <div class="mt-6 text-center">
                        <button type="submit"
                            class="px-6 py-2 text-white transition duration-300 bg-blue-600 rounded-lg hover:bg-blue-700">Update</button>
                    </div>
                </form>
            </div>
        </div>



        <div id="deleteModal{{ $additionalfee->id }}"
            class="fixed inset-0 flex items-center justify-center hidden bg-black bg-opacity-50">
            <!-- Modal dialog -->
            <div class="max-w-md mx-auto overflow-hidden bg-white rounded-lg shadow-xl">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-red-500">
                    <h5 class="font-bold text-white">Confirm Delete</h5>
                    <button onclick="closeModal('deleteModal{{ $additionalfee->id }}')"
                        class="text-white">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="px-4 py-4">
                    <p>Are you sure you want to delete this Fee?</p>
                </div>

                <!-- Modal footer -->
                <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                    <button onclick="closeModal('deleteModal{{ $additionalfee->id }}')"
                        class="px-3 py-1 mr-2 text-gray-800 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>

                    <!-- Form for delete -->
                    <form id="deleteForm{{ $additionalfee->id }}"
                        action="{{ route('additionalfees.destroy', $additionalfee->id) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <script>
        $(document).ready(function() {
            $('#payablesTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('additionalfees.index') }}",
                columns: [{
                        data: 'billing_id',
                        name: 'billing_id'
                    },
                    {
                        data: 'charge_type',
                        name: 'charge_type'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'notes',
                        name: 'notes'
                    },
                    {
                        data: 'date_of_payable',
                        name: 'date_of_payable',
                        render: function(data, type, row) {
                            // Convert the date string to a Date object and format it
                            let date = new Date(data);
                            let options = {
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric'
                            };
                            return date.toLocaleDateString('en-US', options);
                        }
                    },

                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
        document.getElementById('openModalButton').addEventListener('click', function() {
            document.getElementById('payableModal').classList.remove('hidden');
        });

        document.getElementById('closeModalButton').addEventListener('click', function() {
            document.getElementById('payableModal').classList.add('hidden');
        });

        window.addEventListener('click', function(event) {
            if (event.target === document.getElementById('payableModal')) {
                document.getElementById('payableModal').classList.add('hidden');
            }
        });

        function openModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        // Function to close a modal
        function closeModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }
    </script>
@endsection