<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- WhatsApp / Open Graph Tags (IMPORTANT FOR IMAGE PREVIEW) -->
    <title>Tiket Servis #SVR-<?php echo e($jasa->id); ?> - <?php echo e($jasa->merek_printer); ?></title>
    <meta property="og:title" content="TIKET SERVIS #SVR-<?php echo e($jasa->id); ?> (<?php echo e($jasa->merek_printer); ?>)">
    <meta property="og:description" content="Status: <?php echo e(strtoupper($jasa->status)); ?> | Keluhan: <?php echo e($jasa->kategori_keluhan); ?>. Klik untuk melihat foto kondisi printer.">
    <meta property="og:url" content="<?php echo e(request()->fullUrl()); ?>">
    <meta property="og:type" content="website">
    
    <?php if($jasa->foto_video_kondisi): ?>
        <meta property="og:image" content="<?php echo e(asset('storage/service/'.$jasa->foto_video_kondisi)); ?>">
        <meta property="og:image:secure_url" content="<?php echo e(asset('storage/service/'.$jasa->foto_video_kondisi)); ?>">
        <meta property="og:image:type" content="image/jpeg">
        <meta property="og:image:width" content="1200">
        <meta property="og:image:height" content="630">
    <?php endif; ?>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; background: #0f172a; color: white; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        .preview-card { background: white; border-radius: 30px; overflow: hidden; max-width: 500px; width: 90%; box-shadow: 0 50px 100px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
        .media-container { width: 100%; height: 400px; background: #f1f5f9; position: relative; }
        .media-container img { width: 100%; height: 100%; object-fit: contain; }
        .content { color: #0f172a; padding: 30px; }
        .badge-status { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border-radius: 10px; background: #dcfce7; color: #15803d; }
        h1 { font-size: 1.5rem; font-weight: 800; margin: 15px 0 5px; }
        .meta { color: #64748b; font-size: 14px; margin-bottom: 20px; }
    </style>
</head>
<body>

    <div class="preview-card">
        <div class="media-container">
            <?php if($jasa->foto_video_kondisi): ?>
                <?php $ext = pathinfo($jasa->foto_video_kondisi, PATHINFO_EXTENSION); ?>
                <?php if(in_array($ext, ['mp4', 'mov', 'webm'])): ?>
                    <video src="<?php echo e(asset('storage/service/'.$jasa->foto_video_kondisi)); ?>" controls class="w-100 h-100"></video>
                <?php else: ?>
                    <img src="<?php echo e(asset('storage/service/'.$jasa->foto_video_kondisi)); ?>" alt="Preview">
                <?php endif; ?>
            <?php else: ?>
                <div class="d-flex align-items-center justify-content-center h-100 text-muted">
                    Tidak ada lampiran media
                </div>
            <?php endif; ?>
        </div>
        <div class="content">
            <span class="badge-status">#SVR-<?php echo e($jasa->id); ?></span>
            <h1><?php echo e($jasa->merek_printer); ?> - <?php echo e($jasa->tipe_printer); ?></h1>
            <p class="meta">Dikirim oleh: <strong><?php echo e($jasa->user->name ?? 'User'); ?></strong></p>
            
            <hr>
            <div class="small fw-bold text-muted mb-1">KENDALA:</div>
            <div class="text-dark fw-bold mb-3"><?php echo e($jasa->kategori_keluhan); ?></div>
            
            <div class="small fw-bold text-muted mb-1">DETAIL KELUHAN:</div>
            <div class="text-muted mb-4"><?php echo e($jasa->deskripsi_masalah); ?></div>

            <a href="https://wa.me/<?php echo e(\App\Models\Setting::set('shop_wa')); ?>" class="btn btn-dark w-100 rounded-pill py-3 fw-bold">
                Hubungi Pengirim
            </a>
        </div>
    </div>

</body>
</html>
<?php /**PATH C:\laragon\www\jasa_printer\resources\views/jasa/preview.blade.php ENDPATH**/ ?>