@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="bg-green-500 text-white px-4 py-2 rounded mb-3">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>

                    </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 hidden flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white rounded-lg shadow-lg w-1/3 p-6">
            <h2 class="text-lg font-semibold mb-4">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="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        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="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        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="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        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="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        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="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        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="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2"
                        id="41-up" name="41_up">
                </div>
                <div class="flex justify-end">
                    <button type="button" class="bg-gray-300 text-gray-800 px-4 py-2 rounded mr-2"
                        id="closeModal">Cancel</button>
                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">Save</button>
                </div>
            </form>
        </div>
    </div>
@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'
                    },

                ]
            });

            // 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