@extends('layouts.app')

@section('content')
	<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Penilaian Kinerja</h3>
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Penilaian Kinerja</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section" x-data="main">
		<div class="card">
            <div class="card-header">
                Data Karyawan 
                 <div class="float-end">
                    <!-- <button class="btn btn-primary" @click="addData" data-id="0"><span class="bi bi-plus"> TAMBAH</span></button>
                    <button class="btn btn-success" @click="importData" data-id="0"><span class="bi bi-file"> IMPORT</span></button> -->
                </div>

                <div class="clearfix"></div>
            </div>
            <div class="card-body">
               
               
                    <div class="form-group row">
                        <div class="col-md-4">
                            <label>Manager Area</label>
                            <select id="managerArea" class="form-select" x-model="attr.area" @change="onAreaChange">
                                <option value="">-- All Area --</option>
                                @foreach($area as $row)
                                <option value="{{ $row->id }}">{{ $row->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Cabang</label>
                            <select id="branch" class="form-select" x-model="attr.lokasi" >
                                <option value="">-- All Cabang --</option>
                                <template x-for="(row,index) in attr.listLokasi" :key="row.id">
                                <option :value="row.id" x-text="row.nama"></option>
                                </template>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label>Divisi</label>
                            <select id="division" class="form-select" x-model="attr.divisi" @change="onDivisiChange">
                                <option value="">-- All Divisi --</option>
                                @foreach($divisi as $div)
                                <option value="{{ $div->id }}">{{ $div->nama }}</option>
                                @endforeach
                                </template>
                            </select>
                        </div>

                    </div>
                    <div class="form-group row">
                        <div class="col-md-6">
                            <label>Nama</label>
                            <select id="nama" class="form-select" x-model="attr.nama" @change="onNameChange">
                                <option value="">-- Pilih Nama --</option>
                                <template x-for="(row,index) in attr.listNama" :key="row.nik">
                                <option :value="row.nik" x-text="row.nama"></option>
                                </template>
                            </select>
                        </div>

                        <div class="col-md-3">
                            <label>Lama Gabung</label>
                            <input type="text" id="lamaGabung" name="lamaGabung" class="form-control" readonly>
                        </div>

                        <div class="col-md-3">
                            <label>Tanggal</label>
                            <input type="text" id="tanggal" name="tanggal" class="form-control flatpickr" value="{{ date('Y-m-d') }}">
                        </div>
                    
                    </div>

            
                    <div class="divider">
                        <div class="divider-text">form</div>
                    </div>

                    <h5>Kepribadian & Perilaku</h5>
                    <table id="attitudeTable" class="table table-striped" style="margin-bottom:50px">
                        <thead style="background-color: #c8deff;">
                            <th style="width:5%">No</th>
                            <th style="width:5%;display:none">assessment ID</th>
                            <th>Aspek</th>
                            <th style="width:10%">Nilai</th>
                        </thead>
                        <tbody></tbody>
                    </table>


                    <h5>Hasil Kerja</h5>
                    <table id="hasilKerjaTable" class="table table-striped" style="margin-bottom:50px">
                        <thead style="background-color: #ffedbf;"> 
                            <th style="width:5%">No</th>
                            <th style="width:5%;display:none">assessment ID</th>
                            <th>Aspek</th>
                            <th style="width:10%">Nilai</th>
                        </thead>
                        <tbody></tbody>
                    </table>


                    <h5>Leadership</h5>
                    <table id="leadershipTable" class="table table-striped" style="margin-bottom:50px">
                        <thead style="background-color: #d5ffd3;">
                            <th style="width:5%">No</th>
                            <th style="width:5%;display:none">assessment ID</th>
                            <th>Aspek</th>
                            <th style="width:10%">Nilai</th>
                        </thead>
                        <tbody></tbody>
                    </table>

                    <p style="font-size:17px;font-weight:700">Notes :</p>
                    <textarea name="notes" id="notes" class="form-control" style="width:100%"></textarea>

                    <button class="btn btn-primary mt-5" style="float:right" @click="save"> simpan </button>

			</div>
		</div>
	</section>
@endsection


   
@push('scripts')
	<script>
        
        var isChangeDivisi = false;
        var poolData = [];
		document.addEventListener("alpine:init",() => {
			Alpine.data("main",() => ({
				table:null,
                attr:{
                    listLokasi:[],
                    lokasi:"",
                    area:"",
                    divisi:"",
                    nama:"",
                    listNama:[]
                },
				init() {
                },
                onAreaChange() {
                    let id = this.$event.target.value;
                    this.attr.listLokasi = [];
                    
                    Notiflix.Block.hourglass('body')
                    $.get("{{ url('penilaian-karyawan/performance-appraisal/list-lokasi') }}",{area_id:id}).done(resp => {
                        this.attr.listLokasi = resp;
                        Notiflix.Block.remove('body')
                    })
                },
                onNameChange() {
                    let identity = this.$event.target.value;
                    $.get("{{ url('penilaian-karyawan/performance-appraisal/lamaGabung') }}",{nik:identity}).done(resp => {
                        $('#lamaGabung').val(resp)
                    })
                },
                onDivisiChange(){
                    isChangeDivisi = true;
                    let id = this.$event.target.value;
                    this.attr.listNama = [];
                    Notiflix.Block.hourglass('body')
                    $.get("{{ url('penilaian-karyawan/performance-appraisal/list-nama') }}",{lokasi_id:this.attr.lokasi,divisi_id:id}).done(resp => {
                        this.attr.listNama = resp;
                    })


                    $.get("{{ url('penilaian-karyawan/performance-appraisal/frameWorkTable') }}",{divisi_id:id}).done(resp => {
                        let dataGrades = resp.grades;
                        $("#attitudeTable tbody").html('')
                        $("#attitudeTable tbody").html('')
                        for(i = 0 ; i < dataGrades.length ; i++){
                            let markup = "<tr><td>"+ (i+1) +"</td>"+
                                        "<td style='width:5%;display:none'>"+ dataGrades[i].id +"</td>"+
                                        "<td>"+ dataGrades[i].name +"</td>"+
                                        "<td>"+
                                        "<select class='form-select' id='"+dataGrades[i].id+"' >";
                                            let detail_grade = dataGrades[i].grade_detail;
                                            for(j = 0 ; j < detail_grade.length ; j++){
                                                markup += "<option value='"+ detail_grade[j].id +"' title='"+detail_grade[j].name+"'>"+detail_grade[j].grade.name+"</option>";
                                            }
                                markup  += "</select>"+
                                        "</td>"+
                                        "</tr>";
                            if(dataGrades[i].grading_type == 1){
                                let tableBody = $("#attitudeTable tbody")
                                tableBody.append(markup)
                            }else if(dataGrades[i].grading_type == 2){
                                let tableBody = $("#hasilKerjaTable tbody")
                                tableBody.append(markup)
                            }else if(dataGrades[i].grading_type == 3){
                                let tableBody = $("#leadershipTable tbody")
                                tableBody.append(markup)
                            }
                        }
                        Notiflix.Block.remove('body')
                    })
                    
                },
                save(){
                    let field = ["nama"];
                    var note = ["nama karyawan"];

                    let err = Requires(field, note);

                    if (isChangeDivisi == false) {
                        Notiflix.Notify.failure('Mohon pilih divisi terlebih dahulu!');
                    }else{
                        if (err > 0) {
                            return false;
                        }else{
                            poolData = []
                            let allTable = ['attitudeTable','hasilKerjaTable','leadershipTable']
                            for(i=0; i<allTable.length;i++){
                                let DataDetail= [];
                                $('#'+allTable[i]+' tbody tr').has('td').each(function(index, item) {
                                    let arrayFormField = [];
                                    $('td', $(this)).each(function(indexx, items) {
                                        if(indexx == 1 || indexx == 2){
                                            arrayFormField.push($(items).html())
                                        }else if(indexx == 3){
                                            arrayFormField.push($(items).find('select').val())
                                        }
                                    });
                                    DataDetail.push(arrayFormField);
                                });
                                poolData.push(DataDetail)
                            }
                        }
                    }
                    sendData();
                }
			}));
		});

        function Requires(field, note) {
            let err = 0;
            for (var i = 0; i < field.length; i++) {
                if (typeof($('#' + field[i]).val()) == "undefined" || $('#' + field[i]).val() === null || $('#' + field[i])
                    .val() == "") {
                    Notiflix.Notify.failure('Mohon isi' + note[i] + '!');
                    err++;
                }
            }
            return err;
        }

        function sendData(){
            Notiflix.Block.hourglass('body')
            let dataPool = JSON.stringify(poolData)
            $.ajax({
                type: 'POST',
                url: "{{ url('penilaian-karyawan/performance-appraisal/save') }}",
                data: {
                    'manager_area': $('#managerArea').val(),
                    'branch': $('#branch').val(),
                    'branch_name': $( "#branch option:selected" ).text(),
                    'division': $('#division').val(),
                    'division_name': $( "#division option:selected" ).text(),
                    'nik': $('#nama').val(),
                    'lama_gabung': $('#lamaGabung').val(),
                    'tanggal': $('#tanggal').val(),
                    'notes': $('#notes').val(),
                    'data': dataPool
                },
                dataType: 'JSON',
            }).done(function(res) {
                console.log(res)
                Notiflix.Notify.success("Data Berhasil disimpan");
                Notiflix.Block.remove('body')
            }).fail(err => {
                Notiflix.Notify.failure(err.responseText);
                Notiflix.Block.remove('body')
            })

        }
	</script>
@endpush