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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">

                        <style>
                            #list_stdpa tbody tr.row-no-standard,
                            #list_stdpa tbody tr.row-no-standard td {
                                background-color: #fff3cd !important;
                            }
                            #list_stdpa tbody tr.row-inactive,
                            #list_stdpa tbody tr.row-inactive td {
                                background-color: #ffe9ed !important;
                            }
                        </style>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="display table" id="list_stdpa">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="60">Action</th>
                                            <th width="50">No</th>
                                            <th>Departemen</th>
                                            <th>Posisi</th>
                                            <th>Standar</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- retrieve table detail --}}
                                        @foreach ($records as $record)
                                            @php
                                                $rowClass = '';
                                                if ($record->isactive == '0') {
                                                    $rowClass = 'row-inactive';
                                                } elseif (($record->active_period_items_count ?? 0) == 0) {
                                                    $rowClass = 'row-no-standard';
                                                }
                                            @endphp
                                            <tr class="{{ $rowClass }}">
                                                <td class="font-weight-normal text-sm">
                                                    {{-- check authorize edit using policy --}}
                                                    @can('update', \App\Models\PaStandardSet::class)
                                                        {{-- check status active --}}
                                                        @if ($record->isactive == 1)
                                                            {{-- button edit --}}
                                                            {{-- <button type="button" class="btn btn-sm btn-warning mb-0 px-3"
                                                                title="Edit Position Standards"
                                                                onclick="editPositionStandards({{ $record->position_id }}, '{{ addslashes($record->position_name) }}')">
                                                                <i class="fas fa-edit"></i><span class="font-weight-bold">
                                                                    Edit</span>
                                                            </button> --}}
                                                            <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                                title="View Assignment"
                                                                onclick="editPositionStandards({{ $record->position_id }}, '{{ addslashes($record->position_name) }}')">
                                                                <i class="fas fa-eye"> </i><span class="font-weight-bold">
                                                                    View
                                                            </button>
                                                        @else
                                                            <span class="text-muted">Data tidak aktif</span>
                                                        @endif
                                                    @else
                                                        <span class="text-muted">Tidak ada akses</span>
                                                    @endcan
                                                </td>
                                                <td class="font-weight-normal text-sm">
                                                    {{ $records->firstItem() + $loop->index }}</td>
                                                <td class="font-weight-normal text-sm">{{ $record->department_name }}</td>
                                                <td class="font-weight-normal text-sm">{{ $record->position_name }}</td>
                                                <td class="font-weight-normal text-sm">
                                                    @php
                                                        $periodsData = $record->periods_data;
                                                        $periods = $periodsData ? explode(';;', $periodsData) : [];
                                                    @endphp

                                                    @if (count($periods) > 0)
                                                        <div class="btn-group" role="group">
                                                            @foreach ($periods as $period)
                                                                @php
                                                                    $periodInfo = explode('|', $period);
                                                                    if (count($periodInfo) >= 5) {
                                                                        $periodId = $periodInfo[0];
                                                                        $quarter = $periodInfo[1];
                                                                        $year = $periodInfo[2];
                                                                        $range = $periodInfo[3];
                                                                        $status = $periodInfo[4];

                                                                        $badgeClass =
                                                                            $status === 'active'
                                                                                ? 'success'
                                                                                : 'warning';
                                                                        $buttonText = "Periode {$quarter} {$year}";
                                                                    }
                                                                @endphp

                                                                @if (isset($periodId))
                                                                    <button type="button"
                                                                        class="btn btn-{{ $badgeClass }} mb-1 me-1"
                                                                        onclick="loadMonthlyStandards({{ $record->position_id }}, {{ $periodId }}, '{{ $record->position_name }}', 'Periode {{ $quarter }} {{ $year }} ({{ $range }})')">
                                                                        {{ $buttonText }}
                                                                        <small class="d-block">
                                                                            @switch($status)
                                                                                @case('active')
                                                                                    Aktif
                                                                                @break

                                                                                @case('prep')
                                                                                    Persiapan
                                                                                @break

                                                                                @case('locked')
                                                                                    Terkunci
                                                                                @break

                                                                                @default
                                                                                    Tidak Diketahui
                                                                            @endswitch
                                                                        </small>
                                                                    </button>
                                                                @endif
                                                            @endforeach
                                                        </div>
                                                    @else
                                                        <span class="text-muted">No standards set</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        Data {{ $records->firstItem() }} - {{ $records->lastItem() }}
                                        dari {{ $records->total() }} data.
                                    </div>
                                    <div>
                                        {{ $records->appends(request()->query())->links('pagination::bootstrap-4') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted">
                                    <code>Note : <i aria-hidden="true" style="color: #ffc2cd;" class="fas fa-circle"></i>
                                        Data not active</code>
                                    <code class="ms-3">  <i aria-hidden="true" style="color: #fff3cd;" class="fas fa-circle"></i>
                                        Belum ada standar yang didefinisikan (semua bulan kosong)</code>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Bulk Import Section --}}
                    <div class="card mt-3">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Bulk Import Standard PA</h6>
                                @can('importBulkExcel', \App\Models\PaStandardSet::class)
                                    <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                        data-bs-target="#bulkImportModal">
                                        <i class="fas fa-file-excel me-1"></i>
                                        <span class="font-weight-bold">Bulk Import Excel</span>
                                    </button>
                                @endcan
                            </div>
                            <p class="text-muted mb-0 mt-2 text-sm">
                                Import standar PA untuk semua posisi sekaligus dalam satu file Excel
                            </p>
                        </div>
                    </div>
                    </>
                </div>
            </div>
        </div>

        {{-- Monthly Standards Modal --}}
        <div class="modal fade" id="monthlyStandardsModal" tabindex="-1" role="dialog"
            aria-labelledby="monthlyStandardsModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="monthlyStandardsModalLabel">
                            Detail Standard PA Bulanan
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" id="monthlyTabs" role="tablist">
                            <!-- Tabs will be dynamically populated -->
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content" id="monthlyTabContent">
                            <!-- Tab content will be dynamically populated -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Bulk Import Modal --}}
        <div class="modal fade" id="bulkImportModal" tabindex="-1" role="dialog" aria-labelledby="bulkImportModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="bulkImportModalLabel">
                            <i class="fas fa-file-excel me-2"></i>Bulk Import Standard PA
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="bulkImportForm" enctype="multipart/form-data">
                            @csrf

                            {{-- Step 1: Download Template --}}
                            <div class="mb-4">
                                <label class="form-label font-weight-bold">
                                    <span class="badge bg-primary me-2">1</span>Download Template
                                </label>
                                <div>
                                    <button type="button" id="downloadBulkTemplateBtn" class="btn btn-info btn-sm">
                                        <i class="fas fa-download me-1"></i> Download Template Excel
                                    </button>
                                    <small class="d-block text-muted mt-1">
                                        Template berisi semua posisi aktif. Template dapat digunakan untuk semua periode.
                                    </small>
                                </div>
                            </div>

                            <hr>

                            {{-- Step 2: Fill Template Instructions --}}
                            <div class="mb-4">
                                <label class="form-label font-weight-bold">
                                    <span class="badge bg-primary me-2">2</span>Isi Template Excel
                                </label>
                                <small class="d-block text-muted">
                                    Isi data standar PA untuk setiap posisi sesuai petunjuk dalam template, lalu simpan
                                    file.
                                </small>
                            </div>

                            <hr>

                            {{-- Step 3: Period Selection --}}
                            <div class="mb-3">
                                <label for="bulk_period_id" class="form-label font-weight-bold">
                                    <span class="badge bg-primary me-2">3</span>Pilih Periode Target <span
                                        class="text-danger">*</span>
                                </label>
                                <select class="form-select" id="bulk_period_id" name="period_id" required>
                                    <option value="">-- Pilih Periode --</option>
                                    @foreach ($prep_periods as $period)
                                        <option value="{{ $period->id }}"
                                            data-start="{{ \Carbon\Carbon::parse(explode(' - ', $period->period_range)[0])->format('Y-m-d') }}"
                                            data-end="{{ \Carbon\Carbon::parse(explode(' - ', $period->period_range)[1])->format('Y-m-d') }}">
                                            Periode {{ $period->quarter }} {{ $period->year }}
                                            ({{ $period->period_range }})
                                            - @switch($period->status)
                                                @case('active')
                                                    Aktif
                                                @break

                                                @case('prep')
                                                    Persiapan
                                                @break

                                                @case('locked')
                                                    Terkunci
                                                @break

                                                @default
                                                    Tidak Diketahui
                                            @endswitch
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Pilih period dimana standar akan di-import. Dapat memilih period
                                    dengan
                                    status 'Persiapan' atau 'Aktif'.</small>

                                {{-- Checkbox Import Per Bulan --}}
                                <div class="form-check mt-2 ms-3">
                                    <input class="form-check-input" type="checkbox" id="importPerBulan"
                                        name="import_per_bulan">
                                    <label class="form-check-label" for="importPerBulan">
                                        Import per bulan
                                    </label>
                                    <small class="d-block text-muted">
                                        Centang jika ingin import hanya untuk bulan tertentu dalam periode yang dipilih.
                                    </small>
                                </div>
                            </div>

                            {{-- Step 4: Month Selection (hidden) --}}
                            <div id="monthSelectionStep" style="display: none;">
                                <hr>
                                <div class="mb-3">
                                    <label class="form-label font-weight-bold">
                                        <span class="badge bg-primary me-2" id="monthStepBadge">4</span>Pilih Bulan <span
                                            class="text-danger">*</span>
                                    </label>
                                    {{-- multi-select --}}
                                    <div class="tag-select-wrapper" id="monthTagSelect">
                                        <div class="tag-select-tags" id="monthSelectedTags"></div>
                                        <div class="tag-select-dropdown" id="monthDropdown">
                                            <div class="tag-select-options" id="monthOptions"></div>
                                        </div>
                                        <div class="tag-select-toggle" id="monthDropdownToggle">
                                            <i class="fas fa-chevron-down"></i>
                                        </div>
                                    </div>
                                    <div id="monthHiddenInputs"></div>
                                    <small class="text-muted mt-1 d-block">
                                        Klik bulan untuk memilih. Klik <i class="fas fa-times"></i> pada tag untuk
                                        menghapus.
                                    </small>
                                </div>
                            </div>

                            <hr>

                            {{-- Step 4/5: File Upload --}}
                            <div class="mb-3">
                                <label for="bulk_excel_file" class="form-label font-weight-bold">
                                    <span class="badge bg-primary me-2" id="uploadStepBadge">4</span>Upload File Excel
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="file" class="form-control" id="bulk_excel_file" name="excel_file"
                                    accept=".xlsx,.xls" required>
                                <small class="text-muted">
                                    Format: .xlsx atau .xls, Maksimal 5MB
                                </small>
                            </div>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="button" id="submitBulkImport" class="btn btn-primary">
                            <i class="fas fa-upload me-1"></i> Import
                        </button>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @push('js')
        <script>
            $(document).ready(function() {
                // Check if DataTable is already initialized
                if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                    $('#list_{{ $dmenu }}').DataTable().destroy();
                }

                // Set table into datatables
                const table = $('#list_{{ $dmenu }}').DataTable({
                    paging: false,
                    info: false,
                    searching: true,
                    responsive: true,
                    language: {
                        search: "Cari :",
                        lengthMenu: "Tampilkan _MENU_ baris",
                        zeroRecords: "Maaf - Data tidak ada",
                        emptyTable: "Tidak ada data untuk ditampilkan.",
                        info: "Data _START_ - _END_ dari _TOTAL_",
                        infoEmpty: "Tidak ada data",
                        infoFiltered: "(pencarian dari _MAX_ data)"
                    },
                    responsive: true,
                    dom: '<"row d-flex justify-content-between align-items-center"<"col-lg-12 d-flex justify-content-between align-items-center"Bf>>rtip',
                    buttons: [{
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel</span>',
                            action: function() {
                                // Arahkan ke server untuk ekspor Excel
                                const params = new URLSearchParams(window.location.search);
                                params.set('export', 'excel');
                                window.location.href = "{{ url($url_menu) }}?" + params.toString();
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF</span>',
                            action: function() {
                                // Arahkan ke server untuk ekspor PDF
                                const params = new URLSearchParams(window.location.search);
                                params.set('export', 'pdf');
                                window.location.href = "{{ url($url_menu) }}?" + params.toString();
                            }
                        },
                    ],
                    initComplete: function() {
                        // Tambahkan custom search bar
                        var searchBarHtml = `
                        <div class="dataTables_filter d-flex justify-content-end align-items-center">
                            <form method="GET" action="{{ url($url_menu) }}" class="d-flex align-items-center">
                                <input type="hidden" name="per" value="{{ request('per') }}">
                                <input type="hidden" name="dept" value="{{ request('dept') }}">
                                <select name="checked" class="form-select form-select-sm me-2" style="min-width: 170px;" onchange="this.form.submit()">
                                    <option value="">Semua Status</option>
                                    <option value="1" {{ request('checked') == '1' ? 'selected' : '' }}>Sudah Ada Standar</option>
                                    <option value="0" {{ request('checked') == '0' ? 'selected' : '' }}>Belum Ada Standar</option>
                                </select>
                                <input type="text" name="search" class="form-control form-control-sm" placeholder="Search..." value="{{ request('search') }}">
                            </form>
                        </div>
                    `;
                        $('.dataTables_filter').remove();
                        $(searchBarHtml).insertAfter('.dt-buttons');
                    }
                });

                // Set color button datatables
                $('.dt-button').addClass('btn btn-secondary');
                $('.dt-button').removeClass('dt-button');

                // Check authorize button datatables
                @if ($authorize)
                    @if (isset($authorize->excel) && $authorize->excel == '0')
                        $('.buttons-excel').remove();
                    @endif
                    @if (isset($authorize->pdf) && $authorize->pdf == '0')
                        $('.buttons-pdf').remove();
                    @endif
                    @if (isset($authorize->print) && $authorize->print == '0')
                        $('.buttons-print').remove();
                    @endif
                @endif
            });

            //function delete
            function deleteData(event, name, msg) {
                event.preventDefault();
                Swal.fire({
                    title: 'Konfirmasi',
                    text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: `Ya, ${msg}`,
                    cancelButtonText: 'Batal',
                    confirmButtonColor: '#028284'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.target.closest('form').submit();
                    }
                });
            }

            //function to load monthly standards for a period
            function loadMonthlyStandards(positionId, periodId, positionName, periodInfo) {
                $.ajax({
                    url: "{{ url('api/monthly-standards') }}/" + positionId + "/" + periodId,
                    method: 'GET',
                    beforeSend: function() {
                        $('#monthlyStandardsModalLabel').text('Monthly Standards - ' + positionName +
                            ' - ' +
                            periodInfo);

                        // Show loading state
                        $('#monthlyTabs').html(
                            '<li class="nav-item"><span class="nav-link">Loading...</span></li>');
                        $('#monthlyTabContent').html(`
                            <div class="d-flex justify-content-center p-4">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        `);

                        $('#monthlyStandardsModal').modal('show');
                    },
                    success: function(response) {
                        if (response.monthly_data && response.monthly_data.length > 0) {
                            // Create tabs
                            let tabsHtml = '';
                            let contentHtml = '';

                            response.monthly_data.forEach(function(monthData, index) {
                                const month = monthData.month;
                                const monthName = monthData.month_name;
                                const isActive = index === 0 ? 'active' : '';
                                const tabId = 'month-' + month.month + '-' + month.year;

                                // Tab header
                                tabsHtml += `
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link ${isActive}" id="${tabId}-tab"
                                                data-bs-toggle="tab" data-bs-target="#${tabId}"
                                                type="button" role="tab">
                                            ${monthName} ${month.year}
                                        </button>
                                    </li>
                                `;

                                // Tab content
                                contentHtml += `
                                    <div class="tab-pane fade ${isActive ? 'show active' : ''}"
                                         id="${tabId}" role="tabpanel">
                                        <div class="table-container-no-scroll mt-3">
                                            <table class="table table-striped table-fixed-layout">
                                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                                    <tr>
                                                        <th>Urut</th>
                                                        <th>Standar</th>
                                                        <th>Bobot (%)</th>
                                                        <th>Nilai</th>
                                                        <th>Kriteria</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                `;

                                if (monthData.standard_set && monthData.items.length > 0) {
                                    monthData.items.forEach(function(item) {
                                        if (item.ratings && item.ratings.length > 0) {
                                            let ratingsCount = item.ratings.length;
                                            item.ratings.forEach(function(rating,
                                                ratingIndex) {
                                                contentHtml += '<tr>';
                                                if (ratingIndex === 0) {
                                                    contentHtml += `
                                                        <td class="text-sm font-weight-normal text-center" rowspan="${ratingsCount}">${item.order || ''}</td>
                                                        <td class="text-sm font-weight-normal" rowspan="${ratingsCount}">${item.name || ''}</td>
                                                        <td class="text-sm font-weight-normal text-center" rowspan="${ratingsCount}">${item.weight ? item.weight + '%' : ''}</td>
                                                    `;
                                                }
                                                contentHtml += `
                                                    <td class="text-sm font-weight-normal text-center">
                                                        <span class="badge bg-primary">${rating.score}</span>
                                                    </td>
                                                    <td class="text-sm font-weight-normal">${rating.label}</td>
                                                </tr>`;
                                            });
                                        } else {
                                            contentHtml += `
                                                <tr>
                                                    <td class="text-sm font-weight-normal text-center">${item.order || ''}</td>
                                                    <td class="text-sm font-weight-normal">${item.name || ''}</td>
                                                    <td class="text-sm font-weight-normal text-center">${item.weight ? item.weight + '%' : ''}</td>
                                                    <td class="text-sm font-weight-normal text-center">-</td>
                                                    <td class="text-sm font-weight-normal text-muted">No rating criteria defined</td>
                                                </tr>
                                            `;
                                        }
                                    });
                                } else {
                                    // Show empty row when no data
                                    contentHtml += `
                                        <tr>
                                            <td class="text-sm text-center text-muted" colspan="5">
                                                <i class="fas fa-info-circle me-2"></i>
                                                Belum ada standar pada bulan ${monthName} ${month.year}
                                            </td>
                                        </tr>
                                    `;
                                }

                                contentHtml += '</tbody></table></div></div>';
                            });

                            $('#monthlyTabs').html(tabsHtml);
                            $('#monthlyTabContent').html(contentHtml);
                        } else {
                            $('#monthlyTabs').html(
                                '<li class="nav-item"><span class="nav-link">No Data</span></li>');
                            $('#monthlyTabContent').html(`
                                <div class="alert alert-warning" role="alert">
                                    <i class="fas fa-exclamation-triangle me-2"></i>
                                    Tidak ada data bulanan untuk periode ini.
                                </div>
                            `);
                        }
                    },
                    error: function(xhr, status, error) {
                        $('#monthlyTabs').html(
                            '<li class="nav-item"><span class="nav-link text-danger">Error</span></li>');
                        $('#monthlyTabContent').html(`
                            <div class="alert alert-danger" role="alert">
                                <i class="fas fa-exclamation-circle me-2"></i>
                                Gagal mendapat data
                            </div>
                        `);
                    }
                });
            }

            //function to view position details
            function viewPositionDetails(positionId, positionName) {
                // Redirect to position overview (could be implemented later)
                window.location.href = "{{ url($url_menu) }}/position/" + positionId;
            }

            //function to edit position standards
            function editPositionStandards(positionId, positionName) {
                // Always redirect to edit page, even if no standard set exists
                // The edit page will handle creating standard sets for active/prep periods
                window.location.href = "{{ url('stdpa/edit-position') }}/" + positionId;
            }

            // ============================================================================
            // BULK IMPORT HANDLERS
            // ============================================================================

            // Bulk Import Modal - No need to check period on selection
            // We'll check when user clicks import button

            // Download Bulk Template (period-independent)
            $('#downloadBulkTemplateBtn').on('click', function() {
                // Template is period-independent, download directly
                window.location.href = "{{ url('stdpa/bulk-template') }}";
            });

            // Submit Bulk Import
            $('#submitBulkImport').on('click', function(e) {
                e.preventDefault();

                const form = $('#bulkImportForm')[0];

                // Validate form
                if (!form.checkValidity()) {
                    form.reportValidity();
                    return;
                }

                const periodId = $('#bulk_period_id').val();

                // Check if period has existing standards first
                $.ajax({
                    url: "{{ url('stdpa/check-period-standards') }}",
                    method: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        period_id: periodId
                    },
                    success: function(response) {

                        if (response.has_standards) {
                            // Show confirmation modal if period has standards
                            Swal.fire({
                                icon: 'warning',
                                title: 'Konfirmasi Penimpaan Data',
                                html: `
                                    <p class="text-start mb-3">${response.message}</p>
                                    <div class="alert alert-danger text-start">
                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                        <strong>Perhatian:</strong> Data standar PA yang sudah ada akan ditimpa dan tidak dapat dikembalikan!
                                    </div>
                                `,
                                showCancelButton: true,
                                confirmButtonText: 'Ya, Timpa Data',
                                cancelButtonText: 'Batal',
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#6c757d',
                                reverseButtons: true
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    // User confirmed, proceed with import
                                    proceedWithImport(form, true);
                                }
                            });
                        } else {
                            // No existing standards, proceed directly
                            proceedWithImport(form, false);
                        }
                    },
                    error: function(xhr) {
                        console.error('Failed to check period standards:', xhr);
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal Memeriksa Period',
                            text: 'Tidak dapat memeriksa apakah period memiliki standar. Silakan coba lagi.',
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            });

            // Function to proceed with import
            function proceedWithImport(form, overwrite) {
                // Show loading
                Swal.fire({
                    title: 'Mengimport Data...',
                    text: 'Mohon tunggu, proses mungkin memakan waktu beberapa menit',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                // Submit via AJAX
                const formData = new FormData(form);

                // Add overwrite flag
                if (overwrite) {
                    formData.set('overwrite', '1');
                }

                $.ajax({
                    url: "{{ url('stdpa/import-bulk-excel') }}",
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Import Berhasil!',
                            html: `
                                <p>${response.message}</p>
                                <ul class="text-start">
                                    <li>Posisi diimport: ${response.data.positions_imported}</li>
                                    <li>Bulan terpengaruh: ${response.data.months_affected}</li>
                                    <li>Total standard sets: ${response.data.positions_imported * response.data.months_affected}</li>
                                </ul>
                            `,
                            confirmButtonColor: '#028284'
                        }).then(() => {
                            // Reload page to show new data
                            window.location.reload();
                        });
                    },
                    error: function(xhr) {
                        let errorMessage = 'Import gagal';

                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        // Show errors if validation failed
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            let errorList = '';

                            if (Array.isArray(errors)) {
                                errorList = '<ul class="text-start">' +
                                    errors.map(err => '<li>' + err + '</li>').join('') +
                                    '</ul>';
                            } else {
                                errorList = '<ul class="text-start">' +
                                    Object.values(errors).flat().map(err => '<li>' + err + '</li>').join(
                                        '') +
                                    '</ul>';
                            }

                            errorMessage += '<br><br>' + errorList;
                        }

                        Swal.fire({
                            icon: 'error',
                            title: 'Import Gagal',
                            html: errorMessage,
                            confirmButtonColor: '#028284'
                        });
                    }
                });
            }

            // ============================================================================
            // IMPORT PER BULAN HANDLERS (Tag-style Multi-Select)
            // ============================================================================

            const monthNames = [
                'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
            ];

            let availableMonths = []; // all months for the period
            let selectedMonths = []; // currently selected months

            // Toggle month selection visibility
            $('#importPerBulan').on('change', function() {
                const isChecked = $(this).is(':checked');
                if (isChecked) {
                    $('#monthSelectionStep').slideDown(300);
                    $('#uploadStepBadge').text('5');
                    populateMonths();
                } else {
                    $('#monthSelectionStep').slideUp(300);
                    $('#uploadStepBadge').text('4');
                    resetMonthSelect();
                }
            });

            // Repopulate months when period changes
            $('#bulk_period_id').on('change', function() {
                if ($('#importPerBulan').is(':checked')) {
                    populateMonths();
                }
            });

            // Toggle dropdown
            $('#monthDropdownToggle, #monthSelectedTags').on('click', function(e) {
                if ($(e.target).closest('.tag-remove').length) return; // don't toggle when removing tag
                $('#monthDropdown').toggleClass('open');
                $('#monthDropdownToggle i').toggleClass('fa-chevron-down fa-chevron-up');
            });

            // Close dropdown when clicking outside
            $(document).on('click', function(e) {
                if (!$(e.target).closest('#monthTagSelect').length) {
                    $('#monthDropdown').removeClass('open');
                    $('#monthDropdownToggle i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
                }
            });

            // Generate months from selected period
            function populateMonths() {
                const $selectedOption = $('#bulk_period_id option:selected');
                const startDate = $selectedOption.data('start');
                const endDate = $selectedOption.data('end');

                availableMonths = [];
                selectedMonths = [];

                if (startDate && endDate) {
                    const start = new Date(startDate);
                    const end = new Date(endDate);
                    const current = new Date(start.getFullYear(), start.getMonth(), 1);

                    while (current <= end) {
                        const monthIndex = current.getMonth();
                        const year = current.getFullYear();
                        availableMonths.push({
                            value: year + '-' + String(monthIndex + 1).padStart(2, '0'),
                            label: monthNames[monthIndex] + ' ' + year
                        });
                        current.setMonth(current.getMonth() + 1);
                    }
                }

                renderMonthSelect();
            }

            // Select a month
            function selectMonth(value) {
                const month = availableMonths.find(m => m.value === value);
                if (month && !selectedMonths.find(m => m.value === value)) {
                    selectedMonths.push(month);
                    renderMonthSelect();
                }
            }

            // Remove a month
            function removeMonth(value) {
                selectedMonths = selectedMonths.filter(m => m.value !== value);
                renderMonthSelect();
            }

            // Render the tag select component
            function renderMonthSelect() {
                // Render selected tags
                let tagsHtml = '';
                if (selectedMonths.length === 0) {
                    tagsHtml = '<span class="tag-select-placeholder">-- Pilih Bulan --</span>';
                } else {
                    selectedMonths.forEach(function(m) {
                        tagsHtml += `<span class="tag-select-tag">
                            ${m.label}
                            <span class="tag-remove" onclick="removeMonth('${m.value}')">&times;</span>
                        </span>`;
                    });
                }
                $('#monthSelectedTags').html(tagsHtml);

                // Render dropdown options (exclude selected)
                const selectedValues = selectedMonths.map(m => m.value);
                const unselected = availableMonths.filter(m => !selectedValues.includes(m.value));

                let optionsHtml = '';
                if (unselected.length === 0 && availableMonths.length > 0) {
                    optionsHtml = '<div class="tag-select-option disabled">Semua bulan sudah dipilih</div>';
                } else if (unselected.length === 0) {
                    optionsHtml = '<div class="tag-select-option disabled">Pilih periode terlebih dahulu</div>';
                } else {
                    unselected.forEach(function(m) {
                        optionsHtml +=
                            `<div class="tag-select-option" onclick="selectMonth('${m.value}')">${m.label}</div>`;
                    });
                }
                $('#monthOptions').html(optionsHtml);

                // Update hidden inputs for form submission
                let hiddenHtml = '';
                selectedMonths.forEach(function(m) {
                    hiddenHtml += `<input type="hidden" name="import_month[]" value="${m.value}">`;
                });
                $('#monthHiddenInputs').html(hiddenHtml);
            }

            // Reset month select state
            function resetMonthSelect() {
                availableMonths = [];
                selectedMonths = [];
                renderMonthSelect();
                $('#monthDropdown').removeClass('open');
                $('#monthDropdownToggle i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
            }

            // Reset modal on close
            $('#bulkImportModal').on('hidden.bs.modal', function() {
                $('#bulkImportForm')[0].reset();
                $('#monthSelectionStep').hide();
                $('#uploadStepBadge').text('4');
                resetMonthSelect();
            });
        </script>
        <style>
            /* Fixed table layout to prevent horizontal scrolling in modal */
            .table-container-no-scroll {
                width: 100%;
                overflow: hidden;
            }

            .table-fixed-layout {
                table-layout: fixed;
                width: 100%;
            }

            .table-fixed-layout td,
            .table-fixed-layout th {
                word-wrap: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
                white-space: normal;
            }

            .table-fixed-layout td:nth-child(5),
            .table-fixed-layout th:nth-child(5) {
                word-break: break-word;
                overflow-wrap: anywhere;
                max-width: 0;
            }

            .table-fixed-layout td:nth-child(1),
            .table-fixed-layout th:nth-child(1) {
                text-align: center;
                width: 100px;
            }

            .table-fixed-layout td:nth-child(2),
            .table-fixed-layout th:nth-child(2) {
                width: 220px;
            }

            .table-fixed-layout td:nth-child(3),
            .table-fixed-layout th:nth-child(3) {
                text-align: center;
                width: 100px;
            }

            .table-fixed-layout td:nth-child(4),
            .table-fixed-layout th:nth-child(4) {
                text-align: center;
                width: 100px;
            }

            .table-fixed-layout td:nth-child(5),
            .table-fixed-layout th:nth-child(5) {
                font-size: 0.8rem;
            }

            /* ===== Tag-style Multi-Select ===== */
            .tag-select-wrapper {
                position: relative;
                border: 1px solid #d2d6da;
                border-radius: 0.5rem;
                background: #fff;
                min-height: 42px;
                display: flex;
                align-items: center;
                cursor: pointer;
                transition: border-color 0.2s;
            }

            .tag-select-wrapper:hover {
                border-color: #028284;
            }

            .tag-select-tags {
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                gap: 6px;
                padding: 6px 10px;
                min-height: 32px;
                align-items: center;
            }

            .tag-select-placeholder {
                color: #adb5bd;
                font-size: 0.875rem;
                user-select: none;
            }

            .tag-select-tag {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                background: #e0f7f7;
                color: #028284;
                border: 1px solid #b2dfdb;
                border-radius: 20px;
                padding: 3px 10px;
                font-size: 0.8rem;
                font-weight: 500;
                white-space: nowrap;
                animation: tagFadeIn 0.2s ease;
            }

            @keyframes tagFadeIn {
                from {
                    opacity: 0;
                    transform: scale(0.8);
                }

                to {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            .tag-remove {
                cursor: pointer;
                font-size: 1rem;
                line-height: 1;
                color: #028284;
                margin-left: 2px;
                font-weight: bold;
                transition: color 0.15s;
            }

            .tag-remove:hover {
                color: #d33;
            }

            .tag-select-toggle {
                padding: 0 12px;
                display: flex;
                align-items: center;
                color: #6c757d;
                font-size: 0.75rem;
                border-left: 1px solid #e9ecef;
                align-self: stretch;
                transition: color 0.15s;
            }

            .tag-select-toggle:hover {
                color: #028284;
            }

            .tag-select-dropdown {
                position: absolute;
                top: 100%;
                left: -1px;
                right: -1px;
                background: #fff;
                border: 1px solid #d2d6da;
                border-top: none;
                border-radius: 0 0 0.5rem 0.5rem;
                max-height: 0;
                overflow: hidden;
                z-index: 10;
                transition: max-height 0.25s ease, box-shadow 0.25s ease;
                box-shadow: none;
            }

            .tag-select-dropdown.open {
                max-height: 200px;
                overflow-y: auto;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .tag-select-option {
                padding: 8px 14px;
                font-size: 0.875rem;
                cursor: pointer;
                transition: background 0.15s;
                border-left: 3px solid transparent;
            }

            .tag-select-option:hover {
                background: #e0f7f7;
                border-left-color: #028284;
            }

            .tag-select-option.disabled {
                color: #adb5bd;
                cursor: default;
                font-style: italic;
            }

            .tag-select-option.disabled:hover {
                background: transparent;
                border-left-color: transparent;
            }
        </style>
    @endpush