@extends('layouts.sidebar')

@section('content')
    <div>
        @if (session('success'))
            <div class="text-center text-green-900 alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="p-5 p-6 mx-auto rounded-lg shadow-md">
            <div>
                <span class="font-bold">Business Name:</span>
                <span class="ml-2">{{ $lease->client->business_name }}</span>
            </div>
            <div>
                <span class="font-bold">Owner's Name:</span>
                <span class="ml-2">{{ $lease->client->owners_name }}</span>
            </div>
            <div>
                <span class="font-bold">Contact No:</span>
                <span class="ml-2">{{ $lease->client->contact_no }}</span>
            </div>
            <div>
                <span class="font-bold">TIN No.:</span>
                <span class="ml-2">{{ $lease->client->tin_no }}</span>
            </div>
            <div>
                <span class="font-bold">Rental Price:</span>
                <span class="ml-2">{{ $lease->unit->rate }}</span>
            </div>
            <div>
                <span class="font-bold">Yearly Escalation:</span>
                <span class="ml-2">{{ $lease->yearly_escalation }}%</span>
            </div>
        </div>

        <table id="leaseTable" class="w-full text-center table-auto">
            <thead>
                <tr>
                    <th class="px-4 py-2">Payment Schedule</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2">Amount</th>
                    <th class="px-4 py-2">Balance</th>
                    <th class="px-4 py-2">Payment Type</th>
                    <th class="px-4 py-2">Light</th>
                    <th class="px-4 py-2">Water</th>
                    <th class="px-4 py-2">Voucher</th>
                    <th class="px-4 py-2">Remarks</th>
                    <th class="px-4 py-2">Action</th>
                </tr>
            </thead>
            <tbody class="text-sm text-gray-600">

                <!-- DataTables will populate this tbody -->
            </tbody>
        </table>

        @foreach ($payments as $payment)
            <div id="editItemModal{{ $payment->payment_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">
                    <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                        <h5 class="font-bold text-white">Update Payment</h5>
                        <button onclick="closeModal1('editItemModal{{ $payment->payment_id }}')"
                            class="text-white">&times;</button>
                    </div>
                    <form action="{{ route('payment.update', $payment->payment_id) }}" method="POST" class="w-full">
                        @csrf
                        @method('PUT')
                        <div class="grid grid-cols-2 gap-6 p-6 bg-white rounded md:grid-cols-3">
                            <!-- Amount -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="amount" class="block mb-2 text-sm font-bold">Amount:</label>
                                <input type="text" id="amount" name="amount" value="{{ $payment->Amount }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Payment Date -->
                            <div class="col-span-1 md:col-span-1">
                                <label for="payment_date" class="block mb-2 text-sm font-bold">Payment Date:</label>
                                <input type="date" id="payment_date" name="payment_date"
                                    value="{{ $payment->payment_date }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Status -->
                            <div class="col-span-1 md:col-span-1">
                                <label for="status" class="block mb-2 text-sm font-bold">Status:</label>
                                <select id="status" name="status"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                                    <option value="Paid" {{ $payment->status == 'Paid' ? 'selected' : '' }}>Paid</option>
                                    <option value="Unpaid" {{ $payment->status == 'Unpaid' ? 'selected' : '' }}>Unpaid
                                    </option>
                                </select>
                            </div>

                            <!-- Balance -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="balance" class="block mb-2 text-sm font-bold">Balance:</label>
                                <input type="text" id="balance" name="balance" value="{{ $payment->balance }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Payment Type -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="payment_type" class="block mb-2 text-sm font-bold">Payment Type:</label>
                                <input type="text" id="payment_type" name="payment_type"
                                    value="{{ $payment->payment_type }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Light -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="light" class="block mb-2 text-sm font-bold">Light:</label>
                                <input type="text" id="light" name="light" value="{{ $payment->light }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Water -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="water" class="block mb-2 text-sm font-bold">Water:</label>
                                <input type="text" id="water" name="water" value="{{ $payment->water }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Voucher -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="voucher" class="block mb-2 text-sm font-bold">Voucher:</label>
                                <input type="text" id="voucher" name="voucher" value="{{ $payment->voucher }}"
                                    class="w-full px-3 py-2 border-2 border-black rounded">
                            </div>

                            <!-- Remarks -->
                            <div class="col-span-2 md:col-span-2">
                                <label for="remarks" class="block mb-2 text-sm font-bold">Remarks:</label>
                                <textarea id="remarks" name="remarks" class="w-full px-3 py-2 border-2 border-black rounded">{{ $payment->remarks }}</textarea>
                            </div>

                            <!-- Submit Button -->
                            <div class="flex justify-end col-span-2 md:col-span-3">
                                <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded">Update
                                    Payment</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function() {
            var table = $('#leaseTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('payment.list', $lease->lease_id) }}", // Ensure correct route
                columns: [{
                        data: 'payment_schedule',
                        name: 'payment_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'Amount',
                        name: 'Amount'
                    },
                    {
                        data: 'balance',
                        name: 'balance'
                    },
                    {
                        data: 'payment_type',
                        name: 'payment_type'
                    },
                    {
                        data: 'light',
                        name: 'light'
                    },
                    {
                        data: 'water',
                        name: 'water'
                    },
                    {
                        data: 'voucher',
                        name: 'voucher'
                    },
                    {
                        data: 'remarks',
                        name: 'remarks'
                    },
                    {
                        data: 'Action',
                        name: 'Action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });



        });
    </script>
    <script>
        function openModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.classList.remove('hidden');
        }

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



        function submitEditItemForm(event, propertyId) {
            event.preventDefault(); // Prevent the default form submission

            // Get the form element
            var form = document.getElementById('editItemForm' + propertyId);

            // Submit the form
            form.submit();
        }

        function openModal1(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'flex'; // Change from 'none' to 'flex' to properly show the modal
        }

        function closeModal1(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'none'; // Hide the modal by setting display to 'none'
        }
    </script>
@endsection