@extends('layouts.admin')

@section('title')
    Siswa -
@endsection

@section('toolbar')
<div class="toolbar py-5 py-lg-5" id="kt_toolbar">
    <div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
        <div class="page-title d-flex flex-column me-3">
            <h1 class="d-flex text-dark fw-bolder my-1 fs-3">Verifikasi Dokumen</h1>
            <ul class="breadcrumb breadcrumb-dot fw-bold text-gray-600 fs-7 my-1">
                <li class="breadcrumb-item text-gray-600">
                    <a href="{{ route('sekolah') }}" class="text-gray-600 text-hover-primary">Sekolah</a>
                </li>
                <li class="breadcrumb-item text-gray-600">Verifikasi Dokumen</li>
            </ul>
        </div>
        <div class="d-flex align-items-center py-2 py-md-1 w-150px">
            <x-select name="periode_id" class="form-select border-0" :options="$list_periode" data-control="select2" />
        </div>
    </div>
</div>
@endsection

@section('content')
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
    <div class="content flex-row-fluid" id="kt_content">
        <form id="verifikasi_search">
            @csrf
            <div class="card mb-7">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="position-relative w-100 me-4">
                            <i class="fa fa-search position-absolute top-50 translate-middle ms-6"></i>
                            <div class="row">
                                <div class="col-md-3">
                                    <x-input name="nama" prefix="search_" class="form-control-solid ps-10" caption="Pencarian Nama" />
                                </div>
                                <div class="col-md-3">
                                    <x-input name="nik" prefix="search_" class="form-control-solid" caption="Pencarian NIK" />
                                </div>
                                <div class="col-md-2">
                                    <x-select name="jalur" prefix="search_" :options="$list_jalur" class="form-select form-select-solid" data-control="select2" />
                                </div>
                                <div class="col-md-2">
                                    @php($options = ['' => 'Semua Status', 1 => 'Sudah Diverifikasi', 0 => 'Belum Diverifikasi'])
                                    <x-select name="is_verifikasi" prefix="search_" :options="$options" class="form-select form-select-solid" :value="0" data-control="select2" />
                                </div>
                                <div class="col-md-2">
                                    @php($options = [1 => 'Sudah Dikunci', 0 => 'Belum Dikunci'])
                                    <x-select name="is_lock" prefix="search_" :options="$options" class="form-select form-select-solid" caption="Semua Status" data-control="select2" />
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center ms-auto">
                            <button type="submit" class="btn btn-primary">Search</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div id="verifikasi_table"></div>
    </div>
</div>
    <div class="d-none" id="list_sekolah">
        <x-select name="sekolah_id" caption="Sekolah" :options="$list_sekolah" />
    </div>
@endsection

