@extends('layouts.app')
<style>
	.dataTables_length, .dataTables_filter {
		display: inherit !important;
	}
</style>
@section('content')
<?php usort($tableGrid, "SiteHelpers::_sort"); ?>
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>


<div class="row mb-4">
	@php
		$statusColors = [
			'DITERIMA DAERAH' => '#8950fc', // light green
			'VALIDASI GUDANG' => '#4caf50', // green
			'DITOLAK' => '#f44336',           // red
			'TERVERIFIKASI' => '#ff9800',            // orange
			'BARU' => '#2196f3',           // blue
			// tambahkan status lain jika perlu
		];
	@endphp
	@foreach($statData as $stat)
		@php
			$color = $statusColors[$stat->status_text] ?? '#9e9e9e'; // default grey
		@endphp
		<div class="col-md-3 col-sm-6 mb-2">
			<div style="background: {{ $color }}; color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 18px 12px; text-align: center;">
				<div style="font-size: 1.2em; font-weight: bold;">{{ $stat->status_text }}</div>
				<div style="font-size: 2.2em; font-weight: bold; margin: 8px 0;">{{ $stat->jml_permintaan }}</div>
				<div style="opacity: 0.85;">Permintaan</div>
			</div>
		</div>
	@endforeach
</div>

	<div id="permintaanpupukView"></div>	
	<div id="permintaanpupukGrid">
		<div class="card">
			<div class="card-body">
			@include( $pageModule.'/toolbar')
		
		
			<div class="table-responsive">			
				<table id="permintaanpupukTable" class="display table  table-striped table-hover" cellspacing="0" width="100%">
			        <thead>
			            <tr>
			            	<th>ID</th>	
			            	
			            @if($setting['view-method'] =='expand')<th></th>@endif
			           

			            
		            <?php foreach ($tableGrid as $t) :
						if($t['view'] =='1'):
							$limited = isset($t['limited']) ? $t['limited'] :'';
							if(SiteHelpers::filterColumn($limited ))
							{
								echo '<th align="'.$t['align'].'" width="'.$t['width'].'">'.\SiteHelpers::activeLang($t['label'],(isset($t['language'])? $t['language'] : array())).'</th>';				
							} 
						endif;
					endforeach; ?>
							 <th width="30" class="text-right" > Action </th>
						</tr>

					</thead>	
			               
			    </table>
			</div>	 
		</div>			
	</div>	
	</div>
	
</div>

<div class="modal fade" id="downloadPermintaanModal" tabindex="-1" role="dialog" aria-labelledby="downloadPermintaanModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document" style="max-width: fit-content;">
		<div class="modal-content">
			<form method="GET" action="{{ url($pageModule . '/export') }}">
				<div class="modal-header">
					<h5 class="modal-title" id="downloadPermintaanModalLabel">Download Data Permintaan</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body">
					<div class="form-group"><label for="permintaanTanggalAwal">Tanggal Awal</label><input type="date" class="form-control" id="permintaanTanggalAwal" name="tanggal_awal"></div>
					<div class="form-group"><label for="permintaanTanggalAkhir">Tanggal Akhir</label><input type="date" class="form-control" id="permintaanTanggalAkhir" name="tanggal_akhir"></div>
					<div class="form-group"><label for="permintaanArea">Unit</label><select class="form-control" id="permintaanArea" name="area"></select></div>
					<div class="form-group"><label for="permintaanBarang">Barang</label><select class="form-control" id="permintaanBarang" name="barang"></select></div>
					<div class="form-group"><label for="permintaanStatus">Status</label><select class="form-control" id="permintaanStatus" name="status"><option value="">Semua Status</option><option value="pending">Pending</option><option value="approved">Disetujui</option><option value="rejected">Ditolak</option></select></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-xs btn-secondary" data-dismiss="modal">Batal</button>
					<button type="button" id="filterButton" class="btn btn-xs btn-primary">Filter</button>
					<button type="button" id="downloadButton" class="btn btn-xs btn-success">Download Excel</button>
			</div>
			</form>
			<div id="filterResults"></div>
		</div>
	</div>
