@extends('layouts.admin')

@section('title')
    Hasil Seleksi -
@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">Hasil Seleksi</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('admin') }}" class="text-gray-600 text-hover-primary">Admin</a>
                </li>
                <li class="breadcrumb-item text-gray-600">Hasil Seleksi</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">
{{--        <div class="mb-6">--}}
{{--            <label for="no_hasil" class="fs-4">No. Hasil Seleksi</label>--}}
{{--            <x-input name="no_hasil" class="form-control-lg form-control-solid"  :value="$periode->no_hasil ?? ''" />--}}
{{--        </div>--}}
        <form id="hasil_search">
            @csrf
            <div class="card mb-7">
                <div class="card-body">
                    <div class="d-flex align-items-center gap-6">
                        <div class="w-125px">
                            <x-select name="tingkat" prefix="search_" class="form-select form-select-solid" :options="$list_tingkat" data-control="select2" />
                        </div>
                        <div class="position-relative w-100">
                            <div class="row">
                                <div class="col-md-3">
                                    @php($jenis = ['Sekolah' => 'Per Sekolah', 'Kecamatan' => 'Per Kecamatan'])
                                    <x-select name="jenis" prefix="search_" class="form-select form-select-solid" :options="$jenis" data-control="select2" />
                                </div>
                                <div class="col-md-2">
                                    <x-select name="jalur" prefix="search_" class="form-select form-select-solid" :options="$list_jalur" caption="Semua Jalur" data-control="select2" />
                                </div>
                                <div class="col-md-3">
                                    <x-select name="kecamatan" prefix="search_" class="form-select form-select-solid" :options="$list_kecamatan" caption="Pilih Kecamatan" data-control="select2" />
                                </div>
                                <div class="col-md-4">
                                    <x-select name="sekolah_id" prefix="search_" class="form-select form-select-solid" :options="$list_sekolah" caption="Semua Sekolah" data-control="select2" />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex flex-row justify-content-end align-items-center ms-auto mt-6">
                        <button type="submit" class="btn btn-primary">Search</button>
                        <button type="button" class="btn btn-primary ms-4" onclick="export_excel()">Export Excel</button>
                        <button type="button" class="btn btn-success ms-4" onclick="cetak()">Cetak</button>
                        <button type="button" class="btn btn-danger text-nowrap ms-4" onclick="tutup_seleksi()" id="button_tutup">Tutup Seleksi</button>
                    </div>
                </div>
            </div>
        </form>

        <div id="hasil_table"></div>

    </div>
</div>
@endsection

@push('scripts')
    <script>
        let $hasil_search = $('#hasil_search'),
            $hasil_table = $('#hasil_table'),
            _token = '{{ csrf_token() }}',
            selected_page = 1;

        let init_hasil = () => {
            $hasil_search.show();
            $hasil_table.show();
            search_hasil(selected_page);
        }

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

            let data = get_form_data($hasil_search);
            data.paginate = 10;
            data.page = selected_page;
            $hasil_table.html('<h1 class="text-center my-10">Loading ...</h1>');
            $.post("{{ route('admin.hasil.search') }}", data, (result) => {
                $hasil_table.html(result);
            }).fail((xhr) => {
                $hasil_table.html(xhr.responseText);
            });
        }

        let cetak = () => {
            let data = $hasil_search.serialize();
            window.open('{{ url('admin/hasil/cetak') }}?' + data, '_blank');
        }

        let tutup_seleksi = () => {
            let tingkat = $('#search_tingkat').find('option:selected').val();
            let jalur = $('#search_jalur').find('option:selected').val();
            if (jalur === '') {
                swal.fire('Pilih jalur !');
            } else {
                Swal.fire({
                    title: 'Tutup Periode ' + tingkat + ' Jalur ' + jalur + ' ?',
                    text: 'Semua siswa yang lolos seleksi akan blokir untuk seleksi tahap berikutnya',
                    showDenyButton: true,
                    confirmButtonText: 'Tutup',
                    denyButtonText: 'Batal',
                    confirmButtonColor: '#F46A6A',
                    denyButtonColor: '#bdbdbd'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('#button_tutup').html('Loading ...');
                        $.post("{{ url('admin/hasil/tutup_periode') }}", {_token, tingkat, jalur}, () => {
                            swal.fire('Proses Tutup Periode Berhasil !').then(() => window.location.reload());
                        }).fail((xhr) => {
                            $('#hasil_table').html(xhr.responseText);
                            console.log(xhr.responseText);
                        });
                    }
                });
            }
        }

        let export_excel = () => {
            let data = $('#hasil_search').serialize();
            window.open("{{ url('admin/hasil/excel') }}?" + data, '_blank');
        }

        $hasil_search.submit((e) => {
            e.preventDefault();
            search_hasil();
        });

        let $no_hasil = $('#no_hasil');
        $no_hasil.change(() => {
            let no_hasil = $no_hasil.val();
            $.post("{{ url('admin/no_hasil') }}", {
                _token: '{{ csrf_token() }}', no_hasil
            }, () => {
                swal.fire('No. Hasil Seleksi berhasil disimpan!');
            }).fail((xhr) => {
                console.log(xhr.responseText);
            });
        });
    </script>
@endpush