@extends('layout.main_layout')
@section('content')
<!--<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>Buat Disposisi</h2>
        <ol class="breadcrumb">
            <li class="active">
                <strong>Diposisi</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>-->

<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Lembar Disposisi
						@foreach ($errors->all() as $error)

						  <div>{{ $error }}</div>

						@endforeach 
					</h5>
                </div>
                <div class="ibox-content">
                    <form method="post" id="form1" action="" class="form-horizontal" enctype="multipart/form-data">
                        <input type="text" class="hidden" name="_token" value="{{csrf_token()}}">
                        @if(isset($edit))
                        <input type="hidden" name="recidsurat" value="{{$data->kode}}">
                        @endif
                        <div class="row">

                            <div class="col-sm-8">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Sumber Dokumen</label>
                                    <div class="col-sm-9">
                                        <select id="dokumen" name="dokumen" class="form-control">
                                            <option value="scan">SCAN</option>
                                            <option value="upload">UPLOAD</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Kategori Surat</label>
                                    <div class="col-sm-9">
                                        @if(isset($edit))
                                        <select name="kategori" class="form-control">
                                            <option  value="Undangan">Undangan</option>
                                            <option  value="Surat Segera">Surat Segera</option>
                                            <option  value="Surat Biasa">Surat Biasa</option>
                                        </select>
                                        @else
                                        <select name="kategori" class="form-control">
                                            <option value="Undangan">Undangan</option>
                                            <option value="Surat Segera">Surat Segera</option>
                                            <option value="Surat Biasa">Surat Biasa</option>
                                        </select>
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Nomor Surat</label>
                                    <div class="col-sm-9">
                                        @if(isset($edit))
                                        <input type="text" name="nomor" class="form-control" value="{{$data->nosurat}}">
                                        @else
                                        <input type="text" name="nomor" class="form-control" value="{{ old('nomor') }}">
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group" id="data_1">
                                    <label class="col-sm-3 control-label">Tanggal</label>
                                    <div class="col-sm-9">
                                        <div class="input-group date">
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar" ></i>
                                            </span>
                                            @if(isset($edit))
                                            <input type="text" name="tgl" required class="form-control" value="{{date('m/d/Y',strtotime($data->tglsurat))}}">
                                            @else
                                            <input type="text" name="tgl" required class="form-control" value="{{ old('tgl') }}">
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Pengirim</label>
                                    <div class="col-sm-9">
                                        @if(isset($edit))
                                        <input type="text" name="pengirim" required class="form-control" value="{{ trim($data->pengirimsurat) }}">
                                        @else
                                        <input type="text" name="pengirim" required class="form-control" value="{{ old('pengirim') }}">
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Perihal</label>
                                    <div class="col-sm-9">
                                        @if(isset($edit))
                                        <textarea class="form-control" rows="2" id="perihal" name="perihal">{{ trim($data->perihal) }}</textarea>
                                        @else
                                        <textarea class="form-control" rows="2" id="perihal" name="perihal">{{ old('perihal') }}</textarea>
                                        @endif
                                        <textarea class="hidden" rows="2" id="base" name="base"></textarea>
                                    </div>
                                </div>
                                <hr class="hr-line-dashed">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Penerima Surat</label>
                                    <div class="col-sm-9">
                                        <select name="penerima" required class="form-control">
                                            @foreach($penerima as $row)
                                                @if(isset($edit))
                                                    <option selected value="{{$row->nip}}">{{$row->nama}}</option>
                                                @elseif($row->nip == Session::get('loginaktif'))
                                                    <option selected value="{{$row->nip}}">{{$row->nama}}</option>
                                                @else
                                                    <option value="{{trim($row->nip)}}">{{$row->nama}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group" id="data_2">
                                    <label class="col-sm-3 control-label">Tanggal Diterima TU</label>
                                    <div class="col-sm-9">
                                        <div class="input-group date">
                                            <span class="input-group-addon">
                                                <i class="fa fa-calendar" ></i>
                                            </span>
                                            @if(isset($edit))
                                            <input type="text" name="tgl_tu" class="form-control" value="{{date('m/d/Y',strtotime($data->tgltu))}}">
                                            @else
                                            <input type="text" name="tgl_tu" class="form-control" value="{{date('m/d/Y')}}">
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Nomor TU</label>
                                    <div class="col-sm-6">
                                        @if(isset($edit))
                                                                                @endif
                                        <select name="kode_tu" required class="form-control">
                                            <option value="">Pilih Kode TU</option>
                                            @foreach($nomor as $row)
                                            @if(isset($edit))
                                            <option selected value="{{$row->awal.'#'.$row->akhir}}">{{$row->awal.' -> '.$row->keterangan}}</option>
                                            @else
                                            <option value="{{$row->awal.'#'.$row->akhir}}">{{$row->awal.' -> '.$row->keterangan}}</option>
                                            @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-sm-3">
                                        @if(isset($edit))
                                        <input type="text" name="nomor_tu" required placeholder="Nomor Urut TU" class="form-control" value="{{$splited_notu[1]}}">
                                        @else
                                        <input type="text" name="nomor_tu" required placeholder="Nomor Urut TU" class="form-control">
                                        @endif
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">Permohonan Jaringan</label>
                                    <label class="col-sm-8">
                                        <div class="i-checks"><input type="checkbox" id="permohonan_jaringan" name="permohonan_jaringan" value="1"></div>
                                    </label>
                                    <div class="col-sm-2">
                                      &nbsp;
                                  </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-9 col-sm-offset-3">
                                        <button class="btn btn-primary col-sm-12" id="subm" type="button" onclick="submitForm();">Simpan</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="col-sm-12 text-center" id="scan-div">
                                    <h3 class="text-center">Hasil Scan</h3>
                                    @if(isset($edit))
                                    <object data="{{url('pdf/'.$data->pathfile)}}" type="application/pdf" width="100%" height="350">
                                      <p>Jika pdf tidak muncul, klik link berikut <a href="{{url('pdf/'.$data->pathfile)}}">PDF!</a></p>
                                    </object>
                                    @endif
                                    <div id="dwtcontrolContainer"></div>
                                    
                                    <button type="button" class="btn btn-success btn-outline" onclick="AcquireImage();">Scan Document</button>
                                    <label class="label-danger">{!!$errors->first('file')!!}</label>
                                </div>
                                <div class="col-sm-12 text-center hide" id="upload-div">
                                    <h3 class="text-center">Upload File (Pdf)</h3>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">&nbsp;</label>
                                        <div class="col-sm-6">
                                            <input type="file" name="file_upload" accept="application/pdf">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('css')
<link href="{{asset('css/plugins/datapicker/datepicker3.css')}}" rel="stylesheet">
<!--<link href="{{asset('css/plugins/select2/select2.min.css')}}" rel="stylesheet">-->
<link href="{{asset('css/plugins/iCheck/custom.css')}}" rel="stylesheet">
<link href="{{asset('css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css')}}" rel="stylesheet">
@endsection
@section('js')
<!-- Data picker -->
<script src="{{asset('js/plugins/datapicker/bootstrap-datepicker.js')}}"></script>
<script src="{{asset('js/plugins/iCheck/icheck.min.js')}}"></script>
<!--<script src="//asprise.azureedge.net/scannerjs/scanner.js"></script>
<!--DWT -->
<script type="text/javascript" src="{{asset('Resources/dynamsoft.webtwain.initiate.js')}}"></script>
<script type="text/javascript" src="{{asset('Resources/dynamsoft.webtwain.config.js')}}"></script>
<script type="text/javascript" src="{{asset('js/jquery.form.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#data_1 .input-group.date').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true
    });
    $('#data_2 .input-group.date').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        calendarWeeks: true,
        autoclose: true
    });
    $('.i-checks').iCheck({
        checkboxClass: 'icheckbox_square-green',
        radioClass: 'iradio_square-green',
    });
    $('#inputImage').change(function () {
        $('#nmfile').text($(this).val().split('/').pop().split('\\').pop());
    }); 
    $("#dokumen").change(function(){
        if($(this).val() == 'upload'){
            $("#scan-div").addClass('hide');
            $("#upload-div").removeClass('hide');
        }else{
            $("#upload-div").addClass('hide');
            $("#scan-div").removeClass('hide');
        }
    });     

});
var DWObject;
//Callback functions for async APIs
function OnHttpUploadSuccess() {
    window.location.href = "{{route('monitoring-link')}}";
}
function OnHttpUploadFailure(errorCode, errorString, sHttpResponse) {
   // alert(errorCode+'#'+errorString + '#'+sHttpResponse);
   @if(isset($edit))
        window.location.href = "{{route('monitoring-link')}}";
    @else
        window.location.href = "{{route('LD-link')}}";
    @endif
    
    // window.location.href = "{{route('LD-link')}}";
}
function AcquireImage(){
    if(DWObject && DWObject.HowManyImagesInBuffer > 0){
        DWObject.RemoveAllImages();
    }
    DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.SelectSource();
    DWObject.OpenSource();
    DWObject.IfShowUI = false;
    DWObject.PixelType = 2;
    DWObject.Resolution = 150;
    DWObject.IfFeederEnabled = true;
    DWObject.IfDuplexEnabled = false;
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage();
}
function SaveWithFileDialog() {
    var strHTTPServer = "{{url()}}";
    @if(isset($edit))
        var strActionPage = "EditSuratMasuk{{$data->kode}}";
    @else
        var strActionPage = "BuatLembarDisposisiBaru";
    @endif
   // DWObject.IfSSL = true; // Set whether SSL is used
    var kategori = $("[name=kategori]").val();
    var nomor = $("[name=nomor]").val();
    var pengirim = $("[name=pengirim]").val();
    var tgl = $("[name=tgl]").val();
    var perihal = $("[name=perihal]").val();
    var penerima = $("[name=penerima]").val();
    var tgl_tu = $("[name=tgl_tu]").val();
    var kode_tu = $("[name=kode_tu]").val();
    var nomor_tu = $("[name=nomor_tu]").val();

    if ($('#permohonan_jaringan').prop('checked')) {
        var permohonan_jaringan = $("[name=permohonan_jaringan]").val();
        console.log(permohonan_jaringan);
    }    
	// alert(DWObject.HowManyImagesInBuffer);
    if(nomor == '' || pengirim == '' || tgl == '' || perihal == '' || penerima == '' || tgl_tu == '' || kode_tu == '' || nomor_tu == ''){
        alert('Harap isi semua data!!');
    }
    else if(DWObject && DWObject.HowManyImagesInBuffer > 0){
        DWObject.SetHTTPFormField('_token', '{{csrf_token()}}');
        DWObject.SetHTTPFormField('nomor', $("[name=nomor]").val());
        DWObject.SetHTTPFormField('pengirim', $("[name=pengirim]").val());
        DWObject.SetHTTPFormField('tgl', $("[name=tgl]").val());
        DWObject.SetHTTPFormField('perihal', $("[name=perihal]").val());
        DWObject.SetHTTPFormField('penerima', $("[name=penerima]").val());
        DWObject.SetHTTPFormField('tgl_tu', $("[name=tgl_tu]").val());
        DWObject.SetHTTPFormField('kode_tu', $("[name=kode_tu]").val());
        DWObject.SetHTTPFormField('nomor_tu', $("[name=nomor_tu]").val());
        DWObject.SetHTTPFormField('kategori', $("[name=kategori]").val());

        if ($('#permohonan_jaringan').prop('checked')) {
            DWObject.SetHTTPFormField('permohonan_jaringan', $("[name=permohonan_jaringan]").val());
        } 
        
        // Upload all the images in Dynamic Web TWAIN viewer to the HTTP server as a PDF file asynchronously
        DWObject.HTTPUploadAllThroughPostAsPDF(
    //    DWObject.HTTPUploadAllThroughPostAsMultiPageTIFF(
          strHTTPServer,
          strActionPage,
          "temp.pdf",
          OnHttpUploadSuccess,
          OnHttpUploadFailure
        );
    }
    else{
        @if(isset($edit))
        $("#form1").submit();
        @else
        alert('Scan Dokumen Anda!!');
        @endif
    }
}

