@extends('layouts.admin.core')
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row my-2">
            <div class="col-sm-12 text-center">
                <h1 class="mb-2">Buat Usulan</h1>
                <h6>Isi semua formulir dan klik selanjutnya</h6>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row no-print">
            <div class="col-md-12">
                <div class="stepwizard mb-2">
                    <div class="stepwizard-row setup-panel">
                        <div class="stepwizard-step">
                            <a href="#step-1" type="button" class="btn btn-info btn-circle"><i
                                    class="fas fa-file-alt"></i></a>
                            <p>Atur Usulan</p>
                        </div>
                        <div class="stepwizard-step">
                            <a href="#step-2" type="button" class="btn btn-secondary btn-circle disabled"><i
                                    class="fas fa-user"></i></a>
                            <p>Pilih Pegawai</p>
                        </div>
                        <div class="stepwizard-step">
                            <a href="#step-3" type="button" class="btn btn-secondary btn-circle disabled"><i
                                    class="fas fa-file-upload"></i></a>
                            <p>Upload Berkas</p>
                        </div>
                        <div class="stepwizard-step">
                            <a href="#step-4" type="button" class="btn btn-secondary btn-circle disabled"><i
                                    class="fas fa-check"></i></a>
                            <p>Selesai</p>
                        </div>
                    </div>
                </div>
            </div>
        </div> {{-- End .row --}}

        <form id="sendForm">
            {{ csrf_field() }}
            <div class="row setup-content" id="step-1">
                <div class="col-12">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Atur Usulan</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="pilihUsul">Pilih Usul</label>
                                        <select class="custom-select" id="pilihUsul" name="pilihusul" required="required">
                                            <option value="">-- Pilih ---</option>
                                            @foreach ($usulan as $u)
                                                @if($u->nama_usulan != 'Karpeg')
                                                    <option value="{{$u->id}}">{{$u->nama_usulan}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="jenisUsul">Jenis Usul</label>

                                        <select class="custom-select" id="jenisUsul" required="required" disabled>
                                            <option class="pl">-- Pilih ---</option>
                                        </select>

                                        @foreach ($usulan as $u)
                                        <select class="custom-select d-none" name="jenisusul" id="jenisUsul{{$u->id}}">
                                            @foreach ($u->jenis as $i)
                                                <option value="{{$i->id}}">{{$i->nama_usulan_jenis}}</option>
                                            @endforeach
                                        </select>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="nomorUsul">Nomor Usul</label>
                                        <input type="text" class="form-control" id="nomorUsul" name="nomorusul" required="required">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="tanggalUsul">Tanggal Usul</label>
                                        {{-- <input type="text" class="form-control" id="tanggalUsul"> --}}
                                        <input type="text" class="form-control" name="tanggalusul" id="tanggalUsul" required="required">
                                    </div>
                                </div>
                                @role('Kepegawaian')
                                <div class="col-md-12">
                                    <input type="hidden" id="satuanKerja" name="satker_id" value="{{auth()->user()->satker_id}}">
                                    <div class="form-group">
                                        <label for="satuanKerja">Satuan Kerja</label>
                                        <input type="text" class="form-control" value="{{auth()->user()->satker->nama}}" readonly>
                                    </div>
                                </div>
                                @endrole

                                @role('Admin')
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="satuanKerja">Satuan Kerja</label>
                                        <select class="custom-select" id="satuanKerja" name="satker_id">
                                            @foreach ($satker as $i)
                                                <option value="{{$i->id}}">{{$i->nama}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @endrole

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="perihal">Perihal</label>
                                        <input type="text" class="form-control" id="perihal" name="perihal" required="required">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="suratpengantar">Upload Surat Pengantar</label>
                                        <div class="input-group">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="suratpengantar" name="suratpengantar" required/>
                                                <label class="custom-file-label" for="suratpengantar">Pilih File</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer bg-white">
                            <button class="btn btn-info float-right nextBtn" type="button">Selanjutnya</button>
                        </div>

                        <!-- /.card-footer -->
                    </div>
                </div>
            </div>
            <div class="row setup-content" id="step-2">
                <div class="col-12">
                    <div class="card card-info">
                        <div class="card-header">
                            <h3 class="card-title">Pilih Pegawai</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

                        <div class="card-body">
                            {{-- <p>Cari Nama / NIP</p>   --}}
                            <input class="form-control" id="myInput" type="text" placeholder="Cari Nama / Nip..">
                            <br>
                            <div id="ajxtable"></div>
                        </div>
                        <div class="overlay">
                            <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                          </div>
                        <!-- /.card-body -->
                        <div class="card-footer bg-white">
                            <button class="btn btn-secondary prevBtn" type="button">Sebelumnya</button>
                            <button class="btn btn-info float-right nextBtn" type="button">Selanjutnya</button>
                        </div>

                        <!-- /.card-footer -->
                    </div>
                </div>
            </div>

            <div class="row setup-content" id="step-3">
                <div class="col-12">
                    <div id="uploaddoc"></div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title card-danger">Harap Periksa Kembali !</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->

                        <div class="card-body">
                            <p><strong class="text-danger">Perhatian !!!</strong><br>Sebelum proses usulan, harap periksa kembali data.</p>
                        </div>

                        <div class="overlay">
                            <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                          </div>
                        <!-- /.card-body -->
                        <div class="card-footer bg-white">
                            <button class="btn btn-secondary prevBtn" type="button">Sebelumnya</button>
                            <button class="btn btn-success float-right nextBtn" type="button">Proses Usulan</button>
                        </div>

                        <!-- /.card-footer -->
                    </div>

                </div>
            </div>
        </form>
            <div class="row setup-content" id="step-4">
                <div class="col-12" id="final">                        
                </div>
                <div class="col-12 text-center">
                    <div class="overlay p-5">
                        <i class="fas fa-2x fa-sync-alt fa-spin"></i><br>Menyimpan ...
                    </div>
                </div>
            </div>

        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
@endsection

@push('css')
<style>
    .stepwizard-step p {
        margin-top: 10px;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    .stepwizard-step .btn:disabled, .stepwizard-step .btn.disabled {
        opacity: 1 !important;
    }

    .stepwizard-row:before {
        top: 20px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 2px;
        background-color: #ccc;
        z-order: 0;

    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
        width: 40px;
        height: 40px;
        text-align: center;
        padding: 6px 0;
        font-size: 16px;
        line-height: 1.428571429;
        border-radius: 20px;
        border-width: 2px;
    }
</style>
@endpush

@push('tjs')
<script>
    // $(function() {
        // $('input[name="tanggalusul"]').daterangepicker({
        //     singleDatePicker: true,
        //     showDropdowns: true,
        //     minYear: 1901,
        //     maxYear: parseInt(moment().format('YYYY'),10)
        // }, function(start, end, label) {
        //     var years = moment().diff(start, 'years');
        //     alert("You are " + years + " years old!");
        // });
    // });

    $(document).ready(function(){

        $('.overlay').hide();
        bsCustomFileInput.init();

        //DATE
        $('input[name="tanggalusul"]').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            locale: {
            "format": "DD/MM/YYYY"
        }
        });

        // PILIH USUL
        var 
            @foreach($usulan as $u)
                jenisUsul{{$u->id}} = $('#jenisUsul{{$u->id}}'),
            @endforeach

            pilihUsul = $('#pilihUsul');
            jenisUsul = $('#jenisUsul'),

        pilihUsul.on("change", function() {

            jenisUsul.removeClass('d-none').addClass('d-none');

            @foreach($usulan as $u)
                jenisUsul{{$u->id}}.removeClass('d-none').addClass('d-none');
                jenisUsul{{$u->id}}.prop( "disabled", false ).prop( "disabled", true );
            @endforeach

            switch($(this).val()) {
                
                @foreach($usulan as $u)
                case "{{$u->id}}":
                    jenisUsul{{$u->id}}.removeClass('d-none');
                    jenisUsul{{$u->id}}.prop( "disabled", false );
                    jenisUsul{{$u->id}}.prop("selectedIndex", 0);
                    break;
                @endforeach

                default:
                    jenisUsul.removeClass('d-none');
                    jenisUsul.prop( "disabled", false );
            }
        });

        // PENCARIAN
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });

        // WIZARD
        var navListItems = $('div.setup-panel div a'),
            allPrevBtn = $('.prevBtn'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');

        allWells.hide();

        navListItems.click(function (e) {
            e.preventDefault();
            var $target = $($(this).attr('href')),
                    $item = $(this);

            if (!$item.hasClass('disabled')) {
                navListItems.removeClass('btn-info').addClass('btn-secondary');
                $item.addClass('btn-info');
                allWells.hide();
                $target.show();
                $target.find('input:eq(0)').focus();

                if ($('#step-2').is(":visible")) {
                    $('#ajxtable').empty();
                    $('.overlay').show();
                    $.ajax({
                        type: "POST",
                        data: {
                            "_token": "{{ csrf_token() }}",
                            "satker": $('#satuanKerja').val()
                            },
                        url: "{{url('usulan/get-pegawai-by-satker')}}",
                        success: function(data) {
                            $('#ajxtable').html(data);
                        },
                        complete: function() {
                            $('.overlay').hide();
                            $target.find('input:eq(0)').val("");
                        }
                    });
                }

                if ($('#step-3').is(":visible")) {

                    $('#uploaddoc').empty();
                    $('.overlay').show();

                    var pegawaiterpilihArray = [];
                    pegawaiterpilihArray.push({ name: "_token", value: "{{ csrf_token() }}" });
                    pegawaiterpilihArray.push({ name: "jenisusul", value: $('#jenisUsul'+$('#pilihUsul').val()).val() });

                    var pegawaiterpilih = $('.chkpegawai:checked'); 

                    pegawaiterpilih.each(function(index){

                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][id_pegawai_sikep]', 
                            value: $(this).data('id_pegawai_sikep')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][foto_pegawai]', 
                            value: $(this).data('foto_pegawai')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][nip_baru]', 
                            value: $(this).data('nip_baru')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][nip_lama]', 
                            value: $(this).data('nip_lama')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][nama]', 
                            value: $(this).data('nama')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][ktp]', 
                            value: $(this).data('ktp')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][pangkat]', 
                            value: $(this).data('pangkat')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][gol]', 
                            value: $(this).data('gol')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][karpeg]', 
                            value: $(this).data('karpeg')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][pendidikan]', 
                            value: $(this).data('pendidikan')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][jenis_kelamin]', 
                            value: $(this).data('jenis_kelamin')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][tempat_lahir]', 
                            value: $(this).data('tempat_lahir')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][tanggal_lahir]', 
                            value: $(this).data('tanggal_lahir')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][EmailPegawai]', 
                            value: $(this).data('EmailPegawai')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][nomor_handphone]', 
                            value: $(this).data('nomor_handphone')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][agama]', 
                            value: $(this).data('agama')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][jabatan]', 
                            value: $(this).data('jabatan')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][jabatansatker]', 
                            value: $(this).data('jabatansatker')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][kode_satker]', 
                            value: $(this).data('kode_satker')
                        });
                        
                        pegawaiterpilihArray.push({ 
                            name: 'pegawai[' + index + '][satker]', 
                            value: $(this).data('satker')
                        });
                    });

                    $.ajax({
                        type: "POST",
                        data: $.param(pegawaiterpilihArray),
                        url: "{{url('usulan/get-jenis-doc')}}",
                        success: function(data) {
                            $('#uploaddoc').html(data);
                            bsCustomFileInput.init();
                        },
                        complete: function() {
                            $('.overlay').hide();
                            $target.find('input:eq(0)').val("");
                        }
                    });
                }

                if ($('#step-4').is(":visible")) {
                    $('#final').empty();
                    $('.overlay').show();

                    var form = $('#sendForm');
                    var formdata = false;
                    if (window.FormData){
                        formdata = new FormData(form[0]);
                    }

                    $.ajax({
                        type: "POST",
                        data: formdata ? formdata : form.serialize(),
                        cache: false,
                        contentType: false,
                        processData: false,
                        url: "{{url('usulan/simpandata')}}",
                        success: function(data) {
                            $('#final').html(data);
                        },
                        complete: function() {
                            $('.overlay').hide();
                            $target.find('input:eq(0)').val("");
                        }
                    });
                }


            }
        });

        allPrevBtn.click(function(){
            var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
            prevStepWizard.removeClass('disabled').trigger('click').addClass('disabled');
        });

        allNextBtn.click(function(){
            console.log('net');
            var curStep = $(this).closest(".setup-content"),
                curStepBtn = curStep.attr("id"),
                nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                curInputs = curStep.find("input[type='text'],input[type='url'],input[type='file'],select"),
                isValid = true;

                console.log(curInputs);

            $(".form-group").find("input,select").removeClass("is-invalid");

            for(var i=0; i<curInputs.length; i++){
                if (!curInputs[i].validity.valid){
                    isValid = false;
                    $(curInputs[i]).addClass("is-invalid");
                }
            }

            if (isValid) {
                if ($('#step-2').is(":visible")) {
                    if ($('.chkpegawai:checked').length > 0) {
                        nextStepWizard.removeClass('disabled').trigger('click').addClass('disabled');
                    } else {
                        alert("Pilih Dulu Pegawai!");
                    }
                } else {
                    nextStepWizard.removeClass('disabled').trigger('click').addClass('disabled');
                }
            }
        });

        $('div.setup-panel div a.btn-info').trigger('click').addClass('disabled');
    });
</script>
@endpush