@extends('layouts.app')
@section('ibams', true)

@section('hide_footer', true)
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="sidebar" style="position: unset; all: unset; display: block;">
    <div style="all: unset; display: block;">
        @include('layouts.auditTrail')
    </div>
</div>

<div class="container-fluid p-0" style="background: #F4FFFF; min-height: 100vh;">
    <div class="d-flex align-items-center justify-content-between" style= "height: 90px; padding: 0 40px 0 0;"></div>
    <div class="container" style="max-width: 1400px; margin-top: 32px;padding-left: 4rem">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb" style="background: none; padding: 0; margin-bottom: 0; font-size: 14px;">
                    <li class="breadcrumb-item"><i class="fa fa-home"></i></li>
                    <li class="breadcrumb-item">Senarai Permohonan</li>
                    <li class="breadcrumb-item">Permohonan 2024</li>
                    <li class="breadcrumb-item">Muat Naik Dokumen Dan Fail</li>
                </ol>
            </nav>
            <div class="d-flex align-items-center" style="gap: 8px;">
                @include('layouts.date-clock')
            </div>
        </div>
        <h2 style="font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.2rem; margin-bottom: 0.5rem;">Muat Naik Dokumen Dan Fail</h2>
        <hr style="margin-top: 0; margin-bottom: 32px; border-color: #D9D9D9;">
        <!-- Stepper -->
        <div class="d-flex align-items-center justify-content-center mb-4" style="gap: 32px;">
            <div class="d-flex align-items-center" style="gap: 32px;">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #1B6B7A; color: #fff; font-size: 1.5rem; font-weight: 600; border: 4px solid #0AD1C8;">1</div>
                <div style="height: 4px; width: 150px; background: #1B6B7A;"></div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #1B6B7A; color: #fff; font-size: 1.5rem; font-weight: 600; border: 4px solid #0AD1C8;">2</div>
                <div style="height: 4px; width: 150px; background: #1B6B7A;"></div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #1B6B7A; color: #fff; font-size: 1.5rem; font-weight: 600; border: 4px solid #0AD1C8;">3</div>
                <div style="height: 4px; width: 150px; background: #1B6B7A;"></div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #1B6B7A; color: #fff; font-size: 1.5rem; font-weight: 600; border: 4px solid #0AD1C8;">4</div>
                <div style="position: relative; height: 4px; width: 150px; background: #D9D9D9; border-radius: 2px; overflow: hidden;">
                    <div style="position: absolute; left: 0; top: 0; height: 100%; width: 50%; background: #1B6B7A;"></div>
                </div>
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px; background: #D9D9D9; color: #B0B0B0; font-size: 1.5rem; font-weight: 600;">5</div>
            </div>
        </div>

        <!-- Form for Step 4 -->
        <!-- Fields visible, no form tag or @csrf -->
        <div class="bg-white muat-naik-box">
            <span class="muat-naik-desc">Untuk diberikan kepada E-Penilaian</span>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <span>1. Pelan Kelulusan</span>
                </div>
                <div class="col-md-6 text-end">
<div class="muat-naik-container d-flex align-items-center justify-content-center mx-auto" style="position:relative; width:397px; height:58px;">
    <label class="btn muat-naik-btn d-flex align-items-center" style="gap: 8px; margin-bottom: 0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
        <i class="fa fa-upload"></i> Muat Naik
        <input type="file" name="pelan_kelulusan" class="d-none upload-input" required>
    </label>
    <div class="upload-preview" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer;" onclick="openDocumentViewer(this)">
        <div class="upload-box" style="border:1.5px solid #D9D9D9; border-radius:8px; background:#fff; display:flex; align-items:center; padding:8px 16px; gap:16px; position:relative; width:100%; min-width:340px; max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden;">
            <div class="upload-info" style="flex:1; display:flex; flex-direction:column; gap:0; justify-content:center;">
<div class="upload-filename" style="color:#16707A; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
    <img src="{{ asset('images/icon/Icon.svg') }}" alt="" style="width:18.97px; height:24.39px; flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:8px;" />
                    <span class="filename-text" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;">PelanKelulusan.pdf</span>
                    <span class="percent-text" style="color:#888; font-size:14px; font-weight:400; margin-left:2px;">(0%)</span>
                </div>
                <div class="upload-progress-bar-bg" style="background:#E6F2F2; border-radius:4px; height:7px; width:100%; margin-top:8px;">
                    <div class="upload-progress-bar" style="background:#14919B; height:7px; border-radius:4px; width:0%; transition:width 0.3s;"></div>
                </div>
            </div>
            <div class="upload-status" style="color:#E74C3C; font-size:15px; font-weight:500; margin-left:8px; min-width:60px; text-align:right; cursor:pointer; user-select:none;">Batal</div>
            <button type="button" class="upload-cancel-btn" style="background:none; border:none; color:#E74C3C; font-size:28px; margin-left:12px; cursor:pointer; line-height:1;">&times;</button>
        </div>
    </div>