function submitForm(){
    if($("#dokumen").val() == 'upload'){
        $("#form1").submit();
    }else{
        SaveWithFileDialog();
    }
}


function sendGambar(img){
//    var aa = img.replace('+', '@;');
    var contentType = 'image/tiff';
    var image = img.split('base64,');
    var blob = base64ToBlob(image[1], contentType);
    $.ajax({
        url: "{{route('uploadscan-link')}}",
        type: "POST",
        data: {_token:"{{csrf_token()}}",data:img},
        cache: false,
        contentType: "application/x-www-form-urlencoded",
        success: function (result) {

        }
    });
}
function scanToPdfWithThumbnails() {
    scanner.scan(displayImagesOnPage,
        {
            "use_asprise_dialog": false,
            "output_settings": [
                {
                    "type": "return-base64",
                    "format": "pdf",
                    "pdf_force_black_white": true,
//                    "pdf_text_line": "By ${USERNAME} on ${DATETIME}"
                },
                {
                    "type": "return-base64-thumbnail",
                    "format": "jpg",
                    "thumbnail_height": 200
                }
            ]
        }
    );
}
 /** Processes the scan result */
        function displayImagesOnPage(successful, mesg, response) {
            if(!successful) { // On error
                console.error('Failed: ' + mesg);
                return;
            }

            if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
                console.info('User cancelled');
                return;
            }
            //scanner.getSaveResponse(response);
            var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
