@extends('layouts.app')
@section('title', 'Documents — ' . $job->job_number)
@section('breadcrumb')
    <a href="{{ route('jobs.index') }}" class="hover:text-white">Jobs</a>
    <i class="fas fa-chevron-right text-xs mx-2 text-slate-600"></i>
    <a href="{{ route('jobs.show', $job) }}" class="hover:text-white">{{ $job->job_number }}</a>
    <i class="fas fa-chevron-right text-xs mx-2 text-slate-600"></i>
    <span class="text-white">Documents</span>
@endsection

@section('content')
@php
$tabs = [
    'original_designer_plans' => ['label' => 'Original Designer Plans', 'icon' => 'fa-drafting-compass'],
    'variations'              => ['label' => 'Variations',              'icon' => 'fa-random'],
    'production_plans'        => ['label' => 'Production Plans',        'icon' => 'fa-industry'],
    'sample_door_requests'    => ['label' => 'Sample Door Requests',    'icon' => 'fa-door-open'],
    'appliances'              => ['label' => 'Appliances',              'icon' => 'fa-blender'],
    'delivery'                => ['label' => 'Delivery',                'icon' => 'fa-truck'],
    'photographs'             => ['label' => 'Photographs',             'icon' => 'fa-camera'],
    'pm'                      => ['label' => 'PM',                      'icon' => 'fa-user-tie'],
    'home_warranty'           => ['label' => 'Home Warranty',           'icon' => 'fa-home'],
];
$imageTypes = ['image/jpeg','image/png','image/gif','image/webp'];
@endphp

<div x-data="{ activeTab: '{{ $activeTab }}' }">

{{-- Header --}}
<div class="flex items-center justify-between mb-6">
    <div>
        <div class="flex items-center gap-3 mb-1">
            <a href="{{ route('jobs.show', $job) }}"
               class="w-8 h-8 rounded flex items-center justify-center hover:bg-slate-700 text-slate-400 hover:text-white transition-colors">
                <i class="fas fa-arrow-left text-sm"></i>
            </a>
            <h1>Job Documents</h1>
            <span class="badge badge-blue font-mono">{{ $job->job_number }}</span>
        </div>
        <p class="ml-11 text-slate-400">
            {{ $job->contact?->full_name ?? '—' }}
            @if($job->site_address) &nbsp;·&nbsp; {{ $job->site_address }}{{ $job->site_suburb ? ', '.$job->site_suburb : '' }} @endif
        </p>
    </div>
    <div class="text-right">
        <div class="text-xs text-slate-500">Total documents</div>
        <div class="text-2xl font-bold text-white">{{ $allDocuments->count() }}</div>
    </div>
</div>

@if(session('success'))
<div class="card p-4 mb-4 border-green-600 bg-green-900/20 text-green-300 flex items-center gap-2">
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="card p-4 mb-4 border-red-600 bg-red-900/20 text-red-300 flex items-center gap-2">
    <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
</div>
@endif
@if($errors->any())
<div class="card p-4 mb-4 border-red-600 bg-red-900/20 text-red-300">
    <div class="flex items-center gap-2 mb-1"><i class="fas fa-exclamation-triangle"></i><strong>Upload failed</strong></div>
    <ul class="text-xs list-disc ml-5 space-y-0.5">
        @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
    </ul>
</div>
@endif

{{-- Tab bar --}}
<div class="card overflow-hidden mb-0" style="border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none;">
    <!-- Added flex-wrap to allow wrapping to a second line -->
    <div class="flex flex-wrap border-b border-slate-700">
        @foreach($tabs as $key => $tab)
        @php $count = $allDocuments->where('category', $key)->count(); @endphp
        <button
            @click="activeTab = '{{ $key }}'"
            :class="activeTab === '{{ $key }}'
                ? 'border-b-2 border-blue-500 text-blue-400 bg-slate-800/50'
                : 'text-slate-500 hover:text-slate-300 hover:bg-slate-700/30'"
            class="flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors focus:outline-none border-b border-transparent">
            <i class="fas {{ $tab['icon'] }} text-xs opacity-70"></i>
            {{ $tab['label'] }}
            @if($count > 0)
            <span class="ml-1 px-1.5 py-0.5 rounded-full text-xs font-bold
                {{ $key === $activeTab ? 'bg-blue-500 text-white' : 'bg-slate-700 text-slate-400' }}"
                :class="activeTab === '{{ $key }}' ? 'bg-blue-500 text-white' : 'bg-slate-700 text-slate-400'">
                {{ $count }}
            </span>
            @endif
        </button>
        @endforeach
    </div>
</div>


