@php
$coaList = $listdo_data ?? []; // Ambil data langsung dari sync_data
@endphp

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

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

<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <div class="d-flex align-items-center gap-2">
                        {{-- ✅ BACK yang optimal --}}
                        <button type="button" class="btn btn-secondary mb-0" onclick="window.location.href='{{ route('coa.filter', [
                                    'v_fdate' => session('filter_v_fdate'),
                                    'v_tdate' => session('filter_v_tdate'),
                                    'v_matnr' => session('filter_v_matnr'),
                                    'v_kunnr' => session('filter_v_kunnr'),
                                    'v_vbeln' => session('filter_v_vbeln'),
                                    'v_vbeln_multi' => session('filter_v_vbeln_multi'),
                                    'v_arbpl' => session('filter_v_arbpl'),
                                    'v_line' => session('filter_v_line'),
                                ]) }}'">
                            <i class="fas fa-arrow-rotate-left"></i>
                            <span class="font-weight-bold"> Kembali</span>
                        </button>

                        <!-- Tombol Sinkronisasi dengan Modal -->
                        <button type="button" class="btn btn-primary mb-0" 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 class="text-sm text-muted mt-2 mt-lg-0">
                        <i class="fas fa-clock me-1"></i>
                        Terakhir sinkron: <strong>{{ $last_sync_time ?? 'Belum Pernah' }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="row mx-1">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-start">
                        <h5 class="mb-0">List {{ $title_menu ?? 'Certificate of Analysis' }}</h5>

                        {{-- Alert messages --}}
                        <div class="ms-auto">
                            @if (session('success'))
                            <div class="alert alert-success alert-dismissible fade show mb-0 px-3 py-2 d-flex align-items-center text-white fw-bold"
                                role="alert" style="min-width: 280px; font-size: 0.95rem;">
                                <i class="fas fa-thumbs-up me-2"></i>
                                <span class="alert-text flex-grow-1">{{ session('success') }}</span>
                                <button type="button" class="btn-close btn-close-white ms-2 p-1" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                            @endif

                            @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show mb-0 px-3 py-2 d-flex align-items-center text-white fw-bold"
                                role="alert" style="min-width: 280px; font-size: 0.95rem;">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <span class="alert-text flex-grow-1">{{ session('error') }}</span>
                                <button type="button" class="btn-close btn-close-white ms-2 p-1" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                            @endif
                        </div>
                    </div>

                    <hr class="horizontal dark mt-0">
                    @include('components.alert')

                    <div class="row px-4 py-2">
                        <div class="table-responsive">
                            <table class="table display" id="coaTable">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th class="text-center">No</th>
                                        <th class="text-center">Action</th>
                                        <th class="text-center">A.C GI Date</th>
                                        <th class="text-center">SD Doc.</th>
                                        <th class="text-center">Material</th>
                                        <th class="text-center">Name</th>
                                        <th class="text-center">Customer</th>
                                        <th class="text-center">Description</th>
                                        <th class="text-center">Workcenter</th>
                                        <th class="text-center">Line</th>
                                        <th class="text-center">Jumboroll</th>
                                        <th class="text-center">COA Number</th>
                                        <th class="text-center">Roll Number</th>

                                        {{-- Header dinamis mic --}}
                                        @if (!empty($uniqueMicNames))
                                        @foreach ($uniqueMicNames as $mic_name)
                                        <th class="text-center">{{ ucfirst(str_replace('_', ' ', $mic_name)) }}
                                        </th>
                                        @endforeach
                                        @else
                                        <th class="text-center text-danger" colspan="8">
                                            No Data Found for `trs_coa_d`
                                        </th>
                                        @endif
                                    </tr>
                                </thead>

                                <tbody class="text-center">
                                    @if (!empty($listdo_data))
                                    @foreach ($listdo_data as $coa)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>
                                            <div class="btn-group">
                                                <a href="{{ url('trscoa/add') }}?sd_doc={{ urlencode(Crypt::encryptString($coa['VBELN'])) }}&material={{ urlencode(Crypt::encryptString($coa['MATNR'])) }}"
                                                    class="btn btn-xs {{ $coa['exists_in_db'] ? 'btn-primary' : 'btn-light' }}"
                                                    title="View" onclick="showLoadingSpinner()">
                                                    <i
                                                        class="fas {{ $coa['exists_in_db'] ? 'fa-pencil-alt' : 'fa-file' }}"></i>
                                                </a>
                                            </div>
                                        </td>
                                        <td>{{ $coa['WADAT_IST'] ?? '-' }}</td>
                                        <td>{{ $coa['VBELN'] ?? '-' }}</td>
                                        <td>{{ $coa['MATNR'] ?? '-' }}</td>
                                        <td style="font-family: 'Roboto', Arial, Helvetica, sans-serif;">
                                            {{ mb_strtoupper($coa['customer_name'] ?? ($coa['NAME1'] ?? '-'), 'UTF-8')
                                            }}
                                        </td>
                                        <td>{{ $coa['KUNAG'] ?? '-' }}</td>
                                        <td>{{ $coa['ARKTX'] ?? '-' }}</td>
                                        <td>{{ $coa['LTXA1'] ?? '-' }}</td>
                                        <td>{{ !empty($coa['LINE']) ? 'Line ' . $coa['LINE'] : '-' }}</td>
                                        <td>{{ $coa['JUMBOROLL'] ?? '-' }}</td>
                                        <td>{{ $coa['coa_number'] ?? '-' }}</td>
                                        <td>{{ $coa['roll_number'] ?? '-' }}</td>

                                        {{-- ✅ MIC value cepat (pakai map, bukan filter collection) --}}
                                        @foreach ($uniqueMicNames ?? [] as $mic_name)
                                        <td>{{ $coaDetailMap[$coa['coa_number'] ?? ''][$mic_name] ?? '-' }}
                                        </td>
                                        @endforeach
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="20" class="text-center text-danger">
                                            Data COA tidak ditemukan.
                                        </td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="row px-4 py-2">
                        <div class="col-lg">
                            <div class="nav-wrapper" id="noted">
                                <code>Note :<br>
                                        <i class="fas fa-circle text-primary"></i> Sudah ada COA <br>
                                        <i class="fas fa-circle text-light"></i> Belum ada COA
                                    </code>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Tombol trigger PDF, disembunyikan -->
    <button id="btn-print-pdf" style="display: none;"></button>
</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>

<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 back/forward (bfcache), tutup swal yang kebawa
        window.addEventListener('pageshow', function() {
            if (typeof Swal !== 'undefined') Swal.close();
        });

        $(document).ready(function() {

            // =========================
            // BACK BUTTON (optimal)
            // =========================
            $('#btnBackResult').on('click', function() {
                // history normal -> back
                if (window.history.length > 1) {
                    window.history.back();
                    return;
                }
                // fallback
                window.location.href = "{{ route('coa.filter') }}";
            });

            // =========================
            // DATATABLE (replaceState, bukan pushState)
            // =========================
            var table = $('#coaTable').DataTable({
                language: {
                    search: "Cari :",
                    ordering: true,
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)"
                },
                responsive: true,
                dom: 'Blfrtip',
                pageLength: 10,
                stateSave: true,
                drawCallback: function(settings) {
                    const api = settings.oInstance.api();
                    const pageInfo = api.page.info();
                    const currentPage = pageInfo.page + 1;

                    const currentUrl = window.location.href.split('?')[0];
                    const params = new URLSearchParams(window.location.search);
                    params.set('page', currentPage);

                    // ✅ penting: replaceState supaya history tidak numpuk
                    history.replaceState(null, '', currentUrl + '?' + params.toString());
                },
                buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-success"></i> <span class="font-weight-bold">Excel</span>',
                    autoFilter: true,
                    sheetName: 'Exported data',
                    exportOptions: {
                        columns: function(idx, data, node) {
                            var columns = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

                            @foreach ($uniqueMicNames ?? [] as $index => $mic_name)
                                columns.push({{ 13 + $index }});
                            @endforeach

                            return columns;
                        }
                    }
                }, {
                    text: '<i class="fas fa-file-pdf me-1 text-danger"></i> <span class="font-weight-bold">Print PDF</span>',
                    action: function() {
                        $('#btn-print-pdf').trigger('click');
                    }
                }]
            });

            // Styling tombol DT
            $('.dt-button').addClass('btn btn-secondary me-2 mb-2').removeClass('dt-button');

            // =========================
            // PRINT PDF
            // =========================
            document.getElementById('btn-print-pdf').addEventListener('click', function() {
                const tableData = {!! json_encode($coaList) !!};

                const body = [
                    [{
                        text: 'No',
                        style: 'tableHeader'
                    }, {
                        text: 'Tanggal',
                        style: 'tableHeader'
                    }, {
                        text: 'SD Doc.',
                        style: 'tableHeader'
                    }, {
                        text: 'Material',
                        style: 'tableHeader'
                    }, {
                        text: 'Name',
                        style: 'tableHeader'
                    }, {
                        text: 'Customer',
                        style: 'tableHeader'
                    }, {
                        text: 'Description',
                        style: 'tableHeader'
                    }, {
                        text: 'Workcenter',
                        style: 'tableHeader'
                    }, {
                        text: 'Line',
                        style: 'tableHeader'
                    }, {
                        text: 'Jumboroll',
                        style: 'tableHeader'
                    }]
                ];

                tableData.forEach((row, idx) => {
                    // Ambil nama customer, prioritaskan customer_name lalu NAME1
                    let customerName = row.customer_name ? row.customer_name : (row.NAME1 ? row.NAME1 : '-');
                    
                    // Cek jika ada abjad unik (karakter di luar ASCII standar seperti ę, dsb.)
                    let hasUniqueChar = /[^\x00-\x7F]/.test(customerName);
                    let fontToUse = hasUniqueChar ? 'Roboto' : 'TimesNewRoman';
                    
                    body.push([
                        idx + 1,
                        row.WADAT_IST ?? '-',
                        row.VBELN ?? '-',
                        row.MATNR ?? '-',
                        { 
                            text: customerName.toUpperCase(), 
                            font: fontToUse
                        },
                        row.KUNAG ?? '-',
                        row.ARKTX ?? '-',
                        row.LTXA1 ?? '-',
                        row.LINE ? ('Line ' + row.LINE) : '-',
                        row.JUMBOROLL ?? '-',
                    ]);
                });

                pdfMake.fonts = {
                    TimesNewRoman: {
                        normal: 'times new roman.ttf',
                        bold: 'times new roman bold.ttf',
                        italics: 'times new roman italic.ttf',
                        bolditalics: 'times new roman bold italic.ttf'
                    },
                    Roboto: {
                        normal: 'Roboto-Regular.ttf',
                        bold: 'Roboto-Medium.ttf',
                        italics: 'Roboto-Italic.ttf',
                        bolditalics: 'Roboto-MediumItalic.ttf'
                    }
                };

                const docDefinition = {
                    content: [{
                        text: 'Daftar Delivery Order (List DO)',
                        style: 'header'
                    }, {
                        style: 'tableStyle',
                        table: {
                            headerRows: 1,
                            widths: [30, 60, 70, 130, 110, 80, 140, '*'],
                            body: body
                        },
                        layout: {
                            hLineWidth: () => 0.5,
                            vLineWidth: () => 0.5,
                            paddingLeft: () => 5,
                            paddingRight: () => 5,
                            paddingTop: () => 4,
                            paddingBottom: () => 4,
                        },
                        margin: [0, 20, 0, 20]
                    }],
                    styles: {
                        header: {
                            fontSize: 16,
                            bold: true,
                            alignment: 'center',
                            margin: [0, 10, 0, 10]
                        },
                        tableHeader: {
                            bold: true,
                            fontSize: 10,
                            color: 'white',
                            fillColor: '#00b7bd',
                            alignment: 'center'
                        },
                        tableStyle: {
                            fontSize: 9
                        }
                    },
                    defaultStyle: {
                        font: 'TimesNewRoman',
                        fontSize: 9
                    },
                    pageOrientation: 'landscape',
                    pageSize: 'A4',
                    pageMargins: [20, 20, 20, 20]
                };

                pdfMake.createPdf(docDefinition).open();
            });

            // =========================
            // 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();
            });

        });

        // 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>
@endsection