@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">
                {{-- Panduan & Aturan Penting --}}
               <div class="row mx-1 mb-3">
    <div class="card shadow-sm">
        <div class="card-body">
            <h5 class="mb-3">Panduan & Aturan Periode</h5>

            <div class="bg-white p-3 rounded-3">
                <!-- Petunjuk Umum -->
                <div class="mb-4">
                    <h6 class="text-info d-flex align-items-center">
                        <i class="fas fa-info-circle me-2"></i> Petunjuk Umum
                    </h6>
                    <ul class="mb-0 text-sm text-dark ps-3">
                        <li class="mb-1">Master periode ini digunakan untuk menentukan periode pengajuan <strong>Lembur</strong>.</li>
                        <li class="mb-1">
                            Standar penulisan nama: <strong>Periode [Bulan] [Tahun]</strong> (Contoh: <strong>Periode Januari 2026</strong>).<br>
                            <span class="text-dark fst-italic">Kosongkan field nama saat menambah/edit untuk generate otomatis sesuai format.</span>
                        </li>
                        <li class="mb-1">Pastikan terdapat <strong>12 periode (bulan)</strong> untuk setiap tahunnya.</li>
                        <li>Disarankan untuk membuat periode bulan berikutnya <strong>minimal 2 minggu sebelum</strong> periode saat ini berakhir.</li>
                    </ul>
                </div>

                <hr class="horizontal dark my-3">

                <!-- Aturan Aktivasi & Non-aktivasi Periode -->
                <div>
                    <h6 class="text-warning d-flex align-items-center">
                        <i class="fas fa-toggle-on me-2"></i> Aturan Aktivasi & Non-aktivasi Periode
                    </h6>
                    <p class="text-sm text-dark mb-2">
                        Sistem memberlakukan proses aktivasi dan non-aktivasi secara <strong>berurutan (kronologis)</strong> untuk menjaga integritas data. Aturannya adalah sebagai berikut:
                    </p>
                    <ul class="mb-0 text-sm text-dark ps-3">
                        <li class="mb-2">
                        <strong>Untuk Mengaktifkan:</strong> Anda harus mengaktifkan periode mulai dari yang <strong>paling baru (paling akhir)</strong>. Anda tidak bisa melompati urutan.<br>
                        <span class="text-dark fst-italic">Contoh: Untuk mengaktifkan 'Periode Januari 2026', maka 'Periode Februari 2026' harus sudah aktif terlebih dahulu.</span>
                        </li>
                        <li>
                            <strong>Untuk Menonaktifkan:</strong> Anda harus menonaktifkan periode mulai dari yang <strong>paling lama (paling awal)</strong>.<br>
                            <span class="text-dark fst-italic">Contoh: Jika 'Periode Januari 2026' dan 'Februari 2026' sedang aktif, Anda harus menonaktifkan 'Januari 2026' terlebih dahulu sebelum 'Februari 2026'.</span>
                        </li>
                    </ul>
                </div>
            </div>

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

                {{-- Data Table --}}
                <div class="row mx-1">
                    <div class="card shadow-sm">
                        <div class="card-header pb-0 border-bottom">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div>
                                    <h5 class="mb-0 font-weight-bold text-dark">List {{ $title_menu }}</h5>
                                </div>
                            </div>
                            @include('components.alert')
                        </div>

                        <div class="card-body px-4 pt-3 pb-2">
                            {{-- Action Bar --}}
                            <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    @if (isset($authorize) && $authorize->add == '1')
                                        <a href="{{ url($url_menu . '/add') }}" class="btn btn-primary mb-0 px-3">
                                            <i class="fas fa-plus me-1"></i> Tambah
                                        </a>
                                    @endif

                                    <!-- @if (isset($authorize) && $authorize->excel == '1')
                                        <a href="{{ url($url_menu . '?export=excel') }}" class="btn btn-success mb-0 px-3">
                                            <i class="fas fa-file-excel me-1"></i> Excel
                                        </a>
                                    @endif

                                    @if (isset($authorize) && $authorize->pdf == '1')
                                        <a href="{{ url($url_menu . '?export=pdf') }}" class="btn btn-danger mb-0 px-3">
                                            <i class="fas fa-file-pdf me-1"></i> PDF
                                        </a>
                                    @endif

                                    @if (isset($authorize) && $authorize->print == '1')
                                        <button class="btn btn-info mb-0 px-3" onclick="window.print()">
                                            <i class="fas fa-print me-1"></i> Print
                                        </button>
                                    @endif -->
                                </div>

                            </div>

                            {{-- Data Table --}}
                            <div class="table-responsive p-0">
                                <table class="table align-items-center mb-0 display" >
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" width="110">Action</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center" width="50">No</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Nama</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tahun</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal Mulai</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Tanggal Berakhir</th>
                                            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($periode_lembur as $item)
                                            @php
                                                $vcount = ($periode_lembur->currentPage() - 1) * $periode_lembur->perPage() + $loop->iteration;
                                            @endphp
                                            <tr {{ $item->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal text-center">
                                                    <div class="btn-group">
                                                        <button class="btn btn-primary btn-sm mb-0 px-3" type="button"
                                                            title="View Data"
                                                            onclick="window.location='{{ url($url_menu . '/show/' . encrypt($item->id)) }}'">
                                                            <i class="fas fa-eye"></i> View
                                                        </button>
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-2 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            @if (isset($authorize) && $authorize->edit == '1')
                                                                <li>
                                                                    <a class="dropdown-item"
                                                                        href="{{ url($url_menu . '/edit/' . encrypt($item->id)) }}">
                                                                        <i class="fas fa-edit text-warning me-1"></i> Edit
                                                                    </a>
                                                                </li>
                                                            @endif
                                                            @if (isset($authorize) && $authorize->delete == '1')
                                                                <li>
<form action="{{ url($url_menu . '/' . encrypt($item->id)) }}"
      method="POST" 
      style="display: inline">
    @csrf
    @method('DELETE')
    <button type="button" 
            class="dropdown-item {{ $item->isactive == '0' ? 'text-success' : 'text-danger' }}"
            title="{{ $item->isactive == '0' ? 'Aktifkan Data' : 'Nonaktifkan Data' }}"
            onclick="confirmDeactivate(this, '{{ $item->isactive == '0' ? 'mengaktifkan' : 'menonaktifkan' }}', '{{ encrypt($item->id) }}', '{{ addslashes($item->nama) }}')">
        <i class="fas {{ $item->isactive == '0' ? 'fa-check-circle' : 'fa-ban' }} me-1"></i> 
        {{ $item->isactive == '0' ? 'Aktifkan' : 'Nonaktifkan' }}
    </button>
</form>
                                                                </li>
                                                            @endif

                                                            @if ((!isset($authorize) || $authorize->edit != '1') && (!isset($authorize) || $authorize->delete != '1'))
                                                                <li><span class="dropdown-item-text text-muted">Tidak ada aksi</span></li>
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td class="align-middle text-center text-sm">{{ $loop->iteration }}</td>
                                                <td class="align-middle text-sm font-weight-bold text-dark">
                                                    {{ $item->nama }}
                                                </td>
                                                  <td class="align-middle text-sm font-weight-bold text-dark">
                                                    {{ $item->tahun }}
                                                </td>
                                                <td class="align-middle text-sm font-weight-bold text-dark">
                                                    {{ $item->tanggal_awal }}
                                                </td>
                                                <td class="align-middle text-sm font-weight-bold text-dark">
                                                    {{ $item->tanggal_akhir }}
                                                </td>
                                                <td class="align-middle text-center text-sm">
                                                    @if ($item->isactive == '1')
                                                        <span class="badge bg-success">Active</span>
                                                    @else
                                                        <span class="badge bg-danger">Non Active</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="9" class="text-center py-4 text-sm text-secondary">
                                                    <i class="fas fa-inbox me-1"></i> Belum ada data
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>

                                
                            </div>

                            {{-- Footer Note & Pagination --}}
                            <div class="d-flex justify-content-between align-items-center mt-3 px-2">
                                <div>
                                    <p class="text-xs text-secondary mb-0">
                                        Data {{ $periode_lembur->firstItem() ?? 0 }} - {{ $periode_lembur->lastItem() ?? 0 }} dari {{ $periode_lembur->total() }}
                                    </p>
                                    <p class="text-xs text-danger mb-0 mt-1">
                                        <span class="d-inline-block rounded-circle me-1" style="width: 8px; height: 8px; background-color: #ff99aa;"></span> Note : Data not active
                                    </p>
                                </div>
                                <div>
                                    {{ $periode_lembur->links() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function buildPendingModalHtml(periodeNama, details) {
            const spl = details.spl || { total: 0, draft_count: 0, pending_atasan_count: 0, draft_list: [], pending_atasan_list: [] };
            const dkl = details.dkl || { total: 0, draft_count: 0, pending_atasan_count: 0, pending_personalia_count: 0, draft_list: [], pending_atasan_list: [], pending_personalia_list: [] };
            const totalPending = details.total_pending || (spl.total + dkl.total);

            const formatSplStatus = (status) => {
                if (status === 'draft') return '<span class="badge bg-secondary">Draft</span>';
                if (status === 'pending_atasan') return '<span class="badge bg-warning text-white">Pending Atasan</span>';
                return `<span class="badge bg-light text-white">${status}</span>`;
            };

            const formatDklStatus = (status) => {
                if (status === 'draft') return '<span class="badge bg-secondary">Draft</span>';
                if (status === 'pending_atasan') return '<span class="badge bg-warning text-white">Pending Atasan</span>';
                if (status === 'pending_personalia') return '<span class="badge bg-info">Pending Personalia</span>';
                return `<span class="badge bg-light text-white">${status}</span>`;
            };

            const splItems = [];
            (spl.draft_list || []).forEach(item => {
                splItems.push(`<li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2"><span><i class="fas fa-file me-1 text-secondary"></i> <strong>${item.no_spl}</strong> (${item.total_detail} Karyawan)</span> ${formatSplStatus(item.status)}</li>`);
            });
            (spl.pending_atasan_list || []).forEach(item => {
                splItems.push(`<li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2"><span><i class="fas fa-file me-1 text-secondary"></i> <strong>${item.no_spl}</strong> (${item.total_detail} Karyawan)</span> ${formatSplStatus(item.status)}</li>`);
            });

            const dklItems = [];
            (dkl.draft_list || []).forEach(item => {
                dklItems.push(`<li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2"><span><i class="fas fa-calendar me-1 text-secondary"></i> <strong>${item.no_dkl}</strong> (${item.total_detail} Karyawan)</span> ${formatDklStatus(item.status)}</li>`);
            });
            (dkl.pending_atasan_list || []).forEach(item => {
                dklItems.push(`<li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2"><span><i class="fas fa-calendar me-1 text-secondary"></i> <strong>${item.no_dkl}</strong> (${item.total_detail} Karyawan)</span> ${formatDklStatus(item.status)}</li>`);
            });
            (dkl.pending_personalia_list || []).forEach(item => {
                dklItems.push(`<li class="list-group-item d-flex justify-content-between align-items-center py-1 px-2"><span><i class="fas fa-calendar me-1 text-secondary"></i> <strong>${item.no_dkl}</strong> (${item.total_detail} Karyawan)</span> ${formatDklStatus(item.status)}</li>`);
            });

            return `
                <div class="text-start" style="font-size: 13px;">
                    <div class="alert alert-danger py-2 px-3 mb-3 text-white" style="border-radius: 8px;">
                        <i class="fas fa-exclamation-triangle me-1"></i> Periode <strong>${periodeNama}</strong> tidak dapat dinonaktifkan karena masih terdapat <strong>${totalPending} transaksi</strong> yang belum selesai.
                    </div>

                    <!-- Transaksi SPL -->
                    <div class="card border mb-2 shadow-none" style="background: #fafafa;">
                        <div class="card-header bg-light py-2 px-3 d-flex justify-content-between align-items-center" style="border-bottom: 1px solid #e9ecef;">
                            <span class="font-weight-bold text-dark"><i class="fas fa-file-alt text-primary me-1"></i> Transaksi SPL (${spl.total})</span>
                            <div>
                                ${spl.draft_count > 0 ? `<span class="badge bg-secondary text-white me-1" style="font-size: 10px;">${spl.draft_count} Draft</span>` : ''}
                                ${spl.pending_atasan_count > 0 ? `<span class="badge bg-warning text-white" style="font-size: 10px;">${spl.pending_atasan_count} Pending Atasan</span>` : ''}
                            </div>
                        </div>
                        ${spl.total > 0 ? `
                        <div class="card-body p-2" style="max-height: 120px; overflow-y: auto;">
                            <ul class="list-group list-group-flush">
                                ${splItems.join('')}
                            </ul>
                        </div>` : '<div class="card-body py-2 px-3 text-muted text-xs">Tidak ada transaksi SPL .</div>'}
                    </div>

                    <!-- Transaksi DKL -->
                    <div class="card border mb-2 shadow-none" style="background: #fafafa;">
                        <div class="card-header bg-light py-2 px-3 d-flex justify-content-between align-items-center" style="border-bottom: 1px solid #e9ecef;">
                            <span class="font-weight-bold text-dark"><i class="fas fa-calendar-check text-success me-1"></i> Transaksi DKL (${dkl.total})</span>
                            <div>
                                ${dkl.draft_count > 0 ? `<span class="badge bg-secondary text-white me-1" style="font-size: 10px;">${dkl.draft_count} Draft</span>` : ''}
                                ${dkl.pending_atasan_count > 0 ? `<span class="badge bg-warning text-white me-1" style="font-size: 10px;">${dkl.pending_atasan_count} Pending Atasan</span>` : ''}
                                ${dkl.pending_personalia_count > 0 ? `<span class="badge bg-info text-white" style="font-size: 10px;">${dkl.pending_personalia_count} Pending Personalia</span>` : ''}
                            </div>
                        </div>
                        ${dkl.total > 0 ? `
                        <div class="card-body p-2" style="max-height: 120px; overflow-y: auto;">
                            <ul class="list-group list-group-flush">
                                ${dklItems.join('')}
                            </ul>
                        </div>` : '<div class="card-body py-2 px-3 text-muted text-xs">Tidak ada transaksi DKL.</div>'}
                    </div>

                    <div class="text-muted text-xs mt-2">
                        <i class="fas fa-info-circle me-1"></i> Silakan selesaikan transaksi di atas terlebih dahulu sebelum menonaktifkan periode ini.
                    </div>
                </div>
            `;
        }

        function confirmDeactivate(buttonElement, actionText, encryptedId, periodeNama) {
            const form = buttonElement.closest('form');

            // Jika mengaktifkan kembali, lakukan konfirmasi normal
            if (actionText === 'mengaktifkan') {
                if (typeof Swal === 'undefined') {
                    if (confirm('Yakin ingin mengaktifkan data ini?')) form.submit();
                    return;
                }

                Swal.fire({
                    title: 'Aktifkan Data?',
                    text: 'Data periode ini akan diaktifkan kembali.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#4caf50',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Aktifkan',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then(function(result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
                return;
            }

            // Jika menonaktifkan, lakukan AJAX check terlebih dahulu untuk mendeteksi transaksi
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Memeriksa Transaksi...',
                    text: 'Sedang mengecek status transaksi SPL dan DKL pada periode ini...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
            }

            const checkUrl = '{{ url("/msperi/check-pending") }}/' + encodeURIComponent(encryptedId);

            fetch(checkUrl, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(res => {
                if (res.success && res.has_pending) {
                    // Terdapat transaksi -> Tampilkan modal peringatan
                    if (typeof Swal === 'undefined') {
                        alert('Periode tidak dapat dinonaktifkan karena masih terdapat transaksi SPL/DKL');
                        return;
                    }

                    Swal.fire({
                        title: '<span class="text-danger font-weight-bold">Tidak Dapat Dinonaktifkan</span>',
                        html: buildPendingModalHtml(periodeNama, res.details),
                        icon: 'error',
                        confirmButtonText: '<i class="fas fa-check me-1"></i> Saya Mengerti',
                        confirmButtonColor: '#028284',
                        width: '600px',
                    });
                } else {
                    // Tidak ada transaksi -> Lanjut konfirmasi normal
                    if (typeof Swal === 'undefined') {
                        if (confirm('Yakin ingin menonaktifkan data ini?')) form.submit();
                        return;
                    }

                    Swal.fire({
                        title: 'Nonaktifkan Data?',
                        text: 'Data periode ini akan dinonaktifkan.',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#e53e3e',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Ya, Nonaktifkan',
                        cancelButtonText: 'Batal',
                        reverseButtons: true
                    }).then(function(result) {
                        if (result.isConfirmed) {
                            form.submit();
                        }
                    });
                }
            })
            .catch(err => {
                console.error('Error checking pending transactions:', err);
                // Fallback submit jika AJAX gagal
                if (typeof Swal === 'undefined') {
                    if (confirm('Yakin ingin menonaktifkan data ini?')) form.submit();
                    return;
                }

                Swal.fire({
                    title: 'Nonaktifkan Data?',
                    text: 'Data periode ini akan dinonaktifkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#e53e3e',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, Nonaktifkan',
                    cancelButtonText: 'Batal',
                    reverseButtons: true
                }).then(function(result) {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        }

        // Tampilkan modal peringatan otomatis jika ada flash session dari backend
        @if (session('modal_pending'))
            document.addEventListener('DOMContentLoaded', function () {
                const flashData = @json(session('modal_pending'));
                if (flashData && typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '<span class="text-danger font-weight-bold">Tidak Dapat Dinonaktifkan</span>',
                        html: buildPendingModalHtml(flashData.periode_nama, flashData.details),
                        icon: 'error',
                        confirmButtonText: '<i class="fas fa-check me-1"></i> Saya Mengerti',
                        confirmButtonColor: '#028284',
                        width: '600px',
                    });
                }
            });
        @endif
    </script>
@endsection