@extends('layouts.main')

@section('isi')
<div class="container-fluid py-4">
    <div class="row justify-content-center">
        <div class="col-lg-9">

            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Import Pelatihan Reguler Eksternal</h5>
                </div>

                <div class="card-body">

                    {{-- Template --}}
                    <div class="alert alert-info d-flex flex-wrap justify-content-between align-items-center gap-3">
                        <div>
                            <h6 class="alert-heading mb-1">Template Excel</h6>
                            <p class="mb-0 small">Unduh template, isi nilainya, lalu unggah kembali di halaman ini.</p>
                        </div>
                        <a href="#"
                           class="btn btn-outline-primary text-nowrap">Unduh Template, di Menu Download/Nilai Akhir</a>
                    </div>

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

                        <div class="mb-3">
                            <label for="fileInput" class="form-label">File Excel</label>
                            <input type="file" class="form-control" id="fileInput" name="file"
                                   accept=".xls,.xlsx" required>
                            <div class="form-text">Format .xls atau .xlsx, maksimal 5MB.</div>
                        </div>

                        <button type="submit" class="btn btn-primary" id="submitButton">
                            <span class="spinner-border spinner-border-sm me-2 d-none" id="submitSpinner"
                                  role="status" aria-hidden="true"></span>
                            <span id="submitLabel">Import Data</span>
                        </button>
                    </form>

                    {{-- Hasil import --}}
                    <div id="importResult" class="mt-4 d-none">
                        <hr>
                        <h6 class="mb-3">Hasil Import</h6>

                        <div id="importResultAlert"></div>

                        <div class="row g-3 mb-3" id="importResultStats"></div>

                        <div id="importResultUpdatedWrap" class="mb-3 d-none">
                            <p class="fw-semibold mb-2">Nilai berhasil diimpor</p>
                            <div class="table-responsive">
                                <table class="table table-sm table-striped table-bordered align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>NIM</th>
                                            <th>Kelas</th>
                                            <th class="text-end">Nilai Angka</th>
                                        </tr>
                                    </thead>
                                    <tbody id="importResultUpdated"></tbody>
                                </table>
                            </div>
                        </div>

                        <div id="importResultIssuesWrap" class="d-none">
                            <p class="fw-semibold mb-2">Dilewati / Tidak cocok</p>
                            <ul class="small mb-0" id="importResultIssues"></ul>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>
@endsection

@push('js-page')
<script>
$(function () {
    var $form = $('#form');

    function loading(on) {
        $('#submitButton').prop('disabled', on);
        $('#submitSpinner').toggleClass('d-none', !on);
        $('#submitLabel').text(on ? 'Memproses...' : 'Import Data');
    }

    function esc(s) {
        return $('<div>').text(s == null ? '' : s).html();
    }

    function stat(label, val, color) {
        return '<div class="col-6 col-md-3">' +
                 '<div class="border rounded p-3 text-center">' +
                   '<div class="fs-4 fw-bold text-' + color + '">' + val + '</div>' +
                   '<div class="small text-muted">' + label + '</div>' +
                 '</div>' +
               '</div>';
    }

    function renderResult(response) {
        var r        = response.result || {},
            updated  = r.updated  || [],
            skipped  = r.skipped  || [],
            notFound = r.not_found || [],
            errors   = r.errors   || [];

        $('#importResultAlert').html(
            '<div class="alert alert-' + (response.status === 'success' ? 'success' : 'danger') + '">' +
            esc(response.message) + '</div>');

        $('#importResultStats').html(
            stat('Diimpor', updated.length, 'success') +
            stat('Dilewati', skipped.length, 'warning') +
            stat('Tidak cocok', notFound.length, 'danger') +
            stat('Error', errors.length, 'secondary'));

        if (updated.length) {
            $('#importResultUpdated').html(updated.map(function (u) {
                return '<tr><td>' + esc(u.nim) + '</td>' +
                       '<td>' + esc(u.kelas) + '</td>' +
                       '<td class="text-end">' + esc(u.nilai_angka) + '</td></tr>';
            }).join(''));
            $('#importResultUpdatedWrap').removeClass('d-none');
        } else {
            $('#importResultUpdatedWrap').addClass('d-none');
        }

        var issues = [].concat(errors, notFound, skipped);
        if (issues.length) {
            $('#importResultIssues').html(issues.map(function (i) {
                return '<li>' + esc(i) + '</li>';
            }).join(''));
            $('#importResultIssuesWrap').removeClass('d-none');
        } else {
            $('#importResultIssuesWrap').addClass('d-none');
        }

        $('#importResult').removeClass('d-none');
    }

    $form.on('submit', function (e) {
        e.preventDefault();
        loading(true);

        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (response) {
                renderResult(response);
                $form[0].reset();
                loading(false);
            },
            error: function (xhr) {
                loading(false);
                var response = xhr.responseJSON;
                if (response && response.message) {
                    // 422 validasi Laravel tidak membawa "result"
                    renderResult({
                        status: 'error',
                        message: response.message,
                        result: response.result || {}
                    });
                } else {
                    $('#importResultAlert').html(
                        '<div class="alert alert-danger">Terjadi kesalahan saat mengunggah file.</div>');
                    $('#importResultStats').empty();
                    $('#importResultUpdatedWrap').addClass('d-none');
                    $('#importResultIssuesWrap').addClass('d-none');
                    $('#importResult').removeClass('d-none');
                }
            }
        });
    });
});
</script>
@endpush