{% extends 'custom_admin/base.html' %}

{% block title %}Land Properties Management{% endblock %}

{% block content %}
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold text-gray-800">Land Properties Management</h1>
    <button onclick="openCreateModal()" class="bg-matrichaya-green hover:bg-matrichaya-dark-green text-white px-4 py-2 rounded-lg font-semibold">
        <i class="fas fa-plus mr-2"></i>Add New Land Property
    </button>
</div>

<!-- Search and Filter Section -->
<div class="bg-white rounded-lg shadow p-6 mb-6">
    <form method="get" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Search</label>
            <input type="text" name="search" value="{{ search }}" placeholder="Search by name, location..." 
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
            <select name="status" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Status</option>
                {% for status_code, status_name in project_statuses %}
                    <option value="{{ status_code }}" {% if status_filter == status_code %}selected{% endif %}>{{ status_name }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Type</label>
            <select name="type" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Types</option>
                {% for type_code, type_name in property_types %}
                    <option value="{{ type_code }}" {% if type_filter == type_code %}selected{% endif %}>{{ type_name }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Division</label>
            <select name="division" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Divisions</option>
                {% for div_code, div_name in divisions %}
                    <option value="{{ div_code }}" {% if division_filter == div_code %}selected{% endif %}>{{ div_name }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">District</label>
            <select name="district" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Districts</option>
                {% for district in districts %}
                    <option value="{{ district }}" {% if district_filter == district %}selected{% endif %}>{{ district }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Upazila</label>
            <select name="upazila" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                <option value="">All Upazilas</option>
                {% for upazila in upazilas %}
                    <option value="{{ upazila }}" {% if upazila_filter == upazila %}selected{% endif %}>{{ upazila }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div class="lg:col-span-3 flex gap-2">
            <button type="submit" class="bg-matrichaya-green hover:bg-matrichaya-dark-green text-white px-4 py-2 rounded-lg font-semibold">
                <i class="fas fa-search mr-2"></i>Search
            </button>
            <a href="{% url 'custom_admin:land_properties' %}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold">
                <i class="fas fa-times mr-2"></i>Clear
            </a>
        </div>
    </form>
</div>

<!-- Land Properties Table -->
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Area</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Featured</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Active</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% for land_property in page_obj %}
                <tr class="hover:bg-gray-50">
                    <td class="px-6 py-4 whitespace-nowrap">
                        {% if land_property.image %}
                            <img src="{{ land_property.image.url }}" alt="{{ land_property.name }}" class="h-12 w-12 rounded-lg object-cover">
                        {% else %}
                            <div class="h-12 w-12 bg-gray-200 rounded-lg flex items-center justify-center">
                                <i class="fas fa-image text-gray-400"></i>
                            </div>
                        {% endif %}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">{{ land_property.name }}</div>
                        <div class="text-sm text-gray-500">{{ land_property.get_division_display }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ land_property.area }}</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">{{ land_property.district }}</div>
                        <div class="text-sm text-gray-500">{{ land_property.area_name }}</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if land_property.project_status == 'ongoing' %}bg-blue-100 text-blue-800
                            {% elif land_property.project_status == 'completed' %}bg-green-100 text-green-800
                            {% else %}bg-yellow-100 text-yellow-800{% endif %}">
                            {{ land_property.get_project_status_display }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            {% if land_property.property_type == 'residential' %}bg-green-100 text-green-800
                            {% elif land_property.property_type == 'commercial' %}bg-purple-100 text-purple-800
                            {% else %}bg-orange-100 text-orange-800{% endif %}">
                            {{ land_property.get_property_type_display }}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <form method="post" class="inline">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="toggle_featured">
                            <input type="hidden" name="land_property_id" value="{{ land_property.id }}">
                            <button type="submit" class="{% if land_property.is_featured %}text-yellow-500{% else %}text-gray-400{% endif %} hover:text-yellow-600">
                                <i class="fas fa-star"></i>
                            </button>
                        </form>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <form method="post" class="inline">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="toggle_active">
                            <input type="hidden" name="land_property_id" value="{{ land_property.id }}">
                            <button type="submit" class="{% if land_property.is_active %}text-green-500{% else %}text-gray-400{% endif %} hover:text-green-600">
                                <i class="fas fa-toggle-on"></i>
                            </button>
                        </form>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div class="flex space-x-2">
                            <button onclick="openEditModal({{ land_property.id }}, '{{ land_property.name }}', '{{ land_property.area }}', '{{ land_property.location }}', '{{ land_property.division }}', '{{ land_property.district }}', '{{ land_property.area_name }}', '{{ land_property.description|escapejs }}', '{{ land_property.project_status }}', '{{ land_property.property_type }}', '{{ land_property.price_per_katha }}', '{{ land_property.total_plots }}', '{{ land_property.available_plots }}', '{{ land_property.amenities|escapejs }}', {{ land_property.is_featured|yesno:"true,false" }}, {{ land_property.is_active|yesno:"true,false" }})" 
                                    class="text-blue-600 hover:text-blue-900">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button onclick="confirmDelete({{ land_property.id }}, '{{ land_property.name }}')" 
                                    class="text-red-600 hover:text-red-900">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="9" class="px-6 py-4 text-center text-gray-500">No land properties found.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
        <div class="bg-white px-4 py-3 border-t border-gray-200 sm:px-6">
            <div class="flex items-center justify-between">
                <div class="flex-1 flex justify-between sm:hidden">
                    {% if page_obj.has_previous %}
                        <a href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}{% if division_filter %}&division={{ division_filter }}{% endif %}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if upazila_filter %}&upazila={{ upazila_filter }}{% endif %}" 
                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            Previous
                        </a>
                    {% endif %}
                    {% if page_obj.has_next %}
                        <a href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}{% if division_filter %}&division={{ division_filter }}{% endif %}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if upazila_filter %}&upazila={{ upazila_filter }}{% endif %}" 
                           class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                            Next
                        </a>
                    {% endif %}
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} results
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                            {% if page_obj.has_previous %}
                                <a href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}{% if division_filter %}&division={{ division_filter }}{% endif %}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if upazila_filter %}&upazila={{ upazila_filter }}{% endif %}" 
                                   class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-left"></i>
                                </a>
                            {% endif %}
                            
                            {% for num in page_obj.paginator.page_range %}
                                {% if page_obj.number == num %}
                                <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-green-50 text-sm font-medium text-matrichaya-green">
                                    {{ num }}
                                </span>
                                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                    <a href="?page={{ num }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}{% if division_filter %}&division={{ division_filter }}{% endif %}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if upazila_filter %}&upazila={{ upazila_filter }}{% endif %}" 
                                       class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                                        {{ num }}
                                    </a>
                                {% endif %}
                            {% endfor %}
                            
                            {% if page_obj.has_next %}
                                <a href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}{% if division_filter %}&division={{ division_filter }}{% endif %}{% if district_filter %}&district={{ district_filter }}{% endif %}{% if upazila_filter %}&upazila={{ upazila_filter }}{% endif %}" 
                                   class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                    <i class="fas fa-chevron-right"></i>
                                </a>
                            {% endif %}
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
</div>

