@extends('layouts.container')
@section('title', 'Laporan')
@section('title_description', '')
@section('css')
    <link href="{{asset('/engine/multiSelect/css/multi-select.css') }}" media="screen" rel="stylesheet" type="text/css">
    <link href="{{asset('/engine/adminLTE/dist/css/skins/skin-black.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{asset('/engine/iCheck/flat/flat.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('body-class', 'skin-black')
@section('content')
    <div class="box box-info">
        <div class="box-header with-border">
            <h3 class="box-title">Pilih filter Laporan</h3>
        </div>
        {{ Form::open(['route' => 'kipd-laporan-result', 'class' => 'filter-laporan form-horizontal', 'role' => 'form', 'method' => 'PUT']) }}
        <div class="box-body">
            <div class="form-group">
                <label for="bagian" class="col-sm-2 control-label">Bagian</label>
                <div class="col-sm-4">
                    <select id="bagian" name="bagian" class="form-control">
                        <option value="1">Spesialis (Reguler dan Adaptasi)</option>
                        <option value="2">Spesialis (Reguler)</option>
                        <option value="3">Spesialis (Adaptasi)</option>
                        <option value="4">Sub Spesialis (Per Bidang)</option>
                        <option value="5">Fellowship</option>
                        <option value="6">Kompetensi Tambahan</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="tipe_laporan" class="col-sm-2 control-label">Tipe Laporan</label>
                <div class="col-sm-4">
                    <select id="tipe_laporan" name="tipe_laporan" class="form-control">
                        <option value="1">Jumlah Peserta Didik (Total)</option>
                        <option value="2">Jumlah Peserta Didik (Baru)</option>
                        <option value="3">Jumlah Peserta Lulusan</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="fakultas" class="col-sm-2 control-label">Fakultas / Cabang</label>
                <div class="col-sm-10">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="checkbox">
                                <input type="checkbox" id="checkAll" name="toggleCheck" value="checkAll">&nbsp;Check /
                                Uncheck All
                            </div>
                        </div>
                        <div class="panel-body laporan_div">
                            @foreach ($fakultas as $index => $value)
                                <div class="col-md-6">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <input type="checkbox" name="fakultas[{{ $index }}]"
                                                id="fakultas[{{ $index }}]"
                                                value="{{ $value['id_data_institusi'] }}">
                                        </div>
                                        <input type="text" class="form-control" title="{{ $value['nama_institusi'] }}"
                                            readonly="readonly"
                                            value="{{ Illuminate\Support\Str::limit($value['nama_institusi'], $limit = 45, $end = '...') }}">
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="tahun" class="col-sm-2 control-label">Tahun</label>
                <div class="col-sm-2">
                    <input type="number" id="tahun" name="tahun" class="form-control" value="{{ date('Y') }}" />
                </div>
            </div>
        </div>
        <div class="box-footer">
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    {{ Form::submit('Tampilkan Data Laporan', ['class' => 'btn btn-success']) }}
                </div>
            </div>
        </div>
        {{ Form::close() }}
    </div>
    <div id="laporan-modal-lg" class="modal fade laporan-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="laporanModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                Loading...
            </div>
        </div>
    </div>
    <div id="laporan-modal-detail-lg" class="modal fade laporan-modal-detail-lg" tabindex="-1" role="dialog"
        aria-labelledby="laporanDetailModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                Loading...
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script src="{{asset('/engine/iCheck/icheck.min.js') }}" type="text/javascript"></script>
    <script src="{{asset('/engine/fastclick/fastclick.min.js') }}"></script>
    <script src="{{asset('/engine/slimScroll/jquery.slimscroll.min.js') }}" type="text/javascript"></script>
    <script>
        $(function() {
            $('.filter-laporan').submit(function(e) {
                e.preventDefault();
                $('.laporan-modal-lg').modal('show');
            });

            $('#checkAll').iCheck({
                checkboxClass: 'icheckbox_flat',
                radioClass: 'iradio_flat'
            }).on('ifClicked', function() {
                $('#checkAll').on('ifChecked', function() {
                    $('.filter-laporan').find("input:checkbox").iCheck('check');
                }).on('ifUnchecked', function() {
                    $('.filter-laporan').find("input:checkbox").iCheck('uncheck');
                });
            });

            $('.laporan_div input[type="checkbox"]').iCheck({
                checkboxClass: 'icheckbox_flat',
                radioClass: 'iradio_flat'
            });

            $('.modal').on('show.bs.modal', function(event) {
                var idx = $('.modal:visible').length;
                $(this).css('z-index', 1040 + (10 * idx));
            }).on('shown.bs.modal', function(event) {
                var idx = ($('.modal:visible').length) - 1;
                $('.modal-backdrop').not('.stacked').css('z-index', 1039 + (10 * idx)).addClass('stacked');
            }).on('hidden.bs.modal', function() {
                $('.modal:visible').length && $(document.body).addClass('modal-open');
            });

            $('.laporan-modal-lg').on('show.bs.modal', function(event) {
                $form = $('.filter-laporan');
                var dataLaporan = {
                    'tipe': $('#tipe_laporan').val(),
                    'bagian': $('#bagian').val(),
                    'tahun': $('#tahun').val(),
                    'fakultas': $form.find('input:checkbox:checked').serializeArray(),
                    '_method': $("input[name='_method']").val(),
                    '_token': $("input[name='_token']").val()
                };

                var modal = $(this);
                modal.find('.modal-content').html('Loading...');
                $.ajax({
                    url: $form.attr('action'),
                    data: dataLaporan,
                    method: 'POST'
                }).done(function(e) {
                    modal.find('.modal-content').html(e);

                    $('#btnPrintLaporan').click(function(e) {
                        e.preventDefault();

                        var url =
                            '{{ URL::route('kipd-laporan-export-excel', ['tahun' => ':tahun', 'bagian' => ':bagian', 'fakultas' => ':fakultas', 'tipe' => ':tipe']) }}/'
                        url = url.replace(":tahun", $('#tahun').val());
                        url = url.replace(':bagian', $('#bagian').val());
                        url = url.replace(':fakultas', $form.find('input:checkbox:checked')
                            .serialize());
                        url = url.replace(':tipe', $('#tipe_laporan').val());

                        window.open(url)

                    });
                });

            });

            $('.laporan-modal-detail-lg').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var f = button.data('detail');
                var detailLaporan = {
                    'tipe': $('#tipe_laporan').val(),
                    'bagian': $('#bagian').val(),
                    'tahun': $('#tahun').val(),
                    'fakultas': f,
                    '_method': $("input[name='_method']").val(),
                    '_token': $("input[name='_token']").val()
                };

                var modal_detail = $(this);
                modal_detail.find('.modal-content').html('Loading...');
                $.ajax({
                    url: '{{ URL::route('kipd-laporan-result-detail') }}',
                    data: detailLaporan,
                    method: 'POST'
                }).done(function(e) {
                    modal_detail.find('.modal-content').html(e);

                    $('#btnPrintLaporanDetail').click(function(e) {
                        e.preventDefault();
                        var url =
                            '{{ URL::route('kipd-laporan-export-excel-detail', ['tahun' => ':tahun', 'bagian' => ':bagian', 'fakultas' => ':fakultas', 'tipe' => ':tipe']) }}/'
                        url = url.replace(":tahun", $('#tahun').val());
                        url = url.replace(':bagian', $('#bagian').val());
                        url = url.replace(':fakultas', f);
                        url = url.replace(':tipe', $('#tipe_laporan').val());

                    });
                });
            });
        });
    </script>
@endsection