@extends('layouts.app')
@section('title','Bulk Import Employees')
@section('page-title','Employees')

@section('content')
<div class="page-header">
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
        <div>
            <h1>Bulk Import Employees</h1>
            <nav aria-label="breadcrumb"><ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('employees.index') }}">Employees</a></li>
                <li class="breadcrumb-item active">Bulk Import</li>
            </ol></nav>
        </div>
        <a href="{{ route('employees.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
    </div>
</div>

{{-- Import result summary --}}
@if(session('import_result'))
@php $result = session('import_result'); @endphp
<div class="card mb-4" style="border-left:4px solid {{ $result['imported'] > 0 ? '#059669' : '#f59e0b' }};">
    <div class="card-body">
        <div class="d-flex align-items-center gap-3 mb-3 flex-wrap">
            <div class="text-center px-3">
                <div style="font-size:2rem;font-weight:800;color:#059669;">{{ $result['imported'] }}</div>
                <div style="font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;">Imported</div>
            </div>
            <div class="text-center px-3">
                <div style="font-size:2rem;font-weight:800;color:#f59e0b;">{{ $result['skipped'] }}</div>
                <div style="font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;">Skipped</div>
            </div>
            @if(!empty($result['errors']))
            <div class="text-center px-3">
                <div style="font-size:2rem;font-weight:800;color:#ef4444;">{{ count($result['errors']) }}</div>
                <div style="font-size:.72rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;">Errors</div>
            </div>
            @endif
        </div>

        @if(!empty($result['errors']))
        <div class="mb-2"><strong style="color:#ef4444;">Errors</strong></div>
        <ul class="mb-3" style="font-size:.83rem;color:#ef4444;">
            @foreach($result['errors'] as $e)<li>{{ $e }}</li>@endforeach
        </ul>
        @endif

        @if(!empty($result['warnings']))
        <div class="mb-2"><strong style="color:#f59e0b;">Warnings</strong></div>
        <ul class="mb-0" style="font-size:.83rem;color:#f59e0b;">
            @foreach($result['warnings'] as $w)<li>{{ $w }}</li>@endforeach
        </ul>
        @endif
    </div>
</div>
@endif

