@extends('layouts.user')

@section('title', 'SOP & Alur Kerja - CV. Amelia Langgeng Jaya')

@section('content')
<div class="bg-white pb-20">
    {{-- Header --}}
    <div class="bg-[#001040] pt-28 pb-36">
        <div class="container mx-auto px-6 text-center">
            <h6 class="text-[#ff6b2b] text-[10px] font-extrabold uppercase tracking-[0.4em] mb-4" data-aos="fade-up">
                Standard Operating Procedure
            </h6>
            <h1 class="text-3xl md:text-5xl font-extrabold text-white mb-6" data-aos="fade-up" data-aos-delay="100">
                SOP & Alur Kerja <span class="text-[#ff6b2b]">Perusahaan</span>
            </h1>
            <div class="w-16 h-1 bg-[#ff6b2b] mx-auto mb-6" data-aos="fade-up" data-aos-delay="150"></div>
            <p class="text-white/70 max-w-2xl mx-auto text-sm md:text-base leading-relaxed" data-aos="fade-up" data-aos-delay="200">
                Dokumentasi sistematis mengenai alur kerja dan prosedur operasional (BPMN).
            </p>
        </div>
    </div>

    <div class="container mx-auto px-6 -mt-24">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            {{-- Sidebar --}}
            <div class="lg:col-span-1 space-y-6">
                <div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100" data-aos="fade-right">
                    <h3 class="text-lg font-bold text-[#001040] mb-5 flex items-center gap-2">
                        <i class="fa-solid fa-diagram-project text-[#ff6b2b]"></i> Fungsi Prosedur
                    </h3>
                    <div class="space-y-4 text-[11px] text-slate-600">
                        <div class="flex gap-4 border-b border-slate-50 pb-4">
                            <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center text-[#ff6b2b] font-bold">01</div>
                            <p>Menstandarisasi kualitas pengerjaan dan pengadaan barang.</p>
                        </div>
                        <div class="flex gap-4 border-b border-slate-50 pb-4">
                            <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center text-[#ff6b2b] font-bold">02</div>
                            <p>Memperjelas tanggung jawab antar divisi.</p>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 rounded-lg bg-slate-50 flex items-center justify-center text-[#ff6b2b] font-bold">03</div>
                            <p>Alat kontrol manajemen untuk memastikan safety proyek.</p>
                        </div>
                    </div>
                </div>

                <div class="px-4 py-3 bg-blue-50 rounded-xl border-l-4 border-blue-500">
                    <span class="text-[10px] font-bold text-blue-900 uppercase flex items-center gap-2">
                        <i class="fa-solid fa-shield-halved text-blue-600"></i> Informasi Terproteksi
                    </span>
                    <p class="text-[9px] text-blue-700 mt-1">Hanya dapat diakses melalui portal resmi CV. ALJ.</p>
                </div>
            </div>

            {{-- PDF Link Card --}}
            <div class="lg:col-span-2">
                <div class="bg-white p-8 rounded-2xl shadow-xl border border-slate-100 flex flex-col md:flex-row items-center gap-8" data-aos="fade-left">
                    <div class="w-24 h-32 bg-slate-50 rounded-xl border border-slate-200 flex flex-col items-center justify-center">
                        <i class="fa-solid fa-file-pdf text-4xl text-red-500 mb-2"></i>
                        <span class="text-[9px] font-extrabold text-slate-400 uppercase">SOP View</span>
                    </div>

                    <div class="flex-1 text-center md:text-left">
                        <h4 class="text-lg font-bold text-slate-800 mb-2">Buka Alur Kerja (BPMN)</h4>
                        <p class="text-xs text-slate-500 mb-6">Dokumen akan terbuka di jendela baru dengan proteksi toolbar.</p>
                        
                        {{-- Atribut title ditambahkan untuk membantu override nama di tab --}}
                        <a href="{{ asset('images/Model Bisnis CV Amelia Langgeng Jaya.pdf') }}#toolbar=0" 
                           target="_blank" 
                           title="SOP & Alur Kerja CV Amelia Langgeng Jaya"
                           class="inline-flex items-center gap-3 px-8 py-3 bg-slate-900 text-white rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-[#ff6b2b] transition-all">
                            <i class="fa-solid fa-arrow-up-right-from-square"></i>
                            Tampilkan Dokumen
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('contextmenu', event => event.preventDefault());
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && (e.key === 'p' || e.key === 's' || e.key === 'u' || e.key === 'd')) {
            e.preventDefault();
        }
    });
</script>
@endsection