</div>
</style>
<script>
// --- Upload Animation for Pelan Kelulusan ---
document.addEventListener('DOMContentLoaded', function() {
    const uploadInput = document.querySelector('.upload-input');
    const preview = document.querySelector('.upload-preview');
    const filenameText = preview.querySelector('.filename-text');
    const percentText = preview.querySelector('.percent-text');
    const progressBar = preview.querySelector('.upload-progress-bar');
    const cancelBtn = preview.querySelector('.upload-cancel-btn');
    const statusText = preview.querySelector('.upload-status');
    let uploadInterval = null;
    let percent = 0;

    uploadInput.addEventListener('change', function(e) {
        if (!e.target.files.length) return;
        const file = e.target.files[0];
        filenameText.textContent = file.name;
        percent = 0;
        percentText.textContent = '(0%)';
        progressBar.style.width = '0%';
        preview.style.display = 'flex';
        statusText.textContent = 'Batal';
        statusText.style.display = '';
        statusText.style.color = '#E74C3C';
        statusText.style.cursor = 'pointer';
        statusText.onclick = function() {
            if (uploadInterval) clearInterval(uploadInterval);
            preview.style.display = 'none';
            uploadInput.value = '';
        };
        // Animate upload
        if (uploadInterval) clearInterval(uploadInterval);
        uploadInterval = setInterval(() => {
            percent += Math.floor(Math.random() * 10) + 5;
            if (percent >= 100) {
                percent = 100;
                clearInterval(uploadInterval);
                statusText.textContent = 'Selesai';
                statusText.style.color = '#14919B';
                statusText.style.cursor = 'default';
                statusText.onclick = null;
                showUploadSuccessModal();
            }
            percentText.textContent = `(${percent}%)`;
            progressBar.style.width = percent + '%';
        }, 200);
    });
    cancelBtn.addEventListener('click', function() {
        if (uploadInterval) clearInterval(uploadInterval);
        preview.style.display = 'none';
        uploadInput.value = '';
    });
});
</script>

                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <span>2. Borang F/F1</span>
                </div>
                <div class="col-md-6 text-end">
<div class="muat-naik-container d-flex align-items-center justify-content-center mx-auto" style="position:relative; width:397px; height:58px;">
    <label class="btn muat-naik-btn d-flex align-items-center" style="gap: 8px; margin-bottom: 0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
        <i class="fa fa-upload"></i> Muat Naik
        <input type="file" name="borang_ff1" class="d-none upload-input" required>
    </label>
    <div class="upload-preview" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer;" onclick="openDocumentViewer(this)">
        <div class="upload-box" style="border:1.5px solid #D9D9D9; border-radius:8px; background:#fff; display:flex; align-items:center; padding:8px 16px; gap:16px; position:relative; width:100%; min-width:340px; max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden;">
            <div class="upload-info" style="flex:1; display:flex; flex-direction:column; gap:0; justify-content:center;">
                <div class="upload-filename" style="color:#16707A; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<img src="{{ asset('images/icon/Icon.svg') }}" alt="" style="width:18.97px; height:24.39px; flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:8px;" />
<span class="filename-text" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;"></span>
                    <span class="percent-text" style="color:#888; font-size:14px; font-weight:400; margin-left:2px;">(0%)</span>
                </div>
                <div class="upload-progress-bar-bg" style="background:#E6F2F2; border-radius:4px; height:7px; width:100%; margin-top:8px;">
                    <div class="upload-progress-bar" style="background:#14919B; height:7px; border-radius:4px; width:0%; transition:width 0.3s;"></div>
                </div>
            </div>
            <div class="upload-status" style="color:#E74C3C; font-size:15px; font-weight:500; margin-left:8px; min-width:60px; text-align:right; cursor:pointer; user-select:none;">Batal</div>
            <button type="button" class="upload-cancel-btn" style="background:none; border:none; color:#E74C3C; font-size:28px; margin-left:12px; cursor:pointer; line-height:1;">&times;</button>
        </div>
    </div>
