@extends('layouts.master')
@section('title')
    {{ __('Add New Request') }}
@endsection

@section('css')
    <link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .request-page-shell {
            border: 1px solid #e6ecf3;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
        }

        .request-page-header {
            background: linear-gradient(120deg, #f8fbff 0%, #f5f9ff 45%, #eef5ff 100%);
            border-bottom: 1px solid #e4ebf3;
        }

        .request-page-subtitle {
            color: #5b6b7c;
            max-width: 680px;
        }

        .request-step-indicator {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
            color: #0b5ed7;
            background: #eaf2ff;
            border: 1px solid #cbdfff;
            margin-right: 0.55rem;
        }

        .request-section-card {
            overflow: visible !important;
        }

        .request-section-card .card-header {
            overflow: visible;
        }

        /* Ensure Choices dropdown renders on top */
        .choices__list--dropdown,
        .choices[data-type*="select-one"] .choices__list--dropdown {
            z-index: 1050 !important;
            position: absolute !important;
        }

        .request-section-card .card-header {
            background: #f8fafd;
            border-bottom: 1px solid #e6edf5;
        }

        .requester-dropzone {
            border: 1px dashed #cbd5e1 !important;
            background: #f8fafc;
            border-radius: 0.5rem;
            min-height: 180px;
            padding: 1rem;
        }

        .requester-dropzone .dz-message {
            margin: 1.5rem 0;
        }

        .requester-dropzone-preview {
            margin-top: 0.75rem;
        }

        .upload-section-card .card-body {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .upload-subsection {
            border: 1px solid #e6edf5;
            border-radius: 0.6rem;
            padding: 1rem;
            background: #fff;
        }

        .upload-subsection-title {
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 0.35rem;
            color: #223041;
        }

        .required-mark {
            color: #dc3545;
            font-weight: 700;
            margin-left: 0.2rem;
        }

        #document-information-card .card-body {
            display: flex;
            flex-direction: column;
        }

        #document-information-fields {
            flex: 1 1 auto;
        }

        #description-field-wrap {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
        }

        #request-description-input {
            min-height: 180px;
            height: 100%;
            flex: 1 1 auto;
        }

        #normal-request-sections {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
            align-items: stretch;
        }

        #request-upload-column,
        #request-info-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-width: 0;
            height: 100%;
        }

        #request-info-column {
            align-self: stretch;
        }

        #document-information-card {
            flex: 1 1 auto;
            height: 100%;
        }

        #normal-submit-wrap {
            grid-column: 1 / -1;
        }

        #normal-submit-wrap {
            position: sticky;
            bottom: 0;
            z-index: 20;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            border: 1px solid #e4ebf3;
            border-radius: 0.6rem;
            padding: 0.8rem;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
        }

        .requester-dropzone-preview .dz-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .requester-dropzone.is-locked {
            display: none;
        }

        .required-files-shell .card-body {
            padding: 0.85rem;
        }

        .required-file-item {
            border: 1px solid #e3e9f1;
            border-radius: 0.55rem;
            padding: 0.7rem;
            background: #ffffff;
            margin-bottom: 0.7rem;
        }

        .required-file-item:last-child {
            margin-bottom: 0;
        }

        .required-file-item-title {
            font-size: 0.92rem;
            font-weight: 600;
            color: #1f2937;
        }

        .required-file-item.required-file-error {
            border-color: #dc3545 !important;
            border-width: 2px;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.12);
        }

        .required-file-item.required-file-error .form-control {
            border-color: #dc3545;
        }

        .request-upload-progress {
            display: none;
            margin-top: 0.65rem;
            padding: 0.65rem 0.75rem;
            border: 1px solid #d8e6ff;
            border-radius: 0.5rem;
            background: #f5f9ff;
        }

        .request-upload-progress.is-visible {
            display: block;
        }

        .request-upload-progress .progress {
            height: 0.45rem;
            background-color: #e5edf8;
        }

        .request-upload-progress-label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            font-size: 0.78rem;
            color: #526173;
            margin-bottom: 0.4rem;
        }

        .request-upload-progress-percent {
            color: #4b38b3;
            font-weight: 600;
            white-space: nowrap;
        }

        .requester-dropzone.requester-dropzone-compact {
            min-height: 120px;
            padding: 0.75rem;
        }

        .requester-dropzone.requester-dropzone-compact .dz-message {
            margin: 0.75rem 0;
        }

        .requester-dropzone.requester-dropzone-compact .display-6 {
            font-size: 1.6rem;
        }

        .requester-dropzone.requester-dropzone-compact h5 {
            font-size: 0.9rem;
            margin-bottom: 0;
        }

        .dynamic-form-field {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 0.75rem;
            background: #fff;
        }

        .payment-summary-card {
            border: 1px solid #d7e7ff;
            background: linear-gradient(145deg, #f6faff 0%, #eef5ff 100%);
            border-radius: 0.5rem;
            padding: 0.9rem;
        }

        .payment-summary-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.7rem;
        }

        .payment-summary-chip {
            border: 1px solid #d9e6fb;
            border-radius: 0.45rem;
            background: #ffffff;
            padding: 0.55rem 0.65rem;
        }

        .payment-summary-label {
            display: block;
            font-size: 0.74rem;
            color: #6b7280;
            margin-bottom: 0.15rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .payment-summary-value {
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
        }

        .payment-summary-total {
            border: 1px solid #bfd9ff;
            border-radius: 0.55rem;
            background: #ffffff;
            margin-top: 0.75rem;
            padding: 0.65rem 0.8rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .payment-summary-total-label {
            font-weight: 600;
            color: #1e293b;
        }

        .payment-summary-total-value {
            font-size: 1.18rem;
            font-weight: 800;
            color: #0b5ed7;
            letter-spacing: 0.01em;
        }

        .signature-pad {
            width: 100%;
            height: 160px;
            border: 1px dashed #adb5bd;
            border-radius: 0.375rem;
            touch-action: none;
            background: #fff;
            display: block;
        }

        .template-canvas {
            position: relative;
            width: 100%;
            border: 1px solid #e9ecef;
            overflow: hidden;
            background: #fff;
        }

        .template-preview-shell {
            max-width: 1100px;
            margin: 0 auto;
            transform: scale(0.88);
            transform-origin: top center;
        }

        .template-canvas-image {
            display: block;
            width: 100%;
            height: auto;
        }

        .template-overlay {
            position: absolute;
            inset: 0;
            z-index: 3;
            pointer-events: none;
        }

        .template-overlay-field {
            position: absolute;
            background: transparent;
            border: 0;
            border-radius: 0;
            padding: 0;
            pointer-events: auto;
            overflow: hidden;
            box-sizing: border-box;
        }

        .template-overlay-field .form-label {
            font-size: 11px;
            margin-bottom: 0.2rem;
            line-height: 1.2;
        }

        .template-overlay-field .form-control,
        .template-overlay-field .form-check-label {
            font-size: 12px;
        }

        .template-overlay-field .form-control {
            width: 100%;
            height: 100%;
            min-height: 24px;
            border: 1px solid rgba(100, 116, 139, 0.45);
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.35);
            color: #0f172a;
            padding: 0.1rem 0.35rem;
            line-height: 1.2;
            box-shadow: none;
            transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
        }

        .template-overlay-field .form-control::placeholder {
            color: rgba(100, 116, 139, 0.72);
        }

        .template-overlay-field .form-control:focus {
            border-color: #2563eb;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
        }

        .template-overlay-field .signature-pad {
            height: 100%;
            min-height: 56px;
            border: 1px dashed rgba(71, 85, 105, 0.65);
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.28);
        }

        .template-overlay-field .signature-clear-btn {
            padding: 0.1rem 0.35rem;
            font-size: 11px;
        }

        .template-overlay-field .form-check {
            width: 100%;
            height: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .template-overlay-field .form-check-input {
            width: 1.05rem;
            height: 1.05rem;
            border: 1px solid rgba(71, 85, 105, 0.9);
            background-color: rgba(255, 255, 255, 0.65);
            margin-top: 0;
            cursor: pointer;
            box-shadow: none;
        }

        .template-overlay-field .form-check-input:checked {
            background-color: #2563eb;
            border-color: #2563eb;
        }

        .template-overlay-field .form-check-input:focus {
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
        }

        .template-overlay-field[data-field-type="signature"] {
            padding: 2px;
        }

        [data-bs-theme="dark"] .request-page-shell {
            border-color: #3a424d;
            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
        }

        [data-bs-theme="dark"] .request-page-header {
            background: linear-gradient(120deg, #252d36 0%, #222a33 45%, #1f2730 100%);
            border-bottom-color: #3a424d;
        }

        [data-bs-theme="dark"] .request-page-subtitle {
            color: #aeb7c2;
        }

        [data-bs-theme="dark"] .request-step-indicator {
            color: #9ec5ff;
            background: rgba(53, 119, 241, 0.2);
            border-color: rgba(53, 119, 241, 0.45);
        }

        [data-bs-theme="dark"] .request-section-card {
            border-color: #3a424d;
            background: #242b33;
        }

        [data-bs-theme="dark"] .request-section-card .card-header {
            background: #2b323b;
            border-bottom-color: #3a424d;
        }

        [data-bs-theme="dark"] .requester-dropzone {
            border-color: #4a5666 !important;
            background: #21272f;
        }

        [data-bs-theme="dark"] #normal-submit-wrap {
            background: rgba(33, 39, 47, 0.96);
            border-color: #3a424d;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        }

        [data-bs-theme="dark"] .required-file-item {
            border-color: #3e4753;
            background: #2a313a;
        }

        [data-bs-theme="dark"] .upload-subsection {
            border-color: #3e4753;
            background: #2a313a;
        }

        [data-bs-theme="dark"] .requester-dropzone-preview .border {
            border-color: #4a5666 !important;
            background: #21272f;
        }

        [data-bs-theme="dark"] .requester-dropzone-preview .bg-light {
            background: #34404d !important;
        }

        [data-bs-theme="dark"] .requester-dropzone-preview [data-dz-name] {
            color: #e3e8ef;
        }

        [data-bs-theme="dark"] .required-file-item-title {
            color: #d6dde6;
        }

        [data-bs-theme="dark"] .request-upload-progress {
            border-color: #3a4d68;
            background: #222d3b;
        }

        [data-bs-theme="dark"] .request-upload-progress-label {
            color: #b9c4d2;
        }

        [data-bs-theme="dark"] .request-upload-progress .progress {
            background-color: #344154;
        }

        [data-bs-theme="dark"] .dynamic-form-field {
            border-color: #3e4753;
            background: #2a313a;
        }

        [data-bs-theme="dark"] .payment-summary-card {
            border-color: #34465f;
            background: linear-gradient(145deg, #253142 0%, #222d3d 100%);
        }

        [data-bs-theme="dark"] .payment-summary-chip,
        [data-bs-theme="dark"] .payment-summary-total {
            border-color: #3c4f6a;
            background: #2b3544;
        }

        [data-bs-theme="dark"] .payment-summary-label {
            color: #9fb0c2;
        }

        [data-bs-theme="dark"] .payment-summary-value,
        [data-bs-theme="dark"] .payment-summary-total-label {
            color: #e3e8ef;
        }

        [data-bs-theme="dark"] .payment-summary-total-value {
            color: #8bb9ff;
        }

        [data-bs-theme="dark"] .signature-pad,
        [data-bs-theme="dark"] .template-canvas {
            border-color: #4a5666;
            background: #222933;
        }

        [data-bs-theme="dark"] .template-overlay-field .form-control {
            border-color: rgba(148, 163, 184, 0.55);
            background: rgba(15, 23, 42, 0.55);
            color: #e2e8f0;
        }

        [data-bs-theme="dark"] .template-overlay-field .form-control::placeholder {
            color: rgba(148, 163, 184, 0.85);
        }

        [data-bs-theme="dark"] .template-overlay-field .form-control:focus {
            border-color: #5ea3ff;
            background: rgba(15, 23, 42, 0.82);
            box-shadow: 0 0 0 2px rgba(94, 163, 255, 0.2);
        }

        [data-bs-theme="dark"] .template-overlay-field .signature-pad {
            border-color: rgba(148, 163, 184, 0.65);
            background: rgba(15, 23, 42, 0.52);
        }

        [data-bs-theme="dark"] .template-overlay-field .form-check-input {
            border-color: rgba(148, 163, 184, 0.95);
            background-color: rgba(15, 23, 42, 0.8);
        }

        @media (max-width: 991.98px) {
            #normal-request-sections {
                grid-template-columns: 1fr;
            }

            #request-upload-column,
            #request-info-column {
                gap: 1rem;
            }

            .template-preview-shell {
                max-width: 100%;
                transform: scale(0.95);
            }

            #dynamic-template-preview-wrap {
                margin-bottom: 1rem !important;
            }

            #builder-request-section .card-body {
                padding: 1rem;
            }

            #dynamic-form-fields {
                gap: 0.75rem !important;
            }

            .template-overlay-field {
                padding: 0;
            }

            .template-overlay-field .form-label {
                font-size: 10px;
            }
        }

        @media (max-width: 767.98px) {
            .template-preview-shell {
                transform: scale(0.98);
            }

            #dynamic-template-preview-pdf {
                min-height: 320px !important;
                height: 38vh;
            }

            .template-overlay-field .form-control,
            .template-overlay-field .form-check-label {
                font-size: 11px;
            }

            .template-overlay-field .form-control {
                padding-top: 0.2rem;
                padding-bottom: 0.2rem;
            }

            #builder-submit-wrap {
                flex-direction: column;
                align-items: stretch;
            }

            #builder-submit-wrap .btn,
            #builder-submit-wrap a {
                width: 100%;
            }

            .payment-summary-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endsection

