@extends('app-new')
@push('head-script')
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- END: Vendor CSS-->

<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
<!-- END: Page CSS-->
<style>
	body{
		overflow-x : hidden;
	}
	.table-sm td {
		padding: 0.5rem;
	}
</style>
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-8">
            <h2 class="content-header-title float-start mb-0">All Components with Accounts</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ '/'.$alias.'/home' }}">Home</a></li>
                    <li class="breadcrumb-item active">Components</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')

<div class="row mt-2">
	<div class="col-12">
		<div class="card">
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-striped table-sm" style="background-color:#fff" id="accountsTable">
						<thead>
							<tr>
								<th>#</th>
								<th class="text-nowrap">Component Name</th>
								<th class="text-nowrap">Group</th>
								<th class="text-nowrap">Type</th>
								<th class="text-nowrap">Debit Account</th>
								<th class="text-nowrap">Credit Account</th>
								
							</tr>
						</thead>
						<tbody>
							@php $count = 1; @endphp
							
							<!-- Earning Components -->
							@foreach($earningType as $data)
								<tr id="row-{{$data->id}}" class="earning-row" data-component-id="{{$data->id}}" data-component-type="earning" data-master-type="{{$data->master_type_id}}" data-group-type="{{$data->group_type_id}}" data-value-type="{{$data->value_type}}" data-calc-type="{{$data->calculation_type}}" data-value-data="{{$data->value_data}}" data-frequency="{{$data->frequency}}" data-is-editable="{{$data->is_editable}}" data-alias="{{$data->alias}}">
									<td>{{$count}}</td>
									<td>{{$data->name}}</td>
									<td>{{$data->grouptype->name ?? 'N/A'}}</td>
									<td><span class="badge bg-info">Earning</span></td>
									<td>
										<input type="text" class="form-control form-control-sm debit-account-input" data-id="{{$data->id}}" value="{{$data->debit_account}}" placeholder="Debit A/C" maxlength="255">
									</td>
									<td>
										<input type="text" class="form-control form-control-sm credit-account-input" data-id="{{$data->id}}" value="{{$data->credit_account}}" placeholder="Credit A/C" maxlength="255">
									</td>
									
								</tr>
								@php $count++; @endphp
							@endforeach

							<!-- Deduction Components -->
							@foreach($deductionType as $data)
								<tr id="row-{{$data->id}}" class="deduction-row" data-component-id="{{$data->id}}" data-component-type="deduction" data-master-type="{{$data->master_type_id}}" data-group-type="{{$data->group_type_id}}" data-value-type="{{$data->value_type}}" data-calc-type="{{$data->calculation_type}}" data-value-data="{{$data->value_data}}" data-frequency="{{$data->frequency}}" data-is-editable="{{$data->is_editable}}" data-alias="{{$data->alias}}">
									<td>{{$count}}</td>
									<td>{{$data->name}}</td>
									<td>{{$data->grouptype->name ?? 'N/A'}}</td>
									<td><span class="badge bg-warning">Deduction</span></td>
									<td>
										<input type="text" class="form-control form-control-sm debit-account-input" data-id="{{$data->id}}" value="{{$data->debit_account}}" placeholder="Debit A/C" maxlength="255">
									</td>
									<td>
										<input type="text" class="form-control form-control-sm credit-account-input" data-id="{{$data->id}}" value="{{$data->credit_account}}" placeholder="Credit A/C" maxlength="255">
									</td>
									
								</tr>
								@php $count++; @endphp
							@endforeach

							<!-- Derived Components -->
							@foreach($derivedType as $data)
								<tr id="row-{{$data->id}}" class="derived-row" data-component-id="{{$data->id}}" data-component-type="derived" data-parent-id="{{$data->parent_id}}" data-group-type="{{$data->group_type_id}}" data-value-type="{{$data->value_type}}" data-calc-type="{{$data->calculation_type}}" data-value-data="{{$data->value_data}}" data-frequency="{{$data->frequency}}" data-is-editable="{{$data->is_editable}}" data-alias="{{$data->alias}}">
									<td>{{$count}}</td>
									<td>{{$data->name}}</td>
									<td>{{$data->grouptype->name ?? 'N/A'}}</td>
									<td><span class="badge bg-success">Derived</span></td>
									<td>
										<input type="text" class="form-control form-control-sm debit-account-input" data-id="{{$data->id}}" value="{{$data->debit_account}}" placeholder="Debit A/C" maxlength="255">
									</td>
									<td>
										<input type="text" class="form-control form-control-sm credit-account-input" data-id="{{$data->id}}" value="{{$data->credit_account}}" placeholder="Credit A/C" maxlength="255">
									</td>
									
								</tr>
								@php $count++; @endphp
							@endforeach
						</tbody>
					</table>
				</div>
				<div class="row mt-3">
					<div class="col-12">
						<button type="button" class="btn btn-primary" onclick="updateAllComponents()">
							<i data-feather="save"></i> Update All
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script>
const alias = '{{ $alias }}';

