@extends('layouts.app')

@section('title', 'Import Absensi')

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-upload"></i> Import Absensi dari File</h2>
        <a href="{{ route('absensi.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card shadow-lg border-0">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> Upload File Data Absensi</h5>
                </div>
                <div class="card-body p-4">
                    <div class="alert alert-info mb-4">
                        <h6><i class="bi bi-info-circle"></i> Format File yang Didukung:</h6>
                        <ul class="mb-0">
                            <li><strong>CSV</strong> (.csv, .txt) - Format spreadsheet sederhana</li>
                            <li><strong>Excel</strong> (.xlsx, .xls) - Format Microsoft Excel</li>
                        </ul>
                        <p class="mb-0 mt-2"><small><i class="bi bi-lightbulb"></i> <strong>Tips:</strong> File dapat berupa export dari sistem absensi atau data manual dalam format CSV atau Excel</small></p>
                    </div>

                    <div class="alert alert-warning mb-4">
                        <h6><i class="bi bi-exclamation-triangle"></i> Format Data yang Diperlukan:</h6>
                        <p class="mb-2">File harus mengandung kolom berikut:</p>
                        <ul class="mb-0">
                            <li><strong>NIP</strong> - Nomor Induk Pegawai (wajib)</li>
                            <li><strong>Tanggal</strong> - Format: YYYY-MM-DD atau DD/MM/YYYY (wajib)</li>
                            <li><strong>Jam Masuk</strong> - Format: HH:MM atau HH:MM:SS (opsional)</li>
                            <li><strong>Jam Keluar</strong> - Format: HH:MM atau HH:MM:SS (opsional)</li>
                            <li><strong>Status</strong> - Hadir/Izin/Sakit/Cuti/Alpha (opsional, default: Hadir)</li>
                        </ul>
                    </div>

                    <form action="{{ route('absensi.import') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-file-earmark-arrow-up me-2" style="color: #198754;"></i> Upload File Spreadsheet Data Absen Fingerprint <span class="text-danger">*</span>
                            </label>
                            <div class="border rounded p-4 text-center" style="border: 2px dashed #198754 !important; background-color: #f8f9fa;">
                                <input type="file" 
                                       name="file" 
                                       class="form-control form-control-lg @error('file') is-invalid @enderror" 
                                       accept=".csv,.txt,.xlsx,.xls"
                                       required
                                       style="border: none; background: transparent;"
                                       onchange="previewFileName(this)"
                                       id="fileInput">
                                <div class="mt-3">
                                    <i class="bi bi-cloud-upload" style="font-size: 3rem; color: #198754;"></i>
                                    <p class="mt-2 mb-0">
                                        <strong>Klik untuk memilih file</strong> atau drag & drop file di sini
                                    </p>
                                    <small class="text-muted d-block mt-1">
                                        Format: CSV, TXT, XLSX, XLS | Maksimal: 10MB
                                    </small>
                                </div>
                            </div>
                            @error('file')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                            <div id="fileName" class="mt-3 alert alert-success" style="display: none;">
                                <i class="bi bi-check-circle"></i> <strong>File dipilih:</strong> <span id="fileNameText"></span>
                            </div>
                        </div>


                        <div class="mb-4">
                            <div class="card border-info">
                                <div class="card-body">
                                    <h6 class="mb-3"><i class="bi bi-file-text"></i> Contoh Format CSV:</h6>
                                    <pre class="bg-light p-3 rounded mb-0" style="font-size: 0.85rem;">NIP,Tanggal,Jam Masuk,Jam Keluar,Status
PGW001,2024-01-15,08:00:00,17:00:00,Hadir
PGW002,2024-01-15,08:15:00,17:30:00,Hadir
PGW003,2024-01-15,08:30:00,17:00:00,Hadir</pre>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ route('absensi.index') }}" class="btn btn-secondary px-4" style="border-radius: 10px;">
                                Batal
                            </a>
                            <button type="submit" class="btn btn-primary px-4" style="border-radius: 10px; background: linear-gradient(135deg, #198754 0%, #157347 100%); border: none;">
                                <i class="bi bi-upload me-1"></i> Import Data
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function previewFileName(input) {
    const fileName = input.files[0]?.name;
    const fileSize = input.files[0]?.size;
    if (fileName) {
        const fileSizeMB = (fileSize / (1024 * 1024)).toFixed(2);
        document.getElementById('fileNameText').textContent = fileName + ' (' + fileSizeMB + ' MB)';
        document.getElementById('fileName').style.display = 'block';
    } else {
        document.getElementById('fileName').style.display = 'none';
    }
}

// Drag and drop functionality
const dropZone = document.querySelector('.border.rounded.p-4');
const fileInput = document.getElementById('fileInput');

if (dropZone && fileInput) {
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
        e.preventDefault();
        e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight(e) {
        dropZone.style.backgroundColor = '#e7f5e7';
        dropZone.style.borderColor = '#198754';
    }

    function unhighlight(e) {
        dropZone.style.backgroundColor = '#f8f9fa';
        dropZone.style.borderColor = '#198754';
    }

    dropZone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
        const dt = e.dataTransfer;
        const files = dt.files;
        fileInput.files = files;
        previewFileName(fileInput);
    }
}
</script>
@endpush
@endsection