@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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">
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper">
                                    {{-- check authorize add --}}
                                    @if ($authorize->add == '1')
                                        {{-- button add --}}
                                        <button class="btn btn-primary mb-0"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th width="110">Action</th>
                                            <th>No</th>
                                            <th>Nama Periode</th>
                                            <th>Tanggal Mulai</th>
                                            <th>Tanggal Berakhir</th>
                                            <th>Status</th>
                                            <th>Copy Link</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $no = 1;
                                        @endphp
                                        @foreach ($periode as $dt)
                                            <tr
                                                {{ $dt->isactive == '0' ? 'class=not style=background-color:#ffe9ed;' : '' }}>
                                                <td class="text-sm font-weight-normal">
                                                    <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($dt->id_periode)) }}'">
                                                            <i class="fas fa-eye"> </i><span class="font-weight-bold"> View
                                                        </button>
                                                        {{-- <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split {{ $dt->isactive == '0' ? 'disabled-toggle' : '' }}"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button> --}}
                                                        <button type="button"
                                                            class="btn btn-sm btn-primary mb-0 px-3 dropdown-toggle dropdown-toggle-split"
                                                            data-bs-toggle="dropdown" aria-expanded="false">
                                                            <span class="visually-hidden">Toggle Dropdown</span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            {{-- check authorize edit --}}
                                                            @if ($authorize->edit == '1')
                                                                {{-- check status active --}}
                                                                @if ($dt->isactive == 1)
                                                                    {{-- button edit --}}
                                                                    <li>
                                                                        <button type="button"
                                                                            class="btn btn-sm btn-info mx-2 mb-0 w-90"
                                                                            title="Edit Data"
                                                                            onclick="window.location='{{ url($url_menu . '/edit' . '/' . encrypt($dt->id_periode)) }}'">
                                                                            <i class="fas fa-edit"></i><span
                                                                                class="font-weight-bold">
                                                                                Edit</span>
                                                                        </button>
                                                                    </li>
                                                                    <li>
                                                                        <hr class="dropdown-divider">
                                                                    </li>
                                                                @endif
                                                            @endif
                                                            {{-- check authorize delete --}}
                                                            @if ($authorize->delete == '1')
                                                                {{-- Hanya tampilkan tombol non-aktifkan untuk periode yang sedang aktif --}}
                                                                @if ($dt->isactive == '1')
                                                                    <form method="POST"
                                                                        action="{{ url($url_menu . '/destroy/' . encrypt($dt->id_periode)) }}"
                                                                        style="display: inline;">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <li>
                                                                            <button type="submit"
                                                                                class="btn btn-sm btn-danger mx-2 mb-0 w-90"
                                                                                onclick="return confirmToggle(event, '{{ $dt->nama_periode }}', 'Non Aktifkan')"
                                                                                title="Non Aktifkan Data">
                                                                                <i class="fas fa-random"></i>
                                                                                <span class="font-weight-bold">Non
                                                                                    Aktifkan</span>
                                                                            </button>
                                                                        </li>
                                                                    </form>
                                                                @else
                                                                    {{-- Tampilkan tombol aktifkan untuk periode yang tidak aktif --}}
                                                                    {{-- <form method="POST" action="{{ url($url_menu.'/activate/'.encrypt($dt->id_periode)) }}" style="display: inline;"> --}}
                                                                    <form method="POST"
                                                                        action="{{ route('periode.activate', encrypt($dt->id_periode)) }}"
                                                                        style="display: inline;">
                                                                        @csrf
                                                                        @method('PUT')
                                                                        <li>
                                                                            <button type="submit"
                                                                                class="btn btn-sm btn-success mx-2 mb-0 w-90"
                                                                                onclick="return confirmToggle(event, '{{ $dt->nama_periode }}', 'Aktifkan')"
                                                                                title="Aktifkan Data">
                                                                                <i class="fas fa-check-circle"></i>
                                                                                <span
                                                                                    class="font-weight-bold">Aktifkan</span>
                                                                            </button>
                                                                        </li>
                                                                    </form>
                                                                @endif
                                                            @endif
                                                        </ul>
                                                    </div>
                                                </td>
                                                <td class="row-no"></td>
                                                <td class="text-sm font-weight-normal">{{ $dt->nama_periode }}</td>
                                                <td class="text-sm font-weight-normal">
                                                    {{ \Carbon\Carbon::parse($dt->tanggal_mulai)->format('d/m/Y') }}</td>
                                                <td class="text-sm font-weight-normal">
                                                    {{ \Carbon\Carbon::parse($dt->tanggal_berakhir)->format('d/m/Y') }}
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    @if ($dt->isactive == '1')
                                                        <span class="badge bg-success">Aktif</span>
                                                    @else
                                                        <span class="badge bg-danger">Tidak Aktif</span>
                                                    @endif
                                                </td>
                                                <td class="text-sm font-weight-normal">
                                                    {{-- Button Copy Link hanya untuk periode yang aktif --}}
                                                    @if ($dt->isactive == '1')
                                                        <button class="btn btn-warning btn-sm"
                                                            title="Copy Link Form Beasiswa"
                                                            onclick="getLinkBeasiswa('{{ $dt->id_periode }}', '{{ $dt->nama_periode }}')">
                                                            <i class="fas fa-paperclip"></i> Copy Link
                                                        </button>
                                                    @else
                                                        <span class="text-muted">-</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div>
                                        Data 1 - {{ count($periode) }} dari {{ count($periode) }} data.
                                    </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>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection

@push('js')
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            let numColumns = $('#list_{{ $dmenu }}').DataTable().columns().count();
            let columnNames = '';
            for (let index = 0; index < numColumns; index++) {
                columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index).header()[0].textContent;
                if (columnNames == 'Status' || columnNames == 'status') {
                    columnAbjad = String.fromCharCode(65 + index);
                }
            }
        });

        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            paging: false,
            info: false,
            searching: true,
            responsive: true,
            order: [
                [5, 'asc']
            ],
            language: {
                search: "Cari :",
                lengthMenu: "Tampilkan _MENU_ baris",
                zeroRecords: "Maaf - Data tidak ada",
                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
                        window.location.href = "{{ url($url_menu) }}?export=excel";
                    }
                },
                {
                    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
                        window.location.href = "{{ url($url_menu) }}?export=pdf";
                    }
                },
            ],

            rowCallback: function(row, data, index) {
                // Nomor urut berdasarkan urutan tampil saat ini (setelah filter/sort)
                var info = this.api().page.info();
                var page = info.page;
                var length = info.length;
                var displayIndex = index + 1; // Index dimulai dari 0, jadi +1

                $('td.row-no', row).html(displayIndex);
            },
            drawCallback: function(settings) {
                // Update nomor setiap kali tabel di-render ulang (setelah search/sort)
                var api = this.api();
                api.rows({
                    page: 'current'
                }).every(function(rowIdx, tableLoop, rowLoop) {
                    $(this.node()).find('td.row-no').html(rowLoop + 1);
                });
            }
        });

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

        //check authorize button datatables
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjbeasiswa/resources/views/master/mstprd/list.blade.php</b> on line <b>284</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjbeasiswa/resources/views/master/mstprd/list.blade.php</b> on line <b>284</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjbeasiswa/resources/views/master/mstprd/list.blade.php</b> on line <b>285</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjbeasiswa/resources/views/master/mstprd/list.blade.php</b> on line <b>285</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjbeasiswa/resources/views/master/mstprd/list.blade.php</b> on line <b>286</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjbeasiswa/resources/views/master/mstprd/list.blade.php</b> on line <b>286</b><br />

        function confirmToggle(event, namaPeriode, action) {
            event.preventDefault();
            const form = event.target.closest('form');
            const actionUrl = form.getAttribute('action');

            // NON-AKTIFKAN → CEK DULU ADA TRANSAKSI NGGANTUNG ATAU TIDAK
            if (action.toLowerCase().includes('non')) {
                const cekUrl = actionUrl.replace('/destroy/', '/cek-nonaktif/');

                fetch(cekUrl)
                    .then(response => response.json())
                    .then(data => {
                        if (data.ada_nggantung) {

                            Swal.fire({
                                icon: 'error',
                                title: 'Tidak Bisa Dinonaktifkan',
                                html: `
                                    Masih ada transaksi yang belum selesai pada periode ini.<br><br>
                                    <span class="text-muted">Selesaikan transaksi tersebut terlebih dahulu.</span>
                                `,
                                confirmButtonColor: '#d33',
                                width: '450px'
                            });
                        } else {
                            // Tidak ada transaksi nggantung, lanjut konfirmasi
                            Swal.fire({
                                title: 'Konfirmasi Non-Aktifkan Periode',
                                html: `Apakah Anda yakin ingin menonaktifkan periode:<br><strong>${namaPeriode}</strong>?`,
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#6c757d',
                                confirmButtonText: 'Ya, Non-Aktifkan!',
                                cancelButtonText: 'Batal'
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    form.submit();
                                }
                            });
                        }
                    })
                    .catch(err => {
                        console.error("FETCH ERROR:", err);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Terjadi kesalahan saat memeriksa periode.',
                            confirmButtonColor: '#d33'
                        });
                    });

                return false;
            }

            // AKTIFKAN → CEK STATUS FINISHED/CANCELED + CEK PERIODE LAIN BERJALAN
            const cekUrl = actionUrl.replace('/activate/', '/cek/');

            fetch(cekUrl)
                .then(response => response.json())
                .then(data => {
                    //CEK APAKAH SEMUA TRANSAKSI SUDAH SELESAI
                    if (data.semua_finish) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Tidak Bisa Diaktifkan',
                            html: `
                                Semua transaksi pada periode ini sudah selesai.<br><br>
                                <span class="text-muted">Periode tidak dapat diaktifkan kembali.</span>
                            `,
                            confirmButtonColor: '#d33',
                            width: '450px'
                        });
                    } else {
                        // CEK PERIODE LAIN YANG MASIH BERJALAN
                        const idPeriode = actionUrl.split('/').pop();
                        const cekPeriodeLainUrl = "{{ url($url_menu) }}/cek-periode-lain-berjalan/" + idPeriode;

                        fetch(cekPeriodeLainUrl)
                            .then(response => response.json())
                            .then(cekLain => {
                                if (cekLain.ada_periode_berjalan) {

                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Tidak Bisa Diaktifkan',
                                        html: `
                                            Periode <strong>"${cekLain.nama_periode}"</strong> masih aktif dan memiliki transaksi yang sedang berjalan.<br><br>
                                            <span class="text-muted">Selesaikan transaksi pada periode tersebut terlebih dahulu.</span>
                                        `,
                                        confirmButtonColor: '#d33',
                                        confirmButtonText: 'Mengerti',
                                        width: '450px'
                                    });
                                } else {

                                    Swal.fire({
                                        title: 'Konfirmasi Aktivasi Periode',
                                        html: `
                                            Apakah Anda yakin ingin mengaktifkan periode:<br>
                                            <strong>${namaPeriode}</strong>?
                                            <br><br>
                                            <span class="text-warning">⚠️ Periode lain yang aktif akan dinonaktifkan secara otomatis.</span>
                                        `,
                                        icon: 'warning',
                                        showCancelButton: true,
                                        confirmButtonColor: '#2e6e54ff',
                                        cancelButtonColor: '#6c757d',
                                        confirmButtonText: 'Ya, Aktifkan!',
                                        cancelButtonText: 'Batal',
                                        width: '450px'
                                    }).then((result) => {
                                        if (result.isConfirmed) {
                                            form.submit();
                                        }
                                    });
                                }
                            })
                            .catch(err => {
                                console.error("FETCH ERROR CEK PERIODE LAIN:", err);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Terjadi kesalahan saat memeriksa periode lain.',
                                    confirmButtonColor: '#d33'
                                });
                            });
                    }
                })
                .catch(err => {
                    console.error("FETCH ERROR:", err);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat memeriksa periode.',
                        confirmButtonColor: '#d33'
                    });
                });

            return false;
        }



        function confirmActivate(event, namaPeriode) {
            event.preventDefault();

            Swal.fire({
                title: 'Konfirmasi Aktivasi Periode',
                html: 'Apakah Anda yakin ingin mengaktifkan periode:<br><strong>' + namaPeriode +
                    '</strong>?<br><br><span class="text-warning">Periode lain yang aktif akan dinonaktifkan secara otomatis.</span>',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#2e6e54ff',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Aktifkan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });

            return false;
        }


        function copyTextToClipboard(text) {
            // Modern Clipboard API (butuh HTTPS/localhost)
            if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
                return navigator.clipboard.writeText(text);
            }

            // Fallback untuk http / akses via IP
            return new Promise((resolve, reject) => {
                try {
                    const ta = document.createElement('textarea');
                    ta.value = text;
                    ta.setAttribute('readonly', '');
                    ta.style.position = 'fixed';
                    ta.style.top = '-9999px';
                    ta.style.left = '-9999px';
                    document.body.appendChild(ta);

                    ta.focus();
                    ta.select();
                    ta.setSelectionRange(0, ta.value.length);

                    const ok = document.execCommand('copy');
                    document.body.removeChild(ta);

                    ok ? resolve() : reject(new Error('copy failed'));
                } catch (e) {
                    reject(e);
                }
            });
        }

        function getLinkBeasiswa(id_periode, nama_periode) {
            $.ajax({
                url: "{{ url('/mstprd/copyLinkForm') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    id_periode,
                    nama_periode
                },

                success: function(response) {
                    if (response.status !== 'success') {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: response.message || 'Gagal mengambil link',
                            confirmButtonColor: '#028284'
                        });
                        return;
                    }

                    const link = response.link.url;

                    copyTextToClipboard(link).then(() => {
                        Swal.fire({
                            icon: "success",
                            title: "Tersalin!",
                            text: "Link Form Beasiswa sudah berhasil disalin ke clipboard",
                            confirmButtonColor: "#008384"
                        });
                    }).catch(() => {
                        // tampilkan link untuk copy manual
                        Swal.fire({
                            icon: 'warning',
                            title: 'Copy otomatis gagal',
                            html: `<input class="swal2-input" value="${link}" readonly id="beasiswaLink">`,
                            confirmButtonColor: '#028284',
                            didOpen: () => {
                                const el = document.getElementById('beasiswaLink');
                                if (el) {
                                    el.focus();
                                    el.select();
                                }
                            }
                        });
                    });
                },

                error: function(xhr) {
                    let errorMessage = 'Terjadi kesalahan saat mengambil link';
                    if (xhr.responseJSON && xhr.responseJSON.message) errorMessage = xhr.responseJSON.message;

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

        // function getLinkBeasiswa(id_periode, nama_periode) {
        //     $.ajaxSetup({
        //         headers: {
        //             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //         }
        //     });

        //     $.ajax({
        //         url: "{{ url('/mstprd/copyLinkForm') }}",
        //         type: 'POST',
        //         data: {
        //             id_periode: id_periode,
        //             nama_periode: nama_periode
        //         },
        //         success: function(response) {
        //             if (response.status === 'success') {
        //             const link = response.link.url;

        //             // langsung copy ke clipboard
        //             navigator.clipboard.writeText(link).then(() => {
        //                 Swal.fire({
        //                     icon: "success",
        //                     title: "Tersalin!",
        //                     text: "Link Form Beasiswa sudah berhasil disalin ke clipboard",
        //                     background: "#ffffff",
        //                     color: "#008384",
        //                     confirmButtonText: "Oke",
        //                     confirmButtonColor: "#008384",
        //                     customClass: {
        //                         popup: "rounded-8 shadow-lg",
        //                         title: "fw-bold fs-4",
        //                         icon: "custom-icon",
        //                         htmlContainer: "custom-text",
        //                         confirmButton: "px-4 py-2"
        //                     }
        //                 });
        //             }).catch(() => {
        //                 Swal.fire({
        //                     icon: 'error',
        //                     title: 'Gagal',
        //                     text: 'Tidak bisa menyalin link ke clipboard',
        //                     confirmButtonColor: '#028284'
        //                 });
        //             });
        //             } else {
        //                 Swal.fire({
        //                     icon: 'error',
        //                     title: 'Gagal',
        //                     text: response.message,
        //                     confirmButtonColor: '#028284'
        //                 });
        //             }
        //         },
        //         error: function(xhr) {
        //             let errorMessage = 'Terjadi kesalahan saat mengambil link';
        //             if (xhr.responseJSON && xhr.responseJSON.message) {
        //                 errorMessage = xhr.responseJSON.message;
        //             }

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

        // $(document).ready(function() {
        //     @if (session('message'))
        //         Swal.fire({
        //             icon: "{{ session('class') == 'success' ? 'success' : 'error' }}",
        //             title: "{{ session('class') == 'success' ? 'Berhasil' : 'Gagal' }}",
        //             text: "{{ session('message') }}",
        //             confirmButtonColor: '#028284'
        //         });
        //     @endif
        // });
    </script>
@endpush

<style>
    .custom-text {
        color: #000000 !important;
        font-weight: 500;
    }

    /* Ganti warna icon success */
    .custom-icon .swal2-success-ring {
        border: 0.25em solid #008384 !important;
    }

    .custom-icon .swal2-success-line-tip,
    .custom-icon .swal2-success-line-long {
        background-color: #008384 !important;
    }

    /* Biar icon lebih bold/tebal */
    .custom-icon .swal2-icon {
        border-width: 0.25em !important;
    }

    .disabled-toggle {
        pointer-events: none !important;
        opacity: 0.6;
    }
</style>