<!-- Create/Edit Modal -->
<div id="landPropertyModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 id="modalTitle" class="text-lg font-medium text-gray-900">Add New Land Property</h3>
                <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="landPropertyForm" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="hidden" id="action" name="action" value="create">
                <input type="hidden" id="land_property_id" name="land_property_id" value="">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Project Name *</label>
                        <input type="text" id="name" name="name" required 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Area *</label>
                        <input type="text" id="area" name="area" required 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Location *</label>
                        <input type="text" id="location" name="location" required 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Division *</label>
                        <select id="division" name="division" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select Division</option>
                            {% for div_code, div_name in divisions %}
                                <option value="{{ div_code }}">{{ div_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">District *</label>
                        <select id="district" name="district" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select District</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Upazila *</label>
                        <select id="area_name" name="area_name" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select Upazila</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Project Status *</label>
                        <select id="project_status" name="project_status" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select Status</option>
                            {% for status_code, status_name in project_statuses %}
                                <option value="{{ status_code }}">{{ status_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Property Type *</label>
                        <select id="property_type" name="property_type" required 
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">Select Type</option>
                            {% for type_code, type_name in property_types %}
                                <option value="{{ type_code }}">{{ type_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Price per Katha</label>
                        <input type="number" id="price_per_katha" name="price_per_katha" step="0.01" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Total Plots</label>
                        <input type="number" id="total_plots" name="total_plots" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Available Plots</label>
                        <input type="number" id="available_plots" name="available_plots" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Project Image</label>
                        <input type="file" id="image" name="image" accept="image/*" 
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description *</label>
                    <textarea id="description" name="description" rows="4" required 
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Amenities</label>
                    <textarea id="amenities" name="amenities" rows="3" 
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"></textarea>
                </div>
                
                <div class="flex items-center space-x-4 mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" id="is_featured" name="is_featured" class="mr-2">
                        <span class="text-sm text-gray-700">Featured Project</span>
                    </label>
                    <label class="flex items-center">
                        <input type="checkbox" id="is_active" name="is_active" checked class="mr-2">
                        <span class="text-sm text-gray-700">Active Project</span>
                    </label>
                </div>
                
                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="closeModal()" 
                            class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">
                        Cancel
                    </button>
                    <button type="submit" 
                            class="px-4 py-2 bg-matrichaya-green text-white rounded-lg hover:bg-matrichaya-dark-green">
                        Save Land Property
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mt-2">Delete Land Property</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">Are you sure you want to delete this land property? This action cannot be undone.</p>
            </div>
            <div class="flex justify-center space-x-3 mt-4">
                <button onclick="closeDeleteModal()" 
                        class="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400">
                    Cancel
                </button>
                <form id="deleteForm" method="post" class="inline">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" id="delete_land_property_id" name="land_property_id" value="">
                    <button type="submit" 
                            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
                        Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// District data for each division
const districtData = {
    'dhaka': ['Dhaka', 'Gazipur', 'Narayanganj', 'Tangail', 'Kishoreganj', 'Manikganj', 'Munshiganj', 'Rajbari', 'Shariatpur', 'Faridpur', 'Madaripur', 'Gopalganj'],
    'chittagong': ['Chittagong', 'Cox\'s Bazar', 'Rangamati', 'Bandarban', 'Khagrachhari', 'Feni', 'Lakshmipur', 'Chandpur', 'Comilla', 'Noakhali', 'Brahmanbaria'],
    'rajshahi': ['Rajshahi', 'Natore', 'Nawabganj', 'Naogaon', 'Bogra', 'Joypurhat', 'Pabna', 'Sirajganj', 'Kushtia', 'Meherpur', 'Chuadanga', 'Jhenaidah', 'Magura', 'Narail'],
    'khulna': ['Khulna', 'Bagerhat', 'Satkhira', 'Jessore', 'Jhenaidah', 'Magura', 'Narail', 'Kushtia', 'Meherpur', 'Chuadanga'],
    'barisal': ['Barisal', 'Bhola', 'Patuakhali', 'Pirojpur', 'Barguna', 'Jhalokati'],
    'sylhet': ['Sylhet', 'Moulvibazar', 'Habiganj', 'Sunamganj'],
    'rangpur': ['Rangpur', 'Panchagarh', 'Nilphamari', 'Lalmonirhat', 'Kurigram', 'Gaibandha', 'Dinajpur', 'Thakurgaon'],
    'mymensingh': ['Mymensingh', 'Netrokona', 'Jamalpur', 'Sherpur']
};

// Upazila data for each district
const upazilaData = {
    'Dhaka': ['Dhanmondi', 'Gulshan', 'Banani', 'Uttara', 'Mirpur', 'Mohammadpur', 'Ramna', 'Sutrapur', 'Kotwali', 'Lalbagh', 'Hazaribagh', 'Keraniganj', 'Savar', 'Dohar', 'Nawabganj', 'Dhamrai'],
    'Gazipur': ['Gazipur Sadar', 'Kaliakair', 'Kapasia', 'Sreepur'],
    'Narayanganj': ['Narayanganj Sadar', 'Sonargaon', 'Bandar', 'Rupganj', 'Araihazar'],
    'Tangail': ['Tangail Sadar', 'Sakhipur', 'Basail', 'Madhupur', 'Ghatail', 'Kalihati', 'Nagarpur', 'Mirzapur', 'Gopalpur', 'Delduar', 'Bhuapur', 'Dhanbari'],
    'Chittagong': ['Chittagong Sadar', 'Hathazari', 'Raojan', 'Sandwip', 'Satkania', 'Banshkhali', 'Boalkhali', 'Anwara', 'Chandanaish', 'Fatikchhari', 'Lohagara', 'Patiya', 'Rangunia'],
    'Cox\'s Bazar': ['Cox\'s Bazar Sadar', 'Chakaria', 'Kutubdia', 'Ukhiya', 'Teknaf', 'Ramu', 'Pekua'],
    'Comilla': ['Comilla Sadar', 'Barura', 'Brahmanpara', 'Burichang', 'Chandina', 'Chauddagram', 'Daudkandi', 'Debidwar', 'Homna', 'Laksam', 'Monohorgonj', 'Meghna', 'Muradnagar', 'Nangalkot', 'Titas'],
    'Rajshahi': ['Rajshahi Sadar', 'Bagha', 'Bagatipara', 'Charghat', 'Durgapur', 'Godagari', 'Mohanpur', 'Paba', 'Puthia', 'Tanore'],
    'Bogra': ['Bogra Sadar', 'Adamdighi', 'Dhunat', 'Dhupchanchia', 'Gabtali', 'Kahaloo', 'Nandigram', 'Sariakandi', 'Shajahanpur', 'Sherpur', 'Shibganj', 'Sonatala'],
    'Khulna': ['Khulna Sadar', 'Batiaghata', 'Dacope', 'Dumuria', 'Dighalia', 'Koyra', 'Paikgachha', 'Phultala', 'Rupsa', 'Terokhada'],
    'Barisal': ['Barisal Sadar', 'Agailjhara', 'Babuganj', 'Bakerganj', 'Banaripara', 'Gaurnadi', 'Hizla', 'Mehendiganj', 'Muladi', 'Wazirpur'],
    'Sylhet': ['Sylhet Sadar', 'Balaganj', 'Beanibazar', 'Bishwanath', 'Balaganj', 'Companigonj', 'Fenchuganj', 'Golapganj', 'Gowainghat', 'Jaintiapur', 'Kanaighat', 'Osmani Nagar', 'Zakiganj'],
    'Rangpur': ['Rangpur Sadar', 'Badarganj', 'Gangachara', 'Kaunia', 'Mithapukur', 'Pirgacha', 'Pirganj', 'Taraganj'],
    'Mymensingh': ['Mymensingh Sadar', 'Bhaluka', 'Dhobaura', 'Fulbaria', 'Gaffargaon', 'Gauripur', 'Haluaghat', 'Ishwarganj', 'Muktagachha', 'Nandail', 'Phulpur', 'Tarakanda']
};

// Function to populate districts based on division
function populateDistricts(division) {
    const districtSelect = document.getElementById('district');
    const upazilaSelect = document.getElementById('area_name');
    
    districtSelect.innerHTML = '<option value="">Select District</option>';
    upazilaSelect.innerHTML = '<option value="">Select Upazila</option>';
    
    if (division && districtData[division]) {
        districtData[division].forEach(district => {
            const option = document.createElement('option');
            option.value = district;
            option.textContent = district;
            districtSelect.appendChild(option);
        });
    }
}

// Function to populate upazilas based on district
function populateUpazilas(district) {
    const upazilaSelect = document.getElementById('area_name');
    
    upazilaSelect.innerHTML = '<option value="">Select Upazila</option>';
    
    if (district && upazilaData[district]) {
        upazilaData[district].forEach(upazila => {
            const option = document.createElement('option');
            option.value = upazila;
            option.textContent = upazila;
            upazilaSelect.appendChild(option);
        });
    }
}

// Initialize dropdown functionality
document.addEventListener('DOMContentLoaded', function() {
    const divisionSelect = document.getElementById('division');
    const districtSelect = document.getElementById('district');
    const upazilaSelect = document.getElementById('area_name');
    
    if (divisionSelect) {
        divisionSelect.addEventListener('change', function() {
            populateDistricts(this.value);
        });
    }
    
    if (districtSelect) {
        districtSelect.addEventListener('change', function() {
            populateUpazilas(this.value);
        });
    }
});

function openCreateModal() {
    document.getElementById('modalTitle').textContent = 'Add New Land Property';
    document.getElementById('action').value = 'create';
    document.getElementById('land_property_id').value = '';
    document.getElementById('landPropertyForm').reset();
    document.getElementById('is_active').checked = true;
    
    // Reset dropdowns
    document.getElementById('district').innerHTML = '<option value="">Select District</option>';
    document.getElementById('area_name').innerHTML = '<option value="">Select Upazila</option>';
    
    document.getElementById('landPropertyModal').classList.remove('hidden');
}

function openEditModal(id, name, area, location, division, district, area_name, description, project_status, property_type, price_per_katha, total_plots, available_plots, amenities, is_featured, is_active) {
    document.getElementById('modalTitle').textContent = 'Edit Land Property';
    document.getElementById('action').value = 'update';
    document.getElementById('land_property_id').value = id;
    document.getElementById('name').value = name;
    document.getElementById('area').value = area;
    document.getElementById('location').value = location;
    document.getElementById('division').value = division;
    
    // Populate districts and upazilas for edit modal
    populateDistricts(division);
    setTimeout(() => {
        document.getElementById('district').value = district;
        populateUpazilas(district);
        setTimeout(() => {
            document.getElementById('area_name').value = area_name;
        }, 100);
    }, 100);
    
    document.getElementById('description').value = description;
    document.getElementById('project_status').value = project_status;
    document.getElementById('property_type').value = property_type;
    document.getElementById('price_per_katha').value = price_per_katha || '';
    document.getElementById('total_plots').value = total_plots || '';
    document.getElementById('available_plots').value = available_plots || '';
    document.getElementById('amenities').value = amenities;
    document.getElementById('is_featured').checked = is_featured;
    document.getElementById('is_active').checked = is_active;
    document.getElementById('landPropertyModal').classList.remove('hidden');
}

function closeModal() {
    document.getElementById('landPropertyModal').classList.add('hidden');
}

function confirmDelete(id, name) {
    document.getElementById('delete_land_property_id').value = id;
    document.getElementById('deleteModal').classList.remove('hidden');
}

function closeDeleteModal() {
    document.getElementById('deleteModal').classList.add('hidden');
}

// Close modals when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('landPropertyModal');
    const deleteModal = document.getElementById('deleteModal');
    if (event.target === modal) {
        modal.classList.add('hidden');
    }
    if (event.target === deleteModal) {
        deleteModal.classList.add('hidden');
    }
}
</script>
{% endblock %}