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

{% block title %}Daftar Perawatan - Inventaris HMI{% endblock %}
{% block page_title %}Daftar Perawatan{% endblock %}
{% block page_subtitle %}Kelola perawatan barang inventaris{% endblock %}

{% block extra_css %}
<style>
    /* Custom Filter Styles */
    .filter-container {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
        border: 2px solid #dcfce7;
        box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1);
    }
    
    .filter-header {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 0.75rem 0.75rem 0 0;
        margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    }
    
    .filter-select-wrapper {
        position: relative;
    }
    
    .filter-select {
        width: 100%;
        padding: 0.75rem 2.5rem 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.875rem;
        transition: all 0.2s;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2310b981' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.25rem;
    }
    
    .filter-select:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
    
    .filter-select:hover {
        border-color: #9ca3af;
    }
    
    .filter-input-wrapper {
        position: relative;
    }
    
    .filter-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #d1d5db;
        border-radius: 0.75rem;
        background-color: #ffffff;
        color: #111827;
        font-size: 0.875rem;
        transition: all 0.2s;
    }
    
    .filter-input:focus {
        outline: none;
        border-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    }
    
    .filter-input:hover {
        border-color: #9ca3af;
    }
    
    .filter-input::placeholder {
        color: #9ca3af;
    }
    
    .filter-button {
        padding: 0.75rem 1.5rem;
        border-radius: 0.75rem;
        font-weight: 600;
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    
    .filter-button-primary {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
    }
    
    .filter-button-primary:hover {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.4);
        transform: translateY(-1px);
    }
    
    .filter-button-secondary {
        background: #f3f4f6;
        color: #374151;
        border: 2px solid #e5e7eb;
    }
    
    .filter-button-secondary:hover {
        background: #e5e7eb;
        border-color: #d1d5db;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 py-6 px-4 sm:py-8 sm:px-6 lg:px-8">
    <div class="space-y-8 max-w-7xl mx-auto">
        <!-- Header Actions -->
        <div class="bg-white rounded-2xl shadow-xl p-8 border-2 border-green-100">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="flex-1">
                    <div class="flex items-center space-x-3 mb-2">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-md">
                            <i class="fas fa-tools text-white text-xl"></i>
                        </div>
                        <div>
                            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900">Daftar Perawatan</h1>
                            <p class="text-sm sm:text-base text-gray-600 mt-1">Kelola dan monitoring perawatan barang inventaris</p>
                        </div>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'inventaris:perawatan_create' %}" 
                       class="inline-flex items-center px-4 py-2.5 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-md hover:shadow-lg font-medium">
                        <i class="fas fa-plus mr-2"></i>
                        <span class="hidden sm:inline">Tambah Perawatan</span>
                        <span class="sm:hidden">Tambah</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Filter Section -->
        {% if filter_form %}
        <div class="filter-container rounded-2xl shadow-xl p-6">
            <div class="filter-header">
                <h3 class="text-lg font-bold flex items-center">
                    <i class="fas fa-filter mr-2"></i>
                    Filter & Pencarian
                </h3>
            </div>
            <form method="get" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <!-- Jenis Perawatan Filter -->
                <div>
                    <label for="jenis_perawatan" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-tag text-green-600 mr-1"></i>Jenis Perawatan
                    </label>
                    <div class="filter-select-wrapper">
                        <select name="jenis_perawatan" id="jenis_perawatan" class="filter-select">
                            <option value="">Semua Jenis</option>
                            <option value="preventif" {% if request.GET.jenis_perawatan == 'preventif' %}selected{% endif %}>Preventif</option>
                            <option value="korektif" {% if request.GET.jenis_perawatan == 'korektif' %}selected{% endif %}>Korektif</option>
                            <option value="pembersihan" {% if request.GET.jenis_perawatan == 'pembersihan' %}selected{% endif %}>Pembersihan</option>
                            <option value="kalibrasi" {% if request.GET.jenis_perawatan == 'kalibrasi' %}selected{% endif %}>Kalibrasi</option>
                            <option value="upgrade" {% if request.GET.jenis_perawatan == 'upgrade' %}selected{% endif %}>Upgrade</option>
                        </select>
                    </div>
                </div>

                <!-- Teknisi Filter -->
                <div>
                    <label for="teknisi" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-user-cog text-green-600 mr-1"></i>Teknisi
                    </label>
                    <div class="filter-input-wrapper">
                        <input type="text" name="teknisi" id="teknisi" value="{{ request.GET.teknisi }}" 
                               placeholder="Cari teknisi..." 
                               class="filter-input">
                    </div>
                </div>

                <!-- Tanggal Dari -->
                <div>
                    <label for="tanggal_dari" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar-alt text-green-600 mr-1"></i>Tanggal Dari
                    </label>
                    <div class="filter-input-wrapper">
                        <input type="date" name="tanggal_dari" id="tanggal_dari" value="{{ request.GET.tanggal_dari }}" 
                               class="filter-input">
                    </div>
                </div>

                <!-- Tanggal Sampai -->
                <div>
                    <label for="tanggal_sampai" class="block text-sm font-semibold text-gray-700 mb-2">
                        <i class="fas fa-calendar-check text-green-600 mr-1"></i>Tanggal Sampai
                    </label>
                    <div class="filter-input-wrapper">
                        <input type="date" name="tanggal_sampai" id="tanggal_sampai" value="{{ request.GET.tanggal_sampai }}" 
                               class="filter-input">
                    </div>
                </div>

                <!-- Filter Buttons -->
                <div class="flex items-end space-x-2 md:col-span-2 lg:col-span-4">
                    <button type="submit" class="filter-button filter-button-primary flex-1">
                        <i class="fas fa-search mr-2"></i>Filter
                    </button>
                    <a href="{% url 'inventaris:perawatan_list' %}" class="filter-button filter-button-secondary px-4">
                        <i class="fas fa-redo mr-2"></i>Reset
                    </a>
                </div>
            </form>
        </div>
        {% endif %}

        <!-- Grid View -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            {% for perawatan in page_obj %}
                <div class="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-200 hover:border-green-300 transition-all duration-300 hover:shadow-2xl transform hover:-translate-y-2">
                    <!-- Header -->
                    <div class="bg-gradient-to-br from-green-500 via-green-600 to-emerald-600 px-6 py-5 text-white relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-40 h-40 bg-white/10 rounded-full -mr-20 -mt-20"></div>
                        <div class="absolute bottom-0 left-0 w-32 h-32 bg-white/5 rounded-full -ml-16 -mb-16"></div>
                        <div class="relative z-10">
                            <div class="flex items-center justify-between mb-3">
                                <div class="w-14 h-14 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center flex-shrink-0 shadow-lg">
                                    <i class="fas fa-tools text-2xl"></i>
                                </div>
                                <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold bg-white/25 backdrop-blur-sm text-white border border-white/30 shadow-sm">
                                    {{ perawatan.get_jenis_perawatan_display }}
                                </span>
                            </div>
                            <div>
                                <h3 class="font-bold text-lg mb-1 truncate">{{ perawatan.barang.nama }}</h3>
                                <p class="text-green-100 text-sm">{{ perawatan.barang.kode_barang }}</p>
                            </div>
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="p-6">
                        <!-- Tanggal & Teknisi -->
                        <div class="mb-4 space-y-2">
                            <div class="flex items-center text-sm text-gray-600">
                                <i class="fas fa-calendar-alt text-green-600 mr-2 w-5"></i>
                                <span class="font-medium">{{ perawatan.tanggal_perawatan|date:"d M Y" }}</span>
                            </div>
                            {% if perawatan.teknisi %}
                            <div class="flex items-center text-sm text-gray-600">
                                <i class="fas fa-user-cog text-green-600 mr-2 w-5"></i>
                                <span>{{ perawatan.teknisi }}</span>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Kondisi Before/After -->
                        <div class="mb-5 p-4 bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl border-2 border-gray-200">
                            <div class="flex items-center justify-between">
                                <div class="flex-1 text-center">
                                    <div class="text-xs text-gray-500 mb-1 font-medium">Sebelum</div>
                                    <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-gray-200 text-gray-800">
                                        {{ perawatan.kondisi_sebelum.nama }}
                                    </span>
                                </div>
                                <div class="mx-3">
                                    <i class="fas fa-arrow-right text-green-600 text-lg"></i>
                                </div>
                                <div class="flex-1 text-center">
                                    <div class="text-xs text-gray-500 mb-1 font-medium">Sesudah</div>
                                    <span class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-semibold bg-green-200 text-green-800">
                                        {{ perawatan.kondisi_sesudah.nama }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Biaya -->
                        <div class="mb-5 p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl border-2 border-green-200">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-money-bill-wave text-green-600 mr-2"></i>
                                    <span class="text-sm font-semibold text-gray-700">Biaya Perawatan</span>
                                </div>
                                <div class="text-xl font-bold text-green-600">Rp {{ perawatan.biaya|number_idr }}</div>
                            </div>
                        </div>

                        <!-- Deskripsi -->
                        {% if perawatan.deskripsi %}
                        <div class="mb-5">
                            <p class="text-gray-600 text-sm leading-relaxed line-clamp-2">{{ perawatan.deskripsi }}</p>
                        </div>
                        {% endif %}

                        <!-- Actions -->
                        <div class="flex items-center space-x-3">
                            <a href="{% url 'inventaris:barang_detail' perawatan.barang.pk %}" 
                               class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-blue-100 hover:bg-blue-200 text-blue-700 rounded-xl transition-all duration-200 text-sm font-semibold shadow-md hover:shadow-lg">
                                <i class="fas fa-eye mr-2 text-sm"></i>
                                <span>Lihat Barang</span>
                            </a>
                            <form method="post" action="{% url 'inventaris:perawatan_delete' perawatan.pk %}" class="inline delete-perawatan-form">
                                {% csrf_token %}
                                <button type="submit" 
                                        class="inline-flex items-center justify-center px-3.5 py-2.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg">
                                    <i class="fas fa-trash text-base"></i>
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-t-2 border-gray-200">
                        <div class="flex items-center justify-between text-xs text-gray-500">
                            <span class="flex items-center">
                                <i class="fas fa-calendar-alt mr-2 text-green-600 text-sm"></i>
                                <span class="font-medium">{{ perawatan.created_at|date:"d M Y" }}</span>
                            </span>
                            {% if perawatan.dokumen %}
                            <span class="flex items-center text-green-600">
                                <i class="fas fa-file-pdf mr-1 text-sm"></i>
                                <span class="font-medium">Ada Dokumen</span>
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% empty %}
                <div class="md:col-span-2 lg:col-span-3">
                    <div class="text-center py-20 bg-white rounded-2xl shadow-xl border-2 border-dashed border-gray-200">
                        <div class="w-28 h-28 bg-gradient-to-br from-green-100 via-emerald-100 to-green-200 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg">
                            <i class="fas fa-tools text-5xl text-green-600"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">Belum ada perawatan</h3>
                        <p class="text-gray-600 mb-8 max-w-md mx-auto">Mulai dengan menambahkan perawatan pertama untuk melacak maintenance barang inventaris</p>
                        <a href="{% url 'inventaris:perawatan_create' %}" 
                           class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg hover:from-green-600 hover:to-green-700 transition-all duration-200 shadow-lg hover:shadow-xl font-medium">
                            <i class="fas fa-plus mr-2"></i>
                            Tambah Perawatan Pertama
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if page_obj.has_other_pages %}
            <div class="bg-white rounded-2xl shadow-xl px-6 sm:px-8 py-6 border-2 border-gray-200">
                <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 request.GET.jenis_perawatan %}&jenis_perawatan={{ request.GET.jenis_perawatan }}{% endif %}{% if request.GET.teknisi %}&teknisi={{ request.GET.teknisi }}{% endif %}{% if request.GET.tanggal_dari %}&tanggal_dari={{ request.GET.tanggal_dari }}{% endif %}{% if request.GET.tanggal_sampai %}&tanggal_sampai={{ request.GET.tanggal_sampai }}{% endif %}" 
                               class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors font-medium">
                                <i class="fas fa-chevron-left mr-2"></i>Sebelumnya
                            </a>
                        {% endif %}
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}{% if request.GET.jenis_perawatan %}&jenis_perawatan={{ request.GET.jenis_perawatan }}{% endif %}{% if request.GET.teknisi %}&teknisi={{ request.GET.teknisi }}{% endif %}{% if request.GET.tanggal_dari %}&tanggal_dari={{ request.GET.tanggal_dari }}{% endif %}{% if request.GET.tanggal_sampai %}&tanggal_sampai={{ request.GET.tanggal_sampai }}{% endif %}" 
                               class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors font-medium">
                                Selanjutnya<i class="fas fa-chevron-right ml-2"></i>
                            </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">
                                Menampilkan <span class="font-semibold text-green-600">{{ page_obj.start_index }}</span> sampai 
                                <span class="font-semibold text-green-600">{{ page_obj.end_index }}</span> dari 
                                <span class="font-semibold text-green-600">{{ page_obj.paginator.count }}</span> perawatan
                            </p>
                        </div>
                        <div>
                            <nav class="relative z-0 inline-flex rounded-lg shadow-sm -space-x-px" aria-label="Pagination">
                                {% if page_obj.has_previous %}
                                    <a href="?page={{ page_obj.previous_page_number }}{% if request.GET.jenis_perawatan %}&jenis_perawatan={{ request.GET.jenis_perawatan }}{% endif %}{% if request.GET.teknisi %}&teknisi={{ request.GET.teknisi }}{% endif %}{% if request.GET.tanggal_dari %}&tanggal_dari={{ request.GET.tanggal_dari }}{% endif %}{% if request.GET.tanggal_sampai %}&tanggal_sampai={{ request.GET.tanggal_sampai }}{% endif %}" 
                                       class="relative inline-flex items-center px-3 py-2 rounded-l-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-green-50 hover:text-green-600 transition-colors">
                                        <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-green-500 bg-gradient-to-r from-green-500 to-green-600 text-white text-sm font-semibold">
                                            {{ num }}
                                        </span>
                                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                        <a href="?page={{ num }}{% if request.GET.jenis_perawatan %}&jenis_perawatan={{ request.GET.jenis_perawatan }}{% endif %}{% if request.GET.teknisi %}&teknisi={{ request.GET.teknisi }}{% endif %}{% if request.GET.tanggal_dari %}&tanggal_dari={{ request.GET.tanggal_dari }}{% endif %}{% if request.GET.tanggal_sampai %}&tanggal_sampai={{ request.GET.tanggal_sampai }}{% 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-green-50 hover:text-green-600 transition-colors">
                                            {{ num }}
                                        </a>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if page_obj.has_next %}
                                    <a href="?page={{ page_obj.next_page_number }}{% if request.GET.jenis_perawatan %}&jenis_perawatan={{ request.GET.jenis_perawatan }}{% endif %}{% if request.GET.teknisi %}&teknisi={{ request.GET.teknisi }}{% endif %}{% if request.GET.tanggal_dari %}&tanggal_dari={{ request.GET.tanggal_dari }}{% endif %}{% if request.GET.tanggal_sampai %}&tanggal_sampai={{ request.GET.tanggal_sampai }}{% endif %}" 
                                       class="relative inline-flex items-center px-3 py-2 rounded-r-lg border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-green-50 hover:text-green-600 transition-colors">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                {% endif %}
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Handle delete perawatan forms
document.addEventListener('DOMContentLoaded', function() {
    const deleteForms = document.querySelectorAll('.delete-perawatan-form');
    deleteForms.forEach(form => {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            const confirmed = await confirmDelete('Apakah Anda yakin ingin menghapus perawatan ini?');
            if (confirmed) {
                this.submit();
            }
        });
    });
});
</script>
{% endblock %}