</div>
</style>
<script>
(function() {
    const container = document.currentScript.previousElementSibling;
    const uploadInput = container.querySelector('input[type="file"]');
    const preview = container.querySelector('.upload-preview');
    const filenameText = preview.querySelector('.filename-text');
    const percentText = preview.querySelector('.percent-text');
    const progressBar = preview.querySelector('.upload-progress-bar');
    const statusText = preview.querySelector('.upload-status');
    const cancelBtn = preview.querySelector('.upload-cancel-btn');
    let uploadInterval = null;
    let percent = 0;
    uploadInput.addEventListener('change', function(e) {
        if (!e.target.files.length) return;
        const file = e.target.files[0];
        filenameText.textContent = file.name;
        percent = 0;
        percentText.textContent = '(0%)';
        progressBar.style.width = '0%';
        preview.style.display = 'flex';
        statusText.textContent = 'Batal';
        statusText.style.display = '';
        statusText.style.color = '#E74C3C';
        statusText.style.cursor = 'pointer';
        statusText.onclick = function() {
            if (uploadInterval) clearInterval(uploadInterval);
            preview.style.display = 'none';
            uploadInput.value = '';
        };
        // Animate upload
        if (uploadInterval) clearInterval(uploadInterval);
        uploadInterval = setInterval(() => {
            percent += Math.floor(Math.random() * 10) + 5;
            if (percent >= 100) {
                percent = 100;
                clearInterval(uploadInterval);
                statusText.textContent = 'Selesai';
                statusText.style.color = '#14919B';
                statusText.style.cursor = 'default';
                statusText.onclick = null;
                showUploadSuccessModal();
            }
            percentText.textContent = `(${percent}%)`;
            progressBar.style.width = percent + '%';
        }, 200);
    });
    cancelBtn.addEventListener('click', function() {
        if (uploadInterval) clearInterval(uploadInterval);
        preview.style.display = 'none';
        uploadInput.value = '';
    });
})();
</script>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <span>3. Geran</span>
                </div>
                <div class="col-md-6 text-end">
                    <div class="muat-naik-container d-flex align-items-center justify-content-center mx-auto" style="position:relative; width:397px; height:58px;">
                        <label class="btn muat-naik-btn d-flex align-items-center" style="gap: 8px; margin-bottom: 0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
                            <i class="fa fa-upload"></i>
                            Muat Naik
                            <input type="file" name="geran" class="d-none upload-input" required>
                        </label>
                        <div class="upload-preview" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer;" onclick="openDocumentViewer(this)">
                            <div class="upload-box" style="border:1.5px solid #D9D9D9; border-radius:8px; background:#fff; display:flex; align-items:center; padding:8px 16px; gap:16px; position:relative; width:100%; min-width:340px; max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden;">
                                <div class="upload-info" style="flex:1; display:flex; flex-direction:column; gap:0; justify-content:center;">
                                    <div class="upload-filename" style="color:#16707A; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<img src="{{ asset('images/icon/Icon.svg') }}" alt="" style="width:18.97px; height:24.39px; flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:8px;" />
<span class="filename-text" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;"></span>
                                        <span class="percent-text" style="color:#888; font-size:14px; font-weight:400; margin-left:2px;">(0%)</span>
                                    </div>
                                    <div class="upload-progress-bar-bg" style="background:#E6F2F2; border-radius:4px; height:7px; width:100%; margin-top:8px;">
                                        <div class="upload-progress-bar" style="background:#14919B; height:7px; border-radius:4px; width:0%; transition:width 0.3s;"></div>
                                    </div>
                                </div>
                                <div class="upload-status" style="color:#E74C3C; font-size:15px; font-weight:500; margin-left:8px; min-width:60px; text-align:right; cursor:pointer; user-select:none;">Batal</div>
                                <button type="button" class="upload-cancel-btn" style="background:none; border:none; color:#E74C3C; font-size:28px; margin-left:12px; cursor:pointer; line-height:1;">&times;</button>
                            </div>
                        </div>
</style>
<!-- Document Viewer Modal -->
<div id="documentViewerModal" style="display:none; position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0,0,0,0.45); z-index:9999; align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:10px; width:700px; max-width:95vw; min-height:100px; max-height:90vh; display:flex; flex-direction:column; box-shadow:0 8px 32px rgba(0,0,0,0.18); position:relative;">
        <div style="background:linear-gradient(90deg, #0099C7 0%, #1BC6B4 100%); border-radius:10px 10px 0 0; padding:18px 24px; color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:20px; display:flex; align-items:center;">
            <span id="documentViewerTitle">Dokumen</span>
        </div>
        <div style="flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:32px 0;">
            <iframe id="documentViewerFrame" src="" style="width:90%; height:70vh; border:none; background:#f8f8f8;"></iframe>
        </div>
        <div style="padding:16px 0 24px 0; display:flex; justify-content:center;">
            <button onclick="closeDocumentViewer()" style="min-width:120px; height:38px; border-radius:6px; border:1.5px solid #0099C7; background:#fff; color:#0099C7; font-family:'Inter',sans-serif; font-size:15px; font-weight:500;">TUTUP</button>
        </div>
    </div>
