@extends('admin.template.layout')

@section('css')
@endsection

@section('page-title')
@endsection

@section('content')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <!--begin::Content wrapper-->
        <div class="d-flex flex-column flex-column-fluid">
            <div class="app-main flex-column flex-row-fluid dashboard " id="detail">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">

                    <div id="kt_app_content" class="app-content flex-column-fluid">
                        <!--begin::Content container-->
                        <div id="kt_app_content_container" class="app-container container-fluid">
                            <div class="card mb-5 mb-xl-8">
                                <div class="card-header border-0 pt-5">

                                    <div class="d-flex flex-column flex-md-row gap-4 align-items-end mb-4">
                                        <div class="mb-5 mb-md-0">
                                            <label for="filter_penilaian_pemantapan" class="form-label">Penilaian &
                                                Pemantapan</label>
                                            <select id="filter_penilaian_pemantapan" class="form-select filter"
                                                data-control="select2">
                                                <option value="">Semua</option>
                                                <option value="uploaded">Sudah Upload</option>
                                                <option value="not_uploaded">Belum Upload</option>
                                            </select>
                                        </div>
                                        <div class="mb-5 mb-md-0">
                                            <label for="filter_sertifikat" class="form-label">Data Sertifikat</label>
                                            <select id="filter_sertifikat" class="form-select filter"
                                                data-control="select2">
                                                <option value="">Semua</option>
                                                <option value="uploaded">Terisi</option>
                                                <option value="not_uploaded">Belum Terisi</option>
                                            </select>
                                        </div>
                                        <div class="mb-5 mb-md-0">
                                            <label for="filter_kelas" class="form-label">Kelas</label>
                                            <select id="filter_kelas" class="form-select filter" data-control="select2">
                                                <option value="">Semua</option>
                                                @foreach ($dataKelas as $kelas)
                                                    <option value="{{ $kelas }}">{{ $kelas }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mb-5 mb-md-0">
                                            <label for="filter_angkatan" class="form-label">Angkatan</label>
                                            <select id="filter_angkatan" class="form-select filter" data-control="select2">
                                                <option value="">Semua</option>
                                                @foreach ($dataAngkatan as $angkatan)
                                                    <option value="{{ $angkatan }}">{{ $angkatan }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                </div>
                                <div class="card-header border-0 pt-5">
                                    <div class="d-flex align-items-end position-relative">
                                        <div class="d-flex align-items-center position-relative">
                                            <i class="ki-duotone ki-magnifier fs-1 position-absolute ms-6"><span
                                                    class="path1"></span><span class="path2"></span></i>
                                            <input type="text" id="searchTable"
                                                class="form-control form-control-solid w-250px ps-15"
                                                placeholder="Cari data" autocomplete="off" />
                                        </div>
                                    </div>
                                    <div class="card-toolbar gap-4 d-flex justify-content-end align-items-end">
                                        <!--begin::Action-->
                                        <div>
                                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#kt_modal_1">
                                                <i class="ki-duotone ki-exit-up fs-2">
                                                    <span class="path1"></span>
                                                    <span class="path2"></span>
                                                </i> Import
                                            </button>

                                            <div class="modal fade" tabindex="-1" id="kt_modal_1">
                                                <div class="modal-dialog">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h3 class="modal-title">Import Data Penilaian dan Pemantapan
                                                            </h3>

                                                            <!--begin::Close-->
                                                            <div class="btn btn-icon btn-sm btn-active-light-primary ms-2"
                                                                data-bs-dismiss="modal" aria-label="Close">
                                                                <i class="ki-duotone ki-cross fs-1"><span
                                                                        class="path1"></span><span
                                                                        class="path2"></span></i>
                                                            </div>
                                                            <!--end::Close-->
                                                        </div>

                                                        <div class="modal-body">
                                                            <div class="mb-2">
                                                                Format Import Penilaian dan Pemantapan
                                                            </div>
                                                            <div>
                                                                <a href="{{ asset('format/format_sertifikat_penilaian.xlsx') }}"
                                                                    class="btn btn-sm btn-light-primary" download>Download
                                                                    Format</a>
                                                            </div>
                                                            <form action="" class="mt-4" id="import_form">
                                                                @csrf
                                                                <div class="mt-4">
                                                                    <label for="import_file" class="form-label">Pilih
                                                                        File</label>
                                                                    <input type="file" name="import_file"
                                                                        class="form-control" id="import_file"
                                                                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                                                </div>
                                                            </form>
                                                        </div>

                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-light"
                                                                data-bs-dismiss="modal">Close</button>
                                                            <button type="button" id="import_btn"
                                                                class="btn btn-primary">Import</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Action-->
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="myTable" class="table table-row-bordered align-middle fw-bold ">
                                            <thead>
                                                <tr class="fw-bold text-white bg-secondary">
                                                    <th class="px-7 rounded-start-pill" style="background-color: #F87316">
                                                        Nama Siswa</th>
                                                    <th class="" style="background-color: #F87316">NIS</th>
                                                    <th class="" style="background-color: #F87316">Kelas</th>
                                                    <th class="" style="background-color: #F87316">Angkatan</th>
                                                    <th class="" style="background-color: #F87316">Status</th>
                                                    <th class="px-7 rounded-end-pill" style="background-color: #F87316">
                                                        Action</th>
                                                </tr>
                                            </thead>
                                            <tbody class="">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">
            <i class="ki-duotone ki-arrow-up">
                <span class="path1"></span>
                <span class="path2"></span>
            </i>
        </div>
    </div>
@endsection
@section('script')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}"></script>

    <script>
        function initSelect2(route, selectElement, params = null) {
            var id = null
            if (params != null) {
                id = params
            }
            $(selectElement).select2({
                ajax: {
                    url: route,
                    dataType: 'json',
                    data: function(params) {
                        return {
                            q: params.term,
                            id: id
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.results
                        };
                    },
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr(
                            'content')
                    },
                    allowClear: true
                }
            });
        }
        $(document).ready(function() {
            $('#kt_datatable_export').click(function(e) {
                e.preventDefault();

                // Get all filter values
                var siswa_id = $('#filter_siswa').val();
                var jenis_pembayaran = $('#filter_jenis_pembayaran').val();
                var status = $('#filter_status').val();
                var tanggal_awal = $('#filter_tanggal_awal').val();
                var tanggal_akhir = $('#filter_tanggal_akhir').val();

                // Prepare query params
                var params = $.param({
                    siswa_id: siswa_id,
                    jenis_pembayaran: jenis_pembayaran,
                    status: status,
                    tanggal_awal: tanggal_awal,
                    tanggal_akhir: tanggal_akhir
                });

                // Create a hidden link to force download
                var downloadUrl = "{{ route('penilaian-pemantapan.export') }}?" + params;

                var link = document.createElement('a');
                link.href = downloadUrl;
                link.target = '_blank'; // Open in new tab (optional)
                link.click();
            });

            $(".flatpickr-input").flatpickr({
                locale: "id", // formate date indonesia
            });
            var table = $("#myTable").DataTable({
                responsive: true,
                "order": [],
                processing: true,
                serverSide: true,
                "ajax": {
                    url: '{{ route('penilaian-pemantapan.data') }}',
                    type: 'GET',
                },
                "columns": [{
                        data: 'nama'
                    },
                    {
                        data: 'nis'
                    },
                    {
                        data: 'kelasSiswa'
                    },
                    {
                        data: 'angkatanSiswa'
                    },
                    {
                        data: 'penilaian'
                    },
                    {
                        data: 'action'
                    },
                ],
                "columnDefs": [{
                    className: 'px-7',
                    targets: 0
                }]
            });

            $(".filter").on('change', function() {
                var penilaianPemantapan = $("#filter_penilaian_pemantapan").val();
                var sertifikat = $("#filter_sertifikat").val();
                var angkatan = $("#filter_angkatan").val();
                var kelas = $("#filter_kelas").val();

                // Update the DataTable with the selected filters
                table.ajax.url(
                    `{{ route('penilaian-pemantapan.data') }}?penilaian_pemantapan=${penilaianPemantapan}&sertifikat=${sertifikat}&angkatan=${angkatan}&kelas=${kelas}`
                    ).load();
            });

            // Event listener for the import button click
            $("#import_btn").on('click', function() {
                var form = $('#import_form')[0];
                var formData = new FormData(form);

                Swal.fire({
                    title: 'Apakah anda yakin?',
                    text: "Untuk mengimport data penilaian dan pemantapan?",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Ya, import data!',
                    cancelButtonText: 'Tidak, batalkan',
                    customClass: {
                        confirmButton: 'btn btn-primary',
                        cancelButton: 'btn btn-danger'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        Swal.fire({
                            title: 'Silahkan tunggu',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.ajax({
                            url: '{{ route('penilaian-pemantapan.import') }}',
                            type: 'POST',
                            data: formData,
                            contentType: false,
                            processData: false,
                            success: function(data) {
                                Swal.close();
                                if (data.status === 'success') {
                                    Swal.fire('Import Data Berhasil!', data.message,
                                            'success')
                                        .then(function() {
                                            location.reload(true);
                                        });
                                } else {
                                    Swal.fire('Import Data Gagal!', data.message,
                                        'error');
                                }
                            },
                            error: function(xhr) {
                                Swal.close();

                                if (xhr.status === 422 && xhr.responseJSON && xhr
                                    .responseJSON.errors) {
                                    let errors = xhr.responseJSON.errors;
                                    let html = '<ul style="text-align:left;">';
                                    errors.forEach(function(error) {
                                        html += `<li>${error}</li>`;
                                    });
                                    html += '</ul>';

                                    Swal.fire({
                                        title: 'Import Data Gagal!',
                                        html: html,
                                        icon: 'error',
                                        width: 600
                                    });
                                } else {
                                    Swal.fire('Import Data Gagal!',
                                        'Terjadi kesalahan saat mengimport data.',
                                        'error');
                                }
                            },
                            complete: function() {
                                Swal.hideLoading();
                            }
                        });
                    }
                });
            });

        });
    </script>
@endsection