function updateAllComponents() {
	// Collect all component updates
	const updates = [];
	const rows = document.querySelectorAll('#accountsTable tbody tr');
	
	rows.forEach(row => {
		const componentId = row.getAttribute('data-component-id');
		const componentType = row.getAttribute('data-component-type');
		const creditInput = row.querySelector('.credit-account-input');
		const debitInput = row.querySelector('.debit-account-input');
		
		if (creditInput && debitInput) {
			updates.push({
				id: componentId,
				type: componentType,
				credit_account: creditInput.value,
				debit_account: debitInput.value,
				row: row
			});
		}
	});
	
	if (updates.length === 0) {
		Swal.fire('No Data', 'No components found to update.', 'warning');
		return;
	}
	
	// Confirmation dialog
	Swal.fire({
		title: 'Update All Components',
		text: `You are about to update ${updates.length} component(s). Continue?`,
		icon: 'question',
		showCancelButton: true,
		confirmButtonColor: '#3085d6',
		cancelButtonColor: '#d33',
		confirmButtonText: 'Yes, Update!',
		cancelButtonText: 'Cancel'
	}).then((result) => {
		if (result.isConfirmed) {
			submitAllUpdates(updates);
		}
	});
}

function submitAllUpdates(updates) {
	let totalSuccess = 0;
	let totalFailed = 0;
	let failedComponents = [];
	
	// Show loading indicator
	Swal.fire({
		title: 'Updating...',
		text: `Processing ${updates.length} component(s)`,
		icon: 'info',
		allowOutsideClick: false,
		didOpen: async () => {
			Swal.showLoading();
			
			// Process each update sequentially
			for (let i = 0; i < updates.length; i++) {
				const update = updates[i];
				try {
					const response = await fetch(`/${alias}/payroll/component-accounts/update`, {
						method: 'POST',
						headers: {
							'Content-Type': 'application/json',
							'X-CSRF-TOKEN': getCsrfToken()
						},
						body: JSON.stringify(preparePayload(update))
					});
					
					if (response.ok) {
						totalSuccess++;
					} else {
						totalFailed++;
						failedComponents.push(update.row.querySelector('td:nth-child(2)').textContent.trim());
					}
				} catch (error) {
					totalFailed++;
					failedComponents.push(update.row.querySelector('td:nth-child(2)').textContent.trim());
				}
			}
			
			Swal.close();
			
			// Show completion alert
			if (totalFailed === 0) {
				Swal.fire({
					title: 'Success!',
					text: `All ${totalSuccess} component(s) updated successfully.`,
					icon: 'success',
					confirmButtonText: 'OK'
				}).then(() => {
					location.reload();
				});
			} else {
				let message = `Updated: ${totalSuccess} | Failed: ${totalFailed}`;
				if (failedComponents.length > 0) {
					message += `\n\nFailed components:\n${failedComponents.join(', ')}`;
				}
				Swal.fire({
					title: 'Partial Update',
					text: message,
					icon: 'warning',
					confirmButtonText: 'OK'
				});
			}
		}
	});
}

function preparePayload(update) {
	return {
		id: update.id,
		credit_account: update.credit_account,
		debit_account: update.debit_account
	};
}

function getCsrfToken() {
	return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
}
</script>

@endsection