@extends('layouts.master')
@section('content')
<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-eye"></i> Preview Import Customer</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-info mb-4">
            <i class="fas fa-info-circle"></i> <b>Petunjuk:</b> Periksa data di bawah ini sebelum melakukan import.<br>
            <ul class="mb-0 mt-2">
                <li>Baris dengan <span class="badge bg-danger">Error</span> harus diperbaiki di file Excel dan upload ulang.</li>
                <li>Baris dengan <span class="badge bg-success">OK</span> siap diimport.</li>
                <li>Kolom <b>sales_email</b> harus diisi dengan email user yang memang sales.</li>
            </ul>
        </div>
        <form action="{{ route('customer.import.submit') }}" method="POST">
            @csrf
            <div class="table-responsive">
                <table class="table table-bordered align-middle text-center">
                    <thead class="table-dark">
                        <tr>
                            <th>No</th>
                            @foreach(array_keys($preview[0]) as $col)
                                <th class="text-capitalize">{{ str_replace('_', ' ', $col) }}</th>
                            @endforeach
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($preview as $i => $row)
                            <tr @if(isset($errors[$i+2])) class="table-danger" @endif>
                                <td>{{ $i+1 }}</td>
                                @foreach($row as $val)
                                    <td>{{ $val }}</td>
                                @endforeach
                                <td>
                                    @if(isset($errors[$i+2]))
                                        <span class="badge bg-danger"><i class="fas fa-times-circle"></i> Error</span>
                                        <ul class="text-start small mt-2 mb-0 px-2">
                                            @foreach($errors[$i+2] as $err)
                                                <li class="text-danger">{{ $err }}</li>
                                            @endforeach
                                        </ul>
                                    @else
                                        <span class="badge bg-success"><i class="fas fa-check-circle"></i> OK</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @if(empty($errors))
                <div class="text-end mt-3">
                    <button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i> Submit Import</button>
                </div>
            @else
                <div class="alert alert-danger mt-4"><i class="fas fa-exclamation-triangle"></i> Ada data error, perbaiki file dan upload ulang.</div>
            @endif
        </form>
    </div>
</div>
@endsection