@extends('layout.app')
@section('title')
    SPV - Disposisi| {{env('APP_NAME')}}
@endsection
@section('content')
    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <div class="m-content">
            <div class="row">
                <div class="col-12">
                    <div class="m-portlet m-portlet--creative m-portlet--first m-portlet--bordered-semi " id="data">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h2 class="m-portlet__head-label m-portlet__head-label--accent">
									<span>
										Disposisi
									</span>
                                    </h2>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="m-section" id="data-kategori">
                                <div class="m-section__content">
                                    {!! Form::open(['route' => 'spv.update.data','id'=>'SpvData']) !!}
                                    <input type="hidden" name="dataID" id="dataID" value="{{$data->recid}}">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group m-form__group">
                                                        <label class="col-form-label">Uraian Permohonan{{$data->foto}}</label>
                                                        <textarea name="uraianpermohonan" id="uraianpermohonan" disabled class="form-control">{{$data->uraian}}</textarea>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6" id="imageThumbnailDiv">
                                                    													@if($data->foto != null)
                                                    @if (strtolower($file[1])=='png'||strtolower($file[1])=='jpeg'||strtolower($file[1])=='jpg'||strtolower($file[1])=='bmp')
                                                        <label class="col-form-label d-block">Image Data Request</label>
                                                        <a href="{{asset('api/gambar/image&'.$data->foto)}}" id="linkImage" target="_blank">
                                                            <img src="{{asset('api/gambar/image&'.$data->foto)}}" id="imgThumbnail" style="height: auto;width: 150px;">
                                                        </a>
                                                    @else
                                                        <label class="col-form-label d-block">File Data Request</label>
                                                        <a class="btn btn-primary" href="{{asset('api/download/image&'.$data->foto)}}" target="_blank">
                                                            Download File
                                                        </a>
                                                    @endif
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-8">
                                            <label class="col-form-label">Bobot</label>
                                            <div class="form-group m-form__group">
                                                <input type="text" name="totalBobot" id="totalBobot" class="form-control d-inline" style="width:60%" value="{{($data->bobot==null)?'0':$data->bobot}}" readonly>
                                                <button type="button" class="btn btn-info d-inline" id="addBobot">Pembobotan</button>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <label class="col-form-label">Object Permohonan/Aplikasi </label>
                                            <div class="form-group m-form__group">
                                                <select class="form-control m-select2" name="objek" id="objek">
                                                    <option value="">--Pilih Object Permohonan/Aplikasi--</option>
                                                    @foreach($obj as $row)
                                                        @if($data->objek_id == $row->id)
                                                        <option selected value="{{$row->id}}">{{$row->nama}}</option>
                                                        @else
                                                        <option value="{{$row->id}}">{{$row->nama}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
										<div class="col-lg-6">
                                            <label class="col-form-label">Kategori </label>
                                            <div class="form-group m-form__group">
                                                <select class="form-control m-select2" name="kategori" id="kategori">
                                                    <option value="">--Pilih Kategori--</option>
                                                    @foreach($kategori as $row)
                                                        @if($data->kategori_id == $row->recid)
                                                        <option selected value="{{$row->recid}}">{{$row->nama}}</option>
                                                        @else
                                                        <option value="{{$row->recid}}">{{$row->nama}}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
										<div class="col-lg-6">
                                            <label class="col-form-label">Perkiraan Tanggal Pengerjaan</label>
                                            <div class="form-group m-form__group">
                                                <input type="text" name="tgl_perkiraan" id="tgl_perkiraan" class="form-control d-inline" value="{{($data->tgl_perkiraan==null)?'':$data->tgl_perkiraan}}">
                                            </div>
                                        </div>
										<div class="col-lg-6">
                                            <label class="col-form-label">Perkiraan Lama Pengerjaan</label>
                                            <div class="form-group m-form__group">
                                                <input type="text" name="lama_perkiraan" class="form-control d-inline"  value="{{($data->lama_perkiraan==null)?'':$data->lama_perkiraan}}">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
											<button type="button" class="btn btn-info" id="btn-add">Tambah Requirement</button>
											<table class="table" style="margin-top: 20px;">
												<thead>
													<tr>
														<th style="width: 40%;">Requirement</th>
														<th style="width: 45%;">Notes</th>
														<th style="width: 10%;">#</th>
													</tr>
												</thead>
												<tbody id="t-bodi">
													@foreach($data->data_requirement as $row)
														<tr>
															<td>
																 <input class="form-control m-input m-input--air" readonly  name="requirement[]" value="{{$row->requirement}}">
															</td>
															<td>
																<textarea class="form-control m-input m-input--air" readonly name="keterangan[]" rows="2">{{$row->keterangan}}</textarea>
															</td>
															<td>
																<button type="button" onclick="enableEdit($(this))" class="btn btn-outline-success btn-sm btn-elevate btn-icon"><i class="la la-paint-brush"></i></button>
																<button type="button" class="btn m-btn--pill btn-primary btn-sm btn-cancel m--hide">Cancel</button>
																<!-- <button type="button" onclick="$(this).parent().parent().remove();" class="btn btn-outline-danger btn-sm btn-elevate btn-icon"><i class="la la-trash-o"></i></button>-->
															</td>
														</tr>
													@endforeach
												</tbody>
											</table>
										</div>
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group m-form__group">
                                                        <label class="col-form-label">Disposisi</label>
                                                    </div>
                                                    <input data-switch="true" type="checkbox" class="form-control" id="disposisi" name="disposisi">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group m-form__group" id="listDisposisi" style="display: none;">
                                                        <button type="button" class="btn btn-info mt-3" id="addWorker">Tambah Worker</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 activeWorker pt-3" style="display: none;">
                                            <table class="table table-bordered" id="workerTable">
                                                <thead>
                                                    <tr class="text-center">
                                                        <td width="50px">#</td>
                                                        <td width="300px">Nama Worker</td>
                                                        <td width="150px">Estimasi</td>
                                                        <td>Remark SPV</td>
                                                        <td width="150px">Option</td>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-12">
                                            <!--<div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group m-form__group">
                                                        <label class="col-form-label">Checker</label>
                                                    </div>
                                                    <input data-switch="true" type="checkbox" class="form-control" id="checker" name="checker">
                                                </div>
                                            </div>-->
                                            <div class="row" id="listChecker" style="display: none;">
                                                <div class="col-lg-6 pt-3">
                                                    <div class="form-group m-form__group">
                                                        <label class="">Nama Checker</label>
                                                        <select class="form-control m-select2" name="checkerID" id="checkerID">
                                                            @foreach($disposisi as $worker)
                                                                <option value="{{$worker->nip}}">{{$worker->nip}} - {{$worker->nama}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                </div>
                                            </div>

                                        </div>
                                        <div class="modal" id="modal_bobot" role="dialog" data-keyboard="false" data-backdrop="static">
                                            <div class="modal-dialog modal-md" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="">
                                                            List Bobot
                                                        </h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">
                                                                ×
                                                            </span>
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <table class="table table-bordered table-hover m-table" id="tablelistBobot">
                                                            <thead>
                                                            <tr class="text-center">
                                                                <td>Bobot</td>
                                                                <td>Level</td>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            @if ($data->bobot==null)
                                                                @foreach($bagian as $item)
                                                                    <tr>
                                                                        <td>{{$item->nama}}</td>
                                                                        <input type="hidden" name="idBobot[]" required value="{{$item->id}}">
                                                                        <td>
                                                                            <select class="form-control bobotclass" name="dataBobot[]" required>
                                                                                <option value="">Pilih Level</option>
                                                                                <option value="{{$item->tingkat_1}}">Level_1</option>
                                                                                <option value="{{$item->tingkat_2}}">Level_2</option>
                                                                                <option value="{{$item->tingkat_3}}">Level_3</option>
                                                                            </select>
                                                                        </td>
                                                                    </tr>
                                                                @endforeach
                                                            @else
                                                                @foreach($data->detailBobot as $detailBobot)
                                                                    @foreach($bagian as $item)
                                                                        @if ($detailBobot->bobot_id==$item->id)
                                                                            <tr>
                                                                                <td>{{$item->nama}}</td>
                                                                                <input type="hidden" name="idBobot[]" required value="{{$item->id}}">
                                                                                <td>
                                                                                    <select class="form-control bobotclass" name="dataBobot[]" required>
                                                                                        <option value="">Pilih Level</option>
                                                                                        <option value="{{$item->tingkat_1}}" {{($item->tingkat_1==$detailBobot->nilai)?'selected':''}}>Level_1</option>
                                                                                        <option value="{{$item->tingkat_2}}" {{($item->tingkat_2==$detailBobot->nilai)?'selected':''}}>Level_2</option>
                                                                                        <option value="{{$item->tingkat_3}}" {{($item->tingkat_3==$detailBobot->nilai)?'selected':''}}>Level_3</option>
                                                                                    </select>
                                                                                </td>
                                                                            </tr>
                                                                        @endif

                                                                    @endforeach

                                                                @endforeach
                                                            @endif

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" id="cancelBobot" data-dismiss="modal">
                                                            Close
                                                        </button>
                                                        <button type="button" class="btn btn-primary" id="saveBobot">
                                                            Save
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-lg-12 mt-4">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                                Close
                                            </button>
                                            <button type="submit" id="submitSpv" class="btn btn-primary">
                                                Save changes
                                            </button>
                                        </div>
                                    </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="modal_worker" role="dialog" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="">
                        List Worker
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">
						×
					</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-hover m-table" id="tablelistWorker">
                        <thead>
                            <tr class="text-center">
                                <td>Nip</td>
                                <td>Nama</td>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('css')
    <link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
    <style>
        .select2-container .select2-selection--single{
            height: 40px!important;
        }
        #listChecker .select2.select2-container{
            display: block;
        }
    </style>
@endsection
@section('js')
    <!--begin::Page Vendors -->
    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/vendors/custom/switch/bootstrap-switch.js')}}" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $("#bagian").select2({
                placeholder: "Select Bagian"
            });
            $("#bobot").select2({
                placeholder: "Select Bobot"
            });
            $("#checkerID").select2({
                placeholder: "Select Bobot"
            });
            $("#worker").select2({
                placeholder: "Select Bobot"
            });
            $("#objek").select2({
                placeholder: "Pilih Object Permohonan/Aplikasi"
            });
			$("#kategori").select2({
                placeholder: "Pilih Kategori"
            });
			$("#tgl_perkiraan").datepicker({
                todayHighlight:0,
                autoclose:true,
                clearBtn: true,
                format:"dd-mm-yyyy",
                orientation: "bottom left"
            });
            @if(isset($bobotLevel))
                $('#bobot').val('{{$data->bobot}}').trigger('change');
            @endif

            @if($data->detailBobot==null)
            $('#cancelBobot').on('click',function () {
                $('.bobotclass').prop('selectedIndex',0);
            });
            @endif

            $('#addBobot').on('click',function () {
                $('#modal_bobot').modal('show');
            });
            $('#saveBobot').on('click',function () {
                var sumBobot = 0;
                $('.bobotclass').each(function () {
                    sumBobot += parseFloat($(this).val());
                });
                if (!sumBobot){
                    alert('Pastikan Sudah memilih semua bobot level')
                } else{
                    $('#totalBobot').val(sumBobot);
                    $('#modal_bobot').modal('hide');
                }
            });

            $('#addWorker').on('click',function () {
                $('#modal_worker').modal('show');
                var workerList = $("input[name='nipWorkerSet[]']").map(function(){return $(this).val();}).get();
                $('#tablelistWorker').DataTable().destroy();
                $('#tablelistWorker').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        url : "{{ route('spv.disposisi.getWorker')}}",
                        type: "POST",
                        data: {"nipWorker[]":workerList,"_token":"{{csrf_token()}}"}
                    },
                    "columns": [
                        {data: 'setworker','class':'text-center'},
                        {data: 'nama'},
                    ]
                });
            });

            $('#disposisi').on('switchChange.bootstrapSwitch',function () {
                var disposisi = $('#disposisi').bootstrapSwitch('state');
                if (disposisi===true){
                    $('#listDisposisi').show();
                    $('.activeWorker').show();
					$('#listChecker').show();
                } else{
                    $('#listDisposisi').hide();
                    $('.activeWorker').hide();
					$('#listChecker').hide();
                }
                $('#bagian').removeAttr('tabindex')
            });

            $('#checker').on('switchChange.bootstrapSwitch',function () {
                var checker = $('#checker').bootstrapSwitch('state');
                if (checker===true){
                    $('#listChecker').show();
                } else{
                    $('#listChecker').hide();
                }
            });

            $('#bagian').on('change',function () {
                var bagian = $('#bagian').val();
                _token = '_token';
                $.ajax({
                    type: "POST",
                    url: "{{route('get.bobot.level')}}",
                    data: {id: bagian, _token: "{{ csrf_token() }}"},
                    success: function (result)
                    {
                        if (result.status === true) {
                            $('#bobot').select2("val","");
                            $('#bobot').empty();
                            $('#bobot').append(result.levelBobot);
                        }else{
                            $('body').append(result.message);
                        }
                    },
                    error: function(jqXHR) {
                        $('body').append(jqXHR.responseJSON.message);
                    }
                });
            })

            $('body').on('click','.removeWorker',function () {
                $(this).parents('tr').remove()
            })
        });

        function setworker(nip) {
            $.ajax({
                type: "post",
                url: "{{route('spv.disposisi.setWorker')}}",
                data: {"nip": nip, "_token": "{{ csrf_token() }}"},
                success: function (result)
                {
                    if (result.status === true) {
                        $('#modal_worker').modal('hide');
                        $('#workerTable tbody').append(result.worker);
                    }else{
                        $('body').append(result.message);
                    }
                },
                error: function(jqXHR) {
                    $('body').append(jqXHR.responseJSON.message);
                }
            });
        }
		
		function enableEdit(element){
			element.parent().parent().find('.m-input--air').removeAttr('readonly');
		}

    </script>
@endsection