</div>
<script>
// Document Viewer Modal Logic
function openDocumentViewer(previewEl) {
    // Find the filename from the preview
    var filename = previewEl.querySelector('.filename-text')?.textContent || 'Dokumen';
    var modal = document.getElementById('documentViewerModal');
    var title = document.getElementById('documentViewerTitle');
    var frame = document.getElementById('documentViewerFrame');
    title.textContent = filename;
    // For demo: use a sample PDF. In real use, set the src to the uploaded file's URL
    // If you have the file URL, set it here. Otherwise, use a placeholder.
    if (filename.toLowerCase().endsWith('.pdf')) {
        frame.src = '/sample-pdf/' + encodeURIComponent(filename); // Change to your actual file serving route
    } else {
        frame.src = '';
    }
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}
function closeDocumentViewer() {
    var modal = document.getElementById('documentViewerModal');
    var frame = document.getElementById('documentViewerFrame');
    modal.style.display = 'none';
    frame.src = '';
    document.body.style.overflow = '';
}
</script>
                    </div>
                    <script>
                        (function() {
                            const container = document.currentScript.previousElementSibling;
                            const uploadInput = container.querySelector('input[type="file"]');
                            const preview = container.querySelector('.upload-preview');
                            const filenameText = preview.querySelector('.filename-text');
                            const percentText = preview.querySelector('.percent-text');
                            const progressBar = preview.querySelector('.upload-progress-bar');
                            const statusText = preview.querySelector('.upload-status');
                            const cancelBtn = preview.querySelector('.upload-cancel-btn');
                            let uploadInterval = null;
                            let percent = 0;
                            uploadInput.addEventListener('change', function(e) {
                                if (!e.target.files.length) return;
                                const file = e.target.files[0];
                                filenameText.textContent = file.name;
                                percent = 0;
                                percentText.textContent = '(0%)';
                                progressBar.style.width = '0%';
                                preview.style.display = 'flex';
                                statusText.textContent = 'Batal';
                                statusText.style.display = '';
                                statusText.style.color = '#E74C3C';
                                statusText.style.cursor = 'pointer';
                                statusText.onclick = function() {
                                    if (uploadInterval) clearInterval(uploadInterval);
                                    preview.style.display = 'none';
                                    uploadInput.value = '';
                                };
                                if (uploadInterval) clearInterval(uploadInterval);
                                uploadInterval = setInterval(() => {
                                    percent += Math.floor(Math.random() * 10) + 5;
                                    if (percent >= 100) {
                                        percent = 100;
                                        clearInterval(uploadInterval);
                                        statusText.textContent = 'Selesai';
                                        statusText.style.color = '#14919B';
                                        statusText.style.cursor = 'default';
                                        statusText.onclick = null;
                                        showUploadSuccessModal();
                                    }
                                    percentText.textContent = `(${percent}%)`;
                                    progressBar.style.width = percent + '%';
                                }, 200);
                            });
                            cancelBtn.addEventListener('click', function() {
                                if (uploadInterval) clearInterval(uploadInterval);
                                preview.style.display = 'none';
                                uploadInput.value = '';
                            });
                        })();
                    </script>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <span>4. Borang A</span>
                </div>
                <div class="col-md-6 text-end">
                    <div class="muat-naik-container d-flex align-items-center justify-content-center mx-auto" style="position:relative; width:397px; height:58px;">
                        <label class="btn muat-naik-btn d-flex align-items-center" style="gap: 8px; margin-bottom: 0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
                            <i class="fa fa-upload"></i>
                            Muat Naik
                            <input type="file" name="borang_a" class="d-none upload-input" required>
                        </label>
    <div class="upload-preview" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer;" onclick="openDocumentViewer(this)">
                            <div class="upload-box" style="border:1.5px solid #D9D9D9; border-radius:8px; background:#fff; display:flex; align-items:center; padding:8px 16px; gap:16px; position:relative; width:100%; min-width:340px; max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden;">
                                <div class="upload-info" style="flex:1; display:flex; flex-direction:column; gap:0; justify-content:center;">
                                    <div class="upload-filename" style="color:#16707A; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<img src="{{ asset('images/icon/Icon.svg') }}" alt="" style="width:18.97px; height:24.39px; flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:8px;" />
