@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto">
        @if (session('success'))
            <div class="text-center text-green-500">{{ session('success') }}</div>
        @endif
        <button id="createNewRate" class="px-4 py-2 mb-3 text-white bg-green-500 rounded">Add New Water Rate</button>
        <div class="overflow-x-auto">
            <table id="data-table" class="min-w-full text-center bg-white border-collapse rounded shadow-md">
                <thead class="bg-gray-200">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>0-10</th>
                        <th>11-20</th>
                        <th>21-30</th>
                        <th>31-40</th>
                        <th>41-up</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-600">
                    <!-- Table rows will be populated dynamically by DataTables -->
                </tbody>
            </table>
        </div>
    </div>


    <div id="rateModal" class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
        <div class="w-1/3 p-6 bg-white rounded-lg shadow-lg">
            <h2 class="mb-4 text-lg font-semibold">Add New Water Rate</h2>
            <form action="{{ route('waterrates.store') }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                    <input type="text" class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm"
                        id="name" name="name" required>
                </div>
                <div class="mb-4">
                    <label for="0-10" class="block text-sm font-medium text-gray-700">0-10</label>
                    <input type="text" class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm"
                        id="0-10" name="0_10">
                </div>
                <div class="mb-4">
                    <label for="11-20" class="block text-sm font-medium text-gray-700">11-20</label>
                    <input type="text" class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm"
                        id="11-20" name="11_20">
                </div>
                <div class="mb-4">
                    <label for="21-30" class="block text-sm font-medium text-gray-700">21-30</label>
                    <input type="text" class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm"
                        id="21-30" name="21_30">
                </div>
                <div class="mb-4">
                    <label for="31-40" class="block text-sm font-medium text-gray-700">31-40</label>
                    <input type="text" class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm"
                        id="31-40" name="31_40">
                </div>
                <div class="mb-4">
                    <label for="41-up" class="block text-sm font-medium text-gray-700">41-up</label>
                    <input type="text" class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm"
                        id="41-up" name="41_up">
                </div>
                <div class="flex justify-end">
                    <button type="button" class="px-4 py-2 mr-2 text-gray-800 bg-gray-300 rounded"
                        id="closeModal">Cancel</button>
                    <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded">Save</button>
                </div>
            </form>
        </div>
    </div>'



    @foreach ($waterRates as $rate)
        <div id="editUnitModal{{ $rate->id }}"
            class="fixed inset-0 z-50 flex items-center justify-center hidden bg-black bg-opacity-50">
            <div class="w-1/3 bg-white rounded-lg shadow-lg">
                <div class="flex items-center justify-between p-4 border-b">
                    <h2 class="text-lg font-semibold">Edit Water Rate</h2>
                    <button class="text-gray-500 hover:text-gray-800"
                        onclick="closeModal('editUnitModal{{ $rate->id }}')">&times;</button>
                </div>
                <div class="p-4">
                    <form action="{{ route('waterrates.update', $rate->id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="mb-4">
                            <label for="edit_name{{ $rate->id }}"
                                class="block text-sm font-medium text-gray-700">Name</label>
                            <input type="text" id="edit_name{{ $rate->id }}" name="name"
                                value="{{ $rate->name }}"
                                class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-300">
                        </div>

                        <div class="mb-4">
                            <label for="edit_0_10{{ $rate->id }}"
                                class="block text-sm font-medium text-gray-700">0-10</label>
                            <input type="text" id="edit_0_10{{ $rate->id }}" name="0_10"
                                value="{{ $rate->{'0_10'} }}"
                                class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-300">
                        </div>
                        <div class="mb-4">
                            <label for="edit_11_20{{ $rate->id }}"
                                class="block text-sm font-medium text-gray-700">11-20</label>
                            <input type="text" id="edit_11_20{{ $rate->id }}" name="11_20"
                                value="{{ $rate->{'11_20'} }}"
                                class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-300">
                        </div>
                        <div class="mb-4">
                            <label for="edit_21_30{{ $rate->id }}"
                                class="block text-sm font-medium text-gray-700">21-30</label>
                            <input type="text" id="edit_21_30{{ $rate->id }}" name="21_30"
                                value="{{ $rate->{'21_30'} }}"
                                class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-300">
                        </div>
                        <div class="mb-4">
                            <label for="edit_31_40{{ $rate->id }}"
                                class="block text-sm font-medium text-gray-700">31-40</label>
                            <input type="text" id="edit_31_40{{ $rate->id }}" name="31_40"
                                value="{{ $rate->{'31_40'} }}"
                                class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-300">
                        </div>
                        <div class="mb-4">
                            <label for="edit_41_up{{ $rate->id }}"
                                class="block text-sm font-medium text-gray-700">41-up</label>
                            <input type="text" id="edit_41_up{{ $rate->id }}" name="41_up"
                                value="{{ $rate->{'41_up'} }}"
                                class="block w-full p-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-300">
                        </div>
                        <div class="flex justify-end">
                            <button type="button" onclick="closeModal('editUnitModal{{ $rate->id }}')"
                                class="px-4 py-2 mr-2 text-gray-700 bg-gray-300 rounded hover:bg-gray-400">Cancel</button>
                            <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600">Save
                                Changes</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        
    @endforeach

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

        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
        }
    </script>
@endsection


@section('scripts')
    <script type="text/javascript">
        $(function() {
            var table = $('#data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('waterrates.index') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: '0_10',
                        name: '0_10'
                    },
                    {
                        data: '11_20',
                        name: '11_20'
                    },
                    {
                        data: '21_30',
                        name: '21_30'
                    },
                    {
                        data: '31_40',
                        name: '31_40'
                    },
                    {
                        data: '41_up',
                        name: '41_up'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }

                ]
            });

            // Show modal for adding new water rate
            $('#createNewRate').click(function() {
                $('#rateModal').removeClass('hidden'); // Show the modal
            });

            // Close modal
            $('#closeModal').click(function() {
                $('#rateModal').addClass('hidden'); // Hide the modal
            });



        });
    </script>
@endsection