@section('content')
    @php
        $currentRole = \App\Support\WorkflowPermission::normalizeRole((string) (auth()->user()->role ?? 'user'));
        $dashboardRouteName = $currentRole === \App\Support\WorkflowPermission::ROLE_REQUESTER
            ? 'requester.dashboard'
            : 'role.dashboard';
        $dashboardUrl = route($dashboardRouteName);
    @endphp

    @component('components.breadcrumb')
        @slot('li_1') {{ __('Requester') }} @endslot
        @slot('title') {{ __('Add New Request') }} @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card request-page-shell">
                <div class="card-header request-page-header">
                    <h4 class="card-title mb-1">{{ __('Create New Request') }}</h4>
                    <p class="mb-0 request-page-subtitle">{{ __('Follow the sections below to complete your request accurately and faster.') }}</p>
                </div>
                <div class="card-body">
                    <form id="requester-add-new-form" action="{{ route('requester.requests.store') }}" method="POST" novalidate>
                        @csrf
                        <input type="hidden" name="main_uploaded_path" id="main-uploaded-path-input">
                        <input type="hidden" name="main_uploaded_name" id="main-uploaded-name-input">
                        <input type="hidden" name="form_data_payload" id="form-data-payload-input">
                        <div id="supporting-uploaded-paths"></div>

                        <div class="card mb-3 request-section-card">
    <div class="card-header">
        <h5 class="card-title mb-0">
            <span class="request-step-indicator">1</span>{{ __('Select Document Type') }}
        </h5>
    </div>
    <div class="card-body">
        <label class="form-label" for="request-type-input">
            {{ __('Document Type') }}<span class="required-mark">*</span>
        </label>
        <select class="form-select"
            name="document_type"
            id="request-type-input"
            data-choices
            data-choices-sorting-false
            data-choices-search-true
            data-choices-search-placeholder-value="{{ __('Search or type document type...') }}"
            required>
            <option value="">{{ __('Select document type') }}</option>
            @foreach(($documentTypes ?? collect()) as $documentType)
                @php
                    $docTypeValue = trim((string) ($documentType->code ?? ''));
                    if ($docTypeValue === '') {
                        $docTypeValue = (string) ($documentType->id ?? '');
                    }
                    $docTypeLabel = app()->getLocale() === 'kh'
                        ? trim((string) ($documentType->name_kh ?? $documentType->name_en ?? $documentType->name ?? ''))
                        : trim((string) ($documentType->name_en ?? $documentType->name ?? $documentType->name_kh ?? ''));
                    if ($docTypeLabel === '') {
                        $docTypeLabel = (string) ($documentType->code ?? '');
                    }
                @endphp
                <option value="{{ $docTypeValue }}">{{ $docTypeLabel }}</option>
            @endforeach
        </select>
        <div class="invalid-feedback d-block" id="request-type-error" style="display:none !important;">
            {{ __('Please select a document type.') }}
        </div>
    </div>
