@props(['demographyconfigId','moduleid','mandatory','results'])

@php
use App\Models\Demography;

$Field = DB::table('DemographyConfig')->where('DemographyConfigId',$demographyconfigId)->first();
$DisplayName = $Field->LabelValue;
$ColumnName = $Field->ColumnName;
$DependentField = $Field->DependentField;
$Helptext = $Field->Helptext;

$DependentFieldId = explode(",", (string)$Field->DependentFieldId);
$DependentFieldColumnName = "";
$DependentFieldColumnNameValue = "";

try {
    if (!empty($DependentFieldId[0])) {
        $DependentFieldColumnName = Demography::GetDependentFieldColumnName($moduleid, $DependentFieldId[0]);
        $DependentFieldColumnNameValue = $results->$DependentFieldColumnName ?? null;
    }
} catch (\Exception $e) {}

$LabelValue = $results->$ColumnName ?? '';

// Required marker
if ($mandatory==1) {
    $RequiredField="required";
    $DisplayredStar="*";
} else {
    $RequiredField="";
    $DisplayredStar="";
}

// Dependent field visibility
if ($DependentField==1) {
    if (in_array($DependentFieldColumnNameValue, $DependentFieldId)) {
        $displayHide = "";
    } else {
        $displayHide = "displayHide";
        $RequiredField = "";
    }
} else {
    $displayHide = "";
}

// Build ordered list of existing files from CSV of UUIDs
$existingFiles = [];
if (!empty($LabelValue)) {
    $ids = array_values(array_filter(array_map('trim', explode(',', (string)$LabelValue))));
    if ($ids) {
        $rows = DB::table('TemporaryFiles')
            ->whereIn('TemporaryFilesId', $ids)
            ->where('DeletedStatus', 0)
            ->get(['TemporaryFilesId','FileName','FilePath'])
            ->keyBy('TemporaryFilesId');

        foreach ($ids as $id) {
            if (isset($rows[$id])) {
                $existingFiles[] = [
                    'TemporaryFilesId' => $id,
                    'FileName' => $rows[$id]->FileName ?? 'UnknownFile',
                    'FilePath' => $rows[$id]->FilePath ?? '',
                ];
            }
        }
    }
}

// Get the existing UniqueReferenceId from the first file (all should have same UniqueReferenceId)
$existingUniqueRefId = '';
if (!empty($existingFiles)) {
    $firstFile = DB::table('TemporaryFiles')
        ->where('TemporaryFilesId', $existingFiles[0]['TemporaryFilesId'])
        ->first(['UniqueReferenceId']);
    if ($firstFile) {
        $existingUniqueRefId = $firstFile->UniqueReferenceId;
    }
}
@endphp

<div class="col-md-4 form-group {{$displayHide}}" id="{{$ColumnName}}Wrapper{{$moduleid}}">
    <label class="mb-1 d-block">
        {{ $DisplayName }} <font color='red'>{{$DisplayredStar}}</font>
    </label>
    
    <div class="uploader-block">
        <!-- FilePond Upload Input -->
        <div class="simple-filepond-wrapper">
            <input
                type="file"
                filetype="fileInput"
                class="filepond file-upload-multiple"
                name="{{$ColumnName}}"
                id="{{$ColumnName}}{{$moduleid}}"
                {{$RequiredField}}
                multiple
                data-allow-reorder="true"
                data-max-file-size="10MB"
                data-max-files="10"
                data-existing-unique-ref="{{$existingUniqueRefId}}"
                accept="image/*,.pdf,.doc,.docx,.txt,.html">
        </div>
        
        <!-- Display existing and newly uploaded files -->
        <div id="{{$ColumnName}}{{$moduleid}}-names" class="uploaded-names mt-2">
            @if(!empty($existingFiles))
                <ul class="list-unstyled mb-0">
                    @foreach($existingFiles as $file)
                        <li title="{{$file['FileName']}}">
                            <a href="{{ url('DownloadFiles', $file['TemporaryFilesId']) }}" target="_blank" rel="noopener">
                                {{ $file['FileName'] }}
                            </a>
                            <span 
                                class="delete-file-btn" 
                                onclick="deleteFileEdit('{{$file['TemporaryFilesId']}}', '{{$moduleid}}', '{{$existingUniqueRefId}}', '{{$ColumnName}}{{$moduleid}}')"
                            >
                                &times;
                            </span>
                        </li>
                    @endforeach
                </ul>
            @else
                <span class="text-muted" style="font-size:12px;">No files uploaded yet</span>
            @endif
        </div>
    </div>

    <div class="invalid-feedback">Please upload {{$DisplayName}}</div>
</div>

<style>
/* FilePond Button Styles */
.simple-filepond-wrapper .filepond--root {
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: top;
    height: 38px !important;
}

.simple-filepond-wrapper .filepond--panel-root {
    background-color: transparent !important;
    border: none !important;
}

.simple-filepond-wrapper .filepond--drop-label {
    background: #0d6efd !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

.simple-filepond-wrapper .filepond--drop-label::before {
    content: '📁';
    margin-right: 8px;
    font-size: 16px;
    line-height: 1;
}

.simple-filepond-wrapper .filepond--drop-label label {
    display: none !important;
}

.simple-filepond-wrapper .filepond--drop-label:hover {
    background: #0b5ed7 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}

.simple-filepond-wrapper .filepond--drop-label:active {
    background: #0a58ca !important;
    transform: translateY(1px);
}

.simple-filepond-wrapper .filepond--list,
.simple-filepond-wrapper .filepond--item,
.filepond--credits {
    display: none !important;
}

.uploaded-names {
    font-size: 13px;
    color: #495057;
    max-height: 120px;
    overflow-y: auto;
    margin-top: 8px;
}

.uploaded-names ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.uploaded-names li {
    padding: 6px 10px;
    margin: 3px 0;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #495057;
}

.uploaded-names li a {
    flex: 1;
    text-decoration: none;
    color: #0d6efd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploaded-names li a:hover {
    text-decoration: underline;
}

.delete-file-btn {
    cursor: pointer;
    font-weight: bold;
    color: #e7515a;
    font-size: 16px;
    line-height: 1;
    margin-left: 10px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.delete-file-btn:hover {
    color: #c00;
}

.simple-filepond-wrapper .filepond--browser:focus + .filepond--drop-label {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.25) !important;
}
</style>