137 lines
8.4 KiB
PHP
137 lines
8.4 KiB
PHP
<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
|
|
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
|
|
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
|
|
<?php $component->withName('app-layout'); ?>
|
|
<?php if ($component->shouldRender()): ?>
|
|
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
|
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
|
|
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
|
|
<?php endif; ?>
|
|
<?php $component->withAttributes([]); ?>
|
|
<div class="max-w-4xl mx-auto py-12 px-4">
|
|
|
|
<div class="flex items-center gap-6 mb-10">
|
|
<a href="<?php echo e(route('cats.show', $cat->id)); ?>" class="p-4 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-800 uppercase tracking-tight">Pedigree Management</h2>
|
|
<p class="text-sm text-slate-400 font-bold uppercase tracking-widest">Digital Archive for: <?php echo e($cat->nama_kucing); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
|
|
|
<div class="md:col-span-1 space-y-6">
|
|
<div class="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 p-8">
|
|
<div class="w-12 h-12 bg-indigo-50 text-indigo-600 rounded-2xl flex items-center justify-center mb-6">
|
|
<i class="fas fa-cloud-upload-alt text-xl"></i>
|
|
</div>
|
|
<h3 class="text-lg font-black text-slate-800 uppercase tracking-tight mb-2">Upload Sertifikat</h3>
|
|
<p class="text-xs text-slate-400 font-medium mb-8">Format didukung: JPG, PNG, atau PDF. Max 2MB.</p>
|
|
|
|
<form action="<?php echo e(route('cats.upload-pedigree', $cat->id)); ?>" method="POST" enctype="multipart/form-data" class="space-y-6">
|
|
<?php echo csrf_field(); ?>
|
|
<div class="relative group">
|
|
<input type="file" name="sertifikat_ped_file" required accept=".pdf,.jpg,.jpeg,.png" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
|
|
<div class="w-full p-8 border-2 border-dashed border-slate-200 rounded-3xl bg-slate-50 text-center group-hover:border-indigo-400 group-hover:bg-indigo-50 transition-all">
|
|
<i class="fas fa-file-import text-3xl text-slate-300 group-hover:text-indigo-400 mb-4 transition-colors"></i>
|
|
<p class="text-xs font-black text-slate-600 uppercase tracking-widest">Pilih File</p>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="w-full py-4 bg-indigo-600 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest shadow-lg shadow-indigo-200 hover:bg-indigo-700 transition-all">
|
|
Simpan Ke Arsip
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="md:col-span-2">
|
|
<div class="bg-white rounded-[2.5rem] shadow-xl border border-slate-100 p-8 h-full flex flex-col">
|
|
<div class="flex justify-between items-center border-b border-slate-100 pb-6 mb-6">
|
|
<h3 class="text-lg font-black text-slate-800 uppercase tracking-tight">Current Certificate</h3>
|
|
<?php if($cat->sertifikat_ped_file): ?>
|
|
<a href="<?php echo e(asset('storage/' . $cat->sertifikat_ped_file)); ?>" download class="px-5 py-2.5 bg-emerald-50 text-emerald-600 rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-emerald-600 hover:text-white transition-colors shadow-sm">
|
|
<i class="fas fa-download mr-2"></i> Download
|
|
</a>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<div class="flex-1 bg-slate-50 rounded-[2rem] overflow-hidden flex items-center justify-center min-h-[500px] border border-slate-100 p-2 relative">
|
|
<?php if($cat->sertifikat_ped_file): ?>
|
|
<?php
|
|
$extension = pathinfo($cat->sertifikat_ped_file, PATHINFO_EXTENSION);
|
|
$isPdf = strtolower($extension) === 'pdf';
|
|
$filePath = asset('storage/' . $cat->sertifikat_ped_file);
|
|
?>
|
|
|
|
<?php if($isPdf): ?>
|
|
<iframe src="<?php echo e($filePath); ?>" class="w-full h-[600px] rounded-3xl" frameborder="0"></iframe>
|
|
<?php else: ?>
|
|
|
|
<div id="zoom-container" class="w-full h-full relative overflow-hidden rounded-3xl cursor-crosshair flex items-center justify-center">
|
|
<img id="zoom-image" src="<?php echo e($filePath); ?>" class="w-full h-full object-contain transition-transform duration-200 ease-out origin-center">
|
|
</div>
|
|
<?php endif; ?>
|
|
<?php else: ?>
|
|
<div class="text-center text-slate-400">
|
|
<i class="fas fa-folder-open text-6xl mb-4 opacity-50"></i>
|
|
<p class="text-xs font-black uppercase tracking-widest">Belum ada sertifikat</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<?php if($cat->sertifikat_ped_file && !$isPdf): ?>
|
|
<p class="text-center mt-4 text-[10px] font-bold text-slate-400 uppercase tracking-widest italic">
|
|
* Arahkan kursor & geser pada gambar untuk memperbesar (Zoom)
|
|
</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<?php $__env->startPush('scripts'); ?>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const container = document.getElementById('zoom-container');
|
|
const img = document.getElementById('zoom-image');
|
|
|
|
if (container && img) {
|
|
// Saat mouse bergerak di dalam kotak gambar
|
|
container.addEventListener('mousemove', function(e) {
|
|
const rect = container.getBoundingClientRect();
|
|
// Hitung posisi X dan Y kursor dalam persentase
|
|
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
|
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
|
|
|
// Pindahkan titik pusat zoom mengikuti kursor
|
|
img.style.transformOrigin = `${x}% ${y}%`;
|
|
// Perbesar gambar 2.5x lipat
|
|
img.style.transform = 'scale(2.5)';
|
|
});
|
|
|
|
// Saat mouse keluar dari kotak gambar
|
|
container.addEventListener('mouseleave', function() {
|
|
// Kembalikan ke ukuran dan posisi semula secara halus
|
|
img.style.transformOrigin = 'center center';
|
|
img.style.transform = 'scale(1)';
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<?php $__env->stopPush(); ?>
|
|
<?php echo $__env->renderComponent(); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
|
|
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
|
|
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
|
|
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
|
|
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
|
|
<?php endif; ?><?php /**PATH /home/u806112658/domains/earrinasia.com/ilycats/resources/views/pages/cats/pedigree.blade.php ENDPATH**/ ?>
|