</div>

                        <div class="card mb-3 request-section-card" id="faculty-routing-card" style="display:none;">
                            <div class="card-header">
                                <h5 class="card-title mb-0"><span class="request-step-indicator">2</span>{{ __('Faculty Type') }}</h5>
                            </div>
                            <div class="card-body">
                                <label class="form-label" for="normal-faculty-select">{{ __('Select Faculty') }}<span class="required-mark">*</span></label>
                                <select class="form-select" id="normal-faculty-select" name="faculty_selection" data-field-name="__extra_faculty">
                                    <option value="">{{ __('Select faculty') }}</option>
                                </select>
                                <p class="text-muted small mb-0 mt-2">{{ __('The Document Type you selected included faculty stage routing.') }}</p>
                            </div>
                        </div>

                        <div class="card mb-3 request-section-card" id="builder-request-section" style="display:none;">
                            <div class="card-header d-flex align-items-center justify-content-between">
                                <h5 class="card-title mb-0"><span class="request-step-indicator">2</span>{{ __('Form Builder Template') }}</h5>
                                <span class="badge bg-info-subtle text-info" id="dynamic-form-doc-label"></span>
                            </div>
                            <div class="card-body">
                                <div id="dynamic-template-preview-wrap" class="mb-3" style="display:none;">
                                    <div class="template-preview-shell">
                                        <iframe id="dynamic-template-preview-pdf" style="display:none; width:100%; min-height:520px; border:1px solid #e9ecef;"></iframe>
                                        <div id="dynamic-template-canvas" class="template-canvas" style="display:none;">
                                            <img id="dynamic-template-preview-image" class="template-canvas-image" alt="Template preview">
                                            <div id="dynamic-template-overlay" class="template-overlay"></div>
                                        </div>
                                    </div>
                                </div>

                                <div id="dynamic-form-fields" class="d-flex flex-column gap-2"></div>
                                <div id="dynamic-extra-options" class="d-flex flex-column gap-2 mt-3" style="display:none;"></div>
                                <div id="dynamic-payment-summary" class="payment-summary-card mt-3" style="display:none;">
                                    <div class="payment-summary-grid">
                                        <div class="payment-summary-chip">
                                            <span class="payment-summary-label">{{ __('Unit Price') }}</span>
                                            <span class="payment-summary-value" id="dynamic-unit-price">$0.00</span>
                                        </div>
                                        <div class="payment-summary-chip">
                                            <span class="payment-summary-label">{{ __('Quantity') }}</span>
                                            <span class="payment-summary-value" id="dynamic-quantity-value">0</span>
                                        </div>
                                    </div>
                                    <div class="payment-summary-total">
                                        <span class="payment-summary-total-label">{{ __('Total Payable') }}</span>
                                        <span class="payment-summary-total-value" id="dynamic-total-payable">$0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="normal-request-sections">
                            <div id="request-upload-column">
                                <div class="card request-section-card upload-section-card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0" id="upload-files-title"><span class="request-step-indicator">2</span>{{ __('Upload Files') }}</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="upload-subsection" id="main-file-card">
                                            <h5 class="upload-subsection-title" id="main-file-title">{{ __('Upload Main File') }}</h5>
                                        <p class="text-muted mb-3">{{ __('Main File (1 file only). Allowed types: PDF, PNG.') }}</p>
                                        <div class="dropzone requester-dropzone requester-dropzone-compact" id="mainFileDropzone">
                                            <div class="fallback">
                                                <input name="main_file" type="file" accept=".pdf,.png">
                                            </div>
                                            <div class="dz-message needsclick">
                                                <div class="mb-3">
                                                    <i class="display-6 text-muted ri-upload-cloud-2-fill"></i>
                                                </div>
                                                <h5>{{ __('Drop main file here or click to upload.') }}</h5>
                                            </div>
                                        </div>
                                        <ul class="list-unstyled mb-0 requester-dropzone-preview" id="main-dropzone-preview">
                                            <li class="mt-2" id="main-dropzone-preview-list">
                                                <div class="border rounded">
                                                    <div class="d-flex p-2 align-items-center">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar-sm bg-light rounded">
                                                                <img data-dz-thumbnail class="img-fluid rounded d-block"
                                                                    src="{{ URL::asset('build/images/new-document.png') }}"
                                                                    alt="Uploaded file" />
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="pt-1">
                                                                <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                                <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                                <strong class="error text-danger" data-dz-errormessage></strong>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0 ms-3">
                                                            <button type="button" data-dz-remove class="btn btn-sm btn-danger">{{ __('Delete') }}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="request-upload-progress" id="main-upload-progress" aria-live="polite">
                                            <div class="request-upload-progress-label">
                                                <span id="main-upload-progress-text">{{ __('Uploading file...') }}</span>
                                                <span class="request-upload-progress-percent" id="main-upload-progress-percent">0%</span>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar" id="main-upload-progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                                            </div>
                                        </div>
                                        </div>

                                        <div class="upload-subsection" id="supporting-files-card">
                                            <h5 class="upload-subsection-title" id="supporting-files-title">{{ __('Add Supporting Files') }}</h5>
                                        <p class="text-muted mb-2" id="supporting-files-help">{{ __('Supporting Files (multiple allowed). All file types are allowed.') }}</p>
                                        <div id="required-files-hint-wrap" class="mb-3" style="display:none;">
                                            <div class="alert alert-warning border mb-2">
                                                <div class="fw-semibold mb-1">{{ __('Required files for this document') }}</div>
                                                <ul class="mb-0 ps-3" id="required-files-hint-list"></ul>
                                            </div>
                                        </div>
                                        <div class="dropzone requester-dropzone requester-dropzone-compact" id="supportingFilesDropzone">
                                            <div class="fallback">
                                                <input name="supporting_files" type="file" multiple>
                                            </div>
                                            <div class="dz-message needsclick">
                                                <div class="mb-3">
                                                    <i class="display-6 text-muted ri-upload-cloud-2-fill"></i>
                                                </div>
                                                <h5>{{ __('Drop supporting files here or click to upload.') }}</h5>
                                            </div>
                                        </div>
                                        <ul class="list-unstyled mb-0 requester-dropzone-preview" id="supporting-dropzone-preview">
                                            <li class="mt-2" id="supporting-dropzone-preview-list">
                                                <div class="border rounded">
                                                    <div class="d-flex p-2 align-items-center">
                                                        <div class="flex-shrink-0 me-3">
                                                            <div class="avatar-sm bg-light rounded">
                                                                <img data-dz-thumbnail class="img-fluid rounded d-block"
                                                                    src="{{ URL::asset('build/images/new-document.png') }}"
                                                                    alt="Uploaded file" />
                                                            </div>
                                                        </div>
                                                        <div class="flex-grow-1">
                                                            <div class="pt-1">
                                                                <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                                <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                                <strong class="error text-danger" data-dz-errormessage></strong>
                                                            </div>
                                                        </div>
                                                        <div class="flex-shrink-0 ms-3">
                                                            <button type="button" data-dz-remove class="btn btn-sm btn-danger">{{ __('Delete') }}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="request-upload-progress" id="supporting-upload-progress" aria-live="polite">
                                            <div class="request-upload-progress-label">
                                                <span id="supporting-upload-progress-text">{{ __('Uploading files...') }}</span>
                                                <span class="request-upload-progress-percent" id="supporting-upload-progress-percent">0%</span>
                                            </div>
                                            <div class="progress">
                                                <div class="progress-bar" id="supporting-upload-progress-bar" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
                                            </div>
                                        </div>
                                        </div>

                                        {{-- Required files section: shown instead of generic supporting files --}}
                                        <div id="required-files-section" class="upload-subsection" style="display:none;"></div>
                                    </div>
                                </div>
                            </div>

                            <div id="request-info-column">
                                <div class="card request-section-card" id="document-information-card">
                                    <div class="card-header">
                                        <h5 class="card-title mb-0" id="document-information-title"><span class="request-step-indicator">4</span>{{ __('Document Information') }}</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3 h-100" id="document-information-fields">
                                            <div class="col-12" id="submission-route-info-wrap" style="display:none;">
                                                <label class="form-label mb-1">{{ __('Submission Route') }}</label>
                                                <div class="d-flex flex-wrap gap-2" id="submission-route-info-list"></div>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label" for="document-name-input">{{ __('Document Name') }}<span class="required-mark">*</span></label>
                                                <input type="text" class="form-control" name="document_name" id="document-name-input"
                                                    placeholder="{{ __('Auto-filled from main file (editable)') }}" required>
                                            </div>
                                            <div class="col-12">
                                                <label class="form-label" for="tracking-id-input">{{ __('Document ID') }}<span class="required-mark">*</span></label>
                                                <input type="text" class="form-control" name="tracking_id" id="tracking-id-input"
                                                    placeholder="{{ __('Enter document ID') }}" required>
                                            </div>
                                            <div class="col-12" id="description-field-wrap">
                                                <label class="form-label" for="request-description-input">{{ __('Description') }}</label>
                                                <textarea class="form-control" name="description" id="request-description-input" rows="7"
                                                    placeholder="{{ __('Write request details...') }}"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="hstack gap-2 justify-content-end mt-2" id="normal-submit-wrap">
                                <a href="{{ $dashboardUrl }}" class="btn btn-light" id="request-cancel-btn" data-turbo="true">{{ __('Cancel') }}</a>
                                <button type="submit" class="btn btn-primary px-4" id="submit-request-btn">{{ __('Submit Request') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="uploadedFilePreviewModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="uploadedFilePreviewTitle">{{ __('Document Preview') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="modal-body p-0" style="height:min(78vh, 850px);">
                    <img id="uploadedFilePreviewImage" class="w-100 h-100" style="display:none;object-fit:contain;" alt="{{ __('Document Preview') }}">
                    <iframe id="uploadedFilePreviewFrame" class="w-100 h-100 border-0" style="display:none;" title="{{ __('Document Preview') }}"></iframe>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/dropzone/dropzone-min.js') }}"></script>
    <script src="{{ URL::asset('build/js/app.js') }}" data-turbo-eval="false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js" referrerpolicy="no-referrer"></script>
    <script>
        (function () {
            var documentNameInput = document.getElementById('document-name-input');
            var mainDropzoneEl = document.getElementById('mainFileDropzone');
            var supportingDropzoneEl = document.getElementById('supportingFilesDropzone');
            var mainUploadedPathInput = document.getElementById('main-uploaded-path-input');
            var mainUploadedNameInput = document.getElementById('main-uploaded-name-input');
            var requestDescriptionInput = document.getElementById('request-description-input');
            var formDataPayloadInput = document.getElementById('form-data-payload-input');
            var supportingUploadedPaths = document.getElementById('supporting-uploaded-paths');
            var mainUploadProgress = document.getElementById('main-upload-progress');
            var mainUploadProgressText = document.getElementById('main-upload-progress-text');
            var mainUploadProgressPercent = document.getElementById('main-upload-progress-percent');
            var mainUploadProgressBar = document.getElementById('main-upload-progress-bar');
            var supportingUploadProgress = document.getElementById('supporting-upload-progress');
            var supportingUploadProgressText = document.getElementById('supporting-upload-progress-text');
            var supportingUploadProgressPercent = document.getElementById('supporting-upload-progress-percent');
            var supportingUploadProgressBar = document.getElementById('supporting-upload-progress-bar');
            var mainPreviewNode = document.getElementById('main-dropzone-preview-list');
            var supportingPreviewNode = document.getElementById('supporting-dropzone-preview-list');
            var uploadedFilePreviewModalEl = document.getElementById('uploadedFilePreviewModal');
            var uploadedFilePreviewTitle = document.getElementById('uploadedFilePreviewTitle');
            var uploadedFilePreviewImage = document.getElementById('uploadedFilePreviewImage');
            var uploadedFilePreviewFrame = document.getElementById('uploadedFilePreviewFrame');
            var requestTypeInput = document.getElementById('request-type-input');
            var normalRequestSections = document.getElementById('normal-request-sections');
            var builderRequestSection = document.getElementById('builder-request-section');
            var mainFileCard = document.getElementById('main-file-card');
            var uploadFilesTitle = document.getElementById('upload-files-title');
            var mainFileTitle = document.getElementById('main-file-title');
            var documentInformationCard = document.getElementById('document-information-card');
            var documentInformationTitle = document.getElementById('document-information-title');
            var submissionRouteInfoWrap = document.getElementById('submission-route-info-wrap');
            var submissionRouteInfoList = document.getElementById('submission-route-info-list');
            var supportingFilesCard = document.getElementById('supporting-files-card');
            var supportingFilesTitle = document.getElementById('supporting-files-title');
            var facultyRoutingCard = document.getElementById('faculty-routing-card');
            var normalFacultySelect = document.getElementById('normal-faculty-select');
            var supportingFilesHelp = document.getElementById('supporting-files-help');
            var requestTypeError = document.getElementById('request-type-error');
            var requiredFilesHintWrap = document.getElementById('required-files-hint-wrap');
            var requiredFilesHintList = document.getElementById('required-files-hint-list');
            var requiredFilesSection = document.getElementById('required-files-section');
            var normalSubmitWrap = document.getElementById('normal-submit-wrap');
            var submitRequestButton = document.getElementById('submit-request-btn');
            var dynamicFormDocLabel = document.getElementById('dynamic-form-doc-label');
            var dynamicTemplatePreviewWrap = document.getElementById('dynamic-template-preview-wrap');
            var dynamicTemplatePreviewPdf = document.getElementById('dynamic-template-preview-pdf');
            var dynamicTemplateCanvas = document.getElementById('dynamic-template-canvas');
            var dynamicTemplatePreviewImage = document.getElementById('dynamic-template-preview-image');
            var dynamicTemplateOverlay = document.getElementById('dynamic-template-overlay');
            var dynamicFormFields = document.getElementById('dynamic-form-fields');
            var dynamicExtraOptions = document.getElementById('dynamic-extra-options');
            var dynamicPaymentSummary = document.getElementById('dynamic-payment-summary');
            var dynamicUnitPrice = document.getElementById('dynamic-unit-price');
            var dynamicQuantityValue = document.getElementById('dynamic-quantity-value');
            var dynamicTotalPayable = document.getElementById('dynamic-total-payable');
            var addNewForm = document.getElementById('requester-add-new-form');
            var cancelRequestBtn = document.getElementById('request-cancel-btn');
            var csrfToken = document.querySelector('meta[name="csrf-token"]')
                ? document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                : '';
            var renderToken = 0;
            var requiredSupportingFiles = [];
            var isBuilderTemplateMode = false;
            var dynamicFacultyChoicesInstance = null;
            var workflowHasFacultyRouting = false;
            var workflowFacultyOptions = [];
            var isNavigatingAway = false;
            var savedRequestStateSignature = '';
            var hasInitializedRequestState = false;
            var lastAutoDocumentName = '';
            var submitRequestButtonHtml = submitRequestButton ? submitRequestButton.innerHTML : '';

            function navigateFromRequestForm(url) {
                if (typeof window.navigateDashboardContent === 'function') {
                    window.navigateDashboardContent(url);
                    return;
                }

                window.location.assign(url);
            }

            function setSubmitRequestLoading(isLoading) {
                if (!submitRequestButton) {
                    return;
                }

                submitRequestButton.disabled = !!isLoading;
                submitRequestButton.setAttribute('aria-busy', isLoading ? 'true' : 'false');
                submitRequestButton.innerHTML = isLoading
                    ? '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>' + @json(__('Processing...'))
                    : submitRequestButtonHtml;
            }

            if (!documentNameInput || !requestDescriptionInput || !mainDropzoneEl || !supportingDropzoneEl || !mainUploadedPathInput || !mainUploadedNameInput || !supportingUploadedPaths || !mainUploadProgress || !mainUploadProgressText || !mainUploadProgressPercent || !mainUploadProgressBar || !supportingUploadProgress || !supportingUploadProgressText || !supportingUploadProgressPercent || !supportingUploadProgressBar || !mainPreviewNode || !supportingPreviewNode || !formDataPayloadInput || !requestTypeInput || !normalRequestSections || !builderRequestSection || !mainFileCard || !uploadFilesTitle || !mainFileTitle || !documentInformationCard || !documentInformationTitle || !submissionRouteInfoWrap || !submissionRouteInfoList || !supportingFilesCard || !supportingFilesTitle || !supportingFilesHelp || !requiredFilesHintWrap || !requiredFilesHintList || !requiredFilesSection || !normalSubmitWrap || !dynamicFormDocLabel || !dynamicTemplatePreviewWrap || !dynamicTemplatePreviewPdf || !dynamicTemplateCanvas || !dynamicTemplatePreviewImage || !dynamicTemplateOverlay || !dynamicFormFields || !dynamicExtraOptions || !dynamicPaymentSummary || !dynamicUnitPrice || !dynamicTotalPayable || !addNewForm || typeof Dropzone === 'undefined') {
                return;
            }

            function clampUploadPercent(value) {
                var percent = Math.round(Number(value) || 0);
                if (percent < 0) {
                    return 0;
                }
                if (percent > 100) {
                    return 100;
                }
                return percent;
            }

            function updateUploadProgress(shell, bar, percentNode, textNode, percent, text, isError) {
                if (!shell || !bar || !percentNode || !textNode) {
                    return;
                }

                var safePercent = clampUploadPercent(percent);
                if (shell._uploadProgressHideTimer) {
                    window.clearTimeout(shell._uploadProgressHideTimer);
                    shell._uploadProgressHideTimer = null;
                }
                shell.classList.add('is-visible');
                shell.classList.toggle('border-danger', !!isError);
                bar.classList.toggle('bg-danger', !!isError);
                bar.classList.toggle('bg-success', !isError && safePercent >= 100);
                bar.style.width = safePercent + '%';
                bar.setAttribute('aria-valuenow', safePercent.toString());
                percentNode.textContent = safePercent + '%';
                textNode.textContent = text || @json(__('Uploading file...'));

                if (!isError && safePercent >= 100) {
                    shell._uploadProgressHideTimer = window.setTimeout(function () {
                        resetUploadProgress(shell, bar, percentNode, textNode);
                        shell._uploadProgressHideTimer = null;
                    }, 500);
                }
            }

            function resetUploadProgress(shell, bar, percentNode, textNode, text) {
                if (!shell || !bar || !percentNode || !textNode) {
                    return;
                }

                if (shell._uploadProgressHideTimer) {
                    window.clearTimeout(shell._uploadProgressHideTimer);
                    shell._uploadProgressHideTimer = null;
                }

                shell.classList.remove('is-visible', 'border-danger');
                bar.classList.remove('bg-danger', 'bg-success');
                bar.style.width = '0%';
                bar.setAttribute('aria-valuenow', '0');
                percentNode.textContent = '0%';
                textNode.textContent = text || '';
            }

            function normalizeStepText(value) {
                return (value || '').toString().trim().toLowerCase();
            }

            function setDocumentTypeInvalid(isInvalid) {
                var choicesWrap = requestTypeInput.closest('.choices');
                if (!choicesWrap && requestTypeInput.nextElementSibling && requestTypeInput.nextElementSibling.classList.contains('choices')) {
                    choicesWrap = requestTypeInput.nextElementSibling;
                }

                requestTypeInput.classList.toggle('is-invalid', isInvalid);
                requestTypeInput.setAttribute('aria-invalid', isInvalid ? 'true' : 'false');

                if (choicesWrap) {
                    choicesWrap.classList.toggle('is-invalid', isInvalid);
                    var choicesInner = choicesWrap.querySelector('.choices__inner');
                    if (choicesInner) {
                        choicesInner.classList.toggle('border-danger', isInvalid);
                    }
                }

                if (requestTypeError) {
                    requestTypeError.style.setProperty('display', isInvalid ? 'block' : 'none', 'important');
                }
            }

            function warnDocumentTypeRequired() {
                addNewForm.classList.add('was-validated');
                setDocumentTypeInvalid(true);
                var choicesWrap = requestTypeInput.closest('.choices');
                if (!choicesWrap && requestTypeInput.nextElementSibling && requestTypeInput.nextElementSibling.classList.contains('choices')) {
                    choicesWrap = requestTypeInput.nextElementSibling;
                }
                var scrollTarget = choicesWrap || requestTypeInput;

                if (scrollTarget && typeof scrollTarget.scrollIntoView === 'function') {
                    scrollTarget.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }

                var focusTarget = choicesWrap ? choicesWrap.querySelector('.choices__inner') : requestTypeInput;
                if (focusTarget && typeof focusTarget.focus === 'function') {
                    focusTarget.focus({ preventScroll: true });
                }
            }

            function showRequestErrorPopup(message, title) {
                var popupTitle = title || '{{ __('Cannot Submit Request') }}';
                var popupMessage = message || '{{ __('An error occurred. Please try again.') }}';

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: popupTitle,
                        text: popupMessage,
                        icon: 'error',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                        buttonsStyling: false
                    });
                } else {
                    alert(popupMessage);
                }
            }

            function showRequestWarningPopup(message, title) {
                var popupTitle = title || '{{ __('Cannot Submit Request') }}';
                var popupMessage = message || '{{ __('Please check the form and try again.') }}';

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: popupTitle,
                        text: popupMessage,
                        icon: 'warning',
                        confirmButtonText: '{{ __('OK') }}',
                        customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                        buttonsStyling: false
                    });
                } else {
                    alert(popupMessage);
                }
            }

            function hasCashierStep(steps) {
                return steps.some(function (step) {
                    var actorRole = normalizeStepText(step && step.actor_role);
                    var stepType = normalizeStepText(step && step.step_type);
                    var organizationName = normalizeStepText(step && step.organization_name);
                    return actorRole === 'cashier' || stepType === 'cashier' || organizationName.indexOf('cashier') !== -1;
                });
            }

            function hasRegistrationStep(steps) {
                return steps.some(function (step) {
                    var organizationName = normalizeStepText(step && step.organization_name);
                    var label = normalizeStepText(step && step.label);
                    var actorRole = normalizeStepText(step && step.actor_role);
                    var stepType = normalizeStepText(step && step.step_type);
                    return actorRole === 'registration'
                        || stepType === 'registration'
                        || organizationName.indexOf('registrat') !== -1
                        || label.indexOf('registrat') !== -1;
                });
            }

            function hasFacultyStep(steps) {
                return steps.some(function (step) {
                    var actorRole = normalizeStepText(step && step.actor_role);
                    var stepType = normalizeStepText(step && step.step_type);
                    return actorRole === 'faculty' || stepType === 'faculty';
                });
            }

            function normalizeFacultyOptionsList(raw) {
                if (!Array.isArray(raw)) {
                    return [];
                }

                return raw.map(function (item) {
                    if (typeof item === 'string') {
                        var text = item.trim();
                        if (!text) {
                            return null;
                        }

                        return { value: text, label: text, organization_name: text };
                    }

                    if (!item || typeof item !== 'object') {
                        return null;
                    }

                    var value = (item.value || item.organization_name || item.label || '').toString().trim();
                    if (!value) {
                        return null;
                    }

                    var label = (item.label || item.value || value).toString().trim();
                    var organizationName = (item.organization_name || value).toString().trim();

                    return { value: value, label: label, organization_name: organizationName };
                }).filter(function (item) {
                    return !!item;
                });
            }

            function renderNormalFacultyRoutingField(showField, options) {
                if (!facultyRoutingCard || !normalFacultySelect) {
                    return;
                }

                if (!showField) {
                    facultyRoutingCard.style.display = 'none';
                    normalFacultySelect.required = false;
                    normalFacultySelect.setCustomValidity('');
                    normalFacultySelect.innerHTML = '<option value="">{{ __('Select faculty') }}</option>';
                    normalFacultySelect.value = '';
                    return;
                }

                var normalizedOptions = normalizeFacultyOptionsList(options);
                var optionsMarkup = '<option value="">{{ __('Select faculty') }}</option>';
                normalizedOptions.forEach(function (option) {
                    optionsMarkup += '<option value="' + escapeHtmlReq(option.value) + '" data-organization-name="' + escapeHtmlReq(option.organization_name || option.value) + '">' + escapeHtmlReq(option.label) + '</option>';
                });

                normalFacultySelect.innerHTML = optionsMarkup;
                normalFacultySelect.required = true;
                normalFacultySelect.setCustomValidity('');
                facultyRoutingCard.style.display = '';
            }

            function renderSubmissionRouteInfo(steps) {
                var workflowSteps = Array.isArray(steps) ? steps : [];
                var showRegistration = hasRegistrationStep(workflowSteps);
                var showCashier = hasCashierStep(workflowSteps);

                submissionRouteInfoList.innerHTML = '';

                if (!showRegistration && !showCashier) {
                    submissionRouteInfoWrap.style.display = 'none';
                    return;
                }

                if (showRegistration) {
                    var registrationChip = document.createElement('span');
                    registrationChip.className = 'badge bg-info-subtle text-info';
                    registrationChip.textContent = 'Registration';
                    submissionRouteInfoList.appendChild(registrationChip);
                }

                if (showCashier) {
                    var cashierChip = document.createElement('span');
                    cashierChip.className = 'badge bg-warning-subtle text-warning';
                    cashierChip.textContent = 'Cashier';
                    submissionRouteInfoList.appendChild(cashierChip);
                }

                submissionRouteInfoWrap.style.display = '';
            }

            function setSectionStepTitles() {
                var hasFacultyRoutingStep = !isBuilderTemplateMode && workflowHasFacultyRouting;
                var uploadStep = hasFacultyRoutingStep ? '3' : '2';
                var documentStep = isBuilderTemplateMode ? '4' : (hasFacultyRoutingStep ? '4' : '3');

                uploadFilesTitle.innerHTML = '<span class="request-step-indicator">' + uploadStep + '</span>{{ __('Upload Files') }}';
                mainFileTitle.innerHTML = '{{ __('Upload Main File') }}<span class="required-mark"></span>';
                documentInformationTitle.innerHTML = '<span class="request-step-indicator">' + documentStep + '</span>{{ __('Document Information') }}';
                supportingFilesTitle.textContent = '{{ __('Add Supporting Files') }}';
            }

            function getRequestFormStateSignature() {
                var uploadedInputs = supportingUploadedPaths.querySelectorAll('input[data-upload-path]');
                var uploadedValues = [];
                for (var i = 0; i < uploadedInputs.length; i++) {
                    uploadedValues.push((uploadedInputs[i].name || '') + '=' + (uploadedInputs[i].value || ''));
                }

                var dynamicInputs = addNewForm.querySelectorAll('.dynamic-input');
                var dynamicValues = [];
                for (var j = 0; j < dynamicInputs.length; j++) {
                    var input = dynamicInputs[j];
                    var fieldName = (input.getAttribute('data-field-name') || input.name || ('dynamic_' + j)).toString();
                    var fieldValue = input.type === 'checkbox' ? (input.checked ? '1' : '0') : (input.value || '');
                    dynamicValues.push(fieldName + '=' + fieldValue);
                }

                var requiredState = requiredFileUploaders.map(function (uploader) {
                    return {
                        key: uploader.key,
                        uploadedPath: uploader.uploadedPath || '',
                        selected: !!uploader.selectedFile
                    };
                });

                return JSON.stringify({
                    documentType: (requestTypeInput.value || '').toString(),
                    documentName: (documentNameInput.value || '').toString(),
                    description: (requestDescriptionInput.value || '').toString(),
                    mainUploadedPath: (mainUploadedPathInput.value || '').toString(),
                    uploadedPaths: uploadedValues,
                    dynamicValues: dynamicValues,
                    requiredState: requiredState
                });
            }

            function markRequestStateSaved() {
                savedRequestStateSignature = getRequestFormStateSignature();
            }

            function hasUnsavedRequestChanges() {
                if (!hasInitializedRequestState) {
                    return false;
                }
                return getRequestFormStateSignature() !== savedRequestStateSignature;
            }

            function confirmLeaveWithUnsavedRequestChanges(onConfirm) {
                var warningText = '{{ __('You have unsaved changes. Leave without saving?') }}';

                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        title: '{{ __('Unsaved Changes') }}',
                        text: warningText,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '{{ __('Leave Without Saving') }}',
                        cancelButtonText: '{{ __('Stay') }}',
                        customClass: {
                            confirmButton: 'btn btn-primary w-xs me-2 mt-2',
                            cancelButton: 'btn btn-light w-xs mt-2'
                        },
                        buttonsStyling: false
                    }).then(function (result) {
                        if (result.isConfirmed && typeof onConfirm === 'function') {
                            onConfirm();
                        }
                    });
                    return;
                }

                if (window.confirm(warningText) && typeof onConfirm === 'function') {
                    onConfirm();
                }
            }

            function deriveDocumentTitleFromFilename(fileName) {
                var baseName = (fileName || '').toString().replace(/\.[^/.]+$/, '');
                baseName = baseName.replace(/[_-]+/g, ' ');
                return baseName.replace(/\s+/g, ' ').trim();
            }

            function initDynamicFacultyChoices() {
                var facultySelect = dynamicExtraOptions.querySelector('[data-field-name="' + getFacultyFieldName() + '"]');

                if (dynamicFacultyChoicesInstance && typeof dynamicFacultyChoicesInstance.destroy === 'function') {
                    dynamicFacultyChoicesInstance.destroy();
                    dynamicFacultyChoicesInstance = null;
                }

                if (!facultySelect || typeof window.Choices === 'undefined') {
                    return;
                }

                dynamicFacultyChoicesInstance = new window.Choices(facultySelect, {
                    searchEnabled: false,
                    shouldSort: false,
                    itemSelectText: ''
                });
            }

            function renderPdfAsImage(pdfUrl, token) {
                if (!window.pdfjsLib || !window.pdfjsLib.getDocument) {
                    return Promise.reject(new Error('PDF renderer unavailable.'));
                }

                window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';

                return window.pdfjsLib.getDocument({ url: pdfUrl }).promise
                    .then(function (pdf) {
                        var pageCanvases = [];
                        var totalHeight = 0;
                        var maxWidth = 0;
                        var targetWidth = Math.max(dynamicTemplateCanvas.clientWidth || 900, 600);

                        function renderPage(pageNumber) {
                            if (pageNumber > pdf.numPages) {
                                return Promise.resolve();
                            }

                            if (token !== renderToken) {
                                throw new Error('Render cancelled.');
                            }

                            return pdf.getPage(pageNumber).then(function (page) {
                                var baseViewport = page.getViewport({ scale: 1 });
                                var scale = targetWidth / baseViewport.width;
                                var viewport = page.getViewport({ scale: scale });
                                var canvas = document.createElement('canvas');
                                var context = canvas.getContext('2d', { alpha: false });

                                canvas.width = Math.floor(viewport.width);
                                canvas.height = Math.floor(viewport.height);

                                return page.render({
                                    canvasContext: context,
                                    viewport: viewport
                                }).promise.then(function () {
                                    pageCanvases.push(canvas);
                                    totalHeight += canvas.height;
                                    maxWidth = Math.max(maxWidth, canvas.width);
                                    return renderPage(pageNumber + 1);
                                });
                            });
                        }

                        return renderPage(1).then(function () {
                            if (token !== renderToken) {
                                throw new Error('Render cancelled.');
                            }

                            if (!pageCanvases.length || totalHeight <= 0 || maxWidth <= 0) {
                                throw new Error('PDF has no renderable pages.');
                            }

                            var maxCanvasHeight = 30000;
                            var maxCanvasWidth = 10000;
                            var finalScale = 1;

                            if (totalHeight > maxCanvasHeight) {
                                finalScale = Math.min(finalScale, maxCanvasHeight / totalHeight);
                            }

                            if (maxWidth > maxCanvasWidth) {
                                finalScale = Math.min(finalScale, maxCanvasWidth / maxWidth);
                            }

                            var stitchedCanvas = document.createElement('canvas');
                            var stitchedContext = stitchedCanvas.getContext('2d', { alpha: false });
                            var outputWidth = Math.max(1, Math.floor(maxWidth * finalScale));
                            var outputHeight = Math.max(1, Math.floor(totalHeight * finalScale));
                            var yOffset = 0;

                            stitchedCanvas.width = outputWidth;
                            stitchedCanvas.height = outputHeight;
                            stitchedContext.fillStyle = '#ffffff';
                            stitchedContext.fillRect(0, 0, outputWidth, outputHeight);

                            pageCanvases.forEach(function (canvas) {
                                var drawWidth = Math.floor(canvas.width * finalScale);
                                var drawHeight = Math.floor(canvas.height * finalScale);
                                stitchedContext.drawImage(canvas, 0, yOffset, drawWidth, drawHeight);
                                yOffset += drawHeight;
                            });

                            return stitchedCanvas.toDataURL('image/png');
                        });
                    });
            }

            Dropzone.autoDiscover = false;

            function buildPreviewTemplate(previewNode) {
                previewNode.id = '';
                var template = previewNode.parentNode.innerHTML;
                previewNode.parentNode.removeChild(previewNode);
                return template;
            }

            function getDropzoneErrorMessage(errorMessage) {
                if (typeof errorMessage === 'string') {
                    return errorMessage;
                }

                if (errorMessage && typeof errorMessage === 'object') {
                    if (typeof errorMessage.message === 'string') {
                        return errorMessage.message;
                    }

                    if (errorMessage.errors && Array.isArray(errorMessage.errors.file) && errorMessage.errors.file[0]) {
                        return errorMessage.errors.file[0];
                    }

                    if (errorMessage.errors && Array.isArray(errorMessage.errors.upload) && errorMessage.errors.upload[0]) {
                        return errorMessage.errors.upload[0];
                    }
                }

                return 'Upload failed. Please try again.';
            }

            function openUploadedFilePreview(file) {
                if (!file || !file.previewUrl) {
                    return;
                }

                var fileName = (file.uploadedName || file.name || '').toString();
                var extension = fileName.split('.').pop().toLowerCase();
                var isImage = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'svg'].indexOf(extension) !== -1;
                var isInlinePreview = isImage || extension === 'pdf' || ['txt', 'csv', 'json', 'xml'].indexOf(extension) !== -1;

                if (!isInlinePreview || !uploadedFilePreviewModalEl || typeof bootstrap === 'undefined') {
                    window.open(file.previewUrl, '_blank', 'noopener');
                    return;
                }

                uploadedFilePreviewTitle.textContent = fileName || @json(__('Document Preview'));
                uploadedFilePreviewImage.style.display = isImage ? 'block' : 'none';
                uploadedFilePreviewFrame.style.display = isImage ? 'none' : 'block';
                uploadedFilePreviewImage.src = isImage ? file.previewUrl : '';
                uploadedFilePreviewFrame.src = isImage ? '' : file.previewUrl;
                bootstrap.Modal.getOrCreateInstance(uploadedFilePreviewModalEl).show();
            }

            function bindUploadedFilePreview(file) {
                if (!file || !file.previewElement) {
                    return;
                }

                file.previewElement.addEventListener('click', function (event) {
                    if (event.target instanceof Element && event.target.closest('[data-dz-remove]')) {
                        return;
                    }
                    openUploadedFilePreview(file);
                });
            }

            if (uploadedFilePreviewModalEl) {
                uploadedFilePreviewModalEl.addEventListener('hidden.bs.modal', function () {
                    uploadedFilePreviewImage.src = '';
                    uploadedFilePreviewFrame.src = '';
                });
            }

            var mainPreviewTemplate = buildPreviewTemplate(mainPreviewNode);
            var supportingPreviewTemplate = buildPreviewTemplate(supportingPreviewNode);
            var dynamicSchema = null;
            var isSchemaLoading = false;
            var signaturePads = {};

            function formatCurrency(value) {
                var amount = Number(value);
                if (!isFinite(amount)) {
                    amount = 0;
                }

                return '$' + amount.toFixed(2);
            }

            function extractFacultyOptions(field) {
                if (!field || !Array.isArray(field.options)) {
                    return [];
                }

                return field.options.map(function (item) {
                    if (typeof item === 'string') {
                        var text = item.trim();
                        if (!text) {
                            return null;
                        }
                        return { value: text, label: text, organization_name: text };
                    }

                    if (item && typeof item === 'object') {
                        var label = (item.label || item.value || item.organization_name || '').toString().trim();
                        if (!label) {
                            return null;
                        }

                        var value = (item.value || label).toString().trim();
                        var organizationName = (item.organization_name || label).toString().trim();

                        return {
                            value: value,
                            label: label,
                            organization_name: organizationName
                        };
                    }

                    return null;
                }).filter(function (item) {
                    return !!item;
                });
            }

            function boolFromConfig(value) {
                if (value === true || value === 1) {
                    return true;
                }

                if (typeof value === 'string') {
                    return ['1', 'true', 'yes', 'on'].indexOf(value.toLowerCase().trim()) !== -1;
                }

                return false;
            }

            function isQuantityEnabled() {
                return boolFromConfig(dynamicSchema && dynamicSchema.pricing ? dynamicSchema.pricing.enabled : false);
            }

            function isFacultyEnabled() {
                return workflowHasFacultyRouting || boolFromConfig(dynamicSchema && dynamicSchema.faculty_routing ? dynamicSchema.faculty_routing.enabled : false);
            }

            function getQuantityFieldName() {
                return '__extra_quantity';
            }

            function getFacultyFieldName() {
                return '__extra_faculty';
            }

            function getQuantityInputValue() {
                var quantityInput = addNewForm.querySelector('[data-field-name="' + getQuantityFieldName() + '"]');
                if (!quantityInput) {
                    return 0;
                }

                var quantity = Number(quantityInput.value || 0);
                if (!isFinite(quantity) || quantity < 0) {
                    return 0;
                }

                return quantity;
            }

            function getSelectedFacultyMeta() {
                var fieldName = getFacultyFieldName();
                var facultyInput = addNewForm.querySelector('[data-field-name="' + fieldName + '"]');
                var selectedValue = facultyInput ? (facultyInput.value || '').toString().trim() : '';
                var selectedLabel = selectedValue;
                var selectedOrganization = selectedValue;

                var configuredOptions = (dynamicSchema && dynamicSchema.faculty_routing && dynamicSchema.faculty_routing.options)
                    ? dynamicSchema.faculty_routing.options
                    : workflowFacultyOptions;
                var options = extractFacultyOptions({ options: configuredOptions });
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value === selectedValue) {
                        selectedLabel = options[i].label;
                        selectedOrganization = options[i].organization_name || options[i].label;
                        break;
                    }
                }

                return {
                    fieldName: fieldName,
                    value: selectedValue,
                    label: selectedLabel,
                    organization: selectedOrganization
                };
            }

            function renderExtraOptionFields() {
                if (!dynamicSchema) {
                    dynamicExtraOptions.style.display = 'none';
                    dynamicExtraOptions.innerHTML = '';
                    return;
                }

                var quantityEnabled = isQuantityEnabled();
                var facultyEnabled = isFacultyEnabled();

                if (!quantityEnabled && !facultyEnabled) {
                    dynamicExtraOptions.style.display = 'none';
                    dynamicExtraOptions.innerHTML = '';
                    return;
                }

                var markup = '<div class="row g-2">';

                if (quantityEnabled) {
                    markup +=
                        '<div class="col-12 ' + (facultyEnabled ? 'col-md-6' : '') + '">' +
                        '<div class="dynamic-form-field">' +
                            '<label class="form-label mb-1">{{ __('Quantity') }}</label>' +
                            '<div class="small text-muted mb-2">{{ __('Choose how many documents you wish to receive.') }}</div>' +
                            '<input type="number" min="1" step="1" class="form-control dynamic-input" data-field-name="' + getQuantityFieldName() + '" placeholder="Enter quantity" required>' +
                        '</div>' +
                        '</div>';
                }

                if (facultyEnabled) {
                    var options = extractFacultyOptions({ options: (dynamicSchema.faculty_routing || {}).options || [] });
                    var optionsMarkup = '<option value="">{{ __('Select faculty') }}</option>';
                    options.forEach(function (opt) {
                        optionsMarkup += '<option value="' + escapeHtmlReq(opt.value) + '">' + escapeHtmlReq(opt.label) + '</option>';
                    });

                    markup +=
                        '<div class="col-12 ' + (quantityEnabled ? 'col-md-6' : '') + '">' +
                        '<div class="dynamic-form-field">' +
                            '<label class="form-label mb-1">{{ __('Faculty') }}</label>' +
                            '<div class="small text-muted mb-2">{{ __('Select the faculty that should handle this request.') }}</div>' +
                            '<select class="form-select dynamic-input" data-field-name="' + getFacultyFieldName() + '" data-choices data-choices-search-false required>' +
                                optionsMarkup +
                            '</select>' +
                        '</div>' +
                        '</div>';
                }

                markup += '</div>';
                dynamicExtraOptions.innerHTML = markup;
                dynamicExtraOptions.style.display = '';
                initDynamicFacultyChoices();
            }

            function updatePaymentSummary(payload) {
                var pricing = dynamicSchema && dynamicSchema.pricing ? dynamicSchema.pricing : {};
                var unitPrice = Number(pricing.unit_price || 0);

                if (!isFinite(unitPrice) || unitPrice <= 0) {
                    dynamicPaymentSummary.style.display = 'none';
                    return;
                }

                var quantity = getQuantityInputValue();

                var total = unitPrice * quantity;

                dynamicUnitPrice.textContent = formatCurrency(unitPrice);
                dynamicQuantityValue.textContent = quantity.toString();
                dynamicTotalPayable.textContent = formatCurrency(total);
                dynamicPaymentSummary.style.display = '';
            }

            var fileTooBigMessage = @json(__('File is too big (__FILESIZE__ MiB). Max size: __MAXSIZE__ MiB.'))
                .replace('__FILESIZE__', '{' + '{filesize}' + '}')
                .replace('__MAXSIZE__', '{' + '{maxFilesize}' + '}');

            var mainDropzone = new Dropzone('#mainFileDropzone', {
                url: '{{ route('requester.uploads.main') }}',
                autoProcessQueue: true,
                uploadMultiple: false,
                parallelUploads: 1,
                maxFiles: 1,
                previewTemplate: mainPreviewTemplate,
                previewsContainer: '#main-dropzone-preview',
                paramName: 'main_file',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                acceptedFiles: '.pdf,.png',
                maxFilesize: 30,
                addRemoveLinks: false,
                dictDefaultMessage: @json(__('Drop main file here or click to upload.')),
                dictInvalidFileType: @json(__('Only PDF and PNG are allowed for main file.')),
                dictMaxFilesExceeded: @json(__('Only one main file is allowed. Delete existing file first.')),
                dictFileTooBig: fileTooBigMessage
            });

            var supportingDropzone = new Dropzone('#supportingFilesDropzone', {
                url: '{{ route('requester.uploads.supporting') }}',
                autoProcessQueue: true,
                uploadMultiple: false,
                parallelUploads: 5,
                previewTemplate: supportingPreviewTemplate,
                previewsContainer: '#supporting-dropzone-preview',
                paramName: 'supporting_file',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                acceptedFiles: null,
                maxFilesize: 30,
                addRemoveLinks: false,
                dictDefaultMessage: @json(__('Drop supporting files here or click to upload.')),
                dictInvalidFileType: @json(__('This file type is not supported.')),
                dictFileTooBig: fileTooBigMessage
            });

            var supportingPreviewContainer = document.getElementById('supporting-dropzone-preview');
            if (supportingPreviewContainer) {
                supportingPreviewContainer.addEventListener('click', function (event) {
                    var removeButton = event.target instanceof Element
                        ? event.target.closest('[data-dz-remove]')
                        : null;
                    if (!removeButton) {
                        return;
                    }

                    var file = supportingDropzone.files.find(function (candidate) {
                        return candidate && candidate.previewElement && candidate.previewElement.contains(removeButton);
                    });
                    if (!file) {
                        return;
                    }

                    event.preventDefault();
                    event.stopPropagation();

                    if (file.status === Dropzone.UPLOADING) {
                        supportingDropzone.cancelUpload(file);
                    }
                    supportingDropzone.removeFile(file);
                }, true);
            }

            function trackSupportingFile(path, name, options) {
                if (!path || !supportingUploadedPaths) {
                    return;
                }

                var input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'supporting_uploaded_paths[]';
                input.value = path;
                input.setAttribute('data-upload-path', path);
                input.setAttribute('data-upload-name', name || '');
                supportingUploadedPaths.appendChild(input);

                var metaInput = document.createElement('input');
                metaInput.type = 'hidden';
                metaInput.name = 'supporting_uploaded_meta[]';
                metaInput.value = JSON.stringify({
                    path: path,
                    original_name: (options && options.originalName) ? options.originalName : (name || ''),
                    requirement_label: (options && options.requirementLabel) ? options.requirementLabel : ''
                });
                metaInput.setAttribute('data-upload-path', path);
                metaInput.setAttribute('data-upload-meta', '1');
                supportingUploadedPaths.appendChild(metaInput);
            }

            function untrackSupportingFile(path) {
                if (!path || !supportingUploadedPaths) {
                    return;
                }

                var trackedInputs = supportingUploadedPaths.querySelectorAll('input[data-upload-path]');
                for (var i = 0; i < trackedInputs.length; i++) {
                    if (trackedInputs[i].getAttribute('data-upload-path') === path) {
                        trackedInputs[i].remove();
                    }
                }
            }

            function removeUploadedFile(path) {
                if (!path) {
                    return;
                }

                fetch('{{ route('requester.uploads.remove') }}', {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ path: path })
                });
            }

            function syncMainDropzoneLockState() {
                var hasUploadedMain = !!mainUploadedPathInput.value;

                if (hasUploadedMain) {
                    mainDropzoneEl.classList.add('is-locked');
                    return;
                }

                mainDropzoneEl.classList.remove('is-locked');
            }

            var requiredFileUploaders = [];

            function renderRequiredFilesSection(requiredFiles) {
                requiredSupportingFiles = Array.isArray(requiredFiles) ? requiredFiles.slice() : [];

                requiredFileUploaders = [];
                requiredFilesSection.innerHTML = '';
                requiredFilesHintList.innerHTML = '';

                if (!requiredFiles || requiredFiles.length === 0) {
                    requiredFilesSection.style.display = 'none';
                    supportingFilesCard.style.display = 'block';
                    setSectionStepTitles();
                    supportingFilesHelp.textContent = @json(__('Supporting Files (multiple allowed). All file types are allowed.'));
                    requiredFilesHintWrap.style.display = 'none';
                    return;
                }

                supportingFilesCard.style.display = 'none';
                requiredFilesSection.style.display = 'block';
                requiredFilesHintWrap.style.display = 'none';

                var requiredTitleWrap = document.createElement('div');
                requiredTitleWrap.className = 'required-files-shell';
                requiredTitleWrap.innerHTML =
                    '<h5 class="upload-subsection-title mb-3">{{ __('Required Supporting Files') }}</h5>' +
                        '<p class="text-muted mb-3">{{ __('Please upload each required file before submitting.') }}</p>' +
                        '<div id="required-files-inner-list"></div>' +
                    '';
                requiredFilesSection.appendChild(requiredTitleWrap);

                var requiredFilesInnerList = document.getElementById('required-files-inner-list');
                if (!requiredFilesInnerList) {
                    return;
                }

                requiredFiles.forEach(function (fileItem, idx) {
                    var label = (fileItem.label || fileItem || '').toString();
                    var accept = (fileItem.accept || '').toString() || null;
                    var quantity = parseInt(fileItem && fileItem.quantity != null ? fileItem.quantity : 1, 10);
                    if (!isFinite(quantity) || quantity < 1) {
                        quantity = 1;
                    }

                    var inputId = 'req-file-input-' + idx;
                    var statusId = 'req-file-upload-status-' + idx;
                    var controlsId = 'req-file-controls-' + idx;
                    var fileCardId = 'req-file-card-' + idx;
                    var fileNameId = 'req-file-name-' + idx;
                    var deleteBtnId = 'req-file-delete-btn-' + idx;
                    var reqKey = 'required-' + idx;
                    var displayLabel = quantity > 1 ? (label + ' (Quantity required: ' + quantity + ')') : label;

                    var card = document.createElement('div');
                    card.className = 'required-file-item required-file-card';
                    card.innerHTML =
                        '<div class="d-flex align-items-center gap-2 mb-2">' +
                            '<span class="badge bg-warning-subtle text-warning">{{ __("Required") }}</span>' +
                            '<span class="required-file-item-title">' + escapeHtmlReq(displayLabel) + '</span>' +
                        '</div>' +
                        '<div id="' + controlsId + '">' +
                            '<input type="file" id="' + inputId + '" class="form-control" ' + (accept ? 'accept="' + escapeHtmlReq(accept) + '"' : '') + '>' +
                        '</div>' +
                        '<div id="' + fileCardId + '" class="border rounded p-2 mt-2" style="display:none;">' +
                            '<div class="d-flex align-items-center justify-content-between gap-2">' +
                                '<div class="text-truncate">' +
                                    '<div class="small text-muted">{{ __("Selected File") }}</div>' +
                                    '<div id="' + fileNameId + '" class="fw-medium text-truncate"></div>' +
                                '</div>' +
                                '<button id="' + deleteBtnId + '" type="button" class="btn btn-sm btn-danger">{{ __("Delete") }}</button>' +
                            '</div>' +
                        '</div>' +
                        '<p id="' + statusId + '" class="small text-muted mt-2 mb-0"></p>';
                    requiredFilesInnerList.appendChild(card);

                    var fileInput = document.getElementById(inputId);
                    var statusNode = document.getElementById(statusId);
                    var controlsWrap = document.getElementById(controlsId);
                    var fileCard = document.getElementById(fileCardId);
                    var fileNameNode = document.getElementById(fileNameId);
                    var deleteBtn = document.getElementById(deleteBtnId);

                    var uploader = {
                        key: reqKey,
                        label: label,
                        accept: accept,
                        selectedFile: null,
                        uploadedPath: '',
                        isUploading: false,
                        card: card,
                        fileInput: fileInput,
                        statusNode: statusNode,
                        controlsWrap: controlsWrap,
                        fileCard: fileCard,
                        fileNameNode: fileNameNode
                    };

                    function removeTrackedRequiredByKey(targetKey) {
                        var trackedInputs = supportingUploadedPaths.querySelectorAll('input[data-req-key]');
                        var oldPath = '';
                        for (var i = 0; i < trackedInputs.length; i++) {
                            if (trackedInputs[i].getAttribute('data-req-key') === targetKey) {
                                oldPath = oldPath || trackedInputs[i].getAttribute('data-upload-path') || '';
                                trackedInputs[i].remove();
                            }
                        }
                        return oldPath;
                    }

                    function setUploadedState(fileName) {
                        controlsWrap.style.display = 'none';
                        fileCard.style.display = 'block';
                        fileNameNode.textContent = fileName || displayLabel;
                    }

                    function setEmptyState() {
                        controlsWrap.style.display = 'block';
                        fileCard.style.display = 'none';
                        fileNameNode.textContent = '';
                        if (fileInput) {
                            fileInput.value = '';
                        }
                    }

                    fileInput.addEventListener('change', function () {
                        card.classList.remove('required-file-error');
                        var selectedFile = fileInput && fileInput.files && fileInput.files[0] ? fileInput.files[0] : null;
                        if (!selectedFile) {
                            uploader.selectedFile = null;
                            statusNode.textContent = '';
                            statusNode.className = 'small text-muted mt-2 mb-0';
                            setEmptyState();
                            return;
                        }

                        var previousPath = removeTrackedRequiredByKey(uploader.key);
                        if (previousPath) {
                            removeUploadedFile(previousPath);
                        }

                        uploader.uploadedPath = '';
                        uploader.selectedFile = selectedFile;
                        setUploadedState(selectedFile.name);
                        statusNode.textContent = 'Selected. This file will upload when you submit the request.';
                        statusNode.className = 'small text-muted mt-2 mb-0';
                    });

                    deleteBtn.addEventListener('click', function () {
                        var removedPath = removeTrackedRequiredByKey(uploader.key);
                        var targetPath = removedPath || uploader.uploadedPath;
                        if (targetPath) {
                            removeUploadedFile(targetPath);
                        }

                        uploader.selectedFile = null;
                        uploader.uploadedPath = '';
                        statusNode.textContent = 'File removed.';
                        statusNode.className = 'small text-muted mt-2 mb-0';
                        setEmptyState();
                    });

                    requiredFileUploaders.push(uploader);
                });
            }

            function escapeHtmlReq(text) {
                return (text || '').replace(/[&<>"']/g, function (c) {
                    return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[c];
                });
            }

            function setBuilderMode(enabled, requiredFiles) {
                isBuilderTemplateMode = !!enabled;
                setSectionStepTitles();

                if (enabled) {
                    builderRequestSection.style.display = 'block';
                    normalRequestSections.style.display = 'grid';
                    mainFileCard.style.display = 'none';
                    documentInformationCard.style.display = 'none';
                    normalSubmitWrap.style.display = '';
                    renderRequiredFilesSection(requiredFiles || []);
                    return;
                }

                builderRequestSection.style.display = 'none';
                normalRequestSections.style.display = 'grid';
                mainFileCard.style.display = 'block';
                documentInformationCard.style.display = 'block';
                normalSubmitWrap.style.display = '';
                renderRequiredFilesSection([]);
            }

            function resetDynamicForm(preserveWorkflowFaculty) {
                var preserveFaculty = !!preserveWorkflowFaculty;
                dynamicSchema = null;
                if (!preserveFaculty) {
                    workflowHasFacultyRouting = false;
                    workflowFacultyOptions = [];
                }
                renderSubmissionRouteInfo([]);
                signaturePads = {};
                if (dynamicFacultyChoicesInstance && typeof dynamicFacultyChoicesInstance.destroy === 'function') {
                    dynamicFacultyChoicesInstance.destroy();
                    dynamicFacultyChoicesInstance = null;
                }
                dynamicTemplateOverlay.innerHTML = '';
                dynamicFormFields.innerHTML = '';
                dynamicExtraOptions.innerHTML = '';
                dynamicExtraOptions.style.display = 'none';
                dynamicPaymentSummary.style.display = 'none';
                dynamicUnitPrice.textContent = '$0.00';
                dynamicQuantityValue.textContent = '0';
                dynamicTotalPayable.textContent = '$0.00';
                setBuilderMode(false, []);
                dynamicFormDocLabel.textContent = '';
                dynamicTemplatePreviewWrap.style.display = 'none';
                dynamicTemplatePreviewPdf.style.display = 'none';
                dynamicTemplatePreviewPdf.src = '';
                dynamicTemplateCanvas.style.display = 'none';
                dynamicTemplatePreviewImage.style.display = 'none';
                dynamicTemplatePreviewImage.src = '';
                formDataPayloadInput.value = '';
                if (preserveFaculty) {
                    renderNormalFacultyRoutingField(workflowHasFacultyRouting, workflowFacultyOptions);
                } else {
                    renderNormalFacultyRoutingField(false, []);
                }
            }

            function extractSchemaFields(schema) {
                if (!schema || typeof schema !== 'object') {
                    return [];
                }

                if (Array.isArray(schema.fields) && schema.fields.length) {
                    return schema.fields;
                }

                if (Array.isArray(schema.pages)) {
                    for (var i = 0; i < schema.pages.length; i++) {
                        if (schema.pages[i] && Array.isArray(schema.pages[i].fields) && schema.pages[i].fields.length) {
                            return schema.pages[i].fields;
                        }
                    }
                }

                return [];
            }

            function isFieldMarkedRequired(field) {
                if (!field || typeof field !== 'object') {
                    return false;
                }

                var requiredValue = field.required;
                if (requiredValue === undefined && field.validation && typeof field.validation === 'object') {
                    requiredValue = field.validation.required;
                }

                if (requiredValue === true) {
                    return true;
                }

                if (typeof requiredValue === 'number') {
                    return requiredValue === 1;
                }

                if (typeof requiredValue === 'string') {
                    var normalized = requiredValue.trim().toLowerCase();
                    return normalized === '1' || normalized === 'true' || normalized === 'yes' || normalized === 'on';
                }

                return false;
            }

            function createSignaturePad(canvas) {
                var ctx = canvas.getContext('2d');
                var drawing = false;

                function resizeCanvas() {
                    var ratio = window.devicePixelRatio || 1;
                    var width = canvas.clientWidth;
                    var height = canvas.clientHeight;
                    canvas.width = Math.floor(width * ratio);
                    canvas.height = Math.floor(height * ratio);
                    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
                    ctx.lineWidth = 2;
                    ctx.lineCap = 'round';
                    ctx.strokeStyle = '#212529';
                }

                function getPoint(event) {
                    var rect = canvas.getBoundingClientRect();
                    var source = event.touches && event.touches[0] ? event.touches[0] : event;
                    return {
                        x: source.clientX - rect.left,
                        y: source.clientY - rect.top
                    };
                }

                function start(event) {
                    event.preventDefault();
                    drawing = true;
                    var point = getPoint(event);
                    ctx.beginPath();
                    ctx.moveTo(point.x, point.y);
                }

                function move(event) {
                    if (!drawing) {
                        return;
                    }

                    event.preventDefault();
                    var point = getPoint(event);
                    ctx.lineTo(point.x, point.y);
                    ctx.stroke();
                }

                function end(event) {
                    if (!drawing) {
                        return;
                    }

                    event.preventDefault();
                    drawing = false;
                }

                resizeCanvas();

                canvas.addEventListener('mousedown', start);
                canvas.addEventListener('mousemove', move);
                canvas.addEventListener('mouseup', end);
                canvas.addEventListener('mouseleave', end);
                canvas.addEventListener('touchstart', start, { passive: false });
                canvas.addEventListener('touchmove', move, { passive: false });
                canvas.addEventListener('touchend', end, { passive: false });

                return {
                    clear: function () {
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                    },
                    value: function () {
                        var dataUrl = canvas.toDataURL('image/png');
                        return dataUrl.length > 100 ? dataUrl : '';
                    }
                };
            }

            function normalizePosition(position) {
                var x = Number(position && position.x);
                var y = Number(position && position.y);
                var width = Number(position && position.width);
                var height = Number(position && position.height);

                if (!isFinite(x) || !isFinite(y) || !isFinite(width) || !isFinite(height)) {
                    return null;
                }

                return {
                    x: Math.min(Math.max(x, 0), 0.95),
                    y: Math.min(Math.max(y, 0), 0.95),
                    width: Math.min(Math.max(width, 0.08), 0.8),
                    height: Math.min(Math.max(height, 0.015), 0.3)
                };
            }

            function normalizeFontSize(size) {
                var fontSize = Number(size);
                if (!isFinite(fontSize)) {
                    fontSize = 12;
                }
                return Math.round(Math.min(Math.max(fontSize, 8), 48));
            }

            function getFieldFontSize(field, position) {
                var savedSize = field && (field.font_size !== undefined ? field.font_size : field.fontSize);
                var fontSize = Number(savedSize);

                if (isFinite(fontSize)) {
                    return normalizeFontSize(fontSize);
                }

                var pos = position || normalizePosition(field && field.position);
                if (!pos) {
                    return 12;
                }

                return Math.round(Math.min(Math.max(pos.height * 120, 10), 22));
            }

            function renderTemplatePreview(url, isImage) {
                renderToken += 1;
                var token = renderToken;
                dynamicTemplatePreviewPdf.style.display = 'none';
                dynamicTemplateCanvas.style.display = 'none';
                dynamicTemplatePreviewImage.style.display = 'none';
                dynamicTemplatePreviewImage.onload = null;

                if (!url) {
                    return;
                }

                if (isImage) {
                    dynamicTemplatePreviewImage.onload = function () {
                        if (dynamicSchema && Array.isArray(dynamicSchema.fields)) {
                            renderDynamicFields(dynamicSchema, { isImageTemplate: true });
                        }
                    };
                    dynamicTemplatePreviewImage.onerror = function () {
                        if (dynamicSchema && Array.isArray(dynamicSchema.fields)) {
                            renderDynamicFields(dynamicSchema, { isImageTemplate: true });
                        }
                    };
                    dynamicTemplatePreviewImage.src = url;
                    dynamicTemplatePreviewImage.style.display = 'block';
                    dynamicTemplateCanvas.style.display = 'block';
                    // If image is already loaded (cached), onload won't fire, so call manually
                    if (dynamicTemplatePreviewImage.complete && dynamicTemplatePreviewImage.naturalHeight !== 0) {
                        if (dynamicSchema && Array.isArray(dynamicSchema.fields)) {
                            renderDynamicFields(dynamicSchema, { isImageTemplate: true });
                        }
                    }
                    return;
                }

                renderPdfAsImage(url, token).then(function (imageDataUrl) {
                    if (token !== renderToken) {
                        return;
                    }

                    dynamicTemplatePreviewImage.onload = function () {
                        if (dynamicSchema && Array.isArray(dynamicSchema.fields)) {
                            renderDynamicFields(dynamicSchema, { isImageTemplate: true });
                        }
                    };
                    dynamicTemplatePreviewImage.onerror = function () {
                        if (dynamicSchema && Array.isArray(dynamicSchema.fields)) {
                            renderDynamicFields(dynamicSchema, { isImageTemplate: true });
                        }
                    };
                    dynamicTemplatePreviewImage.src = imageDataUrl;
                    dynamicTemplatePreviewImage.style.display = 'block';
                    dynamicTemplateCanvas.style.display = 'block';
                    // If image is already loaded (cached), onload won't fire, so call manually
                    if (dynamicTemplatePreviewImage.complete && dynamicTemplatePreviewImage.naturalHeight !== 0) {
                        if (dynamicSchema && Array.isArray(dynamicSchema.fields)) {
                            renderDynamicFields(dynamicSchema, { isImageTemplate: true });
                        }
                    }
                }).catch(function () {
                    if (token !== renderToken) {
                        return;
                    }

                    dynamicTemplatePreviewPdf.src = url;
                    dynamicTemplatePreviewPdf.style.display = 'block';
                    renderDynamicFields(dynamicSchema, { isImageTemplate: false });
                });
            }

            function renderOverlayField(field) {
                var fieldName = (field.name || '').toString().trim();
                if (!fieldName) {
                    return;
                }

                var type = (field.type || 'text').toString();
                var placeholder = (field.placeholder || '').toString();
                var position = normalizePosition(field.position);
                var fontSize = getFieldFontSize(field, position);
                var isRequired = isFieldMarkedRequired(field);

                if (!position) {
                    return;
                }

                var wrapper = document.createElement('div');
                wrapper.className = 'template-overlay-field';
                wrapper.setAttribute('data-field-type', type);
                wrapper.style.left = (position.x * 100) + '%';
                wrapper.style.top = (position.y * 100) + '%';
                wrapper.style.width = (position.width * 100) + '%';
                wrapper.style.height = (position.height * 100) + '%';

                if (type === 'signature') {
                    wrapper.innerHTML =
                        '<canvas class="signature-pad" data-signature-name="' + fieldName + '"></canvas>';
                    dynamicTemplateOverlay.appendChild(wrapper);
                    signaturePads[fieldName] = createSignaturePad(wrapper.querySelector('canvas'));
                    return;
                }

                if (type === 'checkbox') {
                    wrapper.innerHTML = '<div class="form-check h-100 d-flex align-items-center justify-content-center">' +
                        '<input class="form-check-input dynamic-input" type="checkbox" data-field-name="' + fieldName + '" id="dynamic-overlay-' + fieldName + '" ' + (isRequired ? 'required' : '') + '>' +
                    '</div>';
                    dynamicTemplateOverlay.appendChild(wrapper);
                    return;
                }

                if (type === 'faculty_select') {
                    var options = extractFacultyOptions(field);
                    var optionsHtml = '<option value="">{{ __('Select faculty') }}</option>';
                    options.forEach(function (opt) {
                        optionsHtml += '<option value="' + escapeHtmlReq(opt.value) + '">' + escapeHtmlReq(opt.label) + '</option>';
                    });

                    wrapper.innerHTML =
                        '<select class="form-control dynamic-input" data-field-name="' + fieldName + '" ' + (isRequired ? 'required' : '') + ' style="font-size:' + fontSize + 'px;">' +
                            optionsHtml +
                        '</select>';
                    dynamicTemplateOverlay.appendChild(wrapper);
                    return;
                }

                var inputType = type === 'date' ? 'date' : (type === 'number' ? 'number' : 'text');
                wrapper.innerHTML =
                    '<input type="' + inputType + '" class="form-control dynamic-input" data-field-name="' + fieldName + '" placeholder="' + placeholder + '" ' + (isRequired ? 'required' : '') + ' style="font-size:' + fontSize + 'px;">';
                dynamicTemplateOverlay.appendChild(wrapper);
            }

            function renderDynamicFields(schema, options) {
                dynamicFormFields.innerHTML = '';
                dynamicTemplateOverlay.innerHTML = '';
                signaturePads = {};

                var isImageTemplate = !!(options && options.isImageTemplate);

                var fields = Array.isArray(schema.fields) ? schema.fields : [];
                if (!fields.length) {
                    dynamicFormFields.innerHTML = '<p class="text-muted mb-0">{{ __('No template fields configured for this document type.') }}</p>';
                    return;
                }

                fields.forEach(function (field) {
                    if (isImageTemplate && normalizePosition(field.position)) {
                        renderOverlayField(field);
                        return;
                    }

                    var fieldName = (field.name || '').toString().trim();
                    if (!fieldName) {
                        return;
                    }

                    var type = (field.type || 'text').toString();
                    var placeholder = (field.placeholder || '').toString();
                    var isRequired = isFieldMarkedRequired(field);

                    var wrapper = document.createElement('div');
                    wrapper.className = 'dynamic-form-field';

                    if (type === 'signature') {
                        wrapper.innerHTML =
                            '<canvas class="signature-pad" data-signature-name="' + fieldName + '"></canvas>' +
                            '<div class="mt-2 text-end"><button type="button" class="btn btn-sm btn-light signature-clear-btn" data-signature-name="' + fieldName + '">{{ __('Clear') }}</button></div>';
                        dynamicFormFields.appendChild(wrapper);
                        var canvas = wrapper.querySelector('canvas');
                        signaturePads[fieldName] = createSignaturePad(canvas);
                        return;
                    }

                    if (type === 'checkbox') {
                        wrapper.innerHTML = '<div class="form-check">' +
                            '<input class="form-check-input dynamic-input" type="checkbox" data-field-name="' + fieldName + '" id="dynamic-' + fieldName + '" ' + (isRequired ? 'required' : '') + '>' +
                        '</div>';
                        dynamicFormFields.appendChild(wrapper);
                        return;
                    }

                    if (type === 'faculty_select') {
                        var options = extractFacultyOptions(field);
                        var optionsMarkup = '<option value="">{{ __('Select faculty') }}</option>';
                        options.forEach(function (opt) {
                            optionsMarkup += '<option value="' + escapeHtmlReq(opt.value) + '">' + escapeHtmlReq(opt.label) + '</option>';
                        });

                        wrapper.innerHTML =
                            '<select class="form-control dynamic-input" data-field-name="' + fieldName + '" ' + (isRequired ? 'required' : '') + ' style="font-size:' + getFieldFontSize(field) + 'px; min-height: calc(1.8em + .75rem + 2px);">' +
                                optionsMarkup +
                            '</select>';
                        dynamicFormFields.appendChild(wrapper);
                        return;
                    }

                    var inputType = type === 'date' ? 'date' : (type === 'number' ? 'number' : 'text');
                    wrapper.innerHTML =
                        '<input type="' + inputType + '" class="form-control dynamic-input" data-field-name="' + fieldName + '" placeholder="' + placeholder + '" ' + (isRequired ? 'required' : '') + ' style="font-size:' + getFieldFontSize(field) + 'px; min-height: calc(1.8em + .75rem + 2px);">';
                    dynamicFormFields.appendChild(wrapper);
                });

                renderExtraOptionFields();
                updatePaymentSummary(collectDynamicFormPayload());
            }

            function collectDynamicFormPayload() {
                if (!dynamicSchema || !Array.isArray(dynamicSchema.fields)) {
                    return {};
                }

                var payload = {};

                dynamicSchema.fields.forEach(function (field) {
                    var fieldName = (field.name || '').toString().trim();
                    if (!fieldName) {
                        return;
                    }

                    var type = (field.type || 'text').toString();

                    if (type === 'signature') {
                        payload[fieldName] = signaturePads[fieldName] ? signaturePads[fieldName].value() : '';
                        return;
                    }

                    var input = addNewForm.querySelector('[data-field-name="' + fieldName + '"]');
                    if (!input) {
                        payload[fieldName] = '';
                        return;
                    }

                    if (type === 'checkbox') {
                        payload[fieldName] = input.checked ? 'check' : 'uncheck';
                        return;
                    }

                    payload[fieldName] = (input.value || '').toString().trim();
                });

                if (isQuantityEnabled()) {
                    payload[getQuantityFieldName()] = getQuantityInputValue();
                }

                if (isFacultyEnabled()) {
                    var selectedFaculty = getSelectedFacultyMeta();
                    payload[getFacultyFieldName()] = selectedFaculty.value;
                }

                return payload;
            }

            function applyPricingAndFacultyMetadata(payload) {
                if (!payload || typeof payload !== 'object') {
                    return payload;
                }

                var pricing = (dynamicSchema && dynamicSchema.pricing) ? dynamicSchema.pricing : {};
                var unitPrice = Number(pricing.unit_price || 0);
                if (isQuantityEnabled() && isFinite(unitPrice) && unitPrice > 0) {
                    var quantityValue = getQuantityInputValue();
                    if (!isFinite(quantityValue) || quantityValue < 0) {
                        quantityValue = 0;
                    }

                    var total = unitPrice * quantityValue;

                    payload.__pricing_unit_price = unitPrice;
                    payload.__pricing_quantity = quantityValue;
                    payload.__pricing_total = total;
                    payload.__payment_total = total;
                }

                if (isFacultyEnabled()) {
                    var selectedFaculty = getSelectedFacultyMeta();
                    payload.__faculty_field_name = selectedFaculty.fieldName;
                    payload.__selected_faculty_value = selectedFaculty.value;
                    payload.__selected_faculty_label = selectedFaculty.label;
                    payload.__selected_faculty_organization = selectedFaculty.organization;
                    payload[selectedFaculty.fieldName] = selectedFaculty.value;
                }

                return payload;
            }

            function firstMissingRequiredField(payload) {
                if (!dynamicSchema || !Array.isArray(dynamicSchema.fields)) {
                    return null;
                }

                for (var i = 0; i < dynamicSchema.fields.length; i++) {
                    var field = dynamicSchema.fields[i];
                    if (!field || !isFieldMarkedRequired(field)) {
                        continue;
                    }

                    var fieldName = (field.name || '').toString().trim();
                    if (!fieldName) {
                        continue;
                    }

                    var type = (field.type || 'text').toString();

                    var value = payload[fieldName];

                    var missing = value === undefined || value === null || (typeof value === 'string' && value.trim() === '');
                    if (type === 'checkbox') {
                        missing = value !== 'check';
                    }

                    if (missing) {
                        return (field.label || fieldName).toString();
                    }
                }

                if (isQuantityEnabled()) {
                    var quantityValue = getQuantityInputValue();
                    if (!isFinite(quantityValue) || quantityValue <= 0) {
                        return 'Quantity';
                    }
                }

                if (isFacultyEnabled()) {
                    var selectedFaculty = getSelectedFacultyMeta();
                    if (!selectedFaculty.value) {
                        return 'Faculty';
                    }
                }

                return null;
            }

            function loadDocumentTypeFormSchema(code) {
                if (!code) {
                    isSchemaLoading = false;
                    resetDynamicForm();
                    return;
                }

                isSchemaLoading = true;

                fetch('/requester/document-types/' + encodeURIComponent(code) + '/form-schema', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    }
                }).then(function (response) {
                    return response.json().then(function (payload) {
                        return { ok: response.ok, payload: payload };
                    });
                }).then(function (result) {
                    if (!result.ok) {
                        resetDynamicForm();
                        return;
                    }

                    var schema = result.payload.form_schema;
                    var workflowSteps = Array.isArray(result.payload.workflow_steps) ? result.payload.workflow_steps : [];
                    workflowHasFacultyRouting = !!result.payload.workflow_has_faculty || hasFacultyStep(workflowSteps);
                    workflowFacultyOptions = normalizeFacultyOptionsList(result.payload.faculty_options || []);
                    renderNormalFacultyRoutingField(workflowHasFacultyRouting, workflowFacultyOptions);
                    var extractedFields = extractSchemaFields(schema);
                    var hasFields = extractedFields.length > 0;
                    var reqFiles = Array.isArray(result.payload.required_files) ? result.payload.required_files : [];

                    renderSubmissionRouteInfo(workflowSteps);

                    if (!hasFields) {
                        resetDynamicForm(true);
                        // Still apply required files even in normal (non-builder) mode
                        if (reqFiles.length > 0) {
                            renderRequiredFilesSection(reqFiles);
                        }
                        return;
                    }

                    dynamicSchema = {
                        fields: extractedFields,
                        pricing: (schema && schema.pricing && typeof schema.pricing === 'object') ? schema.pricing : {},
                        faculty_routing: (schema && schema.faculty_routing && typeof schema.faculty_routing === 'object') ? schema.faculty_routing : {}
                    };

                    setBuilderMode(true, reqFiles);
                    dynamicFormDocLabel.textContent = result.payload.name || '';
                    if (!documentNameInput.value) {
                        documentNameInput.value = (result.payload.name || '').toString();
                    }
                    dynamicTemplatePreviewWrap.style.display = result.payload.template_pdf_url ? 'block' : 'none';
                    renderTemplatePreview(result.payload.template_pdf_url || '', !!result.payload.is_image);
                    renderDynamicFields(dynamicSchema, {
                        isImageTemplate: !!result.payload.template_pdf_url
                    });
                    updatePaymentSummary(collectDynamicFormPayload());
                }).catch(function () {
                    resetDynamicForm();
                }).then(function () {
                    isSchemaLoading = false;
                    if (!hasInitializedRequestState) {
                        markRequestStateSaved();
                        hasInitializedRequestState = true;
                    }
                });
            }

            mainDropzone.on('addedfile', function (file) {
                bindUploadedFilePreview(file);
                if (mainUploadedPathInput.value) {
                    mainDropzone.removeFile(file);
                    return;
                }

                updateUploadProgress(
                    mainUploadProgress,
                    mainUploadProgressBar,
                    mainUploadProgressPercent,
                    mainUploadProgressText,
                    0,
                    @json(__('Preparing upload...'))
                );
            });

            mainDropzone.on('maxfilesexceeded', function (file) {
                mainDropzone.removeFile(file);
            });

            mainDropzone.on('uploadprogress', function (file, progress) {
                updateUploadProgress(
                    mainUploadProgress,
                    mainUploadProgressBar,
                    mainUploadProgressPercent,
                    mainUploadProgressText,
                    progress,
                    @json(__('Uploading main file...'))
                );
            });

            mainDropzone.on('success', function (file, response) {
                file.uploadedPath = response && response.path ? response.path : '';
                file.uploadedName = response && response.name ? response.name : (file && file.name ? file.name : '');
                file.previewUrl = response && response.url ? response.url : URL.createObjectURL(file);
                if (file.previewElement) {
                    file.previewElement.style.cursor = 'pointer';
                    file.previewElement.title = @json(__('Click to preview'));
                }
                mainUploadedPathInput.value = file.uploadedPath;
                mainUploadedNameInput.value = file.uploadedName;

                var nextAutoDocumentName = deriveDocumentTitleFromFilename(file.uploadedName);
                var currentDocumentName = (documentNameInput.value || '').toString().trim();
                if (!currentDocumentName || currentDocumentName === lastAutoDocumentName) {
                    documentNameInput.value = nextAutoDocumentName;
                    lastAutoDocumentName = nextAutoDocumentName;
                }

                if (file && file.previewElement) {
                    var messageNode = file.previewElement.querySelector('[data-dz-errormessage]');
                    if (messageNode) {
                        messageNode.textContent = '';
                    }
                }

                updateUploadProgress(
                    mainUploadProgress,
                    mainUploadProgressBar,
                    mainUploadProgressPercent,
                    mainUploadProgressText,
                    100,
                    @json(__('Upload complete.'))
                );

                syncMainDropzoneLockState();
            });

            mainDropzone.on('error', function (file, errorMessage) {
                updateUploadProgress(
                    mainUploadProgress,
                    mainUploadProgressBar,
                    mainUploadProgressPercent,
                    mainUploadProgressText,
                    100,
                    getDropzoneErrorMessage(errorMessage),
                    true
                );

                if (file && file.previewElement) {
                    var messageNode = file.previewElement.querySelector('[data-dz-errormessage]');
                    if (messageNode) {
                        messageNode.textContent = getDropzoneErrorMessage(errorMessage);
                    }
                }
            });

            mainDropzone.on('removedfile', function (file) {
                if (file && file.uploadedPath) {
                    removeUploadedFile(file.uploadedPath);
                }

                var removedAutoDocumentName = deriveDocumentTitleFromFilename(
                    file && (file.uploadedName || file.name) ? (file.uploadedName || file.name) : ''
                );
                var currentDocumentName = (documentNameInput.value || '').toString().trim();
                if (currentDocumentName && (currentDocumentName === lastAutoDocumentName || currentDocumentName === removedAutoDocumentName)) {
                    documentNameInput.value = '';
                }
                lastAutoDocumentName = '';

                mainUploadedPathInput.value = '';
                mainUploadedNameInput.value = '';
                resetUploadProgress(
                    mainUploadProgress,
                    mainUploadProgressBar,
                    mainUploadProgressPercent,
                    mainUploadProgressText
                );
                syncMainDropzoneLockState();
            });

            syncMainDropzoneLockState();

            requestTypeInput.addEventListener('change', function () {
                var selectedDocumentType = (requestTypeInput.value || '').toString().trim();
                setDocumentTypeInvalid(selectedDocumentType === '');
                loadDocumentTypeFormSchema(selectedDocumentType);
            });

            dynamicFormFields.addEventListener('click', function (event) {
                var clearBtn = event.target.closest('.signature-clear-btn');
                if (!clearBtn) {
                    return;
                }

                var fieldName = clearBtn.getAttribute('data-signature-name');
                if (fieldName && signaturePads[fieldName]) {
                    signaturePads[fieldName].clear();
                    updatePaymentSummary(collectDynamicFormPayload());
                }
            });

            addNewForm.addEventListener('input', function () {
                if (!dynamicSchema) {
                    return;
                }

                updatePaymentSummary(collectDynamicFormPayload());
            });

            addNewForm.addEventListener('change', function () {
                if (!dynamicSchema) {
                    return;
                }

                updatePaymentSummary(collectDynamicFormPayload());
            });

            addNewForm.addEventListener('keydown', function (event) {
                if (event.key !== 'Enter') {
                    return;
                }

                var target = event.target;
                if (!target) {
                    return;
                }

                var tagName = (target.tagName || '').toLowerCase();
                var type = ((target.getAttribute && target.getAttribute('type')) || '').toLowerCase();

                // Keep Enter behavior for multiline fields and explicit submit buttons.
                if (tagName === 'textarea' || type === 'submit' || type === 'button') {
                    return;
                }

                event.preventDefault();
            });

            addNewForm.addEventListener('submit', function (event) {
                event.preventDefault();

                requiredFileUploaders.forEach(function (uploader) {
                    if (uploader && uploader.card) {
                        uploader.card.classList.remove('required-file-error');
                    }
                });

                if (!(requestTypeInput.value || '').toString().trim()) {
                    warnDocumentTypeRequired();
                    return;
                }

                if (!addNewForm.checkValidity()) {
                    addNewForm.classList.add('was-validated');

                    var firstInvalid = addNewForm.querySelector(':invalid');
                    if (firstInvalid) {
                        if (firstInvalid === requestTypeInput) {
                            warnDocumentTypeRequired();
                            return;
                        }

                        if (typeof firstInvalid.scrollIntoView === 'function') {
                            firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }

                        if (typeof firstInvalid.focus === 'function') {
                            firstInvalid.focus({ preventScroll: true });
                        }
                    }
                    return;
                }

                if (isSchemaLoading) {
                    showRequestWarningPopup('{{ __('Form schema is still loading. Please wait and submit again.') }}');
                    return;
                }

                if (mainDropzone.getUploadingFiles().length > 0) {
                    showRequestWarningPopup('{{ __('Main file is still uploading. Please wait and submit again.') }}');
                    return;
                }

                var requiredUploadsInProgress = requiredFileUploaders.some(function (uploader) {
                    return uploader.isUploading;
                });

                if (requiredUploadsInProgress) {
                    showRequestWarningPopup('{{ __('Required files are still uploading. Please wait and submit again.') }}');
                    return;
                }

                function uploadRequiredFileForSubmit(uploader) {
                    if (!uploader || uploader.uploadedPath || !uploader.selectedFile) {
                        return Promise.resolve();
                    }

                    var payload = new FormData();
                    payload.append('supporting_file', uploader.selectedFile);

                    uploader.isUploading = true;
                    if (uploader.statusNode) {
                        uploader.statusNode.textContent = @json(__('Uploading...')) + ' 0%';
                        uploader.statusNode.className = 'small text-muted mt-2 mb-0';
                    }

                    return new Promise(function (resolve, reject) {
                        var xhr = new XMLHttpRequest();

                        xhr.upload.addEventListener('progress', function (event) {
                            if (!event.lengthComputable || !uploader.statusNode) {
                                return;
                            }

                            var percent = clampUploadPercent((event.loaded / event.total) * 100);
                            uploader.statusNode.textContent = @json(__('Uploading...')) + ' ' + percent + '%';
                            uploader.statusNode.className = 'small text-muted mt-2 mb-0';
                        });

                        xhr.addEventListener('load', function () {
                            var result = {};

                            try {
                                result = xhr.responseText ? JSON.parse(xhr.responseText) : {};
                            } catch (e) {
                                reject(new Error(@json(__('Invalid JSON response from server.'))));
                                return;
                            }

                            if (xhr.status < 200 || xhr.status >= 300 || !result.path) {
                                reject(new Error(getDropzoneErrorMessage(result)));
                                return;
                            }

                            uploader.uploadedPath = result.path;
                            trackSupportingFile(uploader.uploadedPath, uploader.selectedFile.name, {
                                originalName: uploader.selectedFile.name,
                                requirementLabel: uploader.label
                            });

                            Array.prototype.slice.call(supportingUploadedPaths.querySelectorAll('input[data-upload-path]')).forEach(function (trackedInput) {
                                if (trackedInput.getAttribute('data-upload-path') === uploader.uploadedPath) {
                                    trackedInput.setAttribute('data-req-key', uploader.key);
                                    trackedInput.setAttribute('data-req-label', uploader.label);
                                }
                            });

                            if (uploader.statusNode) {
                                uploader.statusNode.textContent = @json(__('Upload complete.'));
                                uploader.statusNode.className = 'small text-success mt-2 mb-0';
                            }

                            resolve();
                        });

                        xhr.addEventListener('error', function () {
                            reject(new Error(@json(__('Upload failed. Please try again.'))));
                        });

                        xhr.addEventListener('abort', function () {
                            reject(new Error(@json(__('Upload cancelled.'))));
                        });

                        xhr.open('POST', '{{ route('requester.uploads.supporting') }}');
                        xhr.setRequestHeader('X-CSRF-TOKEN', csrfToken);
                        xhr.setRequestHeader('Accept', 'application/json');
                        xhr.send(payload);
                    }).catch(function (error) {
                        if (uploader.statusNode) {
                            uploader.statusNode.textContent = error && error.message ? error.message : @json(__('Upload failed. Please try again.'));
                            uploader.statusNode.className = 'small text-danger mt-2 mb-0';
                        }
                        throw error;
                    }).then(function () {
                        uploader.isUploading = false;
                    }, function (error) {
                        uploader.isUploading = false;
                        throw error;
                    });
                }

                if (Array.isArray(requiredSupportingFiles) && requiredSupportingFiles.length > 0) {
                    var firstMissingRequiredUploader = null;
                    requiredFileUploaders.forEach(function (uploader) {
                        var isMissing = !uploader.uploadedPath && !uploader.selectedFile;
                        if (!isMissing) {
                            return;
                        }

                        if (!firstMissingRequiredUploader) {
                            firstMissingRequiredUploader = uploader;
                        }

                        if (uploader.card) {
                            uploader.card.classList.add('required-file-error');
                        }

                        if (uploader.statusNode) {
                            uploader.statusNode.textContent = 'This required file is missing.';
                            uploader.statusNode.className = 'small text-danger mt-2 mb-0';
                        }
                    });

                    if (firstMissingRequiredUploader) {
                        if (firstMissingRequiredUploader.card && typeof firstMissingRequiredUploader.card.scrollIntoView === 'function') {
                            firstMissingRequiredUploader.card.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                        return;
                    }

                    var pendingUploaders = requiredFileUploaders.filter(function (uploader) {
                        return !uploader.uploadedPath && !!uploader.selectedFile;
                    });

                    if (pendingUploaders.length > 0) {
                        var submitButton = addNewForm.querySelector('button[type="submit"]');
                        setSubmitRequestLoading(true);

                        Promise.all(pendingUploaders.map(uploadRequiredFileForSubmit)).then(function () {
                            if (submitButton) {
                                submitButton.disabled = false;
                            }
                            addNewForm.requestSubmit();
                        }).catch(function () {
                            setSubmitRequestLoading(false);
                            showRequestErrorPopup('{{ __('Some required files failed to upload. Please fix and submit again.') }}');
                        });
                        return;
                    }
                }

                if (Array.isArray(requiredSupportingFiles) && requiredSupportingFiles.length > 0) {
                    var uploadedRequiredCount = supportingUploadedPaths.querySelectorAll('input[data-upload-path]').length;
                    if (uploadedRequiredCount < requiredFileUploaders.length) {
                        var firstFallbackMissingUploader = null;
                        requiredFileUploaders.forEach(function (uploader) {
                            if (!uploader.uploadedPath) {
                                uploader.card.classList.add('required-file-error');
                                if (uploader.statusNode) {
                                    uploader.statusNode.textContent = 'This required file is missing.';
                                    uploader.statusNode.className = 'small text-danger mt-2 mb-0';
                                }
                                if (!firstFallbackMissingUploader) {
                                    firstFallbackMissingUploader = uploader;
                                }
                            }
                        });
                        if (firstFallbackMissingUploader && firstFallbackMissingUploader.card && typeof firstFallbackMissingUploader.card.scrollIntoView === 'function') {
                            firstFallbackMissingUploader.card.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                        return;
                    }
                }

                // Non-form-builder documents submit without dynamic payload.
                if (!dynamicSchema || !Array.isArray(dynamicSchema.fields) || !dynamicSchema.fields.length) {
                    if (workflowHasFacultyRouting) {
                        var facultyPayload = applyPricingAndFacultyMetadata({});
                        if (!facultyPayload.__selected_faculty_value) {
                            showRequestWarningPopup('{{ __('Please fill required field: Faculty') }}');
                            return;
                        }
                        formDataPayloadInput.value = JSON.stringify(facultyPayload);
                    } else {
                        formDataPayloadInput.value = '';
                    }
                } else {
                    var payload = collectDynamicFormPayload();
                    var missingLabel = firstMissingRequiredField(payload);

                    if (missingLabel) {
                        showRequestWarningPopup('{{ __('Please fill required field') }}: ' + missingLabel);
                        return;
                    }

                    payload = applyPricingAndFacultyMetadata(payload);
                    formDataPayloadInput.value = JSON.stringify(payload);
                }

                var submitButton = addNewForm.querySelector('button[type="submit"]');
                setSubmitRequestLoading(true);

                var formData = new FormData(addNewForm);

                fetch(addNewForm.action, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: formData
                }).then(function (response) {
                    return response.text().then(function (text) {
                        var data = {};

                        try {
                            data = text ? JSON.parse(text) : {};
                        } catch (e) {
                            data = {
                                message: '{{ __('The server returned an invalid response. Please refresh and try again.') }}'
                            };
                        }

                        return {
                            ok: response.ok,
                            status: response.status,
                            data: data
                        };
                    });
                }).then(function (result) {
                    if (!result.ok || (result.data && result.data.success === false)) {
                        var errorMsg = '{{ __('An error occurred. Please try again.') }}';

                        if (result.data && result.data.message) {
                            errorMsg = result.data.message;
                        } else if (result.data && result.data.errors) {
                            var errorKeys = Object.keys(result.data.errors);
                            if (errorKeys.length > 0 && Array.isArray(result.data.errors[errorKeys[0]]) && result.data.errors[errorKeys[0]].length > 0) {
                                errorMsg = result.data.errors[errorKeys[0]][0];
                            }
                        }

                        showRequestErrorPopup(errorMsg, '{{ __('Cannot Submit Request') }}');

                        setSubmitRequestLoading(false);
                        return;
                    }

                    if (typeof Swal !== 'undefined') {
                        Swal.fire({
                            title: '{{ __('Success!') }}',
                            text: result.data && result.data.message ? result.data.message : '{{ __('Request submitted successfully!') }}',
                            icon: 'success',
                            confirmButtonText: '{{ __('Go to Dashboard') }}',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            customClass: { confirmButton: 'btn btn-primary w-xs mt-2' },
                            buttonsStyling: false
                        }).then(function () {
                            isNavigatingAway = true;
                            var dashboardUrl = (result.data && result.data.redirect_url) ? result.data.redirect_url : @json($dashboardUrl);
                            navigateFromRequestForm(dashboardUrl);
                        });
                    } else {
                        isNavigatingAway = true;
                        var dashboardUrl = (result.data && result.data.redirect_url) ? result.data.redirect_url : @json($dashboardUrl);
                        navigateFromRequestForm(dashboardUrl);
                    }
                }).catch(function (error) {
                    console.error('Form submission error:', error);
                    var errorMsg = error && error.message ? error.message : '{{ __('An error occurred. Please try again.') }}';
                    showRequestErrorPopup(errorMsg, '{{ __('Cannot Submit Request') }}');
                    setSubmitRequestLoading(false);
                });
            });

            if (cancelRequestBtn) {
                cancelRequestBtn.addEventListener('click', function (event) {
                    var targetHref = cancelRequestBtn.getAttribute('href') || '';
                    if (!targetHref || isNavigatingAway || !hasUnsavedRequestChanges()) {
                        return;
                    }

                    event.preventDefault();
                    confirmLeaveWithUnsavedRequestChanges(function () {
                        isNavigatingAway = true;
                        navigateFromRequestForm(targetHref);
                    });
                });
            }

            document.addEventListener('click', function (event) {
                // Turbo keeps document-level listeners alive between page renders.
                // This handler belongs only to the currently mounted request form.
                if (!document.documentElement.contains(addNewForm)
                    || event.defaultPrevented
                    || isNavigatingAway
                    || !hasUnsavedRequestChanges()) {
                    return;
                }

                if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
                    return;
                }

                var anchor = event.target.closest('a[href]');
                if (!anchor) {
                    return;
                }

                if (anchor === cancelRequestBtn) {
                    return;
                }

                var hrefAttr = (anchor.getAttribute('href') || '').trim();
                if (!hrefAttr || hrefAttr === '#' || hrefAttr.indexOf('javascript:') === 0) {
                    return;
                }

                if ((anchor.getAttribute('target') || '').toLowerCase() === '_blank' || anchor.hasAttribute('download')) {
                    return;
                }

                var targetUrl;
                try {
                    targetUrl = new URL(anchor.href, window.location.href);
                } catch (e) {
                    return;
                }

                var currentUrl = new URL(window.location.href);
                if (targetUrl.href === currentUrl.href) {
                    return;
                }

                event.preventDefault();
                confirmLeaveWithUnsavedRequestChanges(function () {
                    isNavigatingAway = true;
                    navigateFromRequestForm(targetUrl.href);
                });
            });

            window.addEventListener('beforeunload', function (event) {
                if (!document.documentElement.contains(addNewForm)
                    || isNavigatingAway
                    || !hasUnsavedRequestChanges()) {
                    return;
                }

                event.preventDefault();
                event.returnValue = '';
            });

            loadDocumentTypeFormSchema((requestTypeInput.value || '').toString().trim());

            supportingDropzone.on('addedfile', function (file) {
                bindUploadedFilePreview(file);
                var removeButton = file && file.previewElement
                    ? file.previewElement.querySelector('[data-dz-remove]')
                    : null;
                if (removeButton) {
                    removeButton.addEventListener('click', function (event) {
                        event.preventDefault();
                        event.stopImmediatePropagation();

                        if (file.status === Dropzone.UPLOADING) {
                            supportingDropzone.cancelUpload(file);
                        }
                        supportingDropzone.removeFile(file);

                        if (file.previewElement && file.previewElement.parentNode) {
                            file.previewElement.parentNode.removeChild(file.previewElement);
                        }
                    }, true);
                }

                updateUploadProgress(
                    supportingUploadProgress,
                    supportingUploadProgressBar,
                    supportingUploadProgressPercent,
                    supportingUploadProgressText,
                    0,
                    @json(__('Preparing upload...'))
                );
            });

            supportingDropzone.on('totaluploadprogress', function (progress) {
                updateUploadProgress(
                    supportingUploadProgress,
                    supportingUploadProgressBar,
                    supportingUploadProgressPercent,
                    supportingUploadProgressText,
                    progress,
                    @json(__('Uploading supporting files...'))
                );
            });

            supportingDropzone.on('success', function (file, response) {
                file.uploadedPath = response && response.path ? response.path : '';
                file.uploadedName = response && response.name ? response.name : file.name;
                file.previewUrl = response && response.url ? response.url : URL.createObjectURL(file);
                if (file.previewElement) {
                    file.previewElement.style.cursor = 'pointer';
                    file.previewElement.title = @json(__('Click to preview'));
                }
                trackSupportingFile(file.uploadedPath, file.name, {
                    originalName: file.name,
                    requirementLabel: ''
                });
            });

            supportingDropzone.on('queuecomplete', function () {
                if (supportingDropzone.getRejectedFiles().length > 0) {
                    return;
                }

                updateUploadProgress(
                    supportingUploadProgress,
                    supportingUploadProgressBar,
                    supportingUploadProgressPercent,
                    supportingUploadProgressText,
                    100,
                    @json(__('Upload complete.'))
                );
            });

            supportingDropzone.on('error', function (file, errorMessage) {
                updateUploadProgress(
                    supportingUploadProgress,
                    supportingUploadProgressBar,
                    supportingUploadProgressPercent,
                    supportingUploadProgressText,
                    100,
                    getDropzoneErrorMessage(errorMessage),
                    true
                );

                if (file && file.previewElement) {
                    var messageNode = file.previewElement.querySelector('[data-dz-errormessage]');
                    if (messageNode) {
                        messageNode.textContent = getDropzoneErrorMessage(errorMessage);
                    }
                }
            });

            supportingDropzone.on('removedfile', function (file) {
                if (file && file.uploadedPath) {
                    removeUploadedFile(file.uploadedPath);
                    untrackSupportingFile(file.uploadedPath);
                }

                if (supportingDropzone.files.length === 0) {
                    resetUploadProgress(
                        supportingUploadProgress,
                        supportingUploadProgressBar,
                        supportingUploadProgressPercent,
                        supportingUploadProgressText
                    );
                }
            });
        })();
    </script>
@endsection