@extends('layouts.template')

@section('title')
Tambah DPBB | PEMBAYARAN
@endsection

@section('pagetitle')
Pengajuan 
@endsection

@section('breadcumb')
<nav aria-label="breadcrumb" role="navigation" class="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Beranda</a></li>
        <li class="breadcrumb-item"><a href="#">Data</a></li>
        <li class="breadcrumb-item active" aria-current="page">Tambah </li>
    </ol>
</nav>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-10">
            <div class="card">
                <form action="{{route('payment.store')}}" method="POST" enctype="multipart/form-data" class="form-horizontal">
                @csrf
                @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                    <div class="card-header">
                        <h4 class="card-title">
                            <strong>Pengajuan Pembayaran PO</strong>
                        </h4>
                    </div>
                    <br>
                    <div class="card-content">
                        <div class="form-group">
                        <label class="col-md-3 control-label" for="tanggal_dokumen">Tanggal Dokumen<star>*</star></label>    
                            <div class="col-md-3">
                               
                                <input type="text" class="form-control datepicker" name="doc_date">
                                @error('doc_date')
                                    <div class="alert alert-danger">{{ $message }}</div>
                                @enderror
                            </div>

                        </div>
                        <div class="form-group">
                            <label class="col-md-3 control-label" for="kode">Nomor Dokumen <star>*</star></label>
                            <input type="hidden" class="form-control" name="doc_prefix" value="{{$prefix}}">
                            <input type="hidden" class="form-control" name="doc_urutan" value="{{$urutan}}">
                            <input type="hidden" class="form-control" name="doc_month" value="{{$month}}">
                            <input type="hidden" class="form-control" name="doc_year" value="{{$year}}">
                            
                            <div class="col-md-5">
                            <input type="text" class="form-control" name="doc_no" value="{{$no_doc}}" >
                            </div>
                           
                        </div>

                        <div class="form-group">
                            <label class="col-md-3 control-label" for="id_inv">Dokumen PO<star>*</star></label>    
                            <div class="col-md-5">
                                <select class="select2 form-control" data-width="100%"  name="id_po" id="id_po" required >
                                    @if($data_po)
                                        <option value="">-Pilih Po Terverifikasi-</option>
                                        @foreach ($data_po as $item)
                                        <option value="{{ $item['id'] }}" >{{ $item['doc_no']   }} || {{ $item['doc_date']   }} </option>
                                        @endforeach
                                    @else
                                    <option value="">-Belum ada PO terverifikasi-</option>
                                    @endif
                                </select>
                                
                            </div>
                            <div class="col-md-2">
                                <button id="preview" type="button" class="btn btn-fill btn-info">Preview</button>
                            </div>

                        </div>
                        <div id="result_preview"></div>
                        
                        <div style="display: flex; justify-content: flex-end">
                            <button id="finisher" type="submit" class="btn btn-fill btn-info">Submit</button>
                        </div>
                    </div>
                </form>
            </div> <!-- end card -->
        </div> <!--  end col-md-6  -->
    </div>
</div>
<script>
   // $('.dropify').dropify();
</script>


@endsection

@section('script')
<link href="{{asset('assets/vendor/select2/select2.min.css')}}" rel="stylesheet" />
<script src="{{asset('assets/vendor/select2/select2.min.js')}}"></script>
<script type="text/javascript">

function convertToRupiah(angka){
		var rev     = parseInt(angka, 10).toString().split('').reverse().join('');
		var rev2    = '';
		for(var i = 0; i < rev.length; i++){
			rev2  += rev[i];
			if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
				rev2 += '.';
			}
		}
		return rev2.split('').reverse().join('');
}

    
$(document).ready(function() {
    $('#finisher').hide();
    $('.select2').select2();

   
    
$('body').on('click', '#preview', function () {

    
        var id_po = $('#id_po').val();
        if(id_po){
            var url = "{{ route('payment.detail_po', ':id') }}";
	        url = url.replace(':id', id_po);
            $.get(url , function (data) {
                $('#result_preview').html(data);
            });
            $('#finisher').show()

        }
        else{
            alert("Pilih dulu");
        }
           
    });

  
       
    

});
</script>


@endsection