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

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

    <div class="container-fluid py-4">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>Success:</strong> {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <strong>Error:</strong> {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session('info'))
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong>Info:</strong> {{ session('info') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Filter Certificate of Analysis</h5>

                        <div class="d-flex align-items-center gap-3">
                            <div class="text-end me-3">
                                <small class="text-muted">Terakhir Sinkron:</small><br>
                                <span class="fw-bold text-dark">
                                    {{ $last_sync_time ?? 'Belum Pernah' }}
                                </span>
                            </div>

                            <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#syncModal">
                                <i class="fas fa-rotate"></i> <span class="font-weight-bold">Sync Data</span>
                            </button>
                        </div>
                    </div>

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

                    <div class="card-body">
                        <form action="{{ url('trscoa/result') }}" method="POST" id="filterForm">
                            @csrf
                            <input type="hidden" name="filter_submitted" value="1">
                            <div class="row">
                                <!-- Material -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="material" class="form-label">Material</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="material" name="v_matnr"
                                                placeholder="Enter material code"
                                                value="{{ session('filter_v_matnr', '') }}">
                                        </div>
                                    </div>
                                </div>

                                <!-- Customer -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="customer" class="form-label">Sold-to Party</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="customer" name="v_kunnr"
                                                placeholder="Enter customer code"
                                                value="{{ session('filter_v_kunnr', '') }}">
                                        </div>
                                    </div>
                                </div>

                                <!-- Delivery Order (Interactive Multiple selection) -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label class="form-label">Delivery Order</label>

                                        <div class="d-flex gap-2 align-items-stretch mb-0">
                                            <input type="text" class="form-control mb-0" id="delivery_order_quick"
                                                placeholder="Ketik DO" style="flex:1; min-width:260px;" name="v_vbeln">

                                            <button type="button"
                                                class="btn btn-primary px-3 mb-0 d-flex align-items-center justify-content-center"
                                                data-bs-toggle="modal" data-bs-target="#vbelnMultiModal"
                                                title="Multiple Selection" aria-label="Multiple Selection">
                                                <i class="fas fa-arrow-right"></i>
                                            </button>
                                        </div>

                                        <!-- preview chips -->
                                        <div class="mt-2">
                                            <small class="text-muted">
                                                DO terpilih: <span id="vbelnCount">0</span>
                                            </small>
                                        </div>

                                        <!-- hidden textarea yang dikirim ke backend -->
                                        <textarea class="d-none" name="v_vbeln_multi" id="delivery_order_multi" rows="3"></textarea>

                                        <small class="text-muted d-block mt-1">
                                            Enter untuk tambah. Support: range <b>AAA-BBB</b>, wildcard <b>*</b>.
                                        </small>
                                    </div>
                                </div>
                                <!-- Workcenter (Searchable Select) -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="workcenter" class="form-label">Workcenter</label>
                                        <select class="form-control" id="workcenter" name="v_arbpl" style="width: 100%;">
                                            @if (!empty(session('last_workcenter')))
                                                <option value="{{ session('last_workcenter') }}" selected>
                                                    {{ session('last_workcenter') }}
                                                </option>
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <!-- ✅ Line (Searchable Select) -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="line" class="form-label">Line</label>
                                        <select class="form-control" id="line" name="v_line" style="width: 100%;">
                                            @if (!empty(session('last_line')))
                                                <option value="{{ session('last_line') }}" selected>
                                                    Line {{ session('last_line') }}
                                                </option>
                                            @endif
                                        </select>
                                        <small class="text-muted d-block mt-1">Ketik untuk mencari line.</small>
                                    </div>
                                </div>

                                <!-- Delivery Date -->
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label for="delivery_date" class="form-label">Delivery Date</label>
                                        <div class="row">
                                            <div class="col">
                                                <input type="date" class="form-control" name="v_fdate"
                                                    value="{{ session('last_delivery_date_from', '') }}">
                                            </div>
                                            <div class="col">
                                                <input type="date" class="form-control" name="v_tdate"
                                                    value="{{ session('last_delivery_date_to', '') }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tombol Filter -->
                            <div class="mt-3 text-start">
                                <button type="reset" class="btn btn-secondary" id="btnReset">
                                    <i class="fas fa-times"></i> Reset
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-filter"></i> Apply Filter
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Sinkronisasi -->
    <div class="modal fade" id="syncModal" tabindex="-1" aria-labelledby="syncModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('sync.data') }}" method="POST" id="syncForm">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="syncModalLabel">Set Date Range</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="start_date" class="form-label">Start Date</label>
                            <input type="date" name="start_date" class="form-control" required>
                        </div>
                        <div class="mb-3">
                            <label for="end_date" class="form-label">End Date</label>
                            <input type="date" name="end_date" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Synchronize</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="vbelnMultiModal" tabindex="-1" aria-labelledby="vbelnMultiModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="vbelnMultiModalLabel">Multiple Selection - Delivery Order</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnVbelnPaste">Paste dari
                            Clipboard</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary" id="btnVbelnNormalize">Normalize
                            (10 digit)</button>
                        <button type="button" class="btn btn-sm btn-outline-danger" id="btnVbelnClear">Clear</button>
                    </div>

                    <textarea class="form-control" id="vbelnModalTextarea" rows="8"
                        placeholder="1 baris = 1 DO / pattern
      Contoh:
      0726010807
      0726010808
      0726010810-0726010820
      0726*"></textarea>

                    <small class="text-muted d-block mt-2">
                        Tips: wildcard pakai <b>*</b>, range pakai <b>-</b>. Spasi akan di-trim otomatis.
                    </small>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" id="btnVbelnApply">Apply</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // =========================
        // SWEETALERT SPINNER
        // =========================
        function showLoadingSpinner() {
            Swal.fire({
                title: 'Processing...',
                html: `
                    <div style="width: 100%; height: 20px; background-color: #f3f3f3; border-radius: 10px; position: relative; overflow: hidden;">
                        <div id="light-bar" style="
                            width: 50%;
                            height: 100%;
                            background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #3498db, rgba(255, 255, 255, 0.2));
                            position: absolute;
                            top: 0;
                            left: 0;
                            border-radius: 10px;
                            animation: lightMove 1s infinite linear;
                        "></div>
                    </div>
                    <p style="margin-top: 10px; font-size: 14px; color: #555;">Sedang memproses, harap tunggu...</p>
                    <style>
                        @keyframes lightMove { 0% { left: -20%; } 100% { left: 120%; } }
                    </style>
                `,
                allowOutsideClick: false,
                allowEscapeKey: false,
                showConfirmButton: false,
            });
        }

        // ✅ FIX: kalau user balik (history back/bfcache), tutup swal yang masih kebawa
        window.addEventListener('pageshow', function() {
            if (typeof Swal !== 'undefined') Swal.close();
        });
        document.addEventListener('visibilitychange', function() {
            if (!document.hidden && typeof Swal !== 'undefined') Swal.close();
        });

        $(document).ready(function() {

            // =========================
            // SELECT2 LAZY INIT (BIAR LOAD CEPAT)
            // =========================
            function initWorkcenterSelect2() {
                const $el = $('#workcenter');
                if ($el.data('select2')) return;

                $el.select2({
                    placeholder: 'Select Workcenter QC',
                    allowClear: true,
                    width: '100%',
                    minimumInputLength: 2, // ✅ baru request kalau user ketik 2 char
                    ajax: {
                        url: "{{ route('sync.workcenter.options') }}",
                        dataType: 'json',
                        delay: 400,
                        data: function(params) {
                            return {
                                q: params.term || ''
                            };
                        },
                        processResults: function(data) {
                            return data;
                        },
                        cache: true
                    }
                });
            }

            function initLineSelect2() {
                const $el = $('#line');
                if ($el.data('select2')) return;

                $el.select2({
                    placeholder: 'Select Line',
                    allowClear: true,
                    width: '100%',
                    minimumInputLength: 1,
                    ajax: {
                        url: "{{ route('sync.line.options') }}",
                        dataType: 'json',
                        delay: 400,
                        data: function(params) {
                            return {
                                q: params.term || ''
                            };
                        },
                        processResults: function(data) {
                            return data;
                        },
                        cache: true
                    }
                });
            }

            // ✅ init hanya saat user interaksi (klik/focus)
            $('#workcenter').one('focus', initWorkcenterSelect2);
            $('#workcenter').one('click', initWorkcenterSelect2);
            $('#line').one('focus', initLineSelect2);
            $('#line').one('click', initLineSelect2);

            // =========================
            // MULTI VBELN
            // =========================
            const $hidden = $('#delivery_order_multi');
            const $quick = $('#delivery_order_quick');
            const $modalTa = $('#vbelnModalTextarea');
            const $count = $('#vbelnCount');

            function normalizeExact10(v) {
                const digits = (v || '').toString().replace(/\D/g, '');
                if (!digits) return '';
                return digits.padStart(10, '0');
            }

            function splitLines(raw) {
                raw = (raw || '').toString().replace(/\r\n/g, '\n').replace(/\r/g, '\n').trim();
                if (!raw) return [];
                return raw.split('\n').map(s => s.trim()).filter(Boolean);
            }

            function getList() {
                return splitLines($hidden.val());
            }

            function updateUI() {
                const list = getList();
                if ($count.length) $count.text(list.length);
            }

            function setList(list) {
                const uniq = [...new Set(list)];
                $hidden.val(uniq.join("\n"));
                updateUI();
            }
            updateUI();
            // modal open
            $('#vbelnMultiModal').on('show.bs.modal', function() {
                const list = getList();
                $modalTa.val(list.join("\n"));

                const quickVal = ($quick.val() || '').trim();
                if (quickVal) {
                    const cur = ($modalTa.val() || '').trim();
                    $modalTa.val(cur ? (cur + "\n" + quickVal) : quickVal);
                }

                updateUI();
                setTimeout(() => $modalTa.trigger('focus'), 50);
            });

            // apply modal
            $('#btnVbelnApply').on('click', function() {
                const lines = splitLines($modalTa.val()).map(s => s.replaceAll('*', '%'));
                setList(lines);
                $('#vbelnMultiModal').modal('hide');
            });

            // modal hide (auto-sync agar data tidak hilang walau user tidak klik tombol Apply)
            $('#vbelnMultiModal').on('hide.bs.modal', function() {
                const lines = splitLines($modalTa.val()).map(s => s.replaceAll('*', '%'));
                setList(lines);
            });

            // clear
            $('#btnVbelnClear').on('click', function() {
                $modalTa.val('');
                setList([]);
            });

            // normalize
            $('#btnVbelnNormalize').on('click', function() {
                const lines = splitLines($modalTa.val()).map(s => s.replaceAll('*', '%'));
                const out = lines.map(v => {
                    const isRange = v.includes('-');
                    const isLike = v.includes('%');
                    const isDigitsOnly = /^[0-9]+$/.test(v);

                    if (isDigitsOnly && !isRange && !isLike) return normalizeExact10(v);

                    if (isRange) {
                        const [a, b] = v.split('-', 2).map(x => x.trim());
                        if (/^[0-9]+$/.test(a) && /^[0-9]+$/.test(b)) {
                            return `${normalizeExact10(a)}-${normalizeExact10(b)}`;
                        }
                    }
                    return v;
                });

                $modalTa.val(out.join("\n"));
            });

            // paste
            $('#btnVbelnPaste').on('click', async function() {
                if (!navigator.clipboard || !window.isSecureContext) {
                    $modalTa.trigger('focus');
                    Swal.fire({
                        icon: 'info',
                        title: 'Paste manual',
                        text: 'Browser membatasi akses clipboard. Klik textarea lalu tekan Ctrl+V.',
                    });
                    return;
                }

                try {
                    const text = await navigator.clipboard.readText();
                    if (text) {
                        const current = splitLines($modalTa.val());
                        const incoming = splitLines(text);
                        $modalTa.val([...current, ...incoming].join("\n"));
                    }
                } catch (e) {
                    $modalTa.trigger('focus');
                    Swal.fire({
                        icon: 'info',
                        title: 'Paste manual',
                        text: 'Klik textarea lalu tekan Ctrl+V.',
                    });
                }
            });

            // =========================
            // RESET
            // =========================
            $('#btnReset').on('click', function() {
                setTimeout(() => {
                    // kalau select2 belum di-init, ini tetap aman
                    $('#workcenter').val(null).trigger('change');
                    $('#line').val(null).trigger('change');

                    $quick.val('');
                    $modalTa.val('');
                    setList([]);
                }, 0);
            });

            // =========================
            // SYNC FORM (progress)
            // =========================
            $('#syncForm').on('submit', function(e) {
                e.preventDefault();

                const startDate = new Date($("[name='start_date']").val());
                const endDate = new Date($("[name='end_date']").val());

                if (startDate > endDate) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Tanggal Tidak Valid',
                        text: 'Tanggal akhir tidak boleh lebih kecil dari tanggal awal.'
                    });
                    return false;
                }

                $('#syncModal').modal('hide');

                Swal.fire({
                    title: 'Memproses Sync Data...',
                    html: `
                        <div style="width: 100%; height: 20px; background-color: #f3f3f3; border-radius: 10px; position: relative; overflow: hidden;">
                            <div id="light-bar" style="
                                width: 50%;
                                height: 100%;
                                background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), #3498db, rgba(255, 255, 255, 0.2));
                                position: absolute;
                                top: 0;
                                left: 0;
                                border-radius: 10px;
                                animation: lightMove 1s infinite linear;
                            "></div>
                        </div>
                        <p id="progressText" style="margin-top: 10px; font-size: 14px; color: #555;">Mengambil data dari API...</p>
                        <style>
                            @keyframes lightMove { 0% { left: -20%; } 100% { left: 120%; } }
                        </style>
                    `,
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: () => {
                        const progressText = document.getElementById("progressText");
                        const interval = setInterval(() => {
                            $.get('{{ url('sync/progress') }}', function(res) {
                                if (res && res.total > 0) {
                                    const percent = Math.floor((res.processed /
                                        res.total) * 100);
                                    progressText.innerText =
                                        `Proses sinkronisasi ${percent}%...`;

                                    if (percent >= 100) {
                                        clearInterval(interval);
                                        progressText.innerText =
                                            'Sinkronisasi selesai!';
                                        setTimeout(() => {
                                            Swal.close();
                                            location.reload();
                                        }, 1000);
                                    }
                                } else {
                                    progressText.innerText =
                                        'Mengambil data dari API...';
                                }
                            }).fail(() => {
                                clearInterval(interval);
                                progressText.innerText =
                                    'Gagal mengambil status progres.';
                            });
                        }, 1000);
                    }
                });

                this.submit();
            });

            // =========================
            // FILTER SUBMIT (wildcard + merge quick->multi) + show spinner
            // =========================
            document.getElementById('filterForm').addEventListener('submit', function() {
                // ✅ tampilkan spinner saat submit beneran
                showLoadingSpinner();

                const materialInput = document.getElementById('material');
                const customerInput = document.getElementById('customer');

                if (materialInput && materialInput.value.includes('*')) {
                    materialInput.value = materialInput.value.replaceAll('*', '%');
                }
                if (customerInput && customerInput.value.includes('*')) {
                    customerInput.value = customerInput.value.replaceAll('*', '%');
                }

                const multi = document.getElementById('delivery_order_multi');
                if (multi && multi.value.includes('*')) {
                    multi.value = multi.value.replaceAll('*', '%');
                }

                const quick = document.getElementById('delivery_order_quick');
                const quickValRaw = (quick?.value || '').trim();

                if (quickValRaw) {
                    let item = quickValRaw.replaceAll('*', '%');

                    if (/^\d+$/.test(item)) {
                        item = item.padStart(10, '0');
                    }

                    const multiVal = (multi?.value || '').replace(/\r\n/g, '\n').replace(/\r/g, '\n');
                    const lines = multiVal.split('\n').map(s => s.trim()).filter(Boolean);

                    if (!lines.includes(item)) {
                        lines.push(item);
                        multi.value = lines.join('\n');
                    }
                }
            });

        });

        // auto close alert 5 detik
        document.addEventListener("DOMContentLoaded", function() {
            setTimeout(function() {
                let alertElements = document.querySelectorAll(".alert");
                alertElements.forEach(function(alert) {
                    let bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                });
            }, 5000);
        });
    </script>
@endpush