{% extends 'admin_panel/base.html' %}
{% load static %}
{% load business_filters %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/business/business-list.css' %}">
<style>
/* Registration specific styles */
.registration-status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
}

.registration-status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

.registration-status-approved {
    background-color: #d1fae5;
    color: #065f46;
}

.registration-status-rejected {
    background-color: #fee2e2;
    color: #991b1b;
}

.registration-status-under-review {
    background-color: #dbeafe;
    color: #1e40af;
}

.registration-type-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 500;
    background-color: #e5e7eb;
    color: #374151;
}

.registration-stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.registration-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.registration-stats-item {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.registration-stats-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.registration-stats-label {
    font-size: 0.875rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .registration-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .registration-stats-number {
        font-size: 1.5rem;
    }
}
</style>
{% endblock extra_css %}

{% block content %}
<div class="business-list-container">

    <div class="business-page-header">
        <div>
            <h1 class="business-page-title">
                <i class="fas fa-clipboard-list"></i>Pendaftaran Bisnis
            </h1>
            <p class="business-page-subtitle">Kelola pendaftaran bisnis online dari masyarakat</p>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="registration-stats-card">
        <h3 class="mb-3"><i class="fas fa-chart-bar"></i> Statistik Pendaftaran</h3>
        <div class="registration-stats-grid">
            <div class="registration-stats-item">
                <div class="registration-stats-number">{{ stats.total }}</div>
                <div class="registration-stats-label">Total Pendaftaran</div>
            </div>
            <div class="registration-stats-item">
                <div class="registration-stats-number">{{ stats.pending }}</div>
                <div class="registration-stats-label">Menunggu Persetujuan</div>
            </div>
            <div class="registration-stats-item">
                <div class="registration-stats-number">{{ stats.approved }}</div>
                <div class="registration-stats-label">Disetujui</div>
            </div>
            <div class="registration-stats-item">
                <div class="registration-stats-number">{{ stats.rejected }}</div>
                <div class="registration-stats-label">Ditolak</div>
            </div>
            <div class="registration-stats-item">
                <div class="registration-stats-number">{{ stats.under_review }}</div>
                <div class="registration-stats-label">Sedang Ditinjau</div>
            </div>
        </div>
    </div>

    <div class="business-search-filter">
        <form method="GET" class="business-filter-form">
            <div>
                <label for="search" class="form-label">Pencarian</label>
                <input type="text" class="form-control" id="search" name="search"
                       value="{{ search }}" placeholder="Cari nama bisnis, pemilik, NIK, atau email...">
            </div>
            <div>
                <label for="status" class="form-label">Status</label>
                <select class="form-select" id="status" name="status">
                    <option value="">Semua Status</option>
                    <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Menunggu Persetujuan</option>
                    <option value="approved" {% if status_filter == 'approved' %}selected{% endif %}>Disetujui</option>
                    <option value="rejected" {% if status_filter == 'rejected' %}selected{% endif %}>Ditolak</option>
                    <option value="under_review" {% if status_filter == 'under_review' %}selected{% endif %}>Sedang Ditinjau</option>
                </select>
            </div>
            <div>
                <label for="type" class="form-label">Jenis Bisnis</label>
                <select class="form-select" id="type" name="type">
                    <option value="">Semua Jenis</option>
                    <option value="umkm" {% if type_filter == 'umkm' %}selected{% endif %}>UMKM</option>
                    <option value="koperasi" {% if type_filter == 'koperasi' %}selected{% endif %}>Koperasi</option>
                    <option value="bumg" {% if type_filter == 'bumg' %}selected{% endif %}>BUMG</option>
                    <option value="layanan_jasa" {% if type_filter == 'layanan_jasa' %}selected{% endif %}>Layanan Jasa</option>
                </select>
            </div>
            <div class="business-filter-actions">
                <label class="form-label">&nbsp;</label>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search me-1"></i>Cari
                </button>
                <a href="{% url 'admin_panel:business_registration_list' %}" class="btn btn-outline-secondary">
                    <i class="fas fa-times me-1"></i>Reset
                </a>
            </div>
        </form>
    </div>

    <div class="business-table-card">
        <div class="business-table-card-header">
            <h2 class="business-table-card-title">
                <i class="fas fa-list"></i>Daftar Pendaftaran Bisnis
                <span class="business-table-count-badge">{{ page_obj.paginator.count }}</span>
            </h2>
        </div>
        <div class="business-table-card-body">

            <div class="business-table-desktop">
                <table class="business-table">
                    <thead>
                        <tr>
                            <th style="width: 50px;">No</th>
                            <th>Bisnis & Pemilik</th>
                            <th style="width: 120px;">Jenis</th>
                            <th style="width: 100px;">Status</th>
                            <th style="width: 120px;">Tanggal Daftar</th>
                            <th style="width: 150px;">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for registration in page_obj %}
                        <tr>
                            <td>{{ forloop.counter0|add:page_obj.start_index }}</td>
                            <td>
                                <div class="business-table-cell-primary">{{ registration.business_name }}</div>
                                <div class="business-table-cell-secondary">
                                    <i class="fas fa-user"></i> {{ registration.owner_name }}
                                </div>
                                <div class="business-table-cell-secondary">
                                    <i class="fas fa-envelope"></i> {{ registration.owner_email }}
                                </div>
                            </td>
                            <td>
                                <span class="registration-type-badge">
                                    {{ registration.get_registration_type_display }}
                                </span>
                            </td>
                            <td>
                                <span class="registration-status-badge registration-status-{{ registration.status }}">
                                    {% if registration.status == 'pending' %}
                                        <i class="fas fa-clock"></i> Menunggu
                                    {% elif registration.status == 'approved' %}
                                        <i class="fas fa-check"></i> Disetujui
                                    {% elif registration.status == 'rejected' %}
                                        <i class="fas fa-times"></i> Ditolak
                                    {% elif registration.status == 'under_review' %}
                                        <i class="fas fa-eye"></i> Ditinjau
                                    {% endif %}
                                </span>
                            </td>
                            <td>
                                <div class="business-table-cell-primary">{{ registration.created_at|date:"d M Y" }}</div>
                                <div class="business-table-cell-secondary">{{ registration.created_at|date:"H:i" }}</div>
                            </td>
                            <td>
                                <div class="business-action-buttons">
                                    <a href="{% url 'admin_panel:business_registration_detail' registration.id %}" class="btn btn-outline-info" title="Detail">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    {% if registration.status == 'pending' %}
                                    <a href="{% url 'admin_panel:business_registration_approve' registration.id %}" class="btn btn-outline-success" title="Setujui">
                                        <i class="fas fa-check"></i>
                                    </a>
                                    <a href="{% url 'admin_panel:business_registration_reject' registration.id %}" class="btn btn-outline-danger" title="Tolak">
                                        <i class="fas fa-times"></i>
                                    </a>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="6">
                                <div class="business-empty-state">
                                    <i class="fas fa-inbox"></i>
                                    <p class="business-empty-state-title">Tidak ada pendaftaran bisnis</p>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <div class="business-mobile-list">
                {% for registration in page_obj %}
                <div class="business-mobile-card">
                    <div class="business-mobile-card-header">
                        <div>
                            <h3 class="business-mobile-card-title">{{ registration.business_name }}</h3>
                            <div class="business-mobile-card-subtitle">{{ registration.owner_name }}</div>
                        </div>
                        <div class="business-mobile-card-number">{{ forloop.counter0|add:page_obj.start_index }}</div>
                    </div>
                    <div class="business-mobile-card-body">
                        <div class="business-mobile-info-row">
                            <span class="business-mobile-info-label">Email</span>
                            <span class="business-mobile-info-value">{{ registration.owner_email }}</span>
                        </div>
                        <div class="business-mobile-info-row">
                            <span class="business-mobile-info-label">Jenis</span>
                            <span class="business-mobile-info-value">
                                <span class="registration-type-badge">
                                    {{ registration.get_registration_type_display }}
                                </span>
                            </span>
                        </div>
                        <div class="business-mobile-info-row">
                            <span class="business-mobile-info-label">Status</span>
                            <span class="business-mobile-info-value">
                                <span class="registration-status-badge registration-status-{{ registration.status }}">
                                    {% if registration.status == 'pending' %}
                                        <i class="fas fa-clock"></i> Menunggu
                                    {% elif registration.status == 'approved' %}
                                        <i class="fas fa-check"></i> Disetujui
                                    {% elif registration.status == 'rejected' %}
                                        <i class="fas fa-times"></i> Ditolak
                                    {% elif registration.status == 'under_review' %}
                                        <i class="fas fa-eye"></i> Ditinjau
                                    {% endif %}
                                </span>
                            </span>
                        </div>
                        <div class="business-mobile-info-row">
                            <span class="business-mobile-info-label">Tanggal Daftar</span>
                            <span class="business-mobile-info-value">{{ registration.created_at|date:"d M Y, H:i" }}</span>
                        </div>
                    </div>
                    <div class="business-mobile-card-footer">
                        <div class="business-mobile-actions">
                            <a href="{% url 'admin_panel:business_registration_detail' registration.id %}" class="btn btn-outline-info" title="Detail">
                                <i class="fas fa-eye"></i>
                            </a>
                            {% if registration.status == 'pending' %}
                            <a href="{% url 'admin_panel:business_registration_approve' registration.id %}" class="btn btn-outline-success" title="Setujui">
                                <i class="fas fa-check"></i>
                            </a>
                            <a href="{% url 'admin_panel:business_registration_reject' registration.id %}" class="btn btn-outline-danger" title="Tolak">
                                <i class="fas fa-times"></i>
                            </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="business-empty-state">
                    <i class="fas fa-inbox"></i>
                    <p class="business-empty-state-title">Tidak ada pendaftaran bisnis</p>
                </div>
                {% endfor %}
            </div>
        </div>

        {% if page_obj.has_other_pages %}
        <div class="business-pagination-wrapper">
            <ul class="business-pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1{% if search %}&amp;search={{ search }}{% endif %}{% if status_filter %}&amp;status={{ status_filter }}{% endif %}{% if type_filter %}&amp;type={{ type_filter }}{% endif %}">
                            <span class="business-pagination-text">First</span><span class="d-md-none">«</span>
                        </a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search %}&amp;search={{ search }}{% endif %}{% if status_filter %}&amp;status={{ status_filter }}{% endif %}{% if type_filter %}&amp;type={{ type_filter }}{% endif %}">‹</a>
                    </li>
                {% endif %}

                <li class="page-item active">
                    <span class="page-link">{{ page_obj.number }}/{{ page_obj.paginator.num_pages }}</span>
                </li>

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search %}&amp;search={{ search }}{% endif %}{% if status_filter %}&amp;status={{ status_filter }}{% endif %}{% if type_filter %}&amp;type={{ type_filter }}{% endif %}">›</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search %}&amp;search={{ search }}{% endif %}{% if status_filter %}&amp;status={{ status_filter }}{% endif %}{% if type_filter %}&amp;type={{ type_filter }}{% endif %}">
                            <span class="business-pagination-text">Last</span><span class="d-md-none">»</span>
                        </a>
                    </li>
                {% endif %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script>
console.log('Business registration list page initialized');
</script>
{% endblock extra_js %}