{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<script>
    function confirmDelete(listingId) {
        if (confirm("Are you sure you want to delete this listing?")) {
            fetch(`/delete-listing/${listingId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(response => {
                if (response.ok) {
                    window.location.reload();
                }
            });
        }
    }
</script>

<div class="container mt-4">
    <h1 class="text-center">Host Dashboard</h1>
    <div class="mt-4">
        <h2>Your Listings</h2>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Title</th>
                        <th>Location</th>
                        <th>Property Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for listing in listings %}
                        <tr>
                            <td>{{ listing.id }}</td>
                            <td>{{ listing.title }}</td>
                            <td>{{ listing.location }}</td>
                            <td>{{ listing.property_type }}</td>
                            <td>
                                <a href="/edit-listing/{{ listing.id }}" class="btn btn-warning btn-sm">Edit</a>
                                <button onclick="confirmDelete({{ listing.id }})" class="btn btn-danger btn-sm">Delete</button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="mt-5">
        <h2>Bookings</h2>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Booked By (User ID)</th>
                        <th>Listing</th>
                        <th>Location</th>
                        <th>Property Type</th>
                        <th>Check-in</th>
                        <th>Check-out</th>
                    </tr>
                </thead>
                <tbody>
                    {% for booking in bookings %}
                        <tr>
                            <td>{{ booking.user_id }}</td>
                            <td>{{ booking.listing.title if booking.listing else 'Unknown' }}</td>
                            <td>{{ booking.listing.location if booking.listing else 'Unknown' }}</td>
                            <td>{{ booking.listing.property_type if booking.listing else 'Unknown' }}</td>
                            <td>{{ booking.check_in.strftime('%Y-%m-%d') }}</td>
                            <td>{{ booking.check_out.strftime('%Y-%m-%d') }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="mt-5">
        <h2>Registered Users</h2>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Document</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                        <tr>
                            <td>{{ user.id }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.phone }}</td>
                            <td>
                                {% if user.id in documents %}
                                    <a href="/uploads/documents/{{ documents[user.id].filename }}" target="_blank">View Document</a>
                                {% else %}
                                    Not Verified
                                {% endif %}
                            </td>
                            <td>
                                {% if user.id in documents and not documents[user.id].verified %}
                                    <form method="POST" action="/verify-document/{{ documents[user.id].id }}">
                                        <button type="submit" class="btn btn-success btn-sm">Verify</button>
                                    </form>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}