@extends('layout.app_706')
@section('title')
	SPV Disposisi
@endsection
@section('content')
	<!--begin::Subheader-->
    <div class="subheader py-2 py-lg-4  subheader-solid " id="kt_subheader">
        <div class=" container-fluid  d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
            <!--begin::Info-->
            <div class="d-flex align-items-center flex-wrap mr-2">
                <!--begin::Page Title-->
                <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
                    @yield('title')
                </h5>
                <!--end::Page Title-->
            </div>
            <!--end::Info-->
        </div>
    </div>
    <!--end::Subheader-->
	
    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
					<div class="card card-custom gutter-b" id="data">
                        <div class="card-body">
                            <div class="m-section" id="data-kategori">
                                <div class="m-section__content">
                                    {!! Form::open(['route' => 'spv.update.disposisi','id'=>'SpvData']) !!}
                                    <input type="hidden" name="dataID" id="dataID" value="{{$data->recid}}">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group m-form__group row">
                                                <label class="col-md-3 font-weight-bold">Uraian</label>
                                                <div class="col-md-3 ">
                                                    <span class="font-weight-bold">{{ $data->judul}}</span>
                                                    <br/><span class="text-muted">{{ $data->uraian}}</span>
                                                </div>
                                            </div>
                                            <div class="form-group m-form__group row">
                                                <label class="col-md-3 font-weight-bold">Total Lama Pengerjaan</label>
                                                <div class="col-md-3 font-weight-bold">{{ $data->lama_perkiraan}} Hari</div>
                                            </div>
                                        </div>
										<div class="col-lg-12 activeWorker pt-3">
                                            <table class="table table-bordered" id="workerTable">
                                                <thead>
                                                    <tr class="text-center">
                                                        <td width="20%">REQ</td>
                                                        <td width="30%">Nama Worker</td>
                                                        <td width="10%">Estimasi (Hari)</td>
                                                        <td width="40%">Remark SPV</td>
                                                    </tr>
                                                </thead>
                                                <tbody>
													@foreach($data->data_requirement as $row)
														<tr>
															<td>
                                                                <div class="d-block my-2 font-weight-bold">{{ $row->requirement }}</div>
																<button type="button" class="btn btn-light btn-sm" data-action='content'  data-toggle="m-popover" title data-html="true" data-content="{{($row->sumber=='user' && $row->requirement_revision != '') ? '<b>Requirement:</b><br>'.$row->requirement_revision.'<br><b>Keterangan:</b><br>'.$row->keterangan_revision : '<b>Requirement:</b><br>'.$row->requirement.'<br><b>Keterangan:</b><br>'.$row->keterangan}}" data-original-title>
																REQ_{{$row->data_recid.'_'.$row->recid}}
																</button>
															</td>
															@if($row->disposisi_at == null)
																<td>
																	<input class="form-control m-input m-input--air d-none"  name="req_ids[]" value="{{$row->recid}}">
																	<select class="form-control m-select2 d-block worker" name="worker[]" value="">
																		<option value="">aa</option>
																		@foreach($worker as $row)
																			<option value="{{$row->nip}}">{{$row->nama}}</option>
																		@endforeach
																	</select>
																</td>
																<td>
																	<input type="number" class="form-control number estimasi" name="estimasi[]" placeholder="Est.">
																</td>
																<td>
																	<textarea class="form-control" rows="2" name="remarkspv[]" placeholder="Remark SPV"></textarea>
																</td>
															@else
																<td>{{$row->worker->nama}}</td>
																<td>{{$row->estimasi}} Hari</td>
																<td>{{$row->remark}}</td>
															@endif
														</tr>
													@endforeach
												</tbody>
                                            </table>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="row" id="listChecker">
                                                <div class="col-lg-4 pt-3">
                                                    <div class="form-group m-form__group">
                                                        <label class="">Nama Checker</label>
                                                        <select class="form-control m-select2" name="checkerID" required id="checker">
															<option value="">a</option>
                                                            @foreach($disposisi as $worker)
                                                                <option value="{{$worker->nip}}">{{$worker->nip}} - {{$worker->nama}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>                                                
                                            </div>
                                        </div>
                                        <div class="col-lg-12 mt-4">
											<a href="{{ url()->previous() }}" class="btn btn-secondary" data-dismiss="modal">
												Back
											</a>
                                            <button type="submit" id="submitSpv" class="btn btn-primary">
                                                Save changes
                                            </button>
                                        </div>
                                    </div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
		</div>
        <!--end::Container-->
	</div>
    <!--end::Entry-->

    <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>
    
	<div class="modal px-0" id="modal_ajax" role="dialog" data-keyboard="false" data-backdrop="static">
		<div class="modal-dialog modal-lg" role="document">        
            <div class="modal-content">
                <div class="modal-body">
			        <div id="modal_ajax-content"></div>   
                </div>             
                <div class="modal-footer py-0">
                    <a href="javascript:void(0);" class="btn btn-secondary" data-dismiss="modal">
                        Close
                    </a>
                </div>
            </div>
		</div>
	</div>
@endsection
@section('css')
    <link href="{{asset('assets_7.0.6/plugins/custom/datatables/datatables.bundle.css?v=7.0.6')}}" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .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_7.0.6/plugins/custom/datatables/datatables.bundle.js?v=7.0.6')}}" 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 () {
			$("#checker").select2({
                placeholder: "Select Checker",
				width: '100%',
				allowClear: true
            });
			$(".worker").select2({
                placeholder: "Select Worker",
				width: '100%',
				allowClear: true
            });
            $(".worker").change(function(){
				if($(this).val() == ''){
					$(this).parent().parent().find('.estimasi').removeAttr('required');
				}else{
					$(this).parent().parent().find('.estimasi').attr('required', true);
				}
            });
			var checker = "{{$data->nip_checker}}";
			if(checker != ''){
				$("#checker").val(checker).trigger('change');
				$("#checker").attr('readonly', true);
			}

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

            $("[data-action='content']").on( 'click', function (e){
			    e.preventDefault();
                var content = $(this).data('content');	
                $('#modal_ajax-content').empty().append(content);
                $('#modal_ajax').modal('show');
                return false;	
            })	
        });

        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