{{--
    Processor Drawing Documents tab — included in jobs/show.blade.php
    Accessible by: processor (upload/manage), factory_employee (view/download only)
    Also visible to office_admin and project_manager in the full tab view.
--}}
@php
    $authUser        = auth()->user();
    $authRole        = $authUser->role?->name ?? '';
    $canUpload       = !in_array($authRole, ['factory_employee']);
    $isFactoryEmpl   = $authRole === 'factory_employee';
@endphp

<div class="space-y-5">
    <div class="flex items-center justify-between">
        <div>
            <h3 class="flex items-center gap-2">
                <i class="fas fa-drafting-compass text-indigo-400"></i> Processor Drawing Documents
                <span class="badge badge-gray">{{ $processorDocuments->count() }}</span>
            </h3>
            <p class="text-xs text-slate-500 mt-0.5">
                @if($isFactoryEmpl)
                    Drawing documents provided by the processor team.
                @else
                    Upload and manage processor drawing documents for this job.
                @endif
            </p>
        </div>
    </div>

    {{-- Upload form (hidden for factory_employee) --}}
    @if($canUpload)
    <div class="card p-5" style="background:#0f172a;">
        <h4 class="text-sm font-semibold text-slate-300 mb-4">
            <i class="fas fa-cloud-upload-alt text-indigo-400 mr-2"></i>Upload Drawing Document
        </h4>
        <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data" id="processorUploadForm">
            @csrf
            <input type="hidden" name="documentable_type" value="Job">
            <input type="hidden" name="documentable_id" value="{{ $job->id }}">
            <input type="hidden" name="category" value="processor_drawing">

            <div class="border-2 border-dashed border-slate-600 rounded-lg p-6 text-center hover:border-indigo-500 transition-colors" id="processorDropZone">
                <i class="fas fa-drafting-compass text-3xl text-slate-500 mb-2"></i>
                <p class="text-slate-400 text-sm mb-1">Drag &amp; drop drawing files here or click to browse</p>
                <p class="text-slate-500 text-xs mb-3">PDF, Word, Excel, Images, ZIP — max 20 MB each</p>
                <label class="btn btn-secondary cursor-pointer text-sm">
                    <i class="fas fa-folder-open mr-1"></i> Browse Files
                    <input type="file" name="file" id="processorFileInput" class="hidden"
                           accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif,.xls,.xlsx,.csv,.txt,.zip">
                </label>
            </div>

            <div id="processorFilePreview" class="hidden mt-3 p-3 bg-slate-700 rounded-lg flex items-center gap-3">
                <i class="fas fa-drafting-compass text-indigo-400 text-xl"></i>
                <div class="flex-1 min-w-0">
                    <p id="processorFileName" class="text-sm font-medium text-white truncate"></p>
                    <p id="processorFileSize" class="text-xs text-slate-400"></p>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <input type="text" name="name" id="processorCustomName" placeholder="Custom label (optional)" class="input text-sm py-1" style="width:180px;">
                    <button type="submit" class="btn btn-primary text-sm py-1 px-3">
                        <i class="fas fa-upload mr-1"></i> Upload
                    </button>
                    <button type="button" id="processorClearFile" class="btn btn-secondary text-sm py-1 px-2">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
    @endif

    {{-- Document list --}}
    @if($processorDocuments->isEmpty())
    <div class="card p-12 text-center" style="background:#0f172a;">
        <i class="fas fa-drafting-compass text-slate-700 text-4xl mb-3 block"></i>
        <p class="text-slate-400 text-sm">No processor drawing documents uploaded yet.</p>
        @if($canUpload)
        <p class="text-xs text-slate-500 mt-1">Use the upload form above to add the first drawing.</p>
        @endif
    </div>
    @else
    <div class="divide-y divide-slate-700 card" style="background:#0f172a;">
        @foreach($processorDocuments as $doc)
        <div class="flex items-center gap-3 p-4">
            @php
                $mime = $doc->file_type ?? '';
                $icon = 'fa-file';
                $iconColor = 'text-indigo-400';
                if (str_contains($mime, 'pdf'))   { $icon = 'fa-file-pdf';   $iconColor = 'text-red-400'; }
                elseif (str_contains($mime, 'word') || str_ends_with($doc->file_path, '.doc') || str_ends_with($doc->file_path, '.docx')) { $icon = 'fa-file-word'; $iconColor = 'text-blue-400'; }
                elseif (str_contains($mime, 'excel') || str_contains($mime, 'spreadsheet') || in_array(pathinfo($doc->file_path, PATHINFO_EXTENSION), ['xls','xlsx','csv'])) { $icon = 'fa-file-excel'; $iconColor = 'text-green-400'; }
                elseif (str_contains($mime, 'image')) { $icon = 'fa-file-image'; $iconColor = 'text-purple-400'; }
                elseif (str_contains($mime, 'zip') || str_contains($mime, 'compressed')) { $icon = 'fa-file-archive'; $iconColor = 'text-yellow-400'; }
            @endphp
            <i class="fas {{ $icon }} {{ $iconColor }} text-xl flex-shrink-0"></i>
            <div class="flex-1 min-w-0">
                <p class="text-sm font-medium text-white truncate">{{ $doc->name }}</p>
                <p class="text-xs text-slate-400">
                    {{ $doc->formatted_size }}
                    &bull; {{ $doc->created_at->format('d M Y, g:i a') }}
                    @if($doc->uploader) &bull; <span class="text-indigo-400">{{ $doc->uploader->name }}</span> @endif
                </p>
            </div>
            <div class="flex items-center gap-2 flex-shrink-0">
                <a href="{{ route('documents.download', $doc) }}"
                   class="btn btn-secondary text-xs py-1 px-2"
                   title="Download">
                    <i class="fas fa-download"></i> Download
                </a>
                @if($canUpload && !$isFactoryEmpl)
                    @if(in_array($authRole, ['office_admin','project_manager']) || $doc->uploaded_by === $authUser->id)
                    <form method="POST" action="{{ route('documents.destroy', $doc) }}"
                          onsubmit="return confirm('Delete \'{{ addslashes($doc->name) }}\'?')">
                        @csrf @method('DELETE')
                        <button type="submit" class="btn text-xs py-1 px-2 bg-red-600 hover:bg-red-700 text-white" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </form>
                    @endif
                @endif
            </div>
        </div>
        @endforeach
    </div>
    @endif