<span class="filename-text" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;"></span>
                                        <span class="percent-text" style="color:#888; font-size:14px; font-weight:400; margin-left:2px;">(0%)</span>
                                    </div>
                                    <div class="upload-progress-bar-bg" style="background:#E6F2F2; border-radius:4px; height:7px; width:100%; margin-top:8px;">
                                        <div class="upload-progress-bar" style="background:#14919B; height:7px; border-radius:4px; width:0%; transition:width 0.3s;"></div>
                                    </div>
                                </div>
                                <div class="upload-status" style="color:#E74C3C; font-size:15px; font-weight:500; margin-left:8px; min-width:60px; text-align:right; cursor:pointer; user-select:none;">Batal</div>
                                <button type="button" class="upload-cancel-btn" style="background:none; border:none; color:#E74C3C; font-size:28px; margin-left:12px; cursor:pointer; line-height:1;">&times;</button>
                            </div>
                        </div>
                    </div>
                    <script>
                        (function() {
                            const container = document.currentScript.previousElementSibling;
                            const uploadInput = container.querySelector('input[type="file"]');
                            const preview = container.querySelector('.upload-preview');
                            const filenameText = preview.querySelector('.filename-text');
                            const percentText = preview.querySelector('.percent-text');
                            const progressBar = preview.querySelector('.upload-progress-bar');
                            const statusText = preview.querySelector('.upload-status');
                            const cancelBtn = preview.querySelector('.upload-cancel-btn');
                            let uploadInterval = null;
                            let percent = 0;
                            uploadInput.addEventListener('change', function(e) {
                                if (!e.target.files.length) return;
                                const file = e.target.files[0];
                                filenameText.textContent = file.name;
                                percent = 0;
                                percentText.textContent = '(0%)';
                                progressBar.style.width = '0%';
                                preview.style.display = 'flex';
                                statusText.textContent = 'Batal';
                                statusText.style.display = '';
                                statusText.style.color = '#E74C3C';
                                statusText.style.cursor = 'pointer';
                                statusText.onclick = function() {
                                    if (uploadInterval) clearInterval(uploadInterval);
                                    preview.style.display = 'none';
                                    uploadInput.value = '';
                                };
                                if (uploadInterval) clearInterval(uploadInterval);
                                uploadInterval = setInterval(() => {
                                    percent += Math.floor(Math.random() * 10) + 5;
                                    if (percent >= 100) {
                                        percent = 100;
                                        clearInterval(uploadInterval);
                                        statusText.textContent = 'Selesai';
                                        statusText.style.color = '#14919B';
                                        statusText.style.cursor = 'default';
                                        statusText.onclick = null;
                                        showUploadSuccessModal();
                                    }
                                    percentText.textContent = `(${percent}%)`;
                                    progressBar.style.width = percent + '%';
                                }, 200);
                            });
                            cancelBtn.addEventListener('click', function() {
                                if (uploadInterval) clearInterval(uploadInterval);
                                preview.style.display = 'none';
                                uploadInput.value = '';
                            });
                        })();
                    </script>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <span>5. Minit Fail</span>
                </div>
                <div class="col-md-6 text-end">
                    <div class="muat-naik-container d-flex align-items-center justify-content-center mx-auto" style="position:relative; width:397px; height:58px;">
                        <label class="btn muat-naik-btn d-flex align-items-center" style="gap: 8px; margin-bottom: 0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
                            <i class="fa fa-upload"></i>
                            Muat Naik
                            <input type="file" name="minit_fail" class="d-none upload-input" required>
                        </label>
    <div class="upload-preview" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; cursor:pointer;" onclick="openDocumentViewer(this)">
                            <div class="upload-box" style="border:1.5px solid #D9D9D9; border-radius:8px; background:#fff; display:flex; align-items:center; padding:8px 16px; gap:16px; position:relative; width:100%; min-width:340px; max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden;">
                                <div class="upload-info" style="flex:1; display:flex; flex-direction:column; gap:0; justify-content:center;">
                                    <div class="upload-filename" style="color:#16707A; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<img src="{{ asset('images/icon/Icon.svg') }}" alt="" style="width:18.97px; height:24.39px; flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:8px;" />
