@extends('layouts.master')
@section('content')
<div class="card shadow-sm">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-file-import"></i> Import Data Customer</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-info mb-4">
            <i class="fas fa-info-circle"></i> <b>Petunjuk Import:</b>
            <ul class="mb-0 mt-2">
                <li>Download template Excel terlebih dahulu, lalu isi sesuai kolom yang tersedia.</li>
                <li>Kolom <b>sales_email</b> wajib diisi dengan email user yang memang sales.</li>
                <li>Setelah mengisi, upload file Excel di bawah ini untuk preview sebelum import.</li>
            </ul>
        </div>
        <div class="mb-4">
            <a href="{{ route('customer.import.template') }}" class="btn btn-success">
                <i class="fas fa-download"></i> Download Template Excel
            </a>
        </div>
        <form action="{{ route('customer.import.preview') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate>
            @csrf
            <div class="mb-3">
                <label for="file" class="form-label fw-bold">Upload File Excel</label>
                <div class="border border-2 rounded-3 p-4 text-center bg-light position-relative" style="min-height: 140px;">
                    <input type="file" name="file" id="file" accept=".xlsx,.xls" class="form-control d-none" required onchange="document.getElementById('file-label').innerText = this.files[0]?.name || 'Pilih file Excel...'">
                    <label for="file" class="w-100 h-100 d-flex flex-column justify-content-center align-items-center mb-0" style="cursor:pointer;">
                        <i class="fas fa-cloud-upload-alt fa-2x text-primary mb-2"></i>
                        <span id="file-label" class="fw-semibold">Pilih file Excel...</span>
                        <span class="text-muted small">atau drag & drop file ke sini</span>
                    </label>
                </div>
                <div class="invalid-feedback">File Excel wajib diupload.</div>
            </div>
            <div class="text-end mt-3">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Preview Data
                </button>
            </div>
        </form>
        @if(session('error'))
            <div class="alert alert-danger mt-4"><i class="fas fa-exclamation-triangle"></i> {{ session('error') }}</div>
        @endif
    </div>
</div>
<script>
// Drag & drop support
const dropArea = document.querySelector('.border');
const fileInput = document.getElementById('file');
dropArea.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropArea.classList.add('border-primary');
});
dropArea.addEventListener('dragleave', (e) => {
    dropArea.classList.remove('border-primary');
});
dropArea.addEventListener('drop', (e) => {
    e.preventDefault();
    dropArea.classList.remove('border-primary');
    if (e.dataTransfer.files.length) {
        fileInput.files = e.dataTransfer.files;
        document.getElementById('file-label').innerText = e.dataTransfer.files[0].name;
    }
});
</script>
@endsection