//            alert(scannedImages.length);
            for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
                var scannedImage = scannedImages[i];
                processOriginal(scannedImage);
//                alert(scannedImage.src)
//                sendGambar(scannedImage.src);
            }

            var thumbnails = scanner.getScannedImages(response, false, true); // returns an array of ScannedImage
            for(var i = 0; (thumbnails instanceof Array) && i < thumbnails.length; i++) {
                var thumbnail = thumbnails[i];
                processThumbnail(thumbnail);
            }
        }

        /** Images scanned so far. */
        var imagesScanned = [];

        /** Processes an original */
        function processOriginal(scannedImage) {
            imagesScanned.push(scannedImage);
        }

        /** Processes a thumbnail */
        function processThumbnail(scannedImage) {
//            alert(scannedImage.src);
            var elementImg = scanner.createDomElementFromModel( {
                'name': 'img',
                'attributes': {
                    'class': 'scanned',
                    'name': 'gambar1',
                    'src': scannedImage.src
                }
            });
            document.getElementById('images').appendChild(elementImg);
        }

        /** Upload scanned images by submitting the form */
        function submitFormWithScannedImages() {
            if (scanner.submitFormWithImages('form2', imagesScanned, function (xhr) {
                if (xhr.readyState == 4) { // 4: request finished and response is ready
                    document.getElementById('server_response').innerHTML = "<h2>Response from the server: </h2>" + xhr.responseText;
                    document.getElementById('images').innerHTML = ''; // clear images
                    imagesScanned = [];
                }
            })) {
                document.getElementById('server_response').innerHTML = "Submitting, please stand by ...";
            } else {
                document.getElementById('server_response').innerHTML = "Form submission cancelled. Please scan first.";
            }
        }
        function cobasubmit(){
            var http = new XMLHttpRequest();
//            var url = "https://web-portal.pdam-sby.go.id/bot1.php?action=dump";
            var url = "{{route('uploadscan-link')}}";
            var params = "lorem=ipsum&name=binny";
            var images = imagesScanned;
            var formElement=document.getElementById('form1');
            var fd=new FormData(formElement);
            for(var i=0;i<images.length;i++){
                var image=images[i];
                var abc = image.src.split(';base64,');
                var ext = abc[0].split(':');
                fd.append('extensi',ext[1]);
                fd.append('upload',base64ToBlob(abc[1],image.mimeType));
            }
            http.open("POST", formElement.getAttribute("action"), true);

            //Send the proper header information along with the request
//            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            http.onreadystatechange = function() {//Call a function when the state changes.
                if(http.readyState == 4 && http.status == 200) {
                    //alert(http.responseText);
                    window.location.href = "{{route('monitoring-link')}}";
                }
            }
            http.send(fd);
        }
function base64ToBlob(base64, mime)
{
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}
</script>
@endsection