<span class="filename-text" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;"></span>
                                        <span class="percent-text" style="color:#888; font-size:14px; font-weight:400; margin-left:2px;">(0%)</span>
                                    </div>
                                    <div class="upload-progress-bar-bg" style="background:#E6F2F2; border-radius:4px; height:7px; width:100%; margin-top:8px;">
                                        <div class="upload-progress-bar" style="background:#14919B; height:7px; border-radius:4px; width:0%; transition:width 0.3s;"></div>
                                    </div>
                                </div>
                                <div class="upload-status" style="color:#E74C3C; font-size:15px; font-weight:500; margin-left:8px; min-width:60px; text-align:right; cursor:pointer; user-select:none;">Batal</div>
                                <button type="button" class="upload-cancel-btn" style="background:none; border:none; color:#E74C3C; font-size:28px; margin-left:12px; cursor:pointer; line-height:1;">&times;</button>
                            </div>
                        </div>
                    </div>
                    <script>
                        (function() {
                            const container = document.currentScript.previousElementSibling;
                            const uploadInput = container.querySelector('input[type="file"]');
                            const preview = container.querySelector('.upload-preview');
                            const filenameText = preview.querySelector('.filename-text');
                            const percentText = preview.querySelector('.percent-text');
                            const progressBar = preview.querySelector('.upload-progress-bar');
                            const statusText = preview.querySelector('.upload-status');
                            const cancelBtn = preview.querySelector('.upload-cancel-btn');
                            let uploadInterval = null;
                            let percent = 0;
                            uploadInput.addEventListener('change', function(e) {
                                if (!e.target.files.length) return;
                                const file = e.target.files[0];
                                filenameText.textContent = file.name;
                                percent = 0;
                                percentText.textContent = '(0%)';
                                progressBar.style.width = '0%';
                                preview.style.display = 'flex';
                                statusText.textContent = 'Batal';
                                statusText.style.display = '';
                                statusText.style.color = '#E74C3C';
                                statusText.style.cursor = 'pointer';
                                statusText.onclick = function() {
                                    if (uploadInterval) clearInterval(uploadInterval);
                                    preview.style.display = 'none';
                                    uploadInput.value = '';
                                };
                                if (uploadInterval) clearInterval(uploadInterval);
                                uploadInterval = setInterval(() => {
                                    percent += Math.floor(Math.random() * 10) + 5;
                                    if (percent >= 100) {
                                        percent = 100;
                                        clearInterval(uploadInterval);
                                        statusText.textContent = 'Selesai';
                                        statusText.style.color = '#14919B';
                                        statusText.style.cursor = 'default';
                                        statusText.onclick = null;
                                        showUploadSuccessModal();
                                    }
                                    percentText.textContent = `(${percent}%)`;
                                    progressBar.style.width = percent + '%';
                                }, 200);
                            });
                            cancelBtn.addEventListener('click', function() {
                                if (uploadInterval) clearInterval(uploadInterval);
                                preview.style.display = 'none';
                                uploadInput.value = '';
                            });
                        })();
                    </script>
                </div>
            </div>
            <div class="row align-items-center mb-3">
                <div class="col-md-6">
                    <span><em>6. Dokumen - dokumen lain</em></span>
                </div>
                <div class="col-md-6 text-end">
                    <div class="muat-naik-container d-flex align-items-center justify-content-center mx-auto" style="position:relative; width:397px; height:58px;">
                        <label class="btn muat-naik-btn d-flex align-items-center" style="gap: 8px; margin-bottom: 0; width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
                            <i class="fa fa-upload"></i>
                            Muat Naik
                            <input type="file" name="dokumen_lain" class="d-none upload-input">
                        </label>
                        <div class="upload-preview" style="display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2;">
                            <div class="upload-box" style="border:1.5px solid #D9D9D9; border-radius:8px; background:#fff; display:flex; align-items:center; padding:8px 16px; gap:16px; position:relative; width:100%; min-width:340px; max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); overflow:hidden;">
                                <div class="upload-info" style="flex:1; display:flex; flex-direction:column; gap:0; justify-content:center;">
                                    <div class="upload-filename" style="color:#16707A; font-family:'Poppins',sans-serif; font-size:15px; font-weight:500; letter-spacing:0.03em; display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                        <img src="{{ asset('images/icon/Icon.svg') }}" alt="" style="width:18.97px; height:24.39px; flex-shrink:0; display:inline-block; vertical-align:middle; margin-right:8px;" />
                                        <span class="filename-text" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle;"></span>
                                        <span class="percent-text" style="color:#888; font-size:14px; font-weight:400; margin-left:2px;">(0%)</span>
                                    </div>
                                    <div class="upload-progress-bar-bg" style="background:#E6F2F2; border-radius:4px; height:7px; width:100%; margin-top:8px;">
                                        <div class="upload-progress-bar" style="background:#14919B; height:7px; border-radius:4px; width:0%; transition:width 0.3s;"></div>
                                    </div>
                                </div>
                                <div class="upload-status" style="color:#E74C3C; font-size:15px; font-weight:500; margin-left:8px; min-width:60px; text-align:right; cursor:pointer; user-select:none;">Batal</div>
                                <button type="button" class="upload-cancel-btn" style="background:none; border:none; color:#E74C3C; font-size:28px; margin-left:12px; cursor:pointer; line-height:1;">&times;</button>
                            </div>
                        </div>
                    </div>
                    <script>
                        (function() {
                            const container = document.currentScript.previousElementSibling;
                            const uploadInput = container.querySelector('input[type="file"]');
                            const preview = container.querySelector('.upload-preview');
                            const filenameText = preview.querySelector('.filename-text');
                            const percentText = preview.querySelector('.percent-text');
                            const progressBar = preview.querySelector('.upload-progress-bar');
                            const statusText = preview.querySelector('.upload-status');
                            const cancelBtn = preview.querySelector('.upload-cancel-btn');
                            let uploadInterval = null;
                            let percent = 0;
                            uploadInput.addEventListener('change', function(e) {
                                if (!e.target.files.length) return;
                                const file = e.target.files[0];
                                filenameText.textContent = file.name;
                                percent = 0;
                                percentText.textContent = '(0%)';
                                progressBar.style.width = '0%';
                                preview.style.display = 'flex';
                                statusText.textContent = 'Batal';
                                statusText.style.display = '';
                                statusText.style.color = '#E74C3C';
                                statusText.style.cursor = 'pointer';
                                statusText.onclick = function() {
                                    if (uploadInterval) clearInterval(uploadInterval);
                                    preview.style.display = 'none';
                                    uploadInput.value = '';
                                };
                                if (uploadInterval) clearInterval(uploadInterval);
                                uploadInterval = setInterval(() => {
                                    percent += Math.floor(Math.random() * 10) + 5;
                                    if (percent >= 100) {
                                        percent = 100;
                                        clearInterval(uploadInterval);
                                        statusText.textContent = 'Selesai';
                                        statusText.style.color = '#14919B';
                                        statusText.style.cursor = 'default';
                                        statusText.onclick = null;
                                        showUploadSuccessModal();
                                    }
                                    percentText.textContent = `(${percent}%)`;
                                    progressBar.style.width = percent + '%';
                                }, 200);
                            });
                            cancelBtn.addEventListener('click', function() {
                                if (uploadInterval) clearInterval(uploadInterval);
                                preview.style.display = 'none';
                                uploadInput.value = '';
                            });
                        })();
                    </script>
                </div>
            </div>
            <div class="form-check mt-4">
                <input class="form-check-input" type="checkbox" name="confirm_transfer" id="confirm_transfer" required>
                <label class="form-check-label" for="confirm_transfer">
                    Klik untuk mengesahkan pemindahan fail
                </label>
            </div>
        </div>
        <div class="d-flex justify-content-between">
            <button type="button" onclick="history.back()" 
                    class="btn btn-outline-info langkah-btn-custom" style="border: none;">
                <span class="langkah-btn-text">LANGKAH SEBELUMNYA</span>
            </button>
            <a href="{{ url('/step5') }}" class="btn simpan-btn-custom">
                <span class="simpan-btn-text">SIMPAN & SETERUSNYA</span>
            </a>
        </div>
    </div>
