@extends('simaju.layouts.main')
@section('title', 'Import Siswa')
@section('page-title', 'Import Siswa')
@section('page-subtitle', 'Import data siswa dari file CSV/Excel')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <!-- Header -->
        <div class="mb-6">
            <h2 class="font-heading font-bold text-xl text-gray-800 mb-2">Import Data Siswa</h2>
            <p class="text-gray-500 text-sm">Upload file CSV atau Excel untuk mengimport data siswa secara massal</p>
        </div>

        <!-- Download Template Section -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-5 mb-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="bg-blue-500 text-white p-3 rounded-lg">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-800">Template Import Excel</h3>
                        <p class="text-sm text-gray-600">Download template Excel (.xlsx) terlebih dahulu sebelum import</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('simaju.siswa.template') }}" 
                       class="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-2 font-medium shadow-md hover:shadow-lg">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        Download Template Excel
                    </a>
                    <form action="{{ route('simaju.siswa.delete-all') }}" method="POST" class="inline">
                        @csrf @method('DELETE')
                        <button type="submit" 
                                onclick="return confirm('Anda yakin ingin menghapus SEMUA data siswa? Tindakan ini tidak dapat dibatalkan!')" 
                                class="px-5 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors flex items-center gap-2 font-medium shadow-md hover:shadow-lg">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Hapus Semua Data
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Upload Form -->
        <form action="{{ route('simaju.siswa.import-process') }}" method="POST" enctype="multipart/form-data" id="importForm">
            @csrf
            
            <!-- File Upload Area -->
            <div class="mb-6">
                <label class="block text-sm font-semibold text-gray-700 mb-3">Upload File Import</label>
                
                <div class="relative">
                    <input type="file" 
                           name="file" 
                           id="fileInput" 
                           accept=".csv,.xlsx,.xls" 
                           class="hidden" 
                           required>
                    
                    <div id="dropArea" 
                         class="border-2 border-dashed border-gray-300 rounded-xl p-10 text-center hover:border-blue-500 hover:bg-blue-50 transition-all cursor-pointer">
                        
                        <!-- Icon & Text -->
                        <div id="uploadPrompt">
                            <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                            </svg>
                            <p class="text-lg font-medium text-gray-700 mb-2">Klik untuk pilih file atau drag & drop</p>
                            <p class="text-sm text-gray-500">Format yang didukung: CSV, XLSX, XLS</p>
                            <p class="text-xs text-gray-400 mt-2">Maksimal ukuran file: 5MB</p>
                        </div>
                        
                        <!-- File Info (Hidden by default) -->
                        <div id="fileInfo" class="hidden">
                            <svg class="w-16 h-16 mx-auto text-green-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <p class="text-lg font-semibold text-green-700 mb-1" id="fileName"></p>
                            <p class="text-sm text-gray-500" id="fileSize"></p>
                            <button type="button" 
                                    onclick="clearFile()" 
                                    class="mt-3 text-red-600 hover:text-red-700 text-sm font-medium">
                                Hapus file
                            </button>
                        </div>
                    </div>
                </div>
                
                @error('file')
                    <p class="text-red-600 text-sm mt-2 flex items-center gap-1">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                        </svg>
                        {{ $message }}
                    </p>
                @enderror
            </div>

            <!-- Panduan Import -->
            <div class="bg-gray-50 rounded-lg p-5 mb-6 border border-gray-200">
                <h3 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
                    <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                    </svg>
                    Panduan Import Data
                </h3>
                
                <div class="grid md:grid-cols-2 gap-4 mb-4">
                    <div class="space-y-2">
                        <h4 class="font-medium text-gray-700 text-sm">✓ Kolom Wajib:</h4>
                        <ul class="text-sm text-gray-600 space-y-1 pl-4">
                            <li>• <strong>NIS</strong> - Nomor Induk Siswa (wajib, unik)</li>
                            <li>• <strong>Nama Lengkap</strong> - Nama lengkap siswa (wajib)</li>
                        </ul>
                    </div>
                    
                    <div class="space-y-2">
                        <h4 class="font-medium text-gray-700 text-sm">○ Kolom Opsional:</h4>
                        <ul class="text-sm text-gray-600 space-y-1 pl-4">
                            <li>• NISN, Jenis Kelamin (L/P), Tempat & Tanggal Lahir</li>
                            <li>• Agama, Alamat, Telepon, Email, Kelas</li>
                            <li>• Data Orang Tua (Nama, Pekerjaan, Telepon)</li>
                        </ul>
                    </div>
                </div>
                
                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                    <p class="text-sm font-medium text-yellow-800 mb-2">⚠️ Catatan Penting:</p>
                    <ul class="text-sm text-yellow-700 space-y-1 pl-4">
                        <li>• Format tanggal: <code class="bg-yellow-100 px-1.5 py-0.5 rounded">DD/MM/YYYY</code> (contoh: 15/08/2010)</li>
                        <li>• Jenis Kelamin: <code class="bg-yellow-100 px-1.5 py-0.5 rounded">L</code> atau <code class="bg-yellow-100 px-1.5 py-0.5 rounded">P</code></li>
                        <li>• Pastikan NIS tidak duplikat dengan data yang sudah ada</li>
                        <li>• Nama kelas harus sesuai dengan data kelas yang tersedia</li>
                    </ul>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex justify-end gap-3">
                <a href="{{ route('simaju.siswa.index') }}" 
                   class="px-5 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium">
                    Batal
                </a>
                <button type="submit" 
                        class="px-6 py-2.5 bg-gradient-to-r from-blue-600 to-indigo-600 text-white rounded-lg hover:from-blue-700 hover:to-indigo-700 transition-all flex items-center gap-2 font-medium shadow-lg shadow-blue-500/30">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L4 8m4-4v12"></path>
                    </svg>
                    Proses Import
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropArea = document.getElementById('dropArea');
    const fileInput = document.getElementById('fileInput');
    const uploadPrompt = document.getElementById('uploadPrompt');
    const fileInfo = document.getElementById('fileInfo');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');
    
    // Click to select file
    dropArea.addEventListener('click', function() {
        fileInput.click();
    });
    
    // File selected
    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            handleFile(this.files[0]);
        }
    });
    
    // Drag & Drop
    dropArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.add('border-blue-500', 'bg-blue-50');
    });
    
    dropArea.addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.remove('border-blue-500', 'bg-blue-50');
    });
    
    dropArea.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.remove('border-blue-500', 'bg-blue-50');
        
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            fileInput.files = e.dataTransfer.files;
            handleFile(e.dataTransfer.files[0]);
        }
    });
    
    function handleFile(file) {
        fileName.textContent = file.name;
        fileSize.textContent = formatFileSize(file.size);
        uploadPrompt.classList.add('hidden');
        fileInfo.classList.remove('hidden');
    }
    
    function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
    }
    
    window.clearFile = function() {
        fileInput.value = '';
        uploadPrompt.classList.remove('hidden');
        fileInfo.classList.add('hidden');
    };
});
</script>
@endpush