@push('modals')
    <div class="modal fade" tabindex="-1" id="modal_view">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <div></div>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </div>
                </div>
                <div class="modal-body">
                    <div id="panel_keterangan_dokumen">
                        <h5>Jenis Sertifikat</h5>
                        <h4 id="keterangan_dokumen"></h4>
                    </div>
                    <img src="{{ asset('img/default.png') }}" alt="" class="w-100 h-auto rotate-image" id="preview_file">
                    <iframe src="" alt="" class="w-100 h-700px" id="preview_pdf"></iframe>
                    <div id="panel_verifikasi">
                        <hr>
                        <button onclick="verifikasi()" class="btn btn-bg-primary btn-color-white btn-sm px-4 me-3">Verifikasi</button>
                        <button onclick="tolak()" class="btn btn-bg-danger btn-color-white btn-sm px-4 float-end">Tolak</button>
                    </div>
                    <div id="panel_verifikasi_info">
                        <br>
                        <p class="mb-0">Diverifikasi Oleh : <span class="fw-bolder" id="verifikator"></span></p>
                        <p>Diverifikasi Pada : <span class="fw-bolder" id="waktu_verifikasi"></span></p>
                        <p><span class="fw-bold" id="keterangan_verifikasi"></span></p>
                        <button onclick="delete_verifikasi()" class="btn btn-bg-warning btn-color-black btn-sm px-4" id="button_batalkan">Batalkan Verifikasi</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" tabindex="-1" id="modal_pilihan">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <div></div>
                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times"></i>
                    </div>
                </div>
                <div class="modal-body">
                    <table class="table-bordered table-sm">
                        <thead>
                        <tr class="fw-bolder text-muted bg-light">
                            <th>Pilihan Ke</th>
                            <th>Sekolah</th>
                            <th>Skor</th>
                        </tr>
                        </thead>
                        <tbody id="modal_pilihan_body"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script>
        let $verifikasi_search = $('#verifikasi_search'),
            $verifikasi_table = $('#verifikasi_table'),
            _token = '{{ csrf_token() }}',
            selected_page = 1;
        let $periode_id = $('#periode_id'),
            periode_id = '',
            selected_id = '';

        let init_verifikasi = () => {
            $verifikasi_search.show();
            $verifikasi_table.show();
            search_verifikasi(selected_page);
        }

        let search_verifikasi = (page = 1) => {
            if (page.toString() === '+1') selected_page++;
            else if (page.toString() === '-1') selected_page--;
            else selected_page = page;

            let data = get_form_data($verifikasi_search);
            data.paginate = 10;
            data.page = selected_page;
            data.periode_id = periode_id;
            $.post("{{ route('admin.verifikasi.search') }}?tingkat={{ $tingkat }}", data, (result) => {
                $verifikasi_table.html(result);
            }).fail((xhr) => {
                $verifikasi_table.html(xhr.responseText);
            });
        }

        let view_file = (dokumen, is_lock = 0) => {
            selected_id = dokumen.id;
            if (dokumen.keterangan === 'null' || dokumen.keterangan === null || dokumen.keterangan === '') {
                $('#panel_keterangan_dokumen').hide();
            } else {
                $('#panel_keterangan_dokumen').show();
                $('#keterangan_dokumen').html(dokumen.keterangan);
            }

            let ext = dokumen.file.split('.');
            ext = ext[ext.length-1] ?? '';
            if (ext === 'pdf') {
                $('#preview_file').hide();
                $('#preview_pdf').show();
                $('#preview_pdf').attr('src', '{{ asset('storage') }}/' + dokumen.file);
            } else {
                $('#preview_file').show();
                $('#preview_file').attr('src', '{{ asset('storage') }}/' + dokumen.file);
                $('#preview_pdf').hide();
            }
            if (dokumen.verifikasi === null) {
                $('#panel_verifikasi').show();
                $('#panel_verifikasi_info').hide();
            } else {
                $('#verifikator').html(dokumen.verifikator.nama);
                $('#waktu_verifikasi').html(dokumen.waktu_verifikasi);
                if (dokumen.keterangan_verifikasi !== '') $('#keterangan_verifikasi').html('Alasan tolak : ' + dokumen.keterangan_verifikasi);
                else $('#keterangan_verifikasi').html('');
                $('#panel_verifikasi').hide();
                $('#panel_verifikasi_info').show();
            }
            if (is_lock === 1) {
                $('#button_batalkan').hide();
            }
            $('#modal_view').modal('show');
        }

        let verifikasi = () => {
            let id = selected_id;
            Swal.fire({
                title: 'Verifikasi dokumen?',
                showCancelButton: true,
                confirmButtonText: 'Verifikasi',
                confirmButtonColor: '#50cd89',
                cancelButtonColor: '#bdbdbd',
                cancelButtonText: 'Batal',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return $.post("{{ route('admin.verifikasi.verifikasi') }}", {
                        _token, id, verifikasi: 1, keterangan_verifikasi: ''
                    }, (result) => {
                        return result;
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) search_verifikasi(selected_page);
                $('#modal_view').modal('toggle');
            });
        }

        let tolak = () => {
            $('#modal_view').modal('toggle');
            let id = selected_id;
            Swal.fire({
                title: 'Tuliskan alasan tolak',
                input: 'textarea',
                inputAttributes: {autocapitalize: 'off'},
                showCancelButton: true,
                confirmButtonText: 'Tolak',
                confirmButtonColor: '#F46A6A',
                cancelButtonColor: '#bdbdbd',
                cancelButtonText: 'Batal',
                showLoaderOnConfirm: true,
                preConfirm: (keterangan_verifikasi) => {
                    return $.post("{{ route('admin.verifikasi.verifikasi') }}", {
                        _token, id, verifikasi: 0, keterangan_verifikasi
                    }, (result) => {
                        return result;
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) search_verifikasi(selected_page);
            });
        }

        let delete_verifikasi = () => {
            let id = selected_id;
            Swal.fire({
                title: 'Batal Verifikasi ?',
                showDenyButton: true,
                confirmButtonText: 'Ya',
                denyButtonText: 'Batal',
                confirmButtonColor: '#F46A6A',
                denyButtonColor: '#bdbdbd'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post("{{ url('admin/verifikasi/delete') }}/" + id, {_method: 'delete', _token}, () => {
                        init_verifikasi();
                        $('#modal_view').modal('toggle');
                    }).fail((xhr) => {
                        $verifikasi_table.html(xhr.responseText);
                    });
                }
            });
        }

        let verifikasi_siswa = (siswa_id) => {
            Swal.fire({
                title: 'Verifikasi siswa?',
                text: 'Siswa yang sudah diverifikasi akan dikunci dan tidak dapat merubah pilihan sekolahnya',
                showCancelButton: true,
                confirmButtonText: 'Verifikasi',
                confirmButtonColor: '#50cd89',
                cancelButtonColor: '#bdbdbd',
                cancelButtonText: 'Batal',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return $.post("{{ route('admin.verifikasi.verifikasi.siswa') }}", {
                        _token, siswa_id,
                    }, (result) => {
                        let message = result['message'] ?? '';
                        if (message !== '') swal.fire(message);
                        return result;
                    }).fail((xhr) => {
                        console.log(xhr.responseText);
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) search_verifikasi(selected_page);
            });
        }

        let tolak_siswa = (siswa_id) => {
            Swal.fire({
                title: 'Tolak siswa?',
                text: 'Siswa yang sudah ditolak tidak bisa dikembalikan lagi statusnya',
                showCancelButton: true,
                confirmButtonText: 'Tolak',
                confirmButtonColor: '#50cd89',
                cancelButtonColor: '#bdbdbd',
                cancelButtonText: 'Batal',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return $.post("{{ route('admin.verifikasi.tolak.siswa') }}", {
                        _token, siswa_id,
                    }, (result) => {
                        return result;
                    }).fail((xhr) => {
                        console.log(xhr.responseText);
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) search_verifikasi(selected_page);
            });
        }

        let hapus_siswa = (id) => {
            Swal.fire({
                title: 'Hapus siswa?',
                text: 'Hapus data siswa hanya untuk data siswa yang tidak valid!',
                showCancelButton: true,
                confirmButtonText: 'Hapus',
                confirmButtonColor: '#ff8a80',
                cancelButtonColor: '#bdbdbd',
                cancelButtonText: 'Batal',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return $.post("{{ route('admin.verifikasi.delete.siswa') }}", {
                        _token, id,
                    }, (result) => {
                        return result;
                    }).fail((xhr) => {
                        console.log(xhr.responseText);
                    });
                },
                allowOutsideClick: () => !Swal.isLoading()
            }).then((result) => {
                if (result.isConfirmed) search_verifikasi(selected_page);
            });
        }

        let detail_pilihan = (data) => {
            let $modal_pilihan = $('#modal_pilihan'),
                $modal_pilihan_body = $('#modal_pilihan_body');
            $modal_pilihan_body.html('');
            $.each(data, (i, item) => {
                $modal_pilihan_body.append('<tr><td>'+ item.pilihan_ke +'</td><td>'+ item.sekolah.nama +'</td><td>'+ item.skor +'</td></tr>');
            });
            $modal_pilihan.modal('show');
        }

        let hasil_seleksi = (siswa_id, nama_siswa, jalur) => {
            Swal.fire({
                title: 'Tentukan Hasil Seleksi untuk ' + nama_siswa,
                html: $('#list_sekolah').html().replaceAll('sekolah_id', 'sekolah_id2'),
                showCancelButton: true,
                confirmButtonText: 'Proses',
                cancelButtonText: 'Batal',
                preConfirm: () => {
                    return {
                        selectedOption: $('#sekolah_id2').find('option:selected').val()
                    };
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post("{{ route('admin.verifikasi.seleksi') }}", {
                        _token, siswa_id, sekolah_id: result.value.selectedOption, jalur
                    }, () => {
                        swal.fire('Berhasil diproses!').then(() => search_verifikasi(selected_page));
                    }).fail((xhr) => {
                        console.log(xhr.responseText);
                    });
                    console.log('Selected option:', result.value.selectedOption);
                }
            });
        }

        $verifikasi_search.submit((e) => {
            e.preventDefault();
            search_verifikasi();
        });
        $periode_id.change(() => {
            periode_id = $periode_id.find('option:selected').val();
            $('#import_periode_id').val(periode_id);
        });
        $periode_id.change();

        init_verifikasi();

        degree = 0;
        $('.rotate-image').click(function(){
            degree += 90;
            console.log(degree);
            $(this).css({
                "-webkit-transform": "rotate("+ degree +"deg)",
                "-moz-transform": "rotate("+ degree +"deg)",
                "transform": "rotate("+ degree +"deg)"
            });
        });
    </script>
@endpush