</div>

@push('scripts')
<script>
(function () {
    const fileInput  = document.getElementById('processorFileInput');
    const dropZone   = document.getElementById('processorDropZone');
    const preview    = document.getElementById('processorFilePreview');
    const nameEl     = document.getElementById('processorFileName');
    const sizeEl     = document.getElementById('processorFileSize');
    const clearBtn   = document.getElementById('processorClearFile');
    if (!fileInput) return;

    function formatBytes(b) {
        if (b < 1024) return b + ' B';
        if (b < 1048576) return (b / 1024).toFixed(1) + ' KB';
        return (b / 1048576).toFixed(1) + ' MB';
    }

    function showPreview(file) {
        nameEl.textContent = file.name;
        sizeEl.textContent = formatBytes(file.size);
        preview.classList.remove('hidden');
        dropZone.classList.add('hidden');
    }

    function clearSelection() {
        fileInput.value = '';
        preview.classList.add('hidden');
        dropZone.classList.remove('hidden');
        document.getElementById('processorCustomName').value = '';
    }

    fileInput.addEventListener('change', () => {
        if (fileInput.files[0]) showPreview(fileInput.files[0]);
    });

    clearBtn.addEventListener('click', clearSelection);

    dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('border-indigo-400'); });
    dropZone.addEventListener('dragleave', () => dropZone.classList.remove('border-indigo-400'));
    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('border-indigo-400');
        const dt = e.dataTransfer;
        if (dt.files[0]) {
            const dT = new DataTransfer();
            dT.items.add(dt.files[0]);
            fileInput.files = dT.files;
            showPreview(dt.files[0]);
        }
    });
})();
</script>
@endpush