@extends('pages.layout.dashboard_layout')

@section('content')
    <div class="p-3 p-lg-4">

        {{-- Loading Overlay --}}
        <div id="loadingOverlay"
            style="
        display:none;position:fixed;inset:0;
        background:rgba(255,255,255,0.9);
        backdrop-filter:blur(6px);z-index:9999;
        flex-direction:column;align-items:center;justify-content:center;gap:20px;
    ">
            <div style="position:relative;width:64px;height:64px;">
                <div
                    style="
                position:absolute;inset:0;
                border:3px solid #e8ede8;
                border-top-color:var(--hse-green);
                border-radius:50%;
                animation:spin 0.8s linear infinite;
            ">
                </div>
                <div
                    style="
                position:absolute;inset:8px;
                border:3px solid transparent;
                border-top-color:#a8c5a8;
                border-radius:50%;
                animation:spin 1.2s linear infinite reverse;
            ">
                </div>
            </div>
            <div style="text-align:center;">
                <p style="font-family:'Syne',sans-serif;font-weight:700;font-size:1.05rem;margin:0 0 6px;color:#1a1a1a;">
                    Sedang mengimport data...
                </p>
                <p style="font-size:12px;color:#888;margin:0;">Mohon jangan tutup halaman ini</p>
            </div>
            <div style="width:220px;height:4px;background:#e8ede8;border-radius:99px;overflow:hidden;">
                <div id="progressBar"
                    style="
                height:100%;width:0%;
                background:var(--hse-green);
                border-radius:99px;
                animation:progressFill 3s ease-out forwards;
            ">
                </div>
            </div>
        </div>

        <style>
            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }

            @keyframes progressFill {
                0% {
                    width: 0%
                }

                80% {
                    width: 85%
                }

                100% {
                    width: 90%
                }
            }

            .drop-zone {
                border: 2px dashed #d0d9d0;
                border-radius: 14px;
                padding: 40px 24px;
                text-align: center;
                cursor: pointer;
                transition: all .2s ease;
                background: #fafbfa;
                position: relative;
            }

            .drop-zone:hover,
            .drop-zone.dragover {
                border-color: var(--hse-green);
                background: #f0f7f0;
            }

            .drop-zone input[type=file] {
                position: absolute;
                inset: 0;
                opacity: 0;
                cursor: pointer;
                width: 100%;
                height: 100%;
            }

            .file-card {
                display: none;
                align-items: center;
                gap: 14px;
                padding: 14px 16px;
                background: #fff;
                border: 1.5px solid #d6ead6;
                border-radius: 12px;
                margin-top: 12px;
            }

            .file-card.show {
                display: flex;
            }

            .file-icon-wrap {
                width: 44px;
                height: 44px;
                background: #eef7ee;
                border-radius: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .step-item {
                display: flex;
                align-items: flex-start;
                gap: 10px;
                padding: 10px 0;
            }

            .step-item+.step-item {
                border-top: 1px dashed #eee;
            }

            .step-dot {
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background: #eef7ee;
                border: 1.5px solid #c5dfc5;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                font-size: 11px;
                font-weight: 700;
                color: var(--hse-green);
                margin-top: 1px;
            }
        </style>

        {{-- Page Header --}}
        <div class="d-flex align-items-center gap-3 mb-4">
            <div
                style="
            width:40px;height:40px;border-radius:10px;
            background:var(--hse-green);
            display:flex;align-items:center;justify-content:center;
        ">
                <i class="bi bi-file-earmark-arrow-up text-white" style="font-size:1.1rem;"></i>
            </div>
            <div>
                <h5 class="mb-0" style="font-family:'Syne',sans-serif;font-weight:700;">Import Karyawan</h5>
                <p style="font-size:12px;color:#888;margin:0;">Upload file Excel untuk menambahkan data karyawan</p>
            </div>
        </div>

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

            <div class="row g-3">

                {{-- Form Panel --}}
                <div class="col-lg-8">
                    <div class="panel">
                        <div class="panel-header">
                            <p class="panel-title">Upload File Excel</p>
                        </div>

                        <div class="p-3 p-md-4">

                            {{-- Drop Zone --}}
                            <div class="drop-zone" id="dropZone">
                                <input type="file" name="file" id="fileInput" accept=".xlsx,.xls">

                                <div id="dropContent">
                                    <i class="bi bi-cloud-arrow-up"
                                        style="font-size:2.4rem;color:#b0c8b0;display:block;margin-bottom:10px;"></i>
                                    <p style="font-size:.9rem;font-weight:600;color:#444;margin:0 0 4px;">
                                        Seret & lepas file di sini
                                    </p>
                                    <p style="font-size:12px;color:#aaa;margin:0 0 14px;">
                                        atau klik untuk memilih file
                                    </p>
                                    <span
                                        style="
                                    display:inline-block;
                                    padding:6px 18px;
                                    border:1.5px solid var(--hse-green);
                                    border-radius:8px;
                                    font-size:12px;
                                    font-weight:600;
                                    color:var(--hse-green);
                                    pointer-events:none;
                                ">Pilih
                                        File</span>
                                    <p style="font-size:11px;color:#ccc;margin:12px 0 0;">
                                        Mendukung .xlsx dan .xls
                                    </p>
                                </div>
                            </div>

                            @error('file')
                                <div class="invalid-msg-hse mt-2">
                                    <i class="bi bi-exclamation-circle me-1"></i>{{ $message }}
                                </div>
                            @enderror

                            {{-- File Preview Card --}}
                            <div class="file-card" id="fileCard">
                                <div class="file-icon-wrap">
                                    <i class="bi bi-file-earmark-spreadsheet"
                                        style="color:var(--hse-green);font-size:1.3rem;"></i>
                                </div>
                                <div style="flex:1;min-width:0;">
                                    <p id="fileName"
                                        style="font-size:13px;font-weight:700;margin:0;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
                                    </p>
                                    <p id="fileSize" style="font-size:11px;color:#aaa;margin:2px 0 0;"></p>
                                </div>
                                <button type="button" id="removeFile"
                                    style="background:none;border:none;color:#ccc;font-size:1.1rem;padding:4px;cursor:pointer;flex-shrink:0;"
                                    title="Hapus file">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>

                {{-- Side Panel --}}
                <div class="col-lg-4">

                    {{-- Steps Card --}}
                    <div class="panel mb-3">
                        <div class="panel-header">
                            <p class="panel-title">Format Kolom Excel</p>
                        </div>
                        <div class="p-3">
                            <div class="step-item">
                                <div class="step-dot">1</div>
                                <div>
                                    <p style="font-size:12px;font-weight:700;margin:0;color:#333;">nik karyawan</p>
                                    <p style="font-size:11px;color:#aaa;margin:0;">Nomor Induk Karyawan (wajib)</p>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-dot">2</div>
                                <div>
                                    <p style="font-size:12px;font-weight:700;margin:0;color:#333;">nama karyawan</p>
                                    <p style="font-size:11px;color:#aaa;margin:0;">Nama lengkap karyawan (wajib)</p>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-dot">3</div>
                                <div>
                                    <p style="font-size:12px;font-weight:700;margin:0;color:#333;">jabatan</p>
                                    <p style="font-size:11px;color:#aaa;margin:0;">Posisi / jabatan <span
                                            style="color:#ccc;">(opsional)</span></p>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-dot">4</div>
                                <div>
                                    <p style="font-size:12px;font-weight:700;margin:0;color:#333;">afdeling</p>
                                    <p style="font-size:11px;color:#aaa;margin:0;">Divisi/afdeling <span
                                            style="color:#ccc;">(opsional)</span></p>
                                </div>
                            </div>
                            <div class="step-item">
                                <div class="step-dot">5</div>
                                <div>
                                    <p style="font-size:12px;font-weight:700;margin:0;color:#333;">tgl safety induction</p>
                                    <p style="font-size:11px;color:#aaa;margin:0;">Tanggal safety induction <span
                                            style="color:#ccc;">(opsional)</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Catatan --}}
                    <div class="panel" style="border-left:3px solid var(--hse-amber);border-radius:0 8px 8px 0;">
                        <div class="p-3">
                            <div class="d-flex gap-2 align-items-start">
                                <i class="bi bi-info-circle"
                                    style="color:var(--hse-amber);margin-top:2px;flex-shrink:0;"></i>
                                <div>
                                    <p
                                        style="font-family:'Syne',sans-serif;font-weight:700;font-size:.85rem;margin:0 0 6px;">
                                        Perhatian
                                    </p>
                                    <p style="font-size:12px;color:#666;margin:0 0 4px;line-height:1.7;">
                                        ✓ Format file: <b>.xlsx</b> atau <b>.xls</b>
                                    </p>
                                    <p style="font-size:12px;color:#666;margin:0 0 4px;line-height:1.7;">
                                        ✓ Maks. ukuran file: <b>5 MB</b>
                                    </p>
                                    <p style="font-size:12px;color:#666;margin:0;line-height:1.7;">
                                        ✓ Data yang sudah ada akan diperbarui otomatis berdasarkan NIK
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                {{-- Action Buttons --}}
                <div class="col-12">
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ route('karyawan.index') }}" class="btn btn-sm"
                            style="border:1px solid #e0e4e0;border-radius:8px;font-size:.875rem;padding:7px 18px;color:#555;">
                            <i class="bi bi-arrow-left me-1"></i> Batal
                        </a>
                        <button type="submit" id="submitBtn" class="btn btn-sm text-white"
                            style="background:var(--hse-green);border:none;border-radius:8px;font-size:.875rem;padding:7px 22px;opacity:.5;pointer-events:none;transition:opacity .2s;">
                            <i class="bi bi-upload me-1"></i> Import Data
                        </button>
                    </div>
                </div>

            </div>
        </form>

    </div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const fileCard = document.getElementById('fileCard');
        const dropZone = document.getElementById('dropZone');
        const submitBtn = document.getElementById('submitBtn');
        const removeFile = document.getElementById('removeFile');

        function showFile(file) {
            document.getElementById('fileName').textContent = file.name;
            document.getElementById('fileSize').textContent = (file.size / 1024).toFixed(1) + ' KB';
            fileCard.classList.add('show');
            submitBtn.style.opacity = '1';
            submitBtn.style.pointerEvents = 'auto';
        }

        function clearFile() {
            fileInput.value = '';
            fileCard.classList.remove('show');
            submitBtn.style.opacity = '.5';
            submitBtn.style.pointerEvents = 'none';
        }

        fileInput.addEventListener('change', function() {
            if (this.files[0]) showFile(this.files[0]);
            else clearFile();
        });

        removeFile.addEventListener('click', clearFile);

        dropZone.addEventListener('dragover', e => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
        dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
        dropZone.addEventListener('drop', e => {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            if (file) {
                const dt = new DataTransfer();
                dt.items.add(file);
                fileInput.files = dt.files;
                showFile(file);
            }
        });

        document.getElementById('importForm').addEventListener('submit', function() {
            if (!fileInput.files.length) return;
            const overlay = document.getElementById('loadingOverlay');
            overlay.style.display = 'flex';
            submitBtn.disabled = true;
            submitBtn.innerHTML =
                '<span class="spinner-border spinner-border-sm me-1" role="status"></span> Memproses...';
        });
    </script>
@endsection