
<?php $__env->startSection('title','Kunjungan Teknisi'); ?>
<?php $__env->startSection('css'); ?>
<style>
.product-title{
	font-size: 12px;
}
</style>
	
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>

        <div class="page-content-wrapper py-3">
            <?php echo $__env->make('include.admin.alert', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
			<?php
				$begin = new DateTime($kunjungan->tgl_mulai);
				$end = new DateTime($kunjungan->tgl_selesai);
				$end->setTime(0, 0, 1);
				$interval = new DateInterval('P1D');
				//$interval = DateInterval::createFromDateString(false);
				$period = new DatePeriod($begin, $interval, $end); 
				$a = 0;  
				$get_tgl = request()->get('tgl')?request()->get('tgl'):date('Y-m-d');
			?>

			
			<!-- Pagination-->
			<div class="shop-pagination pb-3">
				<div class="container">
					<h7 style="color:black;"><center><?php echo e($kunjungan->nama_customer); ?><br/><?php echo e($kunjungan->alamat); ?></center></h7>
					

					<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#modalPeriode">
						+ Tambah Kunjungan
					</button>

					<div class="modal fade" id="modalPeriode" tabindex="-1" aria-labelledby="modalPeriodeLabel" aria-hidden="true">
						<div class="modal-dialog modal-lg">
							<form action="<?php echo e(route('kunjungan.update', ['kunjungan' => $kunjungan->id_komplain_kunjungan])); ?>" method="post" enctype="multipart/form-data">
							<?php echo csrf_field(); ?>
							<?php echo method_field('PUT'); ?>
								<div class="modal-content">

									<div class="modal-header">
										<h5 class="modal-title" id="modalPeriodeLabel">Tambah Kunjungan</h5>
										<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
									</div>

									<div class="modal-body">
										<div class="form-group">
								
											<label class="form-label" style="color: black">Tanggal</label>
											<select class="form-control" name="tanggal" required>
												<option value=""></option>
												<?php $__currentLoopData = $period; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
													<option <?php echo e($get_tgl == $item->format('Y-m-d')?'selected':''); ?> value="<?php echo e($item->format('Y-m-d')); ?>"><?php echo e($item->format('d/m/Y')); ?></option>
													
												<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
											</select>
										</div>

										<div class="form-group">
											
											<label class="form-label" style="color: black">Produk</label>
											<select class="form-control" name="id_produk" required>
												<option value=""></option>
												<?php $__currentLoopData = $item_customer; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
													<option value="<?php echo e($item->id_produk); ?>"><?php echo e($item->judul); ?></option>
													
												<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
											</select>
										</div>

										<div class="form-group mb-3">
											<div class="d-flex align-items-center gap-3">
												<div>
													<label for="file-input" style="cursor: pointer;">
														<img id="camera-icon" 
															src="<?php echo e(asset('img/camera-icon.jpg')); ?>" 
															style="width: 80px; transition: opacity 0.3s ease, transform 0.3s ease;" 
															onclick="getLocation()" 
															alt="Camera Icon">
													</label>
													<input 
														style="opacity: 0; position: absolute; width: 1px; height: 1px;" 
														capture 
														id="file-input" 
														class="form-control" 
														type="file" 
														name="gambar" 
														accept="image/*" 
														onchange="loadFile(event)">
												</div>
												<div>
													<img id="preview" style="display: none; max-width: 100px; margin-top: 10px;" />
												</div>
											</div>

											<input type="hidden" name="gambar_old">
											<input type="hidden" id="latitude" name="latitude" readonly>
											<input type="hidden" id="longitude" name="longitude" readonly>
										</div>

										<div class="form-group">
								
											<label class="form-label" style="color: black">Catatan</label>
											<input type="text" class="form-control" name="catatan" required>
											
										</div>
									</div>

									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
										<button type="submit" class="btn btn-primary">Simpan</button>
									</div>

								</div>
							</form>
						</div>
					</div>
					
                    <div class="d-flex align-items-center justify-content-between">
                        
                         <input type="text" id="search-input" class="form-control" placeholder="Cari kunjungan...">
                    </div>
                            
						
				</div>
			</div>

            <div class="shop-pagination pb-3">
				<div class="container">
					<div class="card">
						<div class="card-body p-2">
							<div class="d-flex align-items-center justify-content-between"><small class="ms-1 showing-info"></small>
								<form action="#">
									<select class="pe-4 form-select form-select-sm" id="defaultSelectSm" name="defaultSelectSm" aria-label="Default select example">
										<option value="newest" selected>Sort by Newest</option>
										<option value="oldest">Sort by Older</option>
										
									</select>
								</form>
							</div>
                            
						</div>
                        
					</div>
				</div>
			</div>

           

            

			<div class="top-products-area product-list-wrap">
				<div class="container">
					<div class="row g-3">

                        <div class="col-12">
                            <div class="card single-product-card">
                                <div class="card-body">
                                    <h3 style="text-align: center">Loading..</h3>
                                </div>
                            </div>
                        </div>
						
					</div>
				</div>
			</div>


			<div class="shop-pagination pt-3">
				<div class="container">
					<div class="card">
						<div class="card-body py-3">
							<nav aria-label="Page navigation example">
								<ul class="pagination pagination-two justify-content-center">
									No Data
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
			<?php $__currentLoopData = $kunjungan_teknisi; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $kun): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
				<div class="modal fade" id="editData<?php echo e($kun->id); ?>" tabindex="-1" aria-labelledby="modalPeriodeLabel" aria-hidden="true">
					<div class="modal-dialog modal-lg">
						<form action="<?php echo e(route('kunjungan.update', ['kunjungan' => $kunjungan->id_komplain_kunjungan])); ?>" method="post" enctype="multipart/form-data">
						<?php echo csrf_field(); ?>
						<?php echo method_field('PUT'); ?>
							<div class="modal-content">
								<input type="hidden" name="id" value="<?php echo e($kun->id); ?>">
								<input type="hidden" name="id_kunjungan_rutin" value="<?php echo e($kun->id_kunjungan_rutin); ?>">
								<div class="modal-header">
									<h5 class="modal-title" id="modalPeriodeLabel">Ubah Kunjungan</h5>
									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
								</div>

								<div class="modal-body">
									<div class="form-group">
							
										<label class="form-label" style="color: black">Tanggal</label>
										<select class="form-control" name="tanggal" required>
											<option value=""></option>
											<?php $__currentLoopData = $period; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
												<option <?php echo e($kun->tanggal == $item->format('Y-m-d')?'selected':''); ?> value="<?php echo e($item->format('Y-m-d')); ?>"><?php echo e($item->format('d/m/Y')); ?></option>
												
											<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
										</select>
									</div>

									<div class="form-group">
										
										<label class="form-label" style="color: black">Produk</label>
										<select class="form-control" name="id_produk" required>
											<option value=""></option>
											<?php $__currentLoopData = $item_customer; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
												<option <?php echo e($item->id_produk == $kun->id_produk?'selected':''); ?> value="<?php echo e($item->id_produk); ?>"><?php echo e($item->judul); ?></option>
												
											<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
										</select>
									</div>

									<div class="form-group mb-3">
										<div class="d-flex align-items-center gap-3">
											<div>
												<label for="file-input" style="cursor: pointer;">
													<?php
														$image = $kun->gambar ? asset('img/kunjungan/'.$kun->gambar):asset('img/camera-icon.jpg');
													?>
													<img id="camera-icon" 
														src="<?php echo e($image); ?>" 
														style="width: 80px; transition: opacity 0.3s ease, transform 0.3s ease;" 
														onclick="getLocation()" 
														alt="Camera Icon">
												</label>
												<input 
													style="opacity: 0; position: absolute; width: 1px; height: 1px;" 
													capture 
													id="file-input" 
													class="form-control" 
													type="file" 
													name="gambar" 
													accept="image/*" 
													onchange="loadFile(event)">
											</div>
											<div>
												<img id="preview" style="display: none; max-width: 100px; margin-top: 10px;" />
											</div>
										</div>

										<input type="hidden" name="gambar_old" value="<?php echo e($kun->gambar); ?>">
										<input type="hidden" id="latitude" name="latitude" readonly>
										<input type="hidden" id="longitude" name="longitude" readonly>
									</div>

									<div class="form-group">
							
										<label class="form-label" style="color: black">Catatan</label>
										<input type="text" class="form-control" name="catatan" value="<?php echo e($kun->catatan); ?>" required>
										
									</div>
								</div>

								<div class="modal-footer">
									<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
									<button type="submit" class="btn btn-primary">Simpan</button>
								</div>

							</div>
						</form>
					</div>
				</div>
			<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
		</div>
