@extends('layouts.sidebar')

@section('content')
    <div class="">
        <div class="overflow-hidden bg-white rounded-lg shadow-md">


            <div class="px-4 py-2 bg-gray-200 border-b">
                <h3 class="text-lg font-semibold text-gray-800">MANAGE PAYMENTS</h3>
            </div>
            <div class="p-4 bg-white rounded shadow-md">


            </div>

            <div class="overflow-x-auto">
                @if (session('success'))
                    <div class="text-center text-green-500">{{ session('success') }}</div>
                @endif
                <table id="newPaymentsTable" 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">Action</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Property</th>
                            <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Renters</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">Remarks</th>



                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-600">


                    </tbody>
                </table>
            </div>



        </div>

    </div>


    @foreach ($newpayments as $payment)
        <div id="deleteModal{{ $payment->newpayment_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="closeModaldelete('deleteModal{{ $payment->newpayment_id }}')"
                        class="text-white">&times;</button>
                </div>

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

                <!-- Modal footer -->
                <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                    <button onclick="closeModaldelete('deleteModal{{ $payment->newpayment_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{{ $payment->newpayment_id }}"
                        action="{{ route('delete.newpayment', $payment->newpayment_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>






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

                <div class="p-5 border border-gray-300 rounded-md shadow-sm bg-gray-50">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        <!-- Bank -->
                        <div class="flex flex-col">
                            <label class="font-medium text-gray-700">Bank:</label>
                            <div class="p-2 mt-1 text-gray-800 bg-white border border-gray-200 rounded-md">
                                {{ $payment->bank }}
                            </div>
                        </div>

                        <!-- Check No -->
                        <div class="flex flex-col">
                            <label class="font-medium text-gray-700">Check No:</label>
                            <div class="p-2 mt-1 text-gray-800 bg-white border border-gray-200 rounded-md">
                                {{ $payment->check_no }}
                            </div>
                        </div>

                        <!-- Cheque Name -->
                        <div class="flex flex-col">
                            <label class="font-medium text-gray-700">Cheque Name:</label>
                            <div class="p-2 mt-1 text-gray-800 bg-white border border-gray-200 rounded-md">
                                {{ $payment->cheque_name }}
                            </div>
                        </div>

                        <!-- Check Amount -->
                        <div class="flex flex-col">
                            <label class="font-medium text-gray-700">Check Amount:</label>
                            <div class="p-2 mt-1 text-gray-800 bg-white border border-gray-200 rounded-md">
                                {{ $payment->check_amount }}
                            </div>
                        </div>

                        <!-- Check Date -->
                        <div class="flex flex-col">
                            <label class="font-medium text-gray-700">Check Date:</label>
                            <div class="p-2 mt-1 text-gray-800 bg-white border border-gray-200 rounded-md">
                                {{ $payment->check_date }}
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col">
                        <label class="font-medium text-gray-700">Notes</label>
                        <div class="p-2 mt-1 text-gray-800 bg-white border border-gray-200 rounded-md">
                            {{ $payment->notes }}
                        </div>
                    </div>
                </div>

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

                    <!-- Form for delete -->

                </div>
            </div>
        </div>
    @endforeach



    <script>
        $(document).ready(function() {
            $('#newPaymentsTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('manage.payments', ['table' => 'newPayments']) }}", // Adjust the route name and parameters
                },
                columns: [{
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'property',
                        name: 'property',

                    },
                    {
                        data: 'renter',
                        name: 'renter',

                    },

                    {
                        data: 'date',
                        name: 'date',

                    },
                    {
                        data: 'remarks',
                        name: 'remarks'
                    }

                ]
            });
        });
    </script>








    <script>
        // Function to handle add item form submission
        function submitAddItemForm(event) {
            event.preventDefault();
            var itemName = document.getElementById('item-name').value;
            console.log('Adding item:', itemName);
            document.getElementById('addItemForm').reset(); // Reset form
            closeModal('addItemModal'); // Close modal
        }

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

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