<div class="row g-4">
    {{-- Step 1 — Template --}}
    <div class="col-12 col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <span style="background:var(--brand-primary);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-right:.5rem;">1</span>
                Download Template
            </div>
            <div class="card-body">
                <p style="font-size:.88rem;color:var(--text-2);">
                    Download the Excel template and fill in your employee data. Do not rename or remove the header row.
                </p>
                <a href="{{ route('employees.import.template') }}" class="btn btn-outline-success w-100">
                    <i class="bi bi-file-earmark-excel me-2"></i>Download Template (.xlsx)
                </a>
            </div>
        </div>
    </div>

    {{-- Step 2 — Upload --}}
    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header">
                <span style="background:var(--brand-primary);color:#fff;border-radius:50%;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;margin-right:.5rem;">2</span>
                Upload Completed File
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('employees.import.upload') }}" enctype="multipart/form-data" id="importForm">
                    @csrf

                    <div class="mb-4">
                        <label class="form-label fw-semibold">Select File</label>
                        <div id="dropZone" class="border rounded-3 p-4 text-center"
                             style="border-style:dashed !important;cursor:pointer;transition:all .2s;color:var(--text-3);">
                            <i class="bi bi-cloud-upload" style="font-size:2rem;display:block;margin-bottom:.5rem;"></i>
                            <div style="font-size:.9rem;">Drag and drop your file here, or click to browse</div>
                            <div style="font-size:.75rem;margin-top:.3rem;">Accepted formats: .xlsx, .csv — Max 5 MB</div>
                            <input type="file" name="file" id="fileInput" accept=".xlsx,.csv,.xls"
                                   class="d-none" required>
                        </div>
                        <div id="fileName" class="mt-2" style="font-size:.82rem;color:var(--text-2);display:none;">
                            <i class="bi bi-file-earmark-check text-success me-1"></i>
                            <span id="fileNameText"></span>
                        </div>
                        @error('file')
                        <div class="text-danger mt-1" style="font-size:.82rem;">{{ $message }}</div>
                        @enderror
                    </div>

                    <button type="submit" id="uploadBtn" class="btn btn-primary" disabled>
                        <i class="bi bi-upload me-2"></i>Import Employees
                    </button>
                </form>
            </div>
        </div>
    </div>

    {{-- Column reference --}}
    <div class="col-12">
        <div class="card">
            <div class="card-header"><i class="bi bi-info-circle me-2"></i>Column Reference</div>
            <div class="table-responsive">
                <table class="table table-hover mb-0" style="font-size:.83rem;">
                    <thead>
                        <tr>
                            <th>Column</th>
                            <th>Required</th>
                            <th>Accepted Values / Format</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                        $cols = [
                            ['first_name',         '✓', 'Text'],
                            ['last_name',          '✓', 'Text'],
                            ['email',              '✓', 'Valid email address. Must be unique.'],
                            ['middle_name',        '—', 'Text'],
                            ['position',           '—', 'Text — e.g. "Software Engineer"'],
                            ['department',         '—', 'Exact department name as it exists in the system.'],
                            ['employment_type',    '—', 'full_time | part_time | contract | temporary. Default: full_time'],
                            ['role',               '—', 'employee | hr_admin | dept_head | president | super_admin. Default: employee'],
                            ['date_of_employment', '—', 'YYYY-MM-DD  e.g. 2024-01-15. Defaults to today if blank.'],
                            ['date_of_birth',      '—', 'YYYY-MM-DD  e.g. 1990-05-20'],
                            ['gender',             '—', 'Male | Female | Other'],
                            ['citizenship',        '—', 'Text — e.g. "Liberian"'],
                            ['marital_status',     '—', 'Single | Married | Divorced | Widowed'],
                            ['salary_usd',         '—', 'Number — e.g. 2500.00'],
                            ['present_address',    '—', 'Text'],
                            ['national_id',        '—', 'Text'],
                            ['bank_name',          '—', 'Text'],
                            ['bank_account',       '—', 'Text'],
                            ['employee_number',    '—', 'Text — e.g. EMP-0042. Auto-generated if blank.'],
                            ['status',             '—', 'active | on_leave | suspended | terminated | retired. Default: active'],
                        ];
                        @endphp
                        @foreach($cols as [$col, $req, $values])
                        <tr>
                            <td><code style="font-size:.78rem;">{{ $col }}</code></td>
                            <td>
                                @if($req === '✓')
                                <span class="badge bg-danger-subtle text-danger">Required</span>
                                @else
                                <span class="badge bg-secondary-subtle text-secondary">Optional</span>
                                @endif
                            </td>
                            <td style="color:var(--text-2);">{{ $values }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer" style="font-size:.78rem;color:var(--text-3);">
                <i class="bi bi-info-circle me-1"></i>
                Rows with duplicate email addresses (whether in the file or already in the system) are skipped.
                All imported employees receive a temporary random password — they must use "Forgot Password" to set their own.
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
#dropZone:hover, #dropZone.dragover {
    background: var(--brand-teal3, #e0f5f2);
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary);
}
</style>
@endpush

@push('scripts')
<script>
const drop   = document.getElementById('dropZone');
const input  = document.getElementById('fileInput');
const btn    = document.getElementById('uploadBtn');
const nameEl = document.getElementById('fileName');
const nameTxt= document.getElementById('fileNameText');

drop.addEventListener('click',   () => input.click());
drop.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('dragover'); });
drop.addEventListener('dragleave',() => drop.classList.remove('dragover'));
drop.addEventListener('drop',    e => {
    e.preventDefault(); drop.classList.remove('dragover');
    if (e.dataTransfer.files.length) setFile(e.dataTransfer.files[0]);
});
input.addEventListener('change', () => { if (input.files.length) setFile(input.files[0]); });

function setFile(file) {
    // Swap into the real input
    const dt = new DataTransfer();
    dt.items.add(file);
    input.files = dt.files;

    nameTxt.textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
    nameEl.style.display = '';
    btn.disabled = false;
}

document.getElementById('importForm').addEventListener('submit', function() {
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Importing…';
});
</script>
@endpush