</div>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
		<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>

		
<script type="text/javascript">

			@if(session('gid') == 1)
				        $("#permintaanArea").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon') !!}",
            {  initial_text : 'Pilih Unit' });
			@else
				        $("#permintaanArea").jCombo("{!! url('dataprodisconsole/comboselect?filter=master_rayon:kode_rayon:nama_rayon&parent=kode_kebun:' . substr(session('fid'), 0, 4)) !!}",
            {  initial_text : 'Pilih Unit' });
			@endif
			$("#permintaanBarang").jCombo("{!! url('dataprodisconsole/comboselect?filter=m_pupuk_herbisida:id:id|kode_material|nama') !!}",
            {  initial_text : 'Pilih Barang' });
			$("#permintaanStatus").jCombo("{!! url('dataprodisconsole/comboselect?filter=m_status_permintaan_pupuk:id:status') !!}",
            {  initial_text : 'Pilih Status' });

	var table;
	$(document).ready(function() {
		$('.tips').tooltip();
		$('.dataselect').select2();
		var rows_selected = []; 			
	   	table = $('#permintaanpupukTable').DataTable( {
	        "processing": true,
	       
	        "serverSide": true,
	        "lengthMenu": [[10, 25, 50, 100, 200, 500], [10, 25, 50, 100, 200, 500]],
	        "ajax": {
	            "url": "{!! url('permintaanpupuk')!!}",
	            "type": "POST"
	             
        	},
        	"columnDefs": [{ 
        		"targets": [0],
                "visible": false,
                orderable: false,
            	className: 'select-checkbox'
        	}],
        	"columns": [<?php echo $column;?>],
        	'order': [[1, 'asc']],

        	dom: 'Bfltip',
			buttons: [
				'excel'
			],
        	
	    });

	   	<?php if($setting['view-method'] =='expand'): ?>
		$('#permintaanpupukTable tbody').on('click', 'td.details-control', function () {
	        var tr = $(this).closest('tr');
	        var row = table.row( tr );
	        var id = row.data().rowId;

	        if ( row.child.isShown() ) {
	        	 row.child.hide();
            	tr.removeClass('shown');
	        }
	        else {
	            // Open this row
	            row.child.show();	            
	            row.child( expand_child(id) ).show();
	            tr.addClass('shown');
	            $.get('{{ url("permintaanpupuk/")}}/'+id , function(callback){
	            	$('#'+id).html(callback);
	            	$('#'+id).addClass('data');
	            })
		        
	            
	        }
    	});
    	<?php endif; ?>
		$('.dosearch').keyup(function( e ){
			if (e.keyCode === 13) {
				val = $(this).val();
				table.search(val ).draw();
			}
		})  

	    $('#permintaanpupukTable').Sdtable({
	    	tableId : '#permintaanpupuk',
	    	table   : table,
	    	action  : '{{ url("permintaanpupuk")}}' 
	    });

	   
	});


    function expand_child( id )
    {
    	return '<div id="'+ id+'"><p class="text-center"> Loading Content .. Please wait</p></div>';	
    }

	function hapus_permintaan_pupuk(id) {
		if(!confirm('Yakin ingin menghapus data ini?')) return;
		$.ajax({
			url: '{{ url("permintaanpupuk/hapus_permintaan_pupuk") }}',
			type: 'GET',
			data: {
				id: id
			},
			success: function(response) {
				if(response.status === 'success') {
					alert(response.message);
					table.ajax.reload();
				} else {
					alert(response.message);
				}
			},
			error: function(xhr) {
				alert('Terjadi kesalahan saat menghapus data');
			}
		});
	}

	function ajax_verif(id) {
            $.ajax({
                url : '<?php echo url('permintaanpupuk/verif_gudang?id='); ?>'+id,
                type: 'GET',
                dataType: 'json',
                success: function(data)
				{		
					if(data.status === 'success') {
						notyMessage(data.message);	
						table.ajax.reload();
					}
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                  // swal("Peringatan",textarea,"error");
				  notyMessageError(textStatus);	
                }
                });
     }

	 function verif(id) {
            $.ajax({
                url : '<?php echo url('permintaanpupuk/verif?id='); ?>'+id,
                type: 'GET',
                dataType: 'json',
                success: function(data)
				{		
					if(data.status === 'success') {
						notyMessage(data.message);	
						table.ajax.reload();
					}
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                  // swal("Peringatan",textarea,"error");
				  notyMessageError(textStatus);	
                }
                });
     }

      function ajax_tolak(id) {
            $.ajax({
                url : '<?php echo url('permintaanpupuk/tolak_gudang?id='); ?>'+id,
                type: 'GET',
                dataType: 'json',
                success: function(data)
                {
                    if(data.status === 'success') {
						notyMessage(data.message);	
						table.ajax.reload();
					}
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                  // swal("Peringatan",textarea,"error");
				  notyMessageError(textStatus);	
                }
                });
     }

	 $("#filterButton").click(function() {
		$("#filterResults").html('');
		var tanggalAwal = $("#permintaanTanggalAwal").val();
		var tanggalAkhir = $("#permintaanTanggalAkhir").val();
		var area = $("#permintaanArea").val();
		var barang = $("#permintaanBarang").val();
		var status = $("#permintaanStatus").val();

		if (!tanggalAwal || !tanggalAkhir || !area || !barang || !status) {
			notyMessageError('Semua parameter filter wajib diisi');
			return;
		}

		$.ajax({
			url: '{{ url("permintaanpupuk/filterPermintaan") }}',
			type: 'GET',
			data: {
				tanggal_awal: tanggalAwal,
				tanggal_akhir: tanggalAkhir,
				area: area,
				barang: barang,
				status: status
			},
			success: function(response) {
				if(response.status === 'success') {
					notyMessage(response.message);
					var fields = ['id', 'kode_permintaan', 'area', 'barang', 'jumlah', 'satuan', 'status', 'status_terima', 'tgl_permintaan', 'tgl_validasi', 'tgl_diterima', 'unit', 'user_peminta'];
					var rows = Array.isArray(response.data) ? response.data : [];
					var html = '<div class="table-responsive"><table class="table table-striped"><thead><tr>';
					fields.forEach(function(field) {
						html += '<th>' + field.replace(/_/g, ' ') + '</th>';
					});
					html += '</tr></thead><tbody>';
					rows.forEach(function(item) {
						html += '<tr>';
						fields.forEach(function(field) {
							var value = item && item[field] != null ? item[field] : '';
							html += '<td>' + $('<div>').text(value).html() + '</td>';
						});
						html += '</tr>';
					});
					if (!rows.length) html += '<tr><td colspan="' + fields.length + '">Tidak ada data</td></tr>';
					html += '</tbody></table></div>';
					$("#filterResults").html(html);
				} else {
					$("#filterResults").html('<div class="alert alert-danger">' + response.message + '</div>');
				}
			},
			error: function(xhr) {
				notyMessageError('Terjadi kesalahan saat memfilter data');
			}
		});
	});

	$("#downloadButton").click(function() {
		var resultTable = document.querySelector('#filterResults table');
		if (!resultTable || !resultTable.querySelector('tbody tr td')) {
			notyMessageError('Filter data terlebih dahulu sebelum mengunduh');
			return;
		}
		var workbook = XLSX.utils.table_to_book(resultTable, { sheet: 'Permintaan Pupuk' });
		XLSX.writeFile(workbook, 'permintaan-pupuk.xlsx');
	});

</script>


@endsection