{{-- Tab panels --}}
@foreach($tabs as $key => $tab)
@php $docs = $allDocuments->where('category', $key)->values(); @endphp
<div x-show="activeTab === '{{ $key }}'"
     class="card"
     style="border-top-left-radius:0;border-top-right-radius:0;"
     x-transition:enter="transition-opacity duration-150"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100">

    <div class="p-5 border-b border-slate-700 flex items-center justify-between">
        <div>
            <h3 class="font-semibold text-white flex items-center gap-2">
                <i class="fas {{ $tab['icon'] }} text-blue-400"></i> {{ $tab['label'] }}
            </h3>
            <p class="text-xs text-slate-500 mt-0.5">{{ $docs->count() }} file{{ $docs->count() !== 1 ? 's' : '' }} uploaded</p>
        </div>
    </div>

    {{-- Upload form --}}
    <div class="p-5 border-b border-slate-700 bg-slate-800/30"
         x-data="{ dragging: false, uploading: false, files: [] }"
         @dragover.prevent="dragging = true"
         @dragleave.prevent="dragging = false"
         @drop.prevent="dragging = false; files = Array.from($event.dataTransfer.files); $refs.fileInput_{{ $key }}.files = $event.dataTransfer.files">
        <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data"
              @submit="uploading = true">
            @csrf
            <input type="hidden" name="documentable_type" value="Job">
            <input type="hidden" name="documentable_id"   value="{{ $job->id }}">
            <input type="hidden" name="category"          value="{{ $key }}">

            <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
                <div class="md:col-span-1">
                    <label class="text-xs text-slate-400 block mb-1">Description <span class="text-slate-600">(optional)</span></label>
                    <input type="text" name="name" placeholder="e.g. Revised plan v2"
                           class="input text-sm py-1.5" maxlength="255">
                </div>
                <div class="md:col-span-2">
                    <label class="text-xs text-slate-400 block mb-1">File <span class="text-red-400">*</span>
                        <span class="text-slate-600 ml-1">PDF, Word, Excel, images — max 20 MB</span>
                    </label>
                    <div class="flex gap-2">
                        <div class="flex-1 relative rounded-lg border transition-colors cursor-pointer"
                             :class="dragging ? 'border-blue-500 bg-blue-900/10' : 'border-slate-600 hover:border-slate-500'"
                             style="background:#0f172a;">
                            <input type="file" name="file" required
                                   x-ref="fileInput_{{ $key }}"
                                   @change="files = Array.from($event.target.files)"
                                   accept=".pdf,.doc,.docx,.xls,.xlsx,.csv,.jpg,.jpeg,.png,.gif,.webp,.txt,.zip"
                                   class="absolute inset-0 w-full h-full opacity-0 cursor-pointer">
                            <div class="px-3 py-2 flex items-center gap-2">
                                <i class="fas fa-paperclip text-slate-500 text-sm"></i>
                                <span class="text-sm text-slate-400" x-text="files.length ? files.map(f => f.name).join(', ') : 'Click or drag file here'"></span>
                            </div>
                        </div>
                        <button type="submit"
                                :disabled="uploading"
                                class="btn btn-primary text-sm px-5 whitespace-nowrap flex-shrink-0">
                            <span x-show="!uploading"><i class="fas fa-upload mr-1.5"></i>Upload</span>
                            <span x-show="uploading"><i class="fas fa-spinner fa-spin mr-1.5"></i>Uploading…</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- File list --}}
    <div class="p-5">
        @if($docs->isEmpty())
        <div class="text-center py-10 text-slate-600">
            <i class="fas {{ $tab['icon'] }} text-4xl mb-3 block"></i>
            <p class="text-sm">No {{ strtolower($tab['label']) }} documents yet.</p>
            <p class="text-xs mt-1">Upload files using the form above.</p>
        </div>
        @else
        <div class="space-y-2">
            @foreach($docs as $doc)
            @php
                $isImage = in_array($doc->file_type, $imageTypes);
                $ext     = strtolower(pathinfo($doc->name, PATHINFO_EXTENSION));
                $iconClass = match(true) {
                    in_array($ext, ['pdf'])               => 'fa-file-pdf text-red-400',
                    in_array($ext, ['doc','docx'])        => 'fa-file-word text-blue-400',
                    in_array($ext, ['xls','xlsx','csv'])  => 'fa-file-excel text-green-400',
                    in_array($ext, ['jpg','jpeg','png','gif','webp']) => 'fa-file-image text-purple-400',
                    in_array($ext, ['zip'])               => 'fa-file-archive text-yellow-400',
                    default                               => 'fa-file text-slate-400',
                };
            @endphp
            <div class="flex items-center gap-3 p-3 rounded-lg border border-slate-700 hover:border-slate-600 hover:bg-slate-700/20 transition-colors group">
                <div class="w-9 h-9 rounded flex items-center justify-center flex-shrink-0" style="background:#0f172a;">
                    <i class="fas {{ $iconClass }} text-base"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-medium text-white truncate">{{ $doc->name }}</p>
                    <p class="text-sm font-medium text-white truncate">{{ $doc->note ?? "" }}</p>
                    <p class="text-xs text-slate-500">
                        {{ $doc->formatted_size }}
                        &middot; {{ $doc->created_at->format('d M Y, H:i') }}
                        @if($doc->uploader) &middot; <span class="text-slate-400">{{ $doc->uploader->name }}</span> @endif
                    </p>
                </div>
                <div class="flex items-center gap-1 flex-shrink-0">
                    <a href="{{ route('documents.download', $doc) }}"
                       title="Download"
                       class="w-8 h-8 rounded flex items-center justify-center hover:bg-slate-700 text-slate-400 hover:text-blue-400 transition-colors">
                        <i class="fas fa-download text-sm"></i>
                    </a>
                    @php $role = auth()->user()->role?->name ?? ''; @endphp
                    @if(in_array($role, ['office_admin','project_manager','sales_consultant']))
                    <form method="POST" action="{{ route('documents.destroy', $doc) }}"
                          onsubmit="return confirm('Delete \'{{ addslashes($doc->name) }}\'?')">
                        @csrf @method('DELETE')
                        <button type="submit" title="Delete"
                                class="w-8 h-8 rounded flex items-center justify-center hover:bg-red-900/30 text-slate-600 hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100">
                            <i class="fas fa-trash text-xs"></i>
                        </button>
                    </form>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endforeach

</div>{{-- /x-data --}}
@endsection