@extends('layouts.sidebar')

@section('content')
    <div class="">

        <h3 class="text-lg font-semibold text-gray-800 p-5">MANAGE BILLING STATEMENTS</h3>

        <button class="px-4 py-2 mb-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
            onclick="openModal('addItemModal')">Add New Billing</button>
        @if (session('success'))
            <div class="text-center text-green-500">{{ session('success') }}</div>
        @endif

        <div class="overflow-x-auto">
            <table id="waterbillsTable" 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">Renters</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Billing Date</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Due Date</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Date From To</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">

                    <!-- Table rows will be populated dynamically by DataTables -->
                </tbody>
            </table>

        </div>

    </div>
    @foreach ($billingStatement as $bill)
        <div id="deleteModal{{ $bill->billingstatement_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{{ $bill->billingstatement_id }}')"
                        class="text-white">&times;</button>
                </div>

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

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

@section('scripts')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#waterbillsTable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('billing-statements.index') }}", // Adjust route as per your Laravel routes
                "columns": [{
                        "data": "owners_name"
                    },
                    {
                        "data": "billing_date"
                    },
                    {
                        "data": "due_date"
                    },
                    {
                        "data": "date_range"
                    },
                    {
                        "data": "actions",
                        "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 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>

    <div id="addItemModal" class="absolute inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
        <div class="w-1/2 overflow-y-auto bg-white rounded-lg">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                <h5 class="font-bold text-white">Add New Bill</h5>
                <button onclick="closeModal('addItemModal')" class="text-white">&times;</button>
            </div>

            <form action="{{ route('billing-statements.store') }}" method="POST" class="p-6 bg-white rounded shadow-md">
                @csrf

                <!-- Property Name -->
                <div class="mb-4">
                    <label for="lease_id" class="block mb-2 text-sm font-bold text-gray-700">Renter
                    </label>
                    <select id="lease_id" name="lease_id"
                        class="w-full 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 Client</option>
                        @foreach ($lease as $lease)
                            <option value="{{ $lease->lease_id }}">Soa No. {{ $lease->lease_id }} -
                                {{ $lease->client->owners_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <!-- Start Date -->
                <div class="mb-4">
                    <label for="billing_date" class="block mb-2 text-sm font-bold text-gray-700">Billing Date</label>
                    <input required type="date" id="billing_date" name="billing_date"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                </div>

                <!-- Street Address -->
                <!-- Start Date -->
                <div class="mb-4">
                    <label for="due_date" class="block mb-2 text-sm font-bold text-gray-700">Due Date</label>
                    <input required type="date" id="due_date" name="due_date"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                </div>

                <!-- Rate -->


                <!-- Start Date -->
                <div class="mb-4">
                    <label for="start_date" class="block mb-2 text-sm font-bold text-gray-700">Start Date</label>
                    <input required type="date" id="start_date" name="start_date"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                </div>

                <!-- End Date -->
                <div class="mb-4">
                    <label for="end-date" class="block mb-2 text-sm font-bold text-gray-700">End Date</label>
                    <input required type="date" id="end-date" name="end_date"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                </div>



                <!-- City, State, Zip -->


                <hr class="my-4">

                <button type="submit" class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-700">Save
                </button>
            </form>
        </div>
    </div>
@endsection