@extends('layouts.main')

@section('title', 'Pengajuan Perubahan Status Aset')

@section('pagetitle', 'Pengajuan Perubahan Status Aset')

@section('content') 
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="card" id="instalasi-data">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">Form Pengajuan Perubahan Status Aset</h5>
            </div>

            <div class="card-body">
                <!-- Notifikasi -->
            	@if (Session::has('error'))
                	<div class="alert alert-danger alert-styled-right alert-dismissible">
						<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
						{{ Session::get('error', 'Error') }}
				    </div>
                @endif
                @if (Session::has('success'))
                	<div class="alert alert-success alert-styled-right alert-arrow-right alert-dismissible">
						<button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
						{{ Session::get('success', 'Success') }}
				    </div>
                @endif
                @if (Session::has('warning'))
                    <div class="alert alert-warning alert-styled-right alert-arrow-right alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                        {{ Session::get('warning', 'Warning') }}
                    </div>
                @endif
                <!-- ./notifikasi -->

                <form action="{{ route('pengajuan-status::simpan') }}" method="POST" enctype="multipart/form-data">
                    
                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Instalasi</label>
                    <div class="col-lg-10">
                        {!! Form::select('instalasi_id', $instalasi, null, ['class'=>'form-control select2', 'id'=>'instalasi']) !!}
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-form-label col-lg-2">Aset</label>
                    <div class="col-lg-10">
                        <select class="form-control select2" id="aset">
                            <option value="">- Pilih Aset -</option>
                        </select>
                    </div>
                </div>

                <a href="#" class="btn btn-success legitRipple" id="btn-tambah">Tambah</a>
                <br>
                <br>
                
                    <table class="table datatable-basic" id="tabel">
                        <thead>
                            <th>Nama Aset</th>
                            <th>Kode Aset</th>
                            <th>Foto</th>
                            <th>Instalasi</th>
                            <th>Panduan</th>
                            <th>Status Eksisting</th>
                            <th>Status aset yang diajukan</th>
                            <th>Penyebab Perubahan</th>
                            <th></th>
                        </thead>
                        <tbody id="list">

                        </tbody>
                    </table>
                    <br>
                    <button type="submit" class="btn btn-primary" id="simpan">Simpan</button>
                </form>
			</div>
        </div>

        <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Panduan matriks status aset</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <table class="table table-striped">
                    <thead>
                        <th>Status Aset</th>
                        <th>Beroperasi</th>
                        <th>Tidak Beroperasi</th>
                        <th>Terpasang</th>
                        <th>Tidak Terpasang</th>
                        <th>Kondisi Baik</th>
                        <th>Kondisi Rusak</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Aktif</td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                        </tr>
                        <tr>
                            <td>Non Aktif</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                        </tr>
                        <tr>
                            <td>Spare</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                        </tr>
                        <tr>
                            <td>Rusak</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                            <td style="text-align: center"></td>
                            <td style="text-align: center">v</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
        <!-- END PAGE BASE CONTENT -->
    <!-- /form inputs -->
@endsection
@section('js')
<script type="text/javascript" src="{{url('global_assets/plugins/select2/js/select2.full.min.js')}}"></script>
<!-- <script src="{{asset('global_assets/scripts/datatable.js')}}" type="text/javascript"></script> -->
<script src="{{asset('global_assets/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<!-- <script src="{{asset('global_assets/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script> -->
<script src="{{url('global_assets/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
<link href="{{url('global_assets/plugins/datepicker/bootstrap-datepicker.css')}}" rel="stylesheet"/>
<script>
$(document).ready(function () {
    function btnSimpan(){
        if($('#list tr').length == 0){
            $("#simpan").prop('disabled', true);
            $("#simpan").hide();
        }else{
            $("#simpan").prop('disabled', false);
            $("#simpan").show();
        }
    }
    
    btnSimpan();

    $(".select2").select2();

    $('#instalasi').change(function() {
        $('#aset').empty().append('<option selected="selected" value="">-Pilih Aset-</option>');
        
        if ($(this).val() != '') {            
            $.get("{{ route('pengajuan-status::get-aset') }}?instalasi="+$("#instalasi").val(), function(data, status){
                $.each(data, function (i, item) {
                    $('#aset').append('<option value="'+item.id+'">'+item.nama_aset+' (' + item.kode_aset + ')</option>');
                });
            });
        }
    });
	
	var inputan = "";

	$.get("{{ route('pengajuan-status::get-kondisi') }}", function(data, status) {
		inputan += '<td><select class="form-control select2" id="kondisi" name="status_pengajuan[]" required="required">';
		inputan += '<option value="">-Pilih status diajukan-</option>';
		$.each(data, function (i, item) {
			inputan += '<option value="'+item.id+'">'+item.name+'</option>';
		});
		inputan += '</select></td>';
		
	});
	
    $("#btn-tambah").on("click", function() {
        if( $("#aset").val() != "" ) {
            $.get("{{ route('pengajuan-status::get-aset-dtl') }}?id="+$("#aset").val(), function(data, status){
                if($('#list').find('.' + data.id).length == 0){

                    var newRow = $('<tr class='+ data.id +'>');

                    var cols = "";

                    cols += '<td>'+data.nama_aset+'<input type="hidden" value="'+data.id+'" name="id_aset[]"></td>';
                    cols += '<td>'+data.kode_aset+'</td>';
                    cols += '<td><input type="file" class="form-control" name="foto[]" required="required"></td>';
                    cols += '<td>'+data.instalasi.name+'<input type="hidden" value="'+data.instalasi_id+'" name="instalasi[]"></td>';
                    cols += '<td><button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Panduan</button></td>';
                    cols += '<td>'+data.kondisi.name+'<input type="hidden" value="'+data.kondisi_id+'" name="status_awal[]"></td>';
                    cols += inputan;
                    cols += '<td><input class="form-control" type="text" value="" name="penyebab_perubahan[]"></td>';
                    cols += '<td><a href="" class="delrow" data-no="'+data.id+'"><i class="fa fa-trash"></i></a></td></tr>';
	
                    newRow.append(cols);
                    $("#list").prepend(newRow);
                    $('#tabel').slideDown();
					
					$('#kondisi').attr('id', 'kondisi'+ data.id);
					
					console.log(inputan);
					
                    $("#kondisi"+ data.id +" option[value='"+data.kondisi_id+"']").remove();

                    $(".select2").select2();
                }else{
                    alert("Aset sudah ada di list");
                }
            });
        }

        $("#simpan").prop('disabled', false);
        $("#simpan").show();
    });

    $('#tabel').on('click', '.delrow', function(e) {
        var lenRow = $('#tabel tbody tr').length;
            
        e.preventDefault();

        var no = $(this).data('no');

        if (lenRow == 1 || lenRow <= 1) {
            $(this).parents('tr').remove();
            $('#tabel').slideUp();
            $('.btn-submit').hide();
        } else {
            $(this).parents('tr').remove();
        }

        console.log($('#list tr').length);

        btnSimpan();
    });

    $("#simpan").on("click", function(e) {
        if( confirm("Apakah anda yakin akan melakukan pengajuan perubahan status aset?") ){

        }else{
            e.preventDefault();
        }
    });
});
</script>
@endsection