@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button execute --}}
                            <button class="btn btn-primary mb-0" id="executeButton">
                                <i class="fas fa-bolt me-1"></i><span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="periode_mcu" class="form-control-label">Periode MCU</label>
                                        <div class="d-flex align-items-center mt-1">
                                            <div class="input-group" style="flex-grow: 1;">
                                                <input type="text" name="mcu_display" class="form-control"
                                                    id="periode_mcu">
                                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                    data-bs-target="#mcuModal"
                                                    style="border-left:3px solid #d2d6da;cursor: pointer;">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                                <input type="hidden" name="periode" id="hidden_periode">
                                                <input type="hidden" name="source" id="hidden_source">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group mt-3">
                                        <label for="tahun_filter" class="form-control-label">Tahun</label>
                                        <select class="form-select" id="tahun_filter" name="tahun">
                                            <option value="">Pilih Tahun</option>
                                            @php
                                                $currentYear = date('Y');
                                                $startYear = 2022; // Tahun mulai yang diinginkan
                                            @endphp
                                            @for ($year = $currentYear; $year >= $startYear; $year--)
                                                <option value="{{ $year }}">{{ $year }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                    <code>
                                        *) Pilih salah satu filter (Periode & Source MCU atau Tahun) untuk
                                        menampilkan data.
                                    </code>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk menampilkan data Periode -->
    <div class="modal fade" id="mcuModal" tabindex="-1" aria-labelledby="mcuModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mcuModalLabel">List Periode MCU</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="myTable" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">Periode</th>
                                    <th scope="col">Source</th>
                                    <th scope="col">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($mcu as $m)
                                    <tr>
                                        <td scope="row">
                                            <span class="btn badge bg-success"
                                                onclick="select_pro_mcu('{{ $m->periode }}', '{{ $m->source }}')">
                                                <i class="fa fa-check-circle-o me-1"></i> Select
                                            </span>
                                        </td>
                                        <td>{{ $m->periode }}</td>
                                        <td>{{ $m->source }}</td>
                                        <td>{{ $m->name }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Area untuk menampilkan PDF -->
    <div class="container mt-4">
        <iframe id="pdfFrame" style="width: 0%; height: 0vh; display: none;" frameborder="0"></iframe>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#myTable').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                responsive: true,
            });
        });

        function updateSelected() {
            var selected = [];
            document.querySelectorAll('.selectItem:checked').forEach(function(checkbox) {
                selected.push(checkbox.getAttribute('data-mcu') + ' - ' + checkbox.getAttribute('data-nama'));
            });
            document.getElementsByName('mcu_display')[0].value = selected.join(', ');
        }

        function select_pro_mcu(periode, source) {
            // Menampilkan periode dan source di input display
            document.getElementsByName('mcu_display')[0].value = periode + ' - ' + source;

            // Menyimpan periode dan source yang dipilih ke input hidden
            document.getElementById('hidden_periode').value = periode;
            document.getElementById('hidden_source').value = source;

            // Menutup modal
            $('#mcuModal').modal('hide');
        }

        document.getElementById('executeButton').addEventListener('click', function() {
            // var periodeMcu = document.getElementById('periode_mcu').value;
            // var tahunFilter = document.getElementById('tahun_filter').value;
            let selectedPeriode = document.getElementById('hidden_periode').value;
            let selectedSource = document.getElementById('hidden_source').value;
            let selectedTahun = document.getElementById('tahun_filter').value;

            if (selectedPeriode === '' && selectedSource === '' && selectedTahun === '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Filter Kosong!',
                    text: 'Harap mengisi filter terlebih dahulu sebelum mengeksekusi.'
                });
            } else {
                document.getElementById('{{ $dmenu }}-form').submit();
            }
        });
    </script>
@endpush