@extends('layouts.sidebar')


@section('content')
    <div class="p-6 mx-auto ">


        <div class="relative flex flex-col items-end justify-end mr-10 text-center">
            <div>
                <button type="button"
                    class="inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-gray-300 rounded-md shadow-sm hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500"
                    id="menu-button" aria-expanded="false" aria-haspopup="true" onclick="toggleDropdown()">
                    Menu
                    <!-- Dropdown icon -->
                    <svg class="w-5 h-5 ml-2 -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M5.23 7.21a.75.75 0 011.06 0L10 10.44l3.71-3.23a.75.75 0 111.04 1.08l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.08z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <div class="absolute right-0 z-10 hidden w-56 mt-2 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
                    role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1"
                    id="dropdown-menu">
                    <div class="py-1" role="none">
                        <a href="{{ url('bills') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DCWD
                            Billings</a>
                        <a href="{{ url('bills') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DLPC
                            Billings</a>
                        <a href="{{ route('lights.index') }}"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">DLPC
                            Accounts</a>

                    </div>
                </div>
            </div> <!-- Dropdown menu, show/hide based on menu state -->

        </div>
        <script>
            // Dropdown toggle
            document.getElementById('menu-button').addEventListener('click', function() {
                const menu = document.getElementById('dropdown-menu');
                menu.classList.toggle('hidden');
            });
        </script>


        <div class="flex flex-col gap-10 md:flex-row ">
            <div class="w-1/2 mb-8 ">
                <h1 class="mb-4 text-2xl font-bold">Add New DCWD Account</h1>

                <form action="{{ route('water1.store') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="account_number" class="block text-gray-700">Account Number</label>
                        <input type="text" id="account_number" name="account_number"
                            class="w-full p-2 border border-gray-300 rounded" required>
                    </div>

                    <div class="mb-4">
                        <label for="property_id" class="block text-gray-700">Property</label>
                        <select id="property_id" name="property_id" class="w-full p-2 border border-gray-300 rounded"
                            required>
                            <!-- Fetch and display property options -->
                            @foreach ($properties as $property)
                                <option value="{{ $property->id }}">{{ $property->property_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                        Add Water Account
                    </button>
                </form>
            </div>

            <!-- Lights Accounts Table -->
            <div class="w-full mt-8">
                <h2 class="mb-4 text-xl font-bold">Existing DCWD Accounts</h2>

                <table id="lightTable" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                    <thead class="bg-orange-500">
                        <tr>
                            <th class="px-4 py-2 border">ID</th>
                            <th class="px-4 py-2 border">Account Number</th>
                            <th class="px-4 py-2 border">Property</th>
                            <th class="px-4 py-2 border">Actions</th>
                        </tr>
                    </thead>

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


    <script>
        $(document).ready(function() {
            $('#lightTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('water1.index') }}', // Ensure this route is defined in your web.php
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'account_number',
                        name: 'account_number'
                    },
                    {
                        data: 'property',
                        name: 'property'
                    },

                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ]
            });
        });
    </script>
    <script>
        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>
    @foreach ($accounts as $accounts)
        <div id="deleteModal{{ $accounts->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{{ $accounts->id }}')" class="text-white">&times;</button>
                </div>

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

                <!-- Modal footer -->
                <div class="flex items-center justify-end px-4 py-3 bg-gray-100">
                    <button onclick="closeModal('deleteModal{{ $accounts->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{{ $accounts->id }}" action="{{ route('lights.destroy', $accounts->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