@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
	@include('layouts.navbars.auth.topnav', ['title' => 'Edit Generate PPS'])

	<div class="card shadow-lg mx-4">
		<div class="card-body p-3">
			<div class="row gx-4">
				<div class="col-lg">
				<div class="nav-wrapper d-flex gap-2">
					<button class="btn btn-secondary mb-0" onclick="history.back()" type="button">
						<i class="fas fa-circle-left me-1"></i>
						<span class="font-weight-bold">Kembali</span>
					</button>
					<button class="btn btn-primary mb-0" id="btn-update-pps" type="button" data-shortcut="save">
						<i class="fas fa-floppy-disk me-1"></i>
						<span class="font-weight-bold">Simpan Perubahan</span>
					</button>
				</div>
				</div>

				
			</div>
		</div>
	</div>

	@push('css')
		<style>
			.text-uppercase {
				text-transform: uppercase;
			}
		</style>
	@endpush

	<div class="container-fluid py-4">
		<div class="row">
			<div class="col-md-12">
				<form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}" id="form-edit-pps">
					@csrf
					@method('PUT')

					<div class="card mb-4">
						<div class="card-header pb-0">
							<h6 class="mb-0 text-uppercase text-sm font-weight-bold">Informasi PPS</h6>
						</div>
						<div class="card-body">
							<hr class="horizontal dark mt-0">
							<div class="row">
								<div class="col-md-4">
									<div class="form-group">
										<label class="form-control-label">No PPS/SJS</label>
										<input type="text" class="form-control bg-light font-weight-bold"
											value="{{ $header->no_pps }}" disabled>
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label class="form-control-label">ID PS</label>
										@if(!empty($header->id_ps))
											<input type="text" class="form-control bg-light" value="{{ $header->id_ps }}" disabled>
										@else
											<input type="text" class="form-control bg-light text-muted fst-italic" value="without PS" disabled>
										@endif
									</div>
								</div>
								@if(!empty($header->id_ps))
									<div class="col-md-4">
										<div class="form-group">
											<label class="form-control-label">Tanggal PS</label>
											<input type="text" class="form-control bg-light"
												value="{{ $header->ps_date ? \Carbon\Carbon::parse($header->ps_date)->format('d/m/Y') : '-' }}"
												disabled>
										</div>
									</div>
								@else
								<div class="col-md-4">
									<div class="form-group">
										<label class="form-control-label">Tanggal Pengiriman</label>
										@if(empty($header->id_ps))
											<input type="date" class="form-control" name="tanggal_pengiriman"
												value="{{ $header->tanggal_pengiriman ? \Carbon\Carbon::parse($header->tanggal_pengiriman)->format('Y-m-d') : '' }}">
										@else
											<input type="text" class="form-control bg-light"
												value="{{ $header->tanggal_pengiriman ? \Carbon\Carbon::parse($header->tanggal_pengiriman)->format('d/m/Y') : '-' }}"
												disabled>
										@endif
									</div>
								</div>
								@endif
							</div>

							<div class="row">
								<div class="col-md-4">
									<div class="form-group">
										<label class="form-control-label">Customer</label>
										@if(empty($header->id_ps))
											<input type="text" class="form-control" name="customer"
												value="{{ $header->customer ?? '' }}">
										@else
											<input type="text" class="form-control bg-light"
												value="{{ $header->customer ?? '-' }}" disabled>
										@endif
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label class="form-control-label">Customer Ship To</label>
										@if(empty($header->id_ps))
											<input type="text" class="form-control" name="customer_ship_to"
												value="{{ $header->customer_ship_to_ps ?? $header->customer_ship_to_web ?? '' }}">
										@else
											<input type="text" class="form-control bg-light"
												value="{{ $header->customer_ship_to_ps ?? $header->customer_ship_to_web ?? '-' }}" disabled>
										@endif
									</div>
								</div>
								<div class="col-md-4">
									<div class="form-group">
										<label class="form-control-label">Customer End User</label>
										@if(empty($header->id_ps))
											<input type="text" class="form-control" name="end_user"
												value="{{ $header->end_user_web ?? '' }}">
										@else
											<input type="text" class="form-control bg-light"
												value="{{ $header->end_user_web ?? '-' }}" disabled>
										@endif
									</div>
								</div>
								@if(!empty($header->id_ps))
									<div class="col-md-4">
										<div class="form-group">
											<label class="form-control-label">Salesman</label>
											<input type="text" class="form-control bg-light"
												value="{{ $header->expedition_name ?? $header->salesman_web ?? $header->salesman_ps ?? '-' }}" disabled>
										</div>
									</div>
									<div class="col-md-4">
										<div class="form-group">
											<label class="form-control-label">Alamat Pengiriman</label>
											<textarea class="form-control bg-light" rows="2"
												disabled>{{ $header->alamat_pengiriman ?? '-' }}</textarea>
										</div>
									</div>
								@else
									<div class="col-md-8">
										<div class="form-group">
											<label class="form-control-label">Alamat Pengiriman</label>
											@if(empty($header->id_ps))
												<textarea class="form-control" name="alamat_pengiriman" rows="2">{{ $header->alamat_pengiriman ?? '' }}</textarea>
											@else
												<textarea class="form-control bg-light" rows="2"
													disabled>{{ $header->alamat_pengiriman ?? '-' }}</textarea>
											@endif
										</div>
									</div>
								@endif
							</div>
						</div>
					</div>

					<div class="card">
						<div class="card-header pb-0">
							<h6 class="mb-0 text-uppercase text-sm font-weight-bold">Edit Detail Item</h6>
						</div>
						<div class="card-body p-0">
							<hr class="horizontal dark mt-0 mx-3">
							<div class="table-responsive px-3 pb-3">
								<table class="table table-sm align-items-center mb-0 excel-table">
									<thead style="background-color: #00b7bd4f;">
										<tr>
											<th class="text-center" style="width: 40px;">Aksi</th>
											<th class="text-center" style="width: 40px;">No</th>
											<th style="width: 250px;">PP / PET</th>
											<th class="text-center" style="width: 50px;">Gsm</th>
											<th style="width: 150px; min-width: 150px;">No Roll</th>
											<th style="width: 150px; min-width: 150px;">No Jumbo</th>
											<th style="width: 120px;">Color</th>
											<th class="text-center" style="width: 50px;">Width</th>
											<th class="text-center" style="width: 50px;">Length</th>
											<th class="text-center" style="width: 80px;">Grade</th>
											@if(!empty($header->id_ps))
												<th class="text-center" style="width: 70px;">Qty PS</th>
											@endif
											<th class="text-center" style="width: 70px;">Qty PPS</th>
											<th class="text-center" style="width: 70px;">UOM</th>
											<th>Remark</th>
										</tr>
									</thead>
									<tbody>
										@forelse($items as $i => $item)
										
											@php
												$unit = strtoupper($item->sales_unit ?? '');
												$isRejected = !empty($item->flag_rejection) && $item->flag_rejection == '1';
												$rowStyle = $isRejected ? 'style="background-color: #ffe6e6;"' : '';
											@endphp
											<tr data-unit="{{ $unit }}" data-qty-target="{{ (int) ($item->qty_sales ?? 0) }}" data-detail-id="{{ $item->pps_detail_id ?? $item->id }}" {{ $rowStyle }}>
												<td class="text-center">
													<button type="button"
														class="btn btn-danger btn-sm mb-0 px-2 py-1 btn-delete-pps-detail"
														data-id="{{ $item->pps_detail_id ?? $item->id }}"
														data-url="{{ url('genpps/detail/' . ($item->pps_detail_id ?? $item->id)) }}"
														title="Hapus baris ini">
														<i class="fas fa-trash-alt"></i>
													</button>
												</td>
												<td class="text-center text-sm row-number">
													{{ $i + 1 }}
													<input type="hidden" name="pps_detail_id[]" value="{{ $item->pps_detail_id ?? $item->id }}">
												</td>
												<td class="text-sm">
													@if(empty($header->id_ps))
														<input type="text" class="form-control form-control-sm text-uppercase"
															name="material_code[]" value="{{ $item->material_code ?? '' }}"
															oninput="this.value = this.value.toUpperCase()">
													@else
														{{ $item->material_code ?? '-' }}
															@if($isRejected)
																<span class="badge bg-danger text-xs ms-1">REJECT FROM SAP</span>
															@endif
													@endif
												</td>
												<td class="text-center text-sm">
													
													<input type="text" class="form-control form-control-sm text-center {{ !empty($item->item_number) ? 'bg-light' : '' }}"
														name="gsm[]" value="{{ old('gsm.' . $i, $item->gsm ?? '') }}"
														{{ !empty($item->item_number) ? 'readonly' : '' }}>
												</td>
												<td class="text-sm" style="width: 160px;">
													<input type="text" class="form-control form-control-sm text-uppercase"
														name="no_roll[]"
														value="{{ old('no_roll.' . $i, $item->no_roll ?? '') }}"
														oninput="this.value = this.value.toUpperCase()">
												</td>
												<td class="text-sm" style="width: 160px;">
													<input type="text" class="form-control form-control-sm text-uppercase"
														name="nomor_jumbo[]"
														value="{{ old('nomor_jumbo.' . $i, $item->nomor_jumbo ?? '') }}"
														oninput="this.value = this.value.toUpperCase()">
												</td>
												<td class="text-sm">
													@if(empty($header->id_ps))
														<input type="text" class="form-control form-control-sm text-uppercase"
															name="color[]" value="{{ $item->color ?? '' }}"
															oninput="this.value = this.value.toUpperCase()">
													@else
														{{ $item->color ?? '-' }}
													@endif
												</td>
												<td class="text-center text-sm">
													@if(empty($header->id_ps))
														<input type="text" class="form-control form-control-sm text-center"
															name="width[]" value="{{ $item->width ?? '' }}">
													@else
														{{ $item->width ?? '-' }}
													@endif
												</td>
												<td class="text-center text-sm">
													@if(empty($header->id_ps))
														<input type="text" class="form-control form-control-sm text-center"
															name="length[]" value="{{ $item->length ?? '' }}">
													@else
														{{ $item->length ?? '-' }}
													@endif
												</td>
												<td class="text-center text-sm">
													<input type="text" class="form-control form-control-sm text-center"
														name="grade[]" value="{{ old('grade.' . $i, $item->grade ?? '') }}"
														oninput="this.value = this.value.toUpperCase()">
												</td>
												@if(!empty($header->id_ps))
													<td class="text-center text-sm">
														{{ $item->qty_sales ?? '-' }}
														@if (!empty($item->sales_unit))
															{{ strtoupper($item->sales_unit) }}
														@endif
													</td>
												@endif
												<td class="text-center text-sm">
													<input type="number"
														class="form-control form-control-sm text-center"
														name="qty_sales[]" value="{{ $item->qty_filled ?? 1 }}">
												</td>
												<td class="text-center text-sm">
													@if(!empty($header->id_ps))
														<input type="text" class="form-control form-control-sm text-center bg-light" 
															name="uom[]" value="{{ $item->sales_unit ?? '' }}" readonly>
													@else
														<input type="text" class="form-control form-control-sm text-center" 
															name="uom[]" value="{{ $item->sales_unit ?? '' }}" oninput="this.value=this.value.toUpperCase()">
													@endif
												</td>
												<td class="text-sm">
													<input type="text" class="form-control form-control-sm" name="remark[]"
														value="{{ old('remark.' . $i, $item->remark ?? $item->note ?? '') }}"
														oninput="this.value = this.value.toUpperCase()">
												</td>
											</tr>
										@empty
											<tr>
												<td colspan="14" class="text-center py-3 text-secondary">
													Tidak ada detail item untuk ID PS ini.
												</td>
									</tr>
								@endforelse

								@if(!empty($header->id_ps) && $remaining_items->isNotEmpty())
									<tr class="table-active">
										<td colspan="14" class="text-xs font-weight-bold text-center">
											<i class="fas fa-plus-circle me-1"></i>
											Material ID PS yang belum dibuat PPS (centang untuk menambahkan)
										</td>
									</tr>
									@php $newItemOffset = $items->count(); @endphp
									@foreach($remaining_items as $i => $item)
										@php $rowIdx = $newItemOffset + $i; @endphp
										<tr style="background-color: #f0fafb;">
											<td class="text-center" style="vertical-align: middle;">
												<div class="form-check d-flex justify-content-center mb-0">
													<input class="form-check-input item-select" type="checkbox" name="new_item_ids[{{ $rowIdx }}]" value="{{ $item->item_number }}">
												</div>
											</td>
											<td class="text-center text-sm">{{ $rowIdx + 1 }}</td>
											<td class="text-sm">{{ $item->material_code }}</td>
											<td class="text-center text-sm">{{ $item->gsm ?? '-' }}</td>
											<td class="text-sm">
												<input type="text" class="form-control form-control-sm text-uppercase"
													name="new_no_roll[{{ $rowIdx }}]" placeholder="No Roll" oninput="this.value = this.value.toUpperCase()">
											</td>
											<td class="text-sm">
												<input type="text" class="form-control form-control-sm text-uppercase"
													name="new_nomor_jumbo[{{ $rowIdx }}]" placeholder="No Jumbo" oninput="this.value = this.value.toUpperCase()">
											</td>
											<td class="text-sm">{{ $item->color ?? '-' }}</td>
											<td class="text-center text-sm">{{ $item->width ?? '-' }}</td>
											<td class="text-center text-sm">{{ $item->length ?? '-' }}</td>
											<td class="text-center text-sm">
												<input type="text" class="form-control form-control-sm text-center"
													name="new_grade[{{ $rowIdx }}]" placeholder="Grade" oninput="this.value = this.value.toUpperCase()">
											</td>
											@if(!empty($header->id_ps))
												<td class="text-center text-sm">{{ $item->qty_sales ?? '-' }}</td>
											@endif
											<td class="text-center text-sm">1</td>
											<td class="text-center text-sm">{{ strtoupper($item->sales_unit ?? '') }}</td>
											<td class="text-sm">
												<input type="text" class="form-control form-control-sm"
													name="new_remark[{{ $rowIdx }}]" placeholder="Remark" oninput="this.value = this.value.toUpperCase()">
											</td>
										</tr>
									@endforeach
								@endif

								@if($remaining_items->isEmpty() && !empty($header->id_ps))
									<tr id="row-ps-full">
										<td colspan="12" class="text-center py-2 text-xs text-success font-weight-bold">
											<i class="fas fa-check-circle me-1"></i>Semua material pada ID PS ini sudah dibuatkan PPS.
										</td>
									</tr>
								@endif
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>

	@push('js')
		<script src="{{ asset('assets/js/modules/alert.js') }}"></script>
		<script src="{{ asset('assets/js/modules/excelTable.js') }}"></script>
		<script src="{{ asset('assets/js/modules/shortcut.js') }}"></script>
		<script src="{{ asset('assets/js/global.js') }}"></script>
		<script>
			$(document).ready(function () {
				var isSubmitting = false;

				// ── Simpan Perubahan ──────────────────────────────────────────
				$('#form-edit-pps').on('submit', function () {
					if (isSubmitting) {
						return false;
					}

					isSubmitting = true;
					var btn = $('#btn-update-pps');
					btn.prop('disabled', true);
					btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');
				});

				$('#btn-update-pps').on('click', function () {
					if (isSubmitting) {
						return;
					}

					var isValid = true;
					var errorMsg = '';

					// Validasi setiap baris di tabel
					$('table tbody tr[data-unit]').each(function (i) {
						var row = $(this);
						var unit = String(row.data('unit') || '').toUpperCase();
						var noRoll = row.find('input[name="no_roll[]"]').val();
						var qtySales = parseInt(row.find('input[name="qty_sales[]"]').val(), 10) || 0;
						var matCode = row.find('td:nth-child(2)').text().trim();

						if (unit === 'ROL' && (!noRoll || noRoll.trim() === '')) {
							isValid = false;
							errorMsg = 'Baris #' + (i + 1) + ' (' + matCode + '): No Roll wajib diisi untuk satuan ROL.';
							return false; // break loop
						}

						if (qtySales <= 0) {
							isValid = false;
							errorMsg = 'Baris #' + (i + 1) + ': Qty tidak boleh kosong.';
							return false;
						}
					});

					if (!isValid) {
						Swal.fire('Peringatan', errorMsg, 'warning');
						return;
					}

					var existingDetailCount = $('input[name="pps_detail_id[]"]').filter(function() { return $(this).val(); }).length;
					var newItemCount = $('input[name^="new_item_ids"]:checked').length;
					if (existingDetailCount === 0 && newItemCount === 0) {
						Swal.fire('Peringatan', 'Detail item tidak boleh kosong. Minimal 1 detail item diperlukan.', 'warning');
						return;
					}

					Swal.fire({
						title: 'Simpan Perubahan?',
						text: "Data PPS akan diperbarui.",
						icon: 'question',
						showCancelButton: true,
						confirmButtonColor: '#3085d6',
						cancelButtonColor: '#aaa',
						confirmButtonText: 'Ya, Simpan',
						cancelButtonText: 'Batal'
					}).then((result) => {
						if (result.isConfirmed) {
							$('#form-edit-pps').submit();
						}
					});
				});

				// ── Delete Detail Item ────────────────────────────────────────
				$(document).on('click', '.btn-delete-pps-detail', function () {
					var $btn = $(this);
					var url  = $btn.data('url');
					var $row = $btn.closest('tr');

					Swal.fire({
						title: 'Hapus Item Ini?',
						text: 'Baris item ini akan dihapus dari PPS.',
						icon: 'warning',
						showCancelButton: true,
						confirmButtonColor: '#d33',
						cancelButtonColor: '#aaa',
						confirmButtonText: 'Ya, Hapus',
						cancelButtonText: 'Batal'
					}).then(function (result) {
						if (!result.isConfirmed) return;

						$btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');

						$.ajax({
							url: url,
							type: 'POST',
							data: {
								_token: '{{ csrf_token() }}',
								_method: 'DELETE',
								checked_new_items: $('input[name^="new_item_ids"]:checked').map(function() { return this.value; }).get()
							},
							success: function (res) {
								if (res.success) {
									$row.fadeOut(300, function () {
										$(this).remove();
										// Re-numbering
										$('tbody tr').each(function (idx) {
											$(this).find('.row-number').contents().filter(function () {
												return this.nodeType === 3;
											}).first().replaceWith(idx + 1);
										});
										if ($('tbody tr').length === 0) {
											$('tbody').append(
												'<tr><td colspan="13" class="text-center py-3 text-secondary">Tidak ada detail item untuk ID PS ini.</td></tr>'
											);
										}
									});
									Swal.fire({
										icon: 'success',
										title: 'Berhasil',
										text: res.message ?? 'Item berhasil dihapus.',
										timer: 1800,
										showConfirmButton: false
									});
								} else {
									Swal.fire('Gagal', res.message ?? 'Terjadi kesalahan.', 'error');
									$btn.prop('disabled', false).html('<i class="fas fa-trash-alt"></i>');
								}
							},
							error: function (xhr) {
								var msg = xhr.responseJSON?.message ?? 'Terjadi kesalahan server.';
								Swal.fire('Gagal', msg, 'error');
								$btn.prop('disabled', false).html('<i class="fas fa-trash-alt"></i>');
							}
						});
					});
				});
			});
		</script>
	@endpush

@endsection