@extends('layouts.app')

@section('content')
<?php usort($tableGrid, "SiteHelpers::_sort"); ?>
<div class="page-titles">
  <h2> {{ $pageTitle }} <small> {{ $pageNote }} </small></h2>
</div>


	<div id="masterupahpotonganView"></div>	
	<div id="masterupahpotonganGrid">
		<div class="card">
			<div class="card-body">
			@include( $pageModule.'/toolbar')
		
		
			<div id="getList">			
		
			</div>	 
		</div>			
	</div>	
	</div>
	
</div>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script type="text/javascript">

	$('#kebun').jCombo("{!! url('penggunatma/comboselect?filter=master_kebun:kode_kebun:nama_kebun') !!}");

	$(document).ready(function() {
		$('.tips').tooltip();
		$('.dataselect').select2();
	
	   	<?php if($setting['view-method'] =='expand'): ?>
		$('#masterupahpotonganTable 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("masterupahpotongan/")}}/'+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();
			}
		})  


	   
	});
	loadMaster();
	function loadMaster(){ 

		kode_kebun = $('#kebun').val();
	$.ajax({
		url: '{{ url("masterupahpotongan/getMasterUpahPotongan") }}?kode_kebun=' + kode_kebun,
		type: 'GET',
		dataType: 'json',
		success: function(response) {
			if (response.status === 'success') {
				var data = response.data;
				var groupedData = {};

				// Group data by 'tebang' only
				data.forEach(function(item) {
					if (!groupedData[item.tebang]) {
						groupedData[item.tebang] = [];
					}
					groupedData[item.tebang].push(item);
				});

				// Build modern accordion-style list grouped by tebang
				var listHtml = '<div class="accordion" id="accordionMain">';
				var tebangIndex = 0;
				
				for (var tebang in groupedData) {
					var tebangId = 'tebang' + tebangIndex;
					listHtml += '<div class="card mb-2 shadow-sm border-0">' +
						'<div class="card-header bg-info text-white" id="heading' + tebangId + '">' +
						'<h5 class="mb-0">' +
						'<button class="btn btn-link text-white text-decoration-none w-100 text-left d-flex justify-content-between align-items-center" type="button" data-toggle="collapse" data-target="#collapse' + tebangId + '">' +
						'<span><i class="fas fa-folder-open mr-2"></i>' + tebang + '</span>' +
						'<i class="fas fa-chevron-down"></i>' +
						'</button></h5></div>' +
						'<div id="collapse' + tebangId + '" class="collapse" data-parent="#accordionMain">' +
						'<div class="card-body p-0">' +
						'<ul class="list-group list-group-flush">';
					
					groupedData[tebang].forEach(function(item) {
						// Define color based on kategori
						var categoryColors = {
							'UPAH POKOK': 'success',
							'UPAH INSIDENTIL': 'info',
							'POTONGAN': 'danger'
						};
						var badgeColor = categoryColors[item.kategori.toUpperCase()] || 'secondary';
						var borderColor = {
							'UPAH POKOK': 'border-left-success',
							'UPAH INSIDENTIL': 'border-left-info',
							'POTONGAN': 'border-left-danger'
						};
						var borderClass = borderColor[item.kategori.toUpperCase()] || '';
						
						listHtml += '<li class="list-group-item d-flex justify-content-between align-items-center hover-shadow ' + borderClass + '" data-id="' + item.id + '" style="border-left-width: 4px !important;">' +
							'<div class="d-flex align-items-center w-100">' +
							'<div class="drag-handle mr-2" style="cursor: move;">' +
							'<i class="fas fa-grip-vertical text-muted"></i>' +
							'</div>' +
							'<div class="flex-grow-1">' +
							'<span class="badge badge-secondary mr-2">' + item.kode + '</span>' +
							'<span class="font-weight-bold">' + item.deskripsi + '</span>' +
							'<small class="d-block text-muted mt-1">' +
							'<i class="fas fa-tag mr-1"></i>Kategori: ' +
							'<span class="badge badge-' + badgeColor + ' badge-sm">' + item.kategori + '</span> | ' +
							'<i class="fas fa-money-bill-wave mr-1"></i>' + item.nominal + ' ' + item.satuan +
							'</small>' +
							'</div>' +
							'<div class="btn-group btn-group-sm">' +
							'<button class="btn btn-outline-primary btn-edit" data-id="' + item.id + '" title="Edit">' +
							'<i class="fas fa-edit"></i></button>' +
							'<button class="btn btn-outline-danger btn-delete" data-id="' + item.id + '" title="Delete">' +
							'<i class="fas fa-trash"></i></button>' +
							'</div></div></li>';
					});
					
					listHtml += '</ul></div></div></div>';
					tebangIndex++;
				}
				listHtml += '</div>';

				// Add modern CSS styles
				var styles = '<style>' +
					'.hover-shadow:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s; }' +
					'.btn-link:hover { text-decoration: none !important; }' +
					'.card-header button[aria-expanded="true"] i.fa-chevron-down { transform: rotate(180deg); transition: transform 0.3s; }' +
					'.drag-handle { cursor: move !important; padding: 5px; }' +
					'.drag-handle:hover { background-color: #f0f0f0; border-radius: 3px; }' +
					'.sortable-placeholder { height: 60px; background-color: #e3f2fd; border: 2px dashed #2196F3; margin-bottom: 5px; }' +
					'.list-group-item.ui-sortable-helper { box-shadow: 0 5px 15px rgba(0,0,0,0.3); background-color: #fff; z-index: 1000; }' +
					'.border-left-success { border-left-color: #28a745 !important; }' +
					'.border-left-danger { border-left-color: #dc3545 !important; }' +
					'.border-left-info { border-left-color: #17a2b8 !important; }' +
					'.border-left-warning { border-left-color: #ffc107 !important; }' +
					'.border-left-primary { border-left-color: #007bff !important; }' +
					'.badge-sm { font-size: 0.75rem; padding: 0.25em 0.5em; }' +
					'</style>';

				$('#getList').html(styles + listHtml);

				// Expand all accordion items
				$('.collapse').addClass('show');

				// Initialize sortable for each list-group
				$('.list-group').sortable({
					handle: '.drag-handle',
					cursor: 'move',
					opacity: 0.8,
					tolerance: 'pointer',
					placeholder: 'sortable-placeholder',
					forcePlaceholderSize: true,
					start: function(e, ui) {
						ui.placeholder.height(ui.item.height());
					},
					update: function(event, ui) {
						var order = [];
						$(this).find('.list-group-item').each(function(index) {
							var newKode = 'K' + (index + 1);
							
							// Update visual kode di UI
							$(this).find('.badge-secondary').first().text(newKode);
							
							order.push({
								id: $(this).data('id'),
								position: index + 1,
								kode: newKode
							});
						});
						
						// Save new order and kode to server
						$.ajax({
							url: '{{ url("masterupahpotongan?action_task=updateOrder") }}',
							type: 'POST',
							data: { order: order },
							headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
							success: function(response) {
								if(response.status === 'success') {
									notyMessage('✅ Urutan dan kode berhasil disimpan');
								}
							},
							error: function() {
								notyMessageError('❌ Error menyimpan urutan');
								// Reload jika error untuk kembalikan ke state awal
								loadMaster();
							}
						});
					}
				});

				// Edit action
				$(document).on('click', '.btn-edit', function() {
					var id = $(this).data('id');
					SximoModal('{{ url("masterupahpotongan/") }}/' + id + '/edit', 'Edit Master Upah Potongan');
				});

				// Delete action with modern confirmation
				$(document).on('click', '.btn-delete', function() {
					var id = $(this).data('id');
					if (confirm('🗑️ Apakah Anda yakin ingin menghapus data ini?')) {
						$.ajax({
							url: '{{ url("masterupahpotongan/") }}?action_task=delete',
							type: 'POST',
							data: { ids: [id] },
							headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
							success: function(response) { 
								if(response.status === 'success') {
									notyMessage(response.message);
									loadMaster();
								}
							},
							error: function() { notyMessageError('❌ Error menghapus data.'); }
						});
					}
				});
			} else {
				$('#getList').html('<div class="alert alert-info"><i class="fas fa-info-circle mr-2"></i>No data found.</div>');
			}
		}
	});
}
    function expand_child( id )
    {
    	return '<div id="'+ id+'"><p class="text-center"> Loading Content .. Please wait</p></div>';	
    }

</script>


@endsection