@extends('layouts.app')
@section('title', 'Import Masterlist')
@section('content')
@php $result = session('import_result'); @endphp

<div class="row">
    <div class="col-lg-7 mb-4">
        <div class="card">
            <div class="mi-brand-strip rounded-top"></div>
            <div class="card-header pb-0">
                <h6 class="mb-0"><i class="bi bi-file-earmark-spreadsheet me-1"></i>Import Staff from Excel</h6>
                <p class="text-sm text-muted mb-0">Upload the masterlist to create or update staff records.</p>
            </div>
            <form action="{{ route('import.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-xs text-uppercase">Spreadsheet file *</label>
                        <input type="file" name="file" accept=".xlsx,.xls,.csv" class="form-control" required>
                        <span class="text-xs text-muted">.xlsx, .xls or .csv — max 20&nbsp;MB</span>
                    </div>
                    <div class="mb-3" style="max-width:200px">
                        <label class="form-label text-xs text-uppercase">Sheet number</label>
                        <input type="number" name="sheet" value="0" min="0" class="form-control">
                        <span class="text-xs text-muted">0 = first sheet</span>
                    </div>
                    <div class="alert alert-secondary text-white text-sm mb-0">
                        <strong>Matching rule:</strong> rows are matched by passport number (or running no.
                        when blank). Existing staff are <strong>updated</strong>, new ones are <strong>created</strong> —
                        so re-importing the same file is safe.
                    </div>
                </div>
                <div class="card-footer text-end">
                    <button class="btn btn-primary btn-sm"><i class="bi bi-upload me-1"></i>Import</button>
                </div>
            </form>
        </div>
    </div>

    <div class="col-lg-5 mb-4">
        @if($result)
            <div class="card mb-3">
                <div class="card-header pb-0"><h6 class="mb-0">Last Import Result</h6></div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <h4 class="mb-0 text-success">{{ $result['created'] }}</h4>
                            <span class="text-xs text-uppercase text-muted">Created</span>
                        </div>
                        <div class="col-4">
                            <h4 class="mb-0 text-primary">{{ $result['updated'] }}</h4>
                            <span class="text-xs text-uppercase text-muted">Updated</span>
                        </div>
                        <div class="col-4">
                            <h4 class="mb-0 text-muted">{{ $result['skipped'] }}</h4>
                            <span class="text-xs text-uppercase text-muted">Skipped</span>
                        </div>
                    </div>
                    <hr class="horizontal dark">
                    <div class="text-sm d-flex justify-content-between"><span class="text-muted">Sites</span><span>{{ $result['sites'] }}</span></div>
                    <div class="text-sm d-flex justify-content-between"><span class="text-muted">Nationalities</span><span>{{ $result['nationalities'] }}</span></div>
                    <div class="text-sm d-flex justify-content-between"><span class="text-muted">Banks</span><span>{{ $result['banks'] }}</span></div>

                    @if(!empty($result['issues']))
                        <hr class="horizontal dark">
                        <h6 class="text-xs text-uppercase text-muted">{{ count($result['issues']) }} rows flagged</h6>
                        <ul class="text-xs ps-3 mb-0" style="max-height:150px;overflow:auto">
                            @foreach(array_slice($result['issues'], 0, 30) as $i)<li>{{ $i }}</li>@endforeach
                        </ul>
                    @endif

                    <a href="{{ route('setup.index') }}" class="btn btn-sm btn-primary w-100 mt-3 mb-0">
                        <i class="bi bi-list-check me-1"></i>Complete passport / permit / photos
                    </a>
                </div>
            </div>
        @endif

        <div class="card">
            <div class="card-header pb-0"><h6 class="mb-0">Expected Columns</h6>
                <p class="text-xs text-muted mb-0">In this order, with a header row first.</p></div>
            <div class="card-body pt-2">
                <ol class="text-xs ps-3 mb-0" start="1">
                    @foreach($columns as $label)<li>{{ $label }}</li>@endforeach
                </ol>
            </div>
        </div>
    </div>
</div>
@endsection