<?php $__env->startSection('js'); ?>
<script>
	var loadFile = function(event) {
        var cameraIcon = document.getElementById('camera-icon');

        // Kasih efek fade-out dulu
        cameraIcon.style.opacity = 0;
        cameraIcon.style.transform = 'scale(0.95)';

        // Setelah beberapa milidetik (tunggu animasi), baru ganti src
        setTimeout(function() {
            cameraIcon.src = URL.createObjectURL(event.target.files[0]);
            cameraIcon.onload = function() {
                // Setelah gambar baru selesai load, fade-in
                cameraIcon.style.opacity = 1;
                cameraIcon.style.transform = 'scale(1)';
            };
        }, 300); // 300ms sama kayak durasi transition
    };
    document.addEventListener("DOMContentLoaded", function () {
        loadProducts();

        document.getElementById("defaultSelectSm").addEventListener("change", function () {
            loadProducts(this.value);
        });
    });


function loadProducts(sort = 'newest', page = 1, search = '', idKunjunganRutin = null) {
    let apiUrl = `<?php echo e(url('/api/kunjungan_teknisi')); ?>?sort=${sort}&page=${page}&search=${encodeURIComponent(search)}`;
    //console.log(apiUrl);
	var idKunjunganRutin = "<?php echo e($kunjungan->id_komplain_kunjungan); ?>";
    if (idKunjunganRutin) {
        apiUrl += `&id_kunjungan_rutin=${idKunjunganRutin}`;
    }
    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const kunjunganContainer = document.querySelector(".top-products-area .container .row");
            kunjunganContainer.innerHTML = "";

            if (data.data.length > 0) {
                data.data.forEach(kunjungan => {
                    const assetPath = "<?php echo e(asset('img/kunjungan/')); ?>";
                    const urlPath = "<?php echo e(url('/kunjungan/')); ?>";
					const idData = kunjungan.id;
                    kunjunganContainer.innerHTML += `
                        <div class="col-12">
                            <div class="card single-product-card">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <!-- Gambar Kunjungan (Kiri & Kanan) -->
                                        <div class="card-side-img d-flex">
                                            <!-- Gambar Utama -->
                                            ${kunjungan.gambar ? `
                                                <a class="product-thumbnail me-2" data-bs-toggle="modal" data-bs-target="#editData${idData}">
                                                    <img src="${assetPath}/${kunjungan.gambar}">
                                                </a>
                                            ` : ''}

                                           
                                        </div>

                                        <!-- Konten -->
                                        <div class="card-content px-4 py-2">
                                            <a class="product-title d-block text-truncate mt-0" data-bs-toggle="modal" style="font-size:11px;" data-bs-target="#editData${idData}">
                                               ${kunjungan.tanggal}
												<br/>
                                              Catatan: ${kunjungan.catatan ? formatCatatan(kunjungan.catatan) : ''}

                                            </a>
                                            
                                            
                                            
                                        </div>

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

                    `;
                });

                document.querySelector(".showing-info").innerText = `Menampilkan ${data.data.length} dari ${data.total}`;
            } else {
                document.querySelector(".showing-info").innerText = "Tidak ada hasil yang ditemukan.";
            }

            updatePagination(data);
        })
        .catch(error => console.error("Error fetching products:", error));
}
function formatCatatan(text) {
    const words = text.split(' ');
    const chunkSize = 7;
    let result = '';

    for (let i = 0; i < words.length; i += chunkSize) {
        const chunk = words.slice(i, i + chunkSize).join(' ');
        result += chunk + '<br>';
    }

    return result.trim();
}
function formatTanggal(tgl) {
    const date = new Date(tgl);
    const pad = n => n.toString().padStart(2, '0');
    const shortYear = date.getFullYear().toString().slice(-2); // ambil dua digit terakhir
    return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${shortYear}`;
}

// Fungsi debounce untuk mencegah request berulang saat mengetik
function debounce(func, delay) {
    let timer;
    return function () {
        const context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(context, args), delay);
    };
}

// Event listener untuk input pencarian
document.addEventListener("DOMContentLoaded", function () {
    const searchInput = document.getElementById("search-input");

    if (searchInput) {
        searchInput.addEventListener("keyup", debounce(function () {
            const searchQuery = this.value.trim();
            loadProducts('newest', 1, searchQuery);
        }, 500)); // Tunggu 500ms sebelum memanggil API
    }
});


function updatePagination(data) {
    const paginationContainer = document.querySelector(".pagination");
    paginationContainer.innerHTML = "";

    if (data.prev_page_url) {
        paginationContainer.innerHTML += `<li class="page-item"><a class="page-link" href="#" onclick="loadProducts('${document.getElementById("defaultSelectSm").value}', ${data.current_page - 1})">&laquo;</a></li>`;
    }

    for (let i = 1; i <= data.last_page; i++) {
        paginationContainer.innerHTML += `<li class="page-item ${i === data.current_page ? "active" : ""}">
            <a class="page-link" href="#" onclick="loadProducts('${document.getElementById("defaultSelectSm").value}', ${i})">${i}</a>
        </li>`;
    }

    if (data.next_page_url) {
        paginationContainer.innerHTML += `<li class="page-item"><a class="page-link" href="#" onclick="loadProducts('${document.getElementById("defaultSelectSm").value}', ${data.current_page + 1})">&raquo;</a></li>`;
    }
}
</script>
<?php $__env->stopSection(); ?>  

<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home3/baktijay/public_html/ptgib.co.id/admin_pwa/resources/views/kunjungan/edit.blade.php ENDPATH**/ ?>