@extends('layouts.sidebar')

@section('content')
    <div class = "container mx-auto">
        <div class="py-5">
            <div>
                <h2 class="font-bold text-2xl"> Units</h2>
            </div>
        </div>

        @if (session('success'))
            <div class="text-center text-red-900 alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="overflow-x-auto">
            <table id="leaseTable" 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">View</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Property Name</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Unit Name</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Renters Name</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Size</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rate Type</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Rate </th>

                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Status</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">


                </tbody>
            </table>

        </div>



        @foreach ($units as $unit)
            <div id="deleteModal{{ $unit->unit_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{{ $unit->unit_id }}')" class="text-white">&times;</button>
                    </div>

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

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










            <div id="editUnitModal{{ $unit->unit_id }}"
                class="fixed inset-0 flex items-center justify-center hidden overflow-auto bg-gray-500 bg-opacity-75">
                <div class="w-1/2  bg-white rounded">

                    <div class="flex items-center justify-between p-3  bg-blue-500">
                        <h5 class="font-bold text-white">Edit Unit</h5>
                        <button onclick="closeModal('editUnitModal{{ $unit->unit_id }}')"
                            class="text-white">&times;</button>
                    </div>

                    <form method="POST" action="{{ route('unit.update', $unit->unit_id) }}"
                        class="p-6 bg-white rounded shadow-md">
                        @csrf

                        <hr class="">

                        <div id="units-container">
                            <div class="mb-4 unit-item">
                                <h3 class="mb-2 text-lg font-bold">Unit {{ $unit->unit_id }}</h3>
                                <div class="flex mb-2">
                                    <div class="w-1/2 px-2">
                                        <label for="unit-name-{{ $unit->unit_id }}"
                                            class="block mb-2 text-sm font-bold text-gray-700">Unit Name:</label>
                                        <input type="text" id="unit-name-{{ $unit->unit_id }}" name="unit_name"
                                            class="w-full px-3 py-2 leading-tight text-gray-700 border-2 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                            value="{{ $unit->unit_name }}" placeholder="Unit Name">
                                    </div>
                                    <div class="w-1/2 px-2">
                                        <label for="unit-size-{{ $unit->unit_id }}"
                                            class="block mb-2 text-sm font-bold text-gray-700">Size:</label>
                                        <input type="text" id="unit-size-{{ $unit->unit_id }}" name="size"
                                            class="w-full px-3 py-2 leading-tight text-gray-700 border-2 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                            value="{{ $unit->size }}" placeholder="Unit Size">
                                    </div>
                                    <div class="w-1/2 px-2">
                                        <label for="unit-rate-type-{{ $unit->unit_id }}"
                                            class="block mb-2 text-sm font-bold text-gray-700">Rate Type:</label>
                                        <select id="unit-rate-type-{{ $unit->unit_id }}" name="rate_type"
                                            class="w-full px-3 py-2 leading-tight text-gray-700 border-2 rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                            <option value="" disabled {{ !$unit->rate_type ? 'selected' : '' }}>Rate
                                                Type</option>
                                            <option value="Rate base"
                                                {{ $unit->rate_type == 'Rate base' ? 'selected' : '' }}>Rate base</option>
                                            <option value="Per Square Meter"
                                                {{ $unit->rate_type == 'Per Square Meter' ? 'selected' : '' }}>Per Square
                                                Meter</option>
                                        </select>
                                    </div>
                                    <div class="w-1/2 px-2">
                                        <label for="unit-rate-{{ $unit->unit_id }}"
                                            class="block mb-2 text-sm font-bold text-gray-700">Rate:</label>
                                        <input type="text" id="unit-rate-{{ $unit->unit_id }}" name="rate"
                                            class="w-full px-3 py-2 leading-tight text-gray-700 border-2 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                            value="{{ $unit->rate }}" placeholder="Unit Rate">
                                    </div>
                                </div>
                                <div class="flex mb-2">
                                    <div class="w-1/2 px-2">
                                        <label for="unit-status-{{ $unit->unit_id }}"
                                            class="block mb-2 text-sm font-bold text-gray-700">Status:</label>
                                        <select id="unit-status-{{ $unit->unit_id }}" name="status"
                                            class="w-full px-3 py-2 leading-tight text-gray-700 border-2 rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                                            <option value="Vacant" {{ $unit->status == 'Vacant' ? 'selected' : '' }}>Vacant
                                            </option>
                                            <option value="Occupied" {{ $unit->status == 'Occupied' ? 'selected' : '' }}>
                                                Occupied</option>
                                            <option value="Renovation"
                                                {{ $unit->status == 'Renovation' ? 'selected' : '' }}>Renovation</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button type="submit"
                            class="px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-700">Update Unit</button>
                    </form>
                </div>
            </div>
        @endforeach
    @endsection
    @section('scripts')
        <script>
            $(document).ready(function() {
                $('#leaseTable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: "{{ url('/admin/allunits') }}",
                    columns: [{
                            data: 'billing',
                            name: 'billing',
                            orderable: false,
                            searchable: false,

                        }, {
                            data: 'property_name',
                            name: 'property_name',
                        },
                        {
                            data: 'unit_name',
                            name: 'unit_name'
                        },
                        {
                            data: 'owners_name',
                            name: 'owners_name',
                            render: function(data, type, full, meta) {
                                if (data) {
                                    return data; // Display owners_name if available
                                } else {
                                    return 'No Renters'; // Display 'No Renters' if owners_name is null or empty
                                }
                            }
                        },
                        {
                            data: 'size',
                            name: 'size'
                        },
                        {
                            data: 'rate_type',
                            name: 'rate_type'
                        },
                        {
                            data: 'rate',
                            name: 'rate'
                        },

                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'actions',
                            name: 'actions',
                            orderable: false,
                            searchable: false
                        }
                    ]
                });
            });
        </script>






        <script>
            // Function to open a modal
            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>
    @endsection