@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" id="btn-add"
                                            onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                                class="fas fa-plus me-1"> </i><span class="font-weight-bold">Tambah</button>

                                        @if ($disable_button == false)
                                            <button class="btn btn-warning mb-0 me-1" onclick="sinkronisasiAPI(this)"
                                                disabled><i class="fas fa-rotate me-1"> </i><span
                                                    class="font-weight-bold">Sinkronisasi</button>
                                        @else
                                            <button class="btn btn-warning mb-0 me-1" onclick="sinkronisasiAPI(this)"><i
                                                    class="fas fa-rotate me-1"> </i><span
                                                    class="font-weight-bold">Sinkronisasi</button>
                                        @endif

                                        <button class="btn btn-light mb-0 text-dark" onclick="infoSinkronisasi()">
                                            <i class="fas fa-circle-info me-1"></i>
                                            <span class="font-weight-bold"></span>
                                        </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>No</th>
                                            <th>Tanggal</th>
                                            <th>Deskripsi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if ($hari_libur->isNotEmpty())
                                            @foreach ($hari_libur as $hld)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $hld->tanggal }}</td>
                                                    <td>{{ $hld->deskripsi }}</td>
                                                </tr>
                                            @endforeach
                                        @else
                                        @endif
                                    </tbody>
                                </table>
                            </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() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        });
        //set table into datatables
        $('#list_{{ $dmenu }}').DataTable({
            "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: 'Bfrtip',
            // perbaikan pada hasil kolom excel, pdf dan print menampilkan semua kolom
            buttons: [{
                    extend: 'excelHtml5',
                    text: '<i class="fas fa-file-excel me-1 text-lg text-success"> </i><span class="font-weight-bold"> Excel',
                    autoFilter: true,
                    sheetName: 'Exported data',
                    // title: 'Nama File Excel',
                    customize: function(xlsx) {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        // Loop over the cells in column
                        sheet.querySelectorAll('row c[r^="' + columnAbjad + '"]').forEach((row) => {
                            // Get the value
                            let cell = row.querySelector('is t');
                            if (cell && cell.textContent === 'Not Active') {
                                row.setAttribute('s', '10'); //red background
                            }
                        });
                    },
                    // exportOptions: {
                    //     columns: function(idx, data, node) {
                    //         return idx !== 0;
                    //     }
                    // }
                },
                {
                    extend: 'pdfHtml5',
                    text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"> </i><span class="font-weight-bold"> PDF',
                    // exportOptions: {
                    //     columns: ':visible:not(:last-child)'
                    // },
                },
                {
                    extend: 'print',
                    text: '<i class="fas fa-print me-1 text-lg text-info"> </i><span class="font-weight-bold"> Print',
                    // exportOptions: {
                    //     columns: ':visible:not(:last-child)'
                    // },
                },
            ]
        });
        //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/msjbooking/resources/views/master/msday/list.blade.php</b> on line <b>172</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjbooking/resources/views/master/msday/list.blade.php</b> on line <b>172</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjbooking/resources/views/master/msday/list.blade.php</b> on line <b>173</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjbooking/resources/views/master/msday/list.blade.php</b> on line <b>173</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjbooking/resources/views/master/msday/list.blade.php</b> on line <b>174</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjbooking/resources/views/master/msday/list.blade.php</b> on line <b>174</b><br />
        //function delete
        function deleteData(event, name, msg) {
            event.preventDefault(); // Prevent default form submission
            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) {
                    // Find the closest form element and submit it manually
                    event.target.closest('form').submit();
                }
            });
        }

        function sinkronisasiAPI(button) {
            Swal.fire({
                title: "Apakah kamu yakin ingin melakukan sinkronisasi ?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: "Ya",
            }).then((result) => {
                /* Read more about isConfirmed, isDenied below */
                if (result.isConfirmed) {
                    $(button).prop('disabled', true).html(
                        '<i class="fas fa-spinner fa-spin me-1"></i> Sinkronisasi...');
                    $('#btn-add').prop('disabled', true);
                    let tahun = new Date().getFullYear();
                    $.ajax({
                        url: '{{ URL::to('/') }}/msday/get_holiday',
                        method: 'POST',
                        data: {
                            tahun: tahun
                        },
                        success: function(response) {
                            let table = $('#list_{{ $dmenu }}')
                                .DataTable(); // panggil instance DataTable
                            table.clear(); // hapus semua data lama

                            if (response.status === 'success' && response.data.length > 0) {
                                let no = 1;
                                response.data.forEach(item => {
                                    table.row.add([
                                        no++,
                                        item.date,
                                        item.description
                                    ]);
                                });

                                table.draw(false); // ⬅️ false = biar tetap di halaman yang sama

                                Swal.fire({
                                    icon: 'success',
                                    title: 'Sinkronisasi Berhasil!',
                                    text: `${response.data.length} data libur nasional berhasil diperbarui.`,
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                            } else {
                                table.row.add([
                                    '-',
                                    '-',
                                    'Tidak ada data libur nasional.'
                                ]).draw(false);

                                Swal.fire({
                                    icon: 'info',
                                    title: 'Tidak ada data baru',
                                    text: 'Data libur nasional sudah paling terbaru.',
                                    timer: 2000,
                                    showConfirmButton: false
                                });
                            }
                        },
                        error: function(response) {
                            console.log('error');
                        },
                        complete: function() {
                            // Aktifkan kembali tombol
                            $(button).prop('disabled', false).html(
                                '<i class="fas fa-rotate me-1"></i> Sinkronisasi');
                            $('#btn-add').prop('disabled', false);
                        }
                    })
                } else if (result.isDenied) {
                    Swal.fire("Changes are not saved", "", "info");
                }
            });
        }

        function infoSinkronisasi() {
            Swal.fire({
                title: 'Informasi Sinkronisasi',
                html: `
                  <div style="text-align:left">
                    <p>Fungsi <b>Sinkronisasi</b> digunakan untuk mengambil data <b>hari libur nasional</b> secara otomatis dari <b>Google Calendar API</b>.</p>
                    <p>Data yang berhasil diambil akan disimpan ke dalam sistem dan digunakan untuk menandai tanggal libur resmi di kalender kerja.</p>
                  </div>
                `,
                icon: 'info',
                confirmButtonText: 'Mengerti',
            });
        }
    </script>
@endpush