@extends(Auth::check() ? (auth()->user()->role === 'admin' ? 'layouts.app' : 'layouts.montir') : 'layouts.app')

@section('title', 'Panduan Penggunaan Alat')

@section('content')
<div class="max-w-5xl mx-auto px-4 py-12">
    <!-- Header Section -->
    <div class="text-center mb-16">
        <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
            Panduan Penggunaan Alat
        </h1>
        <p class="mt-4 text-xl text-gray-600 max-w-2xl mx-auto">
            Tata cara operasional standar untuk setiap alat inspeksi di <span class="text-amber-600 font-semibold">MerapiSpector</span>.
        </p>
        <div class="mt-6 flex justify-center">
            <div class="h-1.5 w-20 bg-amber-500 rounded-full"></div>
        </div>
    </div>

    <!-- Intro Card -->
    <div class="bg-gradient-to-br from-amber-500 to-orange-600 rounded-3xl p-8 mb-16 text-white shadow-xl relative overflow-hidden">
        <div class="relative z-10 flex flex-col md:flex-row items-center gap-8">
            <div class="bg-white/20 p-6 rounded-2xl backdrop-blur-md">
                <i class="fas fa-microchip text-5xl"></i>
            </div>
            <div>
                <h3 class="text-2xl font-bold mb-2">Penting untuk Diketahui</h3>
                <p class="text-amber-50 leading-relaxed text-lg">
                    Keakuratan data inspeksi sangat bergantung pada penggunaan alat yang benar. Pastikan Anda mengenali tipe kendaraan dan melakukan kalibrasi sebelum memulai pengecekan.
                </p>
            </div>
        </div>
        <!-- Decorative background elements -->
        <div class="absolute -top-12 -right-12 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
    </div>

    <!-- Grid Layout for Tools -->
    <div class="space-y-16">
        
        <!-- 1. Paint Thickness -->
        <div class="flex flex-col lg:flex-row gap-12 items-start">
            <div class="w-full lg:w-1/3">
                <div class="sticky top-24">
                    <span class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-bold bg-amber-100 text-amber-800 mb-4">
                        ALAT 01
                    </span>
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Paint Thickness</h2>
                    <p class="text-gray-600 leading-relaxed">
                        Mengukur ketebalan lapisan cat di atas permukaan logam untuk mendeteksi bekas perbaikan body atau cat ulang.
                    </p>
                </div>
            </div>
            <div class="w-full lg:w-2/3 bg-white border border-gray-100 rounded-3xl shadow-sm p-8 hover:shadow-md transition-shadow">
                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h4 class="flex items-center text-lg font-bold text-gray-800 mb-4">
                            <i class="fas fa-ruler-combined text-amber-500 mr-2"></i> Kriteria Standar
                        </h4>
                        <ul class="space-y-3">
                            <li class="flex items-center text-gray-600 bg-gray-50 p-3 rounded-xl border border-gray-100">
                                <span class="w-2 h-2 bg-amber-400 rounded-full mr-3"></span>
                                70 - 160 mikron (Umum)
                            </li>
                            <li class="flex items-center text-gray-600 bg-gray-50 p-3 rounded-xl border border-gray-100">
                                <span class="w-2 h-2 bg-amber-400 rounded-full mr-3"></span>
                                90 - 100 mikron
                            </li>
                            <li class="flex items-center text-gray-600 bg-gray-50 p-3 rounded-xl border border-gray-100">
                                <span class="w-2 h-2 bg-amber-400 rounded-full mr-3"></span>
                                120 - 170 mikron
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="flex items-center text-lg font-bold text-gray-800 mb-4">
                            <i class="fas fa-play-circle text-amber-500 mr-2"></i> Operasional
                        </h4>
                        <ol class="space-y-3 text-gray-600 py-1">
                            <li class="pl-2 border-l-2 border-amber-200">Kalibrasi alat sebelum digunakan.</li>
                            <li class="pl-2 border-l-2 border-amber-200">Tempelkan sejajar sampai bunyi "BIP".</li>
                            <li class="pl-2 border-l-2 border-amber-200">Cek seluruh bagian panel body secara melingkar.</li>
                        </ol>
                    </div>
                </div>
                <!-- Mini Calibration Guide -->
                <div class="mt-10 bg-gray-900 rounded-2xl p-6 text-gray-300">
                    <h5 class="text-white font-bold mb-4 flex items-center">
                        <i class="fas fa-wrench mr-2 text-amber-400"></i> Cara Kalibrasi
                    </h5>
                    <div class="space-y-3 text-sm leading-relaxed">
                        <p><span class="text-amber-400 font-mono">STEP 1:</span> Tekan Power + Gauge Atas hingga muncul <span class="text-white font-mono">CAL</span>.</p>
                        <p><span class="text-amber-400 font-mono">STEP 2:</span> Letakkan pada plat kosong (0.00mm), lalu akan muncul 0.05mm.</p>
                        <p><span class="text-amber-400 font-mono">STEP 3:</span> Gunakan mikron fiber 0.05mm, ulangi hingga mencapai 2.00mm.</p>
                    </div>
                </div>
            </div>
        </div>

        <hr class="border-gray-100">

        <!-- 2. Battery Tester -->
        <div class="flex flex-col lg:flex-row gap-12 items-start">
            <div class="w-full lg:w-1/3">
                <div class="sticky top-24">
                    <span class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-bold bg-amber-100 text-amber-800 mb-4">
                        ALAT 02
                    </span>
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">Battery Tester</h2>
                    <p class="text-gray-600 leading-relaxed">
                        Mengevaluasi tegangan (voltage) dan kesehatan (health) sel aki kendaraan.
                    </p>
                </div>
            </div>
            <div class="w-full lg:w-2/3 bg-white border border-gray-100 rounded-3xl shadow-sm p-8">
                <div class="space-y-6">
                    <div class="flex gap-4">
                        <div class="h-10 w-10 flex-shrink-0 bg-amber-50 rounded-lg flex items-center justify-center text-amber-600 font-bold">1</div>
                        <p class="text-gray-700 pt-2 font-medium">Sambungkan <span class="bg-red-50 text-red-600 px-2 py-0.5 rounded">Merah(+)</span> ke positif dan <span class="bg-gray-100 text-gray-700 px-2 py-0.5 rounded">Hitam(-)</span> ke negatif.</p>
                    </div>
                    <div class="flex gap-4">
                        <div class="h-10 w-10 flex-shrink-0 bg-amber-50 rounded-lg flex items-center justify-center text-amber-600 font-bold">2</div>
                        <p class="text-gray-700 pt-2 font-medium">Pilih konfigurasi baterai <span class="text-amber-600 font-bold">Flooded Battery</span>.</p>
                    </div>
                    <div class="flex gap-4">
                        <div class="h-10 w-10 flex-shrink-0 bg-amber-50 rounded-lg flex items-center justify-center text-amber-600 font-bold">3</div>
                        <p class="text-gray-700 pt-2 font-medium">Input rating kapasitas (contoh: <span class="text-amber-600 font-bold">530Amp</span>) lalu tekan OK.</p>
                    </div>
                </div>
            </div>
        </div>

        <hr class="border-gray-100">

        <!-- 3. OBD Scanner -->
        <div class="flex flex-col lg:flex-row gap-12 items-start text-left">
            <div class="w-full lg:w-1/3">
                <div class="sticky top-24">
                    <span class="inline-flex items-center px-4 py-1.5 rounded-full text-sm font-bold bg-amber-100 text-amber-800 mb-4">
                        ALAT 03
                    </span>
                    <h2 class="text-3xl font-bold text-gray-900 mb-4">OBD Scanner</h2>
                    <p class="text-gray-600 leading-relaxed">
                        Interface digital untuk membaca data dari ECU dan mendeteksi kode kesalahan sistem (DTC).
                    </p>
                </div>
            </div>
            <div class="w-full lg:w-2/3 bg-gray-50 border border-gray-100 rounded-3xl p-8 relative overflow-hidden">
                <div class="relative z-10 grid md:grid-cols-2 gap-8">
                    <div class="space-y-4">
                        <div class="flex items-center text-amber-700 font-bold">
                            <i class="fas fa-plug mr-2"></i> Langkah Persiapan
                        </div>
                        <p class="text-sm text-gray-600 italic">Pasang alat ke port OBD, nyalakan kontak ke posisi ON, lalu pilih merk kendaraan.</p>
                    </div>
                    <div class="space-y-4">
                        <div class="flex items-center text-amber-700 font-bold">
                            <i class="fas fa-search-plus mr-2"></i> Diagnosa
                        </div>
                        <p class="text-sm text-gray-600 italic">Tunggu loading. Hasil "No Fault Code" menandakan sistem normal. Jika ada kode (P-code), catat untuk laporan.</p>
                    </div>
                </div>
                <div class="absolute -bottom-10 -right-10 text-gray-100 opacity-50 transform rotate-12">
                    <i class="fas fa-barcode text-9xl"></i>
                </div>
            </div>
        </div>

        <hr class="border-gray-100">

        <!-- 4. AC & Others -->
        <div class="grid md:grid-cols-2 gap-8">
            <!-- AC -->
            <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm">
                <h3 class="text-2xl font-bold mb-6 text-gray-900 flex items-center">
                    <i class="fas fa-snowflake text-amber-500 mr-3"></i> AC Thermometer
                </h3>
                <div class="space-y-6">
                    <div class="bg-gray-50 p-4 rounded-2xl">
                        <p class="text-sm text-gray-500 mb-1 uppercase tracking-wider font-bold">Target Suhu</p>
                        <p class="text-3xl font-extrabold text-gray-900">12°C - 14°C</p>
                    </div>
                    <p class="text-gray-600 text-sm">Pasang pada kisi-kisi AC, jalankan mesin di posisi paling dingin. Suhu di atas 18°C mengindikasikan kurangnya freon.</p>
                </div>
            </div>

            <!-- Stethoscope -->
            <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm">
                <h3 class="text-2xl font-bold mb-6 text-gray-900 flex items-center">
                    <i class="fas fa-stethoscope text-amber-500 mr-3"></i> Stetoskop Mesin
                </h3>
                <div class="space-y-4">
                    <div class="flex items-start gap-4 p-4 rounded-2xl border border-dashed border-amber-200">
                        <i class="fas fa-volume-up text-amber-500 mt-1"></i>
                        <p class="text-sm text-gray-600">Arahkan pada <span class="font-bold">Cover Mesin</span>, <span class="font-bold">Mounting</span>, dan <span class="font-bold">Pulley Stator</span> untuk deteksi suara desingan abnormal.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Documents (UV) -->
        <div class="bg-indigo-900 rounded-3xl p-10 text-white relative overflow-hidden">
            <div class="relative z-10">
                <h3 class="text-3xl font-extrabold mb-6 flex items-center">
                    <i class="fas fa-lightbulb text-indigo-300 mr-4"></i> Senter UV & Dokumen
                </h3>
                <div class="flex flex-col md:flex-row gap-8 items-center">
                    <div class="flex-1 space-y-4">
                        <p class="text-indigo-100 text-lg leading-relaxed">
                            Verifikasi keaslian surat berharga (<span class="text-white font-bold">STNK & BPKB</span>) menggunakan pancaran sinar UV untuk memunculkan watermarking/logo air tersembunyi.
                        </p>
                        <div class="inline-block px-4 py-2 bg-white/10 rounded-xl text-sm font-medium">
                            <i class="fas fa-shield-alt mr-2"></i> Standard Keaslian Dokumen
                        </div>
                    </div>
                </div>
            </div>
            <!-- Decorative wave -->
            <div class="absolute top-0 right-0 p-8">
                 <i class="fas fa-id-card text-white/5 text-[120px] transform -rotate-12"></i>
            </div>
        </div>

    </div>

    <!-- Back Button -->
    <div class="mt-20 text-center">
        <a href="{{ Auth::check() ? route('dashboard') : route('login') }}" class="inline-flex items-center gap-2 px-8 py-4 bg-gray-900 text-white font-bold rounded-2xl hover:bg-gray-800 transition transform hover:scale-105">
            <i class="fas fa-arrow-left"></i>
            Kembali ke {{ Auth::check() ? 'Dashboard' : 'Login' }}
        </a>
    </div>
</div>

<style>
    /* Custom spacing and typography improvements */
    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
</style>
@endsection