@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_all_properties.xlsx') }}" class="btn btn-success mb-0"
                            download>
                            <i class="fas fa-download me-1"></i>Template Dokumen
                        </a>
                        <a href="{{ URL::to('lstall') }}" class="btn btn-info mb-0">Cek Hasil Upload</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>
                            <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>
                                </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('js')
    <script>
        (() => {
            const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            /* ---------- helpers ---------- */
            const esc = s => String(s).replace(/[&<>"']/g, m => ({
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            } [m]));
            const cleanArr = arr => (arr || []).filter(x => x && String(x).trim() !== '');

            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.entries(rows).map(([rn, cols]) =>
                    `<li>Baris <b>${esc(rn)}</b>: ${cleanArr(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">Lengkapi kolom yang disebut pada baris tersebut, lalu upload ulang.</p>
             </div>`,
                    confirmButtonText: 'OK',
                    allowOutsideClick: false
                });
            };

            const showMissingDynamic = (list = []) => {
                const ul = cleanArr(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) location.href = '{{ URL::to('mstprs') }}';
                    else if (res.isDenied) location.href = '{{ URL::to('mstprm') }}';
                });
            };

            const showMissingFK = (mc, mm, me) => {
                const list = arr => cleanArr(arr).map(x => `<li><code>${esc(x)}</code></li>`).join('');
                return Swal.fire({
                    icon: 'warning',
                    title: 'Master FK belum lengkap',
                    html: `${(mc||[]).length?`<p><b>Customer:</b></p><ul>${list(mc)}</ul>`:''}
            ${(mm||[]).length?`<p><b>Material:</b></p><ul>${list(mm)}</ul>`:''}
            ${(me||[]).length?`<p><b>Mesin:</b></p><ul>${list(me)}</ul>`:''}
            <p class="mt-2">Lengkapi master terkait, lalu upload ulang.</p>`,
                    showConfirmButton: true,
                    confirmButtonText: 'Master Customer',
                    showDenyButton: true,
                    denyButtonText: 'Master Material',
                    showCancelButton: true,
                    cancelButtonText: 'Master Mesin',
                    allowOutsideClick: false
                }).then(res => {
                    if (res.isConfirmed) location.href = '/mstcst';
                    else if (res.isDenied) location.href = '/mstmtr';
                    else location.href = '/mesin';
                });
            };

            const progressHtml = (done, total) => {
                const pct = Math.floor((done / Math.max(total, 1)) * 100);
                return `<div class="text-start">
              <div class="mb-2">
  Diproses: <b>${done}</b> dari <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: {
                                'Accept': 'application/json',
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body: new URLSearchParams({
                                token
                            })
                        })
                        .then(async r => {
                            const text = await r.text();
                            if (text.trim().startsWith('<')) {
                                console.error('HTML RESPONSE:', text);
                                throw new Error('Session / CSRF expired (HTML response)');
                            }
                            return JSON.parse(text);
                        })
                        .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) {
                                html = `
<p>Total baris: <b>${total}</b></p>
<p>Gagal: <b>${res.failed_rows}</b></p>
`;


                                if ((res.errors || []).length) {
                                    html += '<hr><p><b>List Error:</b></p><ul>';
                                    res.errors.forEach(e => {
                                        html += `<li>
  Baris <b>${e.row}</b>:
  ${e.reason}
  ${e.fields ? `(<code>${e.fields.join(', ')}</code>)` : ''}
</li>`;

                                    });
                                    html += '</ul>';
                                }

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Selesai',
                                    html,
                                    confirmButtonText: 'Cek Hasil Upload'
                                }).then(() => location.href = '{{ URL::to('lstall') }}');

                            } else {
                                setTimeout(tick, 250);
                            }
                        })
                        .catch(err => {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: err.message || String(err)
                            });
                        });
                }
            };

            /* ---------- fallback non-AJAX (flash) ---------- */
            (() => {
                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) location.href = rawSwal.redirect;
                    });
                    return;
                }

                if (rawMissing) {
                    if (rawMissing.type === 'missing_headers') showMissingHeaders(rawMissing.missing_headers || []);
                    else if (rawMissing.type === 'missing_values') showMissingValues(rawMissing.missing_rows || {});
                    else if (rawMissing.type === 'missing_both') showMissingDynamic(rawMissing.missing || []);
                    else if (rawMissing.type === 'missing_fk') showMissingFK(rawMissing.missing_customer, rawMissing
                        .missing_material, rawMissing.missing_mesin);
                }
            })();

            /* ---------- 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(async r => {
                        const text = await r.text();
                        if (text.trim().startsWith('<')) {
                            console.error('HTML RESPONSE:', text);
                            throw new Error('Session / CSRF expired (HTML response)');
                        }
                        return JSON.parse(text);
                    })
                    .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 === 'missing_fk') return showMissingFK(res.missing_customer, res
                            .missing_material, res.missing_mesin);
                        if (res.status === 'ok' && res.token) return runProgress(processUrl, res.token, res
                            .total_rows || 0);

                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: res.message || 'Terjadi kesalahan.'
                        });
                    })
                    .catch(err => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: err?.message || 'Terjadi kesalahan.'
                        });
                    });
            });
        })();
    </script>
@endpush