@extends('layout')


@section('content')
<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="index.html"><i class="icon-home2 position-left"></i> Keuangan</a></li>
			<li class="active">Kas Keluar</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Form Kas Keluar</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
        	<div class="form-group col-md-12">
             	<label></label>
             </div>
	    	<div class="form-group col-md-12">
            	<div class="form-group col-md-6">
                	<label>Nomor Transaksi</label>
                    <input class="form-control" type="text" placeholder="Nomor Transaksi" />
                </div>
            	<div class="form-group col-md-6">
                	<label>Tanggal</label>
                    <input class="form-control datepicker" type="text" placeholder="Masukan Tanggal" />
                </div>
                <div class="form-group col-md-6">
                	<label>Keterangan</label>
                    <input class="form-control" type="text" placeholder="Nomor Transaksi" />
                </div>
                
               </div>
             <div class="form-group col-md-12">
             	<div class="panel panel-primary">
                <!---<h5 class="panel-title">Detail Pemasukan</h5>--->
                </div>
              <div class="panel-body">
	    	<a href="#" class="btn btn-success" style="margin-bottom: 1%;" id="btn_tambah_item">Tambah Transaksi</a>
	    
            <table class="table datatable-basic table-stripped">
	    	<thead>
				<tr>
					<th>No</th>
                    <th>Tanggal</th>
					<th>Perkiraan</th>
					<th>Ket.</th>
                    <th>Jumlah</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>22-08-2018</td>
					<td>21767261</td>
                    <td>Keterangan</td>
					<td class="right">0</td>
					<td style="text-align: center"><button class="btn bg-warning-400"><i class="icon-pencil"></i> </button>
						<button class="btn bg-danger-800" type="button"><i class="icon-eraser"></i></button></td>
				</tr>
			</tbody>
	    </table>
        </div>
             </div>
             
	    </div>

	    
	</div>
</div>

<!---Modal--->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Data</h5>
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<form class="form-horizontal" autocomplete="off">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Perkiraan</label>
	      				<div class="col-sm-8">
	      					<select class="form-control" name="popup_barang">
	      						<option value="">Kas</option>
	      						<option value="">Bank</option>
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Keterangan</label>
	      				<div class="col-sm-8">
	      					<input type="number" name="popup_stok" class="form-control" readonly>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Jumlah</label>
	      				<div class="col-sm-8">
	      					<input type="number" name="popup_jumlah" class="form-control">
	      				</div>
	      			</div>
	      			
	      		</form>
	      	</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-primary" id="btn_popup_simpan">Simpan</button>
	      	</div>
	    </div>
	</div>
</div>


<!----Modal---->
<script type="text/javascript">
	$("#btn_tambah_item").click(function(){
		$("#exampleModal").modal('show');
	})

	$("#btn_popup_simpan").click(function(){
		$("#exampleModal").modal('hide');	
	})

	$("#btn_edit").click(function(){
		$("#exampleModal").modal('show');
	})
	
</script>
@endsection