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

@section('css')
    <link href="{{ URL::asset('build/libs/dropzone/dropzone.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('build/libs/choices.js/public/assets/styles/choices.min.css') }}" rel="stylesheet" type="text/css" />
    @include('document-requests.partials.create-styles')
@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

    <div class="dashboard-content-heading mb-3">
        <h4 class="mb-1 fw-semibold">{{ __('Create New Request') }}</h4>
        <p class="mb-0 text-muted fs-13">{{ __('Follow the sections below to complete your request accurately and faster.') }}</p>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card request-page-shell">
                <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-sorting-false
                                    data-choices-search-true
                                    data-choices-search-placeholder-value="{{ __('Search or type document type...') }}"
                                    data-choices-no-results-text="{{ __('No document types found.') }}"
                                    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/libs/choices.js/public/assets/scripts/choices.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>
    @include('document-requests.partials.create-script')
@endsection