@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper d-flex gap-2">
                        @if ($authorize->add == '1')
                            <button type="submit" form="{{ $dmenu }}-form" class="btn btn-primary mb-0">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                        <a href="{{ asset('templates/template_master_special.xlsx') }}" class="btn btn-success mb-0"
                            download>
                            <i class="fas fa-download me-1"></i>Template Dokumen
                        </a>
                        <a href="{{ URL::to('lstspc') }}" class="btn btn-info mb-0">Cek Hasil Upload</a>
                        {{-- <a href="{{ URL::to('uplspc') }}" class="btn btn-secondary mb-0">Upload Ulang</a> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form id="{{ $dmenu }}-form" role="form" method="POST" action="{{ URL::to($url_menu) }}"
                    enctype="multipart/form-data" data-process-url="{{ url($url_menu) }}/process" autocomplete="off">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Upload {{ $title_menu }}</p>

                            {{-- optional: alert bootstrap biasa (tidak dipakai utk blocking swal) --}}
                            {{-- <div class="col">@include('components.alert')</div> --}}

                            <hr class="horizontal dark mt-0">

                            <div class="row">
                                @if ($is_admin ?? false)
                                    <div class="col-md-6">
                                        <div class="form-group mb-3">
                                            <label for="id_gedung" class="form-label">Pilih Gedung <span
                                                    class="text-danger">*</span></label>
                                            <select id="id_gedung" name="id_gedung" class="form-control" required>
                                                <option value="">-- Pilih Gedung --</option>
                                                @foreach ($gedung_list ?? [] as $gedung)
                                                    <option value="{{ $gedung->id }}">{{ $gedung->nama }}
                                                        ({{ $gedung->kode }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            <p class="text-primary text-xs pt-2 mb-0">Sebagai admin, Anda dapat memilih
                                                gedung tujuan upload.</p>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="file_input" class="form-label">File Excel</label>
                                        <input id="file_input" name="file" class="form-control" type="file"
                                            accept=".xlsx,.xls,.ods" required>
                                        <p class="text-primary text-xs pt-3 mb-0">Maksimal Size: <b>10 MB</b></p>
                                        <p class="text-primary text-xs pt-1">Format File: <b>xlsx, xls, ods</b></p>
                                    </div>

                                    {{-- opsional: kirim log debug ke laravel.log --}}
                                    {{-- <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="1" id="debug" name="debug">
                    <label class="form-check-label" for="debug">Debug</label>
                  </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                {{-- penampung flash swal untuk fallback non-AJAX --}}
                @if (session('swal') || session('swal_missing'))
                    <div id="swal-flash" data-swal='@json(session('swal'))'
                        data-missing='@json(session('swal_missing'))'></div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('addjs')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            /* ===== helper UI ===== */
            const esc = (s) => String(s).replace(/[&<>"']/g, m => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            } [m]));

            const showMissingHeaders = (headers = []) => {
                const list = headers.map(h => `<li><code>${esc(h)}</code></li>`).join('');
                return Swal.fire({
                    icon: 'error',
                    title: 'Kolom Wajib Hilang',
                    html: `
        <div class="text-start">
          <p>Kolom berikut <b>wajib ada</b> pada file Excel:</p>
          <ul>${list || '<li>(kosong)</li>'}</ul>
          <p class="mt-2">Tambahkan kolom di atas, lalu upload ulang.</p>
        </div>
      `,
                    confirmButtonText: 'OK',
                    allowOutsideClick: false
                });
            };

            const showMissingValues = (rows = {}) => {
                const items = Object.keys(rows).map(rn => {
                    const cols = rows[rn] || [];
                    return `<li>Baris <b>${esc(rn)}</b>: ${cols.map(esc).join(', ')}</li>`;
                }).join('');
                return Swal.fire({
                    icon: 'error',
                    title: 'Data Wajib Kosong',
                    html: `
        <div class="text-start">
          <p>Kolom berikut <b>wajib diisi</b> tetapi kosong:</p>
          <ul>${items || '<li>(tidak ada detail)</li>'}</ul>
          <p class="mt-2 mb-0">Isi <b>tested by</b>, <b>checked by</b>, dan <b>supervisor</b> di file Excel, lalu upload ulang.</p>
        </div>
      `,
                    confirmButtonText: 'OK',
                    allowOutsideClick: false
                });
            };

            const showMissingDynamic = (list = []) => {
                const ul = list.map(x => `<li><code>${esc(x)}</code></li>`).join('');
                return Swal.fire({
                    icon: 'warning',
                    title: 'Kolom Dinamis Belum Terdaftar',
                    html: `
        <div class="text-start">
          <p>Header berikut <b>tidak ditemukan</b> pada master:</p>
          <ul>${ul || '<li>(kosong)</li>'}</ul>
          <p class="mt-2">Silakan input nama kolom tersebut ke salah satu master berikut, lalu upload ulang:</p>
        </div>
      `,
                    showConfirmButton: true,
                    confirmButtonText: 'Master Properties',
                    showDenyButton: true,
                    denyButtonText: 'Master Parameter Mesin',
                    allowOutsideClick: false
                }).then(res => {
                    if (res.isConfirmed) window.location.href = "/mstprs";
                    else if (res.isDenied) window.location.href = "/mstprm";
                });
            };

                        const showInvalidMaterials = (materials = [], total = 0, processed = 0) => {
                                const list = materials.map(m => `<li><code>${esc(m)}</code></li>`).join('');
                return Swal.fire({
                    icon: 'warning',
                    title: 'Material Tidak Sesuai Format',
                    html: `
        <div class="text-start">
          <p>Berhasil memproses <b>${processed}</b> baris. Namun ditemukan material dengan panjang bukan 19 karakter:</p>
                    <div style="max-height:260px; overflow:auto; border:1px solid #eee; border-radius:8px; padding:8px;">
                        <ul class="mb-0">${list || '<li>(tidak ada detail)</li>'}</ul>
                    </div>
          <p class="mt-2">Perbaiki nama material menjadi <b>19 digit</b>, lalu upload ulang jika diperlukan.</p>
        </div>
      `,
                    confirmButtonText: 'Cek Hasil Upload',
                    showDenyButton: true,
                    denyButtonText: 'Upload Ulang',
                    confirmButtonColor: '#6c63ff',
                    denyButtonColor: '#f59e0b',
                    allowOutsideClick: false
                }).then((res) => {
                    if (res.isDenied) return window.location.href = "{{ URL::to('uplspc') }}";
                    return window.location.href = "{{ URL::to('lstspc') }}";
                });
            };

            const progressHtml = (done, total) => {
                const pct = Math.floor((done / Math.max(total, 1)) * 100);
                return `
      <div class="text-start">
        <div class="mb-2">Memproses: <b>${done}</b> / <b>${total}</b> baris</div>
        <div class="progress" style="height:18px;">
          <div class="progress-bar" role="progressbar" style="width:${pct}%;" aria-valuenow="${pct}" aria-valuemin="0" aria-valuemax="100">${pct}%</div>
        </div>
      </div>
    `;
            };

            const runProgress = (processUrl, token, total) => {
                Swal.fire({
                    title: 'Memproses data…',
                    html: progressHtml(0, total),
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => tick()
                });

                function tick() {
                    fetch(processUrl, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': csrf,
                                'Accept': 'application/json',
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: new URLSearchParams({
                                token
                            })
                        })
                        .then(r => r.json())
                        .then(res => {
                            if (res.status !== 'ok') throw new Error(res.message || 'Gagal memproses.');
                            const box = Swal.getHtmlContainer();
                            if (box) box.innerHTML = progressHtml(res.processed_rows || 0, total);
                            if (res.done) {
                                const invalidTotal = Number(res.invalid_materials_total || 0);
                                if (invalidTotal > 0) {
                                    return showInvalidMaterials(
                                        res.invalid_materials || [],
                                        invalidTotal,
                                        res.processed_rows || 0
                                    );
                                }
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Selesai',
                                    html: `Berhasil memproses <b>${res.processed_rows}</b> dari <b>${total}</b> baris.`,
                                    confirmButtonText: 'Cek Hasil Upload'
                                }).then(() => window.location.href = "{{ URL::to('lstspc') }}");
                            } else {
                                setTimeout(tick, 250);
                            }
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: err.message || String(err)
                            });
                        });
                }
            };

            /* ===== fallback non-AJAX (jika controller mengembalikan with('swal*')) ===== */
            (function handleFlash() {
                const holder = document.getElementById('swal-flash');
                if (!holder || !window.Swal) return;
                const rawSwal = holder.dataset.swal ? JSON.parse(holder.dataset.swal) : null;
                const rawMissing = holder.dataset.missing ? JSON.parse(holder.dataset.missing) : null;

                if (rawSwal) {
                    Swal.fire({
                        icon: rawSwal.icon || 'info',
                        title: rawSwal.title || '',
                        html: rawSwal.html || '',
                        confirmButtonText: rawSwal.confirmButtonText || 'OK',
                        allowOutsideClick: false
                    }).then(() => {
                        if (rawSwal.redirect) window.location.href = rawSwal.redirect;
                    });
                    return;
                }

                if (rawMissing) {
                    if (rawMissing.type === 'missing_headers') return showMissingHeaders(rawMissing
                        .missing_headers || []);
                    if (rawMissing.type === 'missing_values') return showMissingValues(rawMissing
                        .missing_rows || {});
                    if (rawMissing.type === 'missing_both') return showMissingDynamic(rawMissing.missing || []);
                }
            })();

            /* ===== intercept submit → AJAX ===== */
            const form = document.getElementById('{{ $dmenu }}-form');
            if (!form) return;

            form.addEventListener('submit', (e) => {
                e.preventDefault();
                const fileInput = form.querySelector('input[type=file][name=file]');
                if (!fileInput || !fileInput.files.length) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pilih file terlebih dahulu.'
                    });
                    return;
                }

                // Validasi gedung untuk admin
                const gedungSelect = form.querySelector('select[name=id_gedung]');
                if (gedungSelect && !gedungSelect.value) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Pilih gedung terlebih dahulu.',
                        text: 'Sebagai admin, Anda harus memilih gedung tujuan upload.'
                    });
                    return;
                }

                const uploadUrl = form.action;
                const processUrl = form.dataset.processUrl;
                const fd = new FormData(form);

                Swal.fire({
                    title: 'Mengunggah…',
                    html: 'Harap tunggu',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => Swal.showLoading()
                });

                fetch(uploadUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrf,
                            'Accept': 'application/json'
                        },
                        body: fd
                    })
                    .then(r => r.json())
                    .then(res => {
                        if (res.status === 'missing_headers') return showMissingHeaders(res
                            .missing_headers || []);
                        if (res.status === 'missing_values') return showMissingValues(res
                            .missing_rows || {});
                        if (res.status === 'missing_both') return showMissingDynamic(res.missing || []);
                        if (res.status === 'ok' && res.token) return runProgress(processUrl, res.token,
                            res.total_rows || 0);
                        if (res.status === 'error') return Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: res.message || 'Terjadi kesalahan.'
                        });
                        Swal.fire({
                            icon: 'info',
                            title: 'Info',
                            text: 'Respon tidak dikenal.'
                        });
                    })
                    .catch(err => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: err?.message || 'Terjadi kesalahan.'
                        });
                    });
            });
        });
    </script>
@endpush