@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mx-1">
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto pb-0">
                                <h5 class="mb-0">{{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                @include('components.alert')
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        
                        <div class="card-body px-4 pt-2 pb-4">
                           @php
                                $roles = $users_rules ?? [];
                                $isSuperAdmin = in_array('admins', $roles);
                                $isAdminOrMarketing = $isSuperAdmin || in_array('admmrk', $roles);
                                $isStaffLab = $isSuperAdmin || in_array('stflab', $roles);
                            @endphp

                            {{-- ── Kategori Video Panduan ── --}}
                            <div class="row mb-4">
                                <div class="col-12">
                                    <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-3 ms-2 letter-spacing-1">Tutorial Video</h6>
                                </div>
                                
                                @if($isAdminOrMarketing)
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card card-minimal border h-100" onclick="openMediaModal('Video: Alur Kerja Sample', 'https://drive.google.com/file/d/18jwO-fG4twB4P3ElGS-Yl68BCT4EPPdH/preview')">
                                        <div class="card-body p-4">
                                            <div class="d-flex justify-content-between align-items-start mb-4">
                                                <div class="icon-box bg-primary-soft text-primary">
                                                    <i class="fas fa-play text-lg"></i>
                                                </div>
                                                <span class="badge-role border border-primary text-primary">Admin</span>
                                            </div>
                                            <h5 class="text-dark font-weight-bold mb-2">Video Panduan Fitur</h5>
                                            <p class="text-sm text-secondary mb-0 line-clamp-3">Panduan lengkap pembuatan sample, approval marketing, dan pemantauan status produksi.</p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                @if($isStaffLab)
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card card-minimal border h-100" onclick="openMediaModal('Video: Panduan Fitur Baru', 'https://drive.google.com/file/d/1UHNfp46U5v6CdzHJSdhXBKSSpAAzT2fE/preview')">
                                        <div class="card-body p-4">
                                            <div class="d-flex justify-content-between align-items-start mb-4">
                                                <div class="icon-box bg-primary-soft text-primary">
                                                    <i class="fas fa-play text-lg"></i>
                                                </div>
                                                <span class="badge-role border border-primary text-primary">Staff Lab</span>
                                            </div>
                                            <h5 class="text-dark font-weight-bold mb-2">Video Panduan Fitur</h5>
                                            <p class="text-sm text-secondary mb-0 line-clamp-3">Panduan lengkap penggunaan fitur generate pps dan pss berupa video tutorial.</p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                @if(!$isAdminOrMarketing && !$isStaffLab)
                                <div class="col-12">
                                    <div class="text-center py-5 bg-white border-radius-xl shadow-sm">
                                        <i class="fas fa-lock text-secondary opacity-4 fa-2x mb-3"></i>
                                        <h6 class="text-dark font-weight-bold">Akses Terbatas</h6>
                                        <p class="text-sm text-secondary mb-0">Video panduan belum tersedia untuk role Anda.</p>
                                    </div>
                                </div>
                                @endif
                            </div>

                            {{-- ── Kategori Dokumen SOP ── --}}
                            <div class="row mt-2">
                                <div class="col-12">
                                    <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-3 ms-2 letter-spacing-1">Dokumen Instruksi Kerja</h6>
                                </div>

                                @if($isAdminOrMarketing)
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card card-minimal border h-100" onclick="openMediaModal('Dokumen Instruksi Kerja: Admin ', 'https://drive.google.com/file/d/1MKr8KxdHC92npU248sgrlnRYey_O-LWI/preview')">
                                        <div class="card-body p-4">
                                            <div class="d-flex justify-content-between align-items-start mb-4">
                                                <div class="icon-box bg-primary-soft text-primary">
                                                    <i class="fas fa-file-pdf text-lg"></i>
                                                </div>
                                                <span class="badge-role border border-primary text-primary">Admin</span>
                                            </div>
                                            <h5 class="text-dark font-weight-bold mb-2">Instruksi Kerja Fitur Baru</h5>
                                            <p class="text-sm text-secondary mb-0 line-clamp-3">Dokumen referensi tertulis terkait fitur feedback customer, resend gmail, dan report.</p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                @if($isStaffLab)
                                <div class="col-md-6 col-lg-4 mb-4">
                                    <div class="card card-minimal border h-100" onclick="openMediaModal('Dokumen: SOP Staff Laboratorium', 'https://drive.google.com/file/d/1dhmkL4I3ltJhBNw0LwvA2Mn8P8Ht6VUh/preview')">
                                        <div class="card-body p-4">
                                            <div class="d-flex justify-content-between align-items-start mb-4">
                                                <div class="icon-box bg-primary-soft text-primary">
                                                    <i class="fas fa-file-alt text-lg"></i>
                                                </div>
                                                <span class="badge-role border border-primary text-primary">Staff Lab</span>
                                            </div>
                                            <h5 class="text-dark font-weight-bold mb-2">Instruksi Kerja Fitur Baru</h5>
                                            <p class="text-sm text-secondary mb-0 line-clamp-3">Instruksi Kerja Fitur Generate PPS Non ps/with ps, Generate PSS, Print PDF.</p>
                                        </div>
                                    </div>
                                </div>
                                @endif

                                @if(!$isAdminOrMarketing && !$isStaffLab)
                                <div class="col-12">
                                    <div class="text-center py-5 bg-white border-radius-xl shadow-sm">
                                        <i class="fas fa-lock text-secondary opacity-4 fa-2x mb-3"></i>
                                        <h6 class="text-dark font-weight-bold">Akses Terbatas</h6>
                                        <p class="text-sm text-secondary mb-0">Dokumen SOP belum tersedia untuk role Anda.</p>
                                    </div>
                                </div>
                                @endif
                            </div>

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

    {{-- Modal Media Universal --}}
    <div class="modal fade" id="mediaModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content border-0 modal-sleek">
                <div class="modal-header bg-white border-bottom-0 py-3 px-4">
                    <h5 class="modal-title text-dark font-weight-bolder mb-0" id="mediaModalLabel">Panduan</h5>
                    <div class="btn-close-custom" data-bs-dismiss="modal">
                        <i class="fas fa-times"></i>
                    </div>
                </div>
                <div class="modal-body p-0 bg-light">
                    <div class="ratio ratio-16x9">
                        <iframe id="mediaIframe" src="" allowfullscreen allow="autoplay" class="border-0"></iframe>
                    </div>
                </div>
                <div class="modal-footer bg-white border-top-0 py-3 px-4">
                    <p class="text-muted text-xs mb-0">
                        <i class="fas fa-info-circle me-1"></i> Pastikan Anda telah login ke akun Google untuk melihat file yang dibagikan secara internal.
                    </p>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Modern Minimalist CSS */
        .bg-gray-50 { background-color: #f8f9fa !important; }
        .letter-spacing-1 { letter-spacing: 1px; }
        
        .card-minimal {
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 10px 15px rgba(0, 0, 0, 0.03);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            background: #ffffff;
        }
        
        .card-minimal:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 20px 25px rgba(0, 0, 0, 0.03);
        }

        .icon-box {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .card-minimal:hover .icon-box {
            transform: scale(1.1);
        }

        .badge-role {
            font-size: 0.65rem;
            padding: 4px 10px;
            border-radius: 50rem;
            font-weight: 700;
            text-transform: uppercase;
            background: transparent;
        }

        /* Soft Backgrounds */
        .bg-primary-soft { background-color: rgba(94, 114, 228, 0.1); }
        .bg-info-soft { background-color: rgba(17, 205, 239, 0.1); }
        .bg-success-soft { background-color: rgba(45, 206, 137, 0.1); }
        .bg-warning-soft { background-color: rgba(251, 99, 64, 0.1); }

        .line-clamp-3 {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;  
            overflow: hidden;
        }

        /* Sleek Modal */
        .modal-sleek {
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        .btn-close-custom {
            width: 32px;
            height: 32px;
            background: #f1f5f9;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #64748b;
            transition: all 0.2s;
        }
        .btn-close-custom:hover {
            background: #e2e8f0;
            color: #0f172a;
        }
    </style>
@endsection

@push('js')
<script>
    function openMediaModal(title, link) {
        $('#mediaModalLabel').text(title);
        $('#mediaIframe').attr('src', link);
        var myModal = new bootstrap.Modal(document.getElementById('mediaModal'));
        myModal.show();
    }

    // Stop media (audio/video) when modal closed
    $('#mediaModal').on('hidden.bs.modal', function () {
        $('#mediaIframe').attr('src', '');
    });
</script>
@endpush