</div>


<style>
    .langkah-btn-custom {
        width: 215px !important;
        height: 37px !important;
        border-radius: 5px !important;
        border: 1.5px solid #0B6477 !important;
        color: #0B6477 !important;
        background: #fff !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        letter-spacing: 0.05em;
        line-height: 21px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        text-transform: uppercase;
        margin-top: 8px;
        margin-left: 23px;
        padding: 0 !important;
    }
    .langkah-btn-text {
        width: 100%;
        text-align: center;
        line-height: 21px;
        letter-spacing: 0.05em;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #0B6477;
        display: block;
        white-space: nowrap;
    }
    .langkah-btn-custom:disabled, .langkah-btn-custom.disabled {
        opacity: 1 !important;
        background: #fff !important;
        color: #0B6477 !important;
        border: 1.5px solid #0B6477 !important;
    }
    .muat-naik-btn {
        width: 166px !important;
        height: 37px !important;
        border-radius: 3px !important;
        border: 1px solid #14919B !important;
        color: #14919B !important;
        background: #fff !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        letter-spacing: 0.05em;
        line-height: 21px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        text-transform: none;
        margin-top: 8px;
        padding: 0 !important;
        transition: background 0.2s, box-shadow 0.2s;
    }
    .muat-naik-btn:disabled, .muat-naik-btn.disabled {
        opacity: 1 !important;
        background: #fff !important;
        color: #14919B !important;
        border: 1px solid #14919B !important;
    }
    .muat-naik-box {
        border-radius: 3px !important;
        width: 2000px;
        max-width: 100%;
        min-height: 498px;
        margin: 0 auto 24px auto;
        box-sizing: border-box;
        padding: 32px 32px 24px 32px !important;
        background: #fff !important;
    }
    .muat-naik-container {
        width: 397px;
        height: 58px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 0 auto 8px auto;
        background: #fff;
        box-sizing: border-box;
    }
    .sidebar-chevron {
        color: #0B6477;
        font-size: 2rem;
        margin-top: 24px;
        display: block;
    }
    @media (max-width: 1300px) {
        .muat-naik-box {
            width: 100% !important;
            min-width: 0;
        }
    }
    .muat-naik-desc {
        display: inline-block;
        width: 269px;
        height: 21px;
        font-family: 'Poppins', sans-serif;
        font-weight: 300;
        font-size: 14px;
        font-style: italic;
        line-height: 21px;
        letter-spacing: 0.05em;
        color: #000;
        background: #fff;
        text-align: left;
        margin-bottom: 16px;
    }
    .simpan-btn-custom {
        width: 215px !important;
        height: 37px !important;
        border-radius: 5px !important;
        background: #0B6477 !important;
        color: #fff !important;
        border: none !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        letter-spacing: 0.05em;
        line-height: 21px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        transition: background 0.2s, box-shadow 0.2s;
        box-shadow: none !important;
        outline: none !important;
        margin-right: 0;
    }
    .simpan-btn-custom:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    .simpan-btn-text {
        display: inline-block;
        width: 215px;
        height: 37px;
        font-family: 'Poppins', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.05em;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        background: transparent;
        margin: 0 auto;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<!-- Upload Success Modal -->
<div id="uploadSuccessModal" class="modal fade" tabindex="-1" aria-hidden="true" style="display:none; background:rgba(0,0,0,0.35);">
    <div class="modal-dialog modal-dialog-centered" style="max-width:674px; min-width:0; width:674px; height:330px; border-radius:10px; padding:30px 84px 30px 84px; gap:15px; opacity:1;">
        <div class="modal-content" style="border-radius:10px; border:none; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.08); position:relative; padding:48px 32px 32px 32px; text-align:center;">
            <button type="button" class="btn-close" aria-label="Close" style="position:absolute; top:24px; right:32px; background:none; border:none; font-size:32px; color:#F9B17A; opacity:1; z-index:2;" onclick="closeUploadSuccessModal()">&times;</button>
            <div style="position:relative; margin-bottom:32px;">
                <img src="{{ asset('images/all/Group 1000001227.svg') }}" alt="Success" style="width:165.78px; height:130px; display:block; margin:auto; opacity:1; transform:rotate(0deg);" />
            </div>
            <div style="font-family:'Inter',sans-serif; font-weight:700; font-style:bold; font-size:25px; line-height:100%; letter-spacing:2%; color:#111; margin-bottom:8px; text-align:center;">Berjaya !</div>
            <div style="font-family:'Inter',sans-serif; font-weight:400; font-style:normal; font-size:16px; line-height:30px; letter-spacing:5%; color:#111; margin-bottom:32px; text-align:center;">Data anda telah berjaya dimuat naik !</div>
            <div style="display:flex; justify-content:center; width:100%;">
                <button type="button" class="btn" style="background:#FF7A00; color:#fff; font-family:'Inter',sans-serif; font-size:17px; font-weight:500; font-style:normal; line-height:100%; letter-spacing:0; border-radius:20px; width:160px; height:40px; box-shadow:none; border:none; opacity:1; vertical-align:middle;" onclick="closeUploadSuccessModal()">OK</button>
            </div>
        </div>
    </div>
</div>
<script>
function showUploadSuccessModal() {
  var modal = document.getElementById('uploadSuccessModal');
  modal.style.display = 'block';
  modal.classList.add('show');
  document.body.style.overflow = 'hidden';
}
function closeUploadSuccessModal() {
  var modal = document.getElementById('uploadSuccessModal');
  modal.style.display = 'none';
  modal.classList.remove('show');
  document.body.style.overflow = '';
}
</script>

@endsection