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

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/business/business-detail.css' %}">
<style>
/* Logo Styling */
.logo-container {
    display: inline-block;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
}

.logo-container:hover {
    border-color: #007bff;
    background: #f0f8ff;
}

.logo-image {
    max-width: 150px;
    max-height: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.no-logo-placeholder {
    padding: 40px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

/* Foto Styling */
.foto-container {
    display: inline-block;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
}

.foto-container:hover {
    border-color: #28a745;
    background: #f0fff4;
}

.foto-image {
    max-width: 400px;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.no-foto-placeholder {
    padding: 40px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

/* Header Logo Styling */
.business-detail-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.business-detail-header-info {
    flex: 1;
}

.business-detail-header-logo {
    flex-shrink: 0;
}

.header-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 12px;
    /* Tidak ada background, filter, atau shadow untuk logo transparan */
}

.header-logo-placeholder {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #dee2e6;
}

/* Responsive */
@media (max-width: 768px) {
    .business-detail-header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .header-logo, .header-logo-placeholder {
        width: 100px;
        height: 100px;
    }
    
    .logo-image {
        max-width: 120px;
        max-height: 120px;
    }
    
    .foto-image {
        max-width: 100%;
        max-height: 250px;
    }
}
</style>
{% endblock extra_css %}

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

    <div class="business-detail-page-header">
        <div class="business-detail-header-content">
            <div class="business-detail-header-logo">
                {% if bumg.logo_bumg %}
                    <img src="{{ bumg.logo_bumg.url }}" alt="Logo BUMG" class="header-logo">
                {% else %}
                    <div class="header-logo-placeholder">
                        <i class="fas fa-image fa-2x text-muted"></i>
                    </div>
                {% endif %}
            </div>
            <div class="business-detail-header-info">
                <h1 class="business-detail-page-title">
                    <i class="fas fa-building"></i>
                    {{ bumg.nama }}
                </h1>
                <p class="business-detail-page-subtitle">Detail lengkap BUMG</p>
                <div class="business-detail-page-badges">
                    <span class="business-detail-badge {% if bumg.status == 'aktif' %}business-detail-badge-success{% elif bumg.status == 'tidak_aktif' %}business-detail-badge-danger{% else %}business-detail-badge-warning{% endif %}">
                        {% if bumg.status == 'aktif' %}
                            <i class="fas fa-check-circle"></i> Aktif
                        {% elif bumg.status == 'tidak_aktif' %}
                            <i class="fas fa-times-circle"></i> Tidak Aktif
                        {% else %}
                            <i class="fas fa-clock"></i> Pending
                        {% endif %}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="business-detail-grid">

        <div>

            <div class="business-detail-card">
                <div class="business-detail-card-header">
                    <h5 class="business-detail-card-title">
                        <i class="fas fa-info-circle"></i>Informasi Dasar BUMG
                    </h5>
                </div>
                <div class="business-detail-card-body">
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Nama BUMG:</div>
                        <div class="business-detail-value">{{ bumg.nama|default:"-" }}</div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Nomor SK:</div>
                        <div class="business-detail-value">{{ bumg.nomor_sk|default:"-" }}</div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Tanggal SK:</div>
                        <div class="business-detail-value">
                            {% if bumg.tanggal_sk %}
                                {{ bumg.tanggal_sk|date:"d F Y" }}
                            {% else %}
                                <span class="business-detail-value-muted">-</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Website:</div>
                        <div class="business-detail-value">
                            {% if bumg.website %}
                                <a href="{{ bumg.website }}" target="_blank">
                                    {{ bumg.website }} <i class="fas fa-external-link-alt"></i>
                                </a>
                            {% else %}
                                <span class="business-detail-value-muted">-</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Alamat:</div>
                        <div class="business-detail-value">{{ bumg.alamat|default:"-" }}</div>
                    </div>
                </div>
            </div>

            <div class="business-detail-card">
                <div class="business-detail-card-header">
                    <h5 class="business-detail-card-title">
                        <i class="fas fa-users"></i>Pimpinan BUMG
                    </h5>
                </div>
                <div class="business-detail-card-body">
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Direktur:</div>
                        <div class="business-detail-value">{{ bumg.direktur|default:"-" }}</div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Komisaris:</div>
                        <div class="business-detail-value">{{ bumg.komisaris|default:"-" }}</div>
                    </div>
                </div>
            </div>

            <div class="business-detail-card">
                <div class="business-detail-card-header">
                    <h5 class="business-detail-card-title">
                        <i class="fas fa-chart-line"></i>Data Keuangan
                    </h5>
                </div>
                <div class="business-detail-card-body">
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Modal Dasar:</div>
                        <div class="business-detail-value business-detail-value-highlight">
                            {% if bumg.modal_dasar %}
                                {{ bumg.modal_dasar|rupiah }}
                            {% else %}
                                <span class="business-detail-value-muted">-</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Modal Disetor:</div>
                        <div class="business-detail-value business-detail-value-highlight">
                            {% if bumg.modal_disetor %}
                                {{ bumg.modal_disetor|rupiah }}
                            {% else %}
                                <span class="business-detail-value-muted">-</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <div class="business-detail-card">
                <div class="business-detail-card-header">
                    <h5 class="business-detail-card-title">
                        <i class="fas fa-briefcase"></i>Bidang Usaha
                    </h5>
                </div>
                <div class="business-detail-card-body">
                    <div class="business-detail-info-row">
                        <div class="business-detail-value">{{ bumg.bidang_usaha|safe|default:"-" }}</div>
                    </div>
                </div>
            </div>

            <div class="business-detail-card">
                <div class="business-detail-card-header">
                    <h5 class="business-detail-card-title">
                        <i class="fas fa-phone"></i>Informasi Kontak
                    </h5>
                </div>
                <div class="business-detail-card-body">
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Telepon:</div>
                        <div class="business-detail-value">
                            {% if bumg.telepon %}
                                <i class="fas fa-phone"></i> {{ bumg.telepon }}
                            {% else %}
                                <span class="business-detail-value-muted">-</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="business-detail-info-row">
                        <div class="business-detail-label">Email:</div>
                        <div class="business-detail-value">
                            {% if bumg.email %}
                                <i class="fas fa-envelope"></i> {{ bumg.email }}
                            {% else %}
                                <span class="business-detail-value-muted">-</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            {% if bumg.keterangan %}

            <div class="business-detail-card">
                <div class="business-detail-card-header">
                    <h5 class="business-detail-card-title">
                        <i class="fas fa-sticky-note"></i>Keterangan
                    </h5>
                </div>
                <div class="business-detail-card-body">
                    <div class="business-detail-info-row">
                        <div class="business-detail-value">{{ bumg.keterangan|safe }}</div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <div>
            <div class="business-detail-sidebar-sticky">

                <div class="business-detail-card">
                    <div class="business-detail-card-header">
                        <h5 class="business-detail-card-title">
                            <i class="fas fa-cogs"></i>Aksi
                        </h5>
                    </div>
                    <div class="business-detail-card-body">
                        <div class="business-detail-actions">
                            <a href="{% url 'admin_panel:bumg_edit' bumg.id %}" class="business-detail-btn business-detail-btn-warning">
                                <i class="fas fa-edit"></i>Edit BUMG
                            </a>
                            <a href="{% url 'admin_panel:bumg_list' %}" class="business-detail-btn business-detail-btn-secondary">
                                <i class="fas fa-arrow-left"></i>Kembali ke Daftar
                            </a>
                            <button type="button" class="business-detail-btn business-detail-btn-danger"
                                    onclick="showBusinessDeleteModal('{% url 'admin_panel:bumg_delete' bumg.id %}', '{{ bumg.nama|escapejs }}', 'BUMG')">
                                <i class="fas fa-trash-alt"></i>Hapus BUMG
                            </button>
                        </div>
                    </div>
                </div>

                <div class="business-detail-card">
                    <div class="business-detail-card-header">
                        <h5 class="business-detail-card-title">
                            <i class="fas fa-info"></i>Informasi Tambahan
                        </h5>
                    </div>
                    <div class="business-detail-card-body">
                        <div class="business-detail-info-row">
                            <div class="business-detail-label">ID BUMG:</div>
                            <div class="business-detail-value">#{{ bumg.id }}</div>
                        </div>
                        <div class="business-detail-info-row">
                            <div class="business-detail-label">Dibuat:</div>
                            <div class="business-detail-value">
                                {% if bumg.created_at %}
                                    {{ bumg.created_at|date:"d M Y, H:i" }}
                                {% else %}
                                    <span class="business-detail-value-muted">-</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="business-detail-info-row">
                            <div class="business-detail-label">Diperbarui:</div>
                            <div class="business-detail-value">
                                {% if bumg.updated_at %}
                                    {{ bumg.updated_at|date:"d M Y, H:i" }}
                                {% else %}
                                    <span class="business-detail-value-muted">-</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Foto BUMG Section -->
        <div class="business-detail-card">
            <div class="business-detail-card-header">
                <h5 class="business-detail-card-title">
                    <i class="fas fa-camera"></i> Foto BUMG
                </h5>
            </div>
            <div class="business-detail-card-body">
                {% if bumg.foto_bumg %}
                    <div class="foto-container text-center">
                        <img src="{{ bumg.foto_bumg.url }}" alt="Foto BUMG" class="foto-image">
                    </div>
                {% else %}
                    <div class="no-foto-placeholder text-center">
                        <i class="fas fa-camera fa-3x text-muted mb-3"></i>
                        <p class="text-muted">Tidak ada foto</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block extra_js %}
<script></script>
{% endblock extra_js %}