{% extends 'admin/base.html' %}
{% load static %}
{% load currency_filters %}

{% block title %}Detail Perawatan - {{ perawatan.barang.nama }}{% endblock %}
{% block page_title %}Detail Perawatan{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-4 px-2 sm:px-4 lg:px-6 xl:px-8">
    <div class="w-full">
        <!-- Header -->
        <div class="mb-6 sm:mb-8">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0">
                <div class="flex items-center space-x-3">
                    <a href="{% url 'inventaris_admin:perawatan_list' %}" 
                       class="w-10 h-10 bg-white border border-gray-300 rounded-xl flex items-center justify-center hover:bg-gray-50 transition-colors duration-200 shadow-sm">
                        <i class="fas fa-arrow-left text-gray-600"></i>
                    </a>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">Detail Perawatan</h1>
                        <p class="text-sm text-gray-600 mt-1">{{ perawatan.barang.nama }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="space-y-4 sm:space-y-6">
            <!-- Barang Information -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-4 sm:mb-6 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-box text-white text-sm sm:text-base"></i>
                    </div>
                    Informasi Barang
                </h2>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Nama Barang</p>
                        <a href="{% url 'inventaris_admin:barang_detail' perawatan.barang.pk %}" 
                           class="text-xs sm:text-sm text-blue-600 hover:text-blue-700 font-medium">
                            {{ perawatan.barang.nama }}
                        </a>
                    </div>
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Kode Barang</p>
                        <p class="text-xs sm:text-sm text-gray-900 font-medium">{{ perawatan.barang.kode_barang }}</p>
                    </div>
                </div>
            </div>

            <!-- Perawatan Details -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-4 sm:mb-6 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-tools text-white text-sm sm:text-base"></i>
                    </div>
                    Detail Perawatan
                </h2>
                
                <div class="space-y-4">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Tanggal Perawatan</p>
                            <p class="text-xs sm:text-sm text-gray-900 font-medium">{{ perawatan.tanggal_perawatan|date:"d M Y" }}</p>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Jenis Perawatan</p>
                            <p class="text-xs sm:text-sm text-gray-900 font-medium">{{ perawatan.jenis_perawatan }}</p>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Teknisi</p>
                            <p class="text-xs sm:text-sm text-gray-900 font-medium">
                                {% if perawatan.teknisi %}
                                    {{ perawatan.teknisi }}
                                {% else %}
                                    -
                                {% endif %}
                            </p>
                        </div>
                        {% if perawatan.biaya %}
                        <div>
                            <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Biaya</p>
                            <p class="text-xs sm:text-sm text-gray-900 font-medium">Rp {{ perawatan.biaya|number_idr }}</p>
                        </div>
                        {% endif %}
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-gray-100">
                        <div>
                            <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Kondisi Sebelum</p>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if perawatan.kondisi_sebelum.kondisi == 'baik' %}bg-green-100 text-green-800
                                {% elif perawatan.kondisi_sebelum.kondisi == 'rusak_ringan' %}bg-yellow-100 text-yellow-800
                                {% elif perawatan.kondisi_sebelum.kondisi == 'rusak_berat' %}bg-red-100 text-red-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ perawatan.kondisi_sebelum.get_kondisi_display }}
                            </span>
                        </div>
                        <div>
                            <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Kondisi Sesudah</p>
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if perawatan.kondisi_sesudah.kondisi == 'baik' %}bg-green-100 text-green-800
                                {% elif perawatan.kondisi_sesudah.kondisi == 'rusak_ringan' %}bg-yellow-100 text-yellow-800
                                {% elif perawatan.kondisi_sesudah.kondisi == 'rusak_berat' %}bg-red-100 text-red-800
                                {% else %}bg-gray-100 text-gray-800{% endif %}">
                                {{ perawatan.kondisi_sesudah.get_kondisi_display }}
                            </span>
                        </div>
                    </div>

                    {% if perawatan.deskripsi %}
                    <div class="pt-4 border-t border-gray-100">
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-2">Deskripsi</p>
                        <p class="text-xs sm:text-sm text-gray-900 bg-gradient-to-r from-gray-50 to-gray-100 p-3 rounded-lg border border-gray-200 whitespace-pre-line">{{ perawatan.deskripsi }}</p>
                    </div>
                    {% endif %}

                    {% if perawatan.dokumen %}
                    <div class="pt-4 border-t border-gray-100">
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-2">Dokumen</p>
                        <a href="{{ perawatan.dokumen.url }}" target="_blank" 
                           class="inline-flex items-center px-3 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-lg transition-colors duration-200">
                            <i class="fas fa-file-pdf mr-2"></i>
                            <span class="text-xs sm:text-sm font-medium">Lihat Dokumen</span>
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Metadata -->
            <div class="bg-white rounded-xl shadow-lg p-4 sm:p-6">
                <h2 class="text-lg sm:text-xl font-bold text-gray-900 mb-4 sm:mb-6 flex items-center">
                    <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-gray-500 to-gray-600 rounded-lg flex items-center justify-center mr-2 sm:mr-3 shadow-md">
                        <i class="fas fa-info-circle text-white text-sm sm:text-base"></i>
                    </div>
                    Informasi Tambahan
                </h2>
                
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Dibuat</p>
                        <p class="text-xs sm:text-sm text-gray-900 font-medium">{{ perawatan.created_at|date:"d M Y H:i" }}</p>
                    </div>
                    {% if perawatan.created_by %}
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Dibuat Oleh</p>
                        <p class="text-xs sm:text-sm text-gray-900 font-medium">
                            {{ perawatan.created_by.nama_lengkap|default:perawatan.created_by.username }}
                        </p>
                    </div>
                    {% endif %}
                    {% if perawatan.updated_at %}
                    <div>
                        <p class="text-xs sm:text-sm font-semibold text-gray-500 mb-1">Diperbarui</p>
                        <p class="text-xs sm:text-sm text-gray-900 font-medium">{{ perawatan.updated_at|date:"d M Y H:i" }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}