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

@section('content')
<div class="max-w-2xl space-y-6">

    {{-- ── Job details form ─────────────────────────────────────────────── --}}
    <form method="POST" action="{{ route('jobs.update', $job) }}" class="space-y-6">
        @csrf @method('PUT')
        <div class="card p-5">
            <h3 class="mb-4">Update Job</h3>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label>Stage</label>
                    <select name="stage" class="input">
                        @foreach(['lead'=>'Lead','consult'=>'Consultation','quote'=>'Quotes','contracts'=>'Contracts','sold'=>'Sold','cm'=>'Check Measure','processing'=>'Processing','delivery'=>'Delivery','installation'=>'Installation','completion'=>'Completion'] as $val => $label)
                        <option value="{{ $val }}" {{ $job->stage === $val ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Status</label>
                    <select name="status" class="input">
                        <option value="active" {{ $job->status === 'active' ? 'selected' : '' }}>Active</option>
                        <option value="on_hold" {{ $job->status === 'on_hold' ? 'selected' : '' }}>On Hold</option>
                        <option value="completed" {{ $job->status === 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="cancelled" {{ $job->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>
                <div>
                    <label>Job Value ($)</label>
                    <input type="number" name="job_value" value="{{ $job->job_value }}" class="input" step="0.01">
                </div>
                <div>
                    <label>Expected Completion</label>
                    <input type="date" name="expected_completion" value="{{ $job->expected_completion?->format('Y-m-d') }}" class="input">
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="deposit_paid" id="dep" value="1" {{ $job->deposit_paid ? 'checked' : '' }} class="rounded">
                    <label for="dep" style="margin-bottom:0;">Deposit Paid</label>
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="cm_paid" id="cmp" value="1" {{ $job->cm_paid ? 'checked' : '' }} class="rounded">
                    <label for="cmp" style="margin-bottom:0;">CM Payment Paid</label>
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="delivery_paid" id="delp" value="1" {{ $job->delivery_paid ? 'checked' : '' }} class="rounded">
                    <label for="delp" style="margin-bottom:0;">Delivery Paid</label>
                </div>
                <div class="flex items-center gap-2">
                    <input type="checkbox" name="final_paid" id="finp" value="1" {{ $job->final_paid ? 'checked' : '' }} class="rounded">
                    <label for="finp" style="margin-bottom:0;">Final Payment Paid</label>
                </div>
            </div>
            <div class="mt-4">
                <label>Notes</label>
                <textarea name="notes" rows="3" class="input">{{ $job->notes }}</textarea>
            </div>
            <div class="mt-3">
                <label>Next Action</label>
                <input type="text" name="next_action" value="{{ $job->next_action }}" class="input">
            </div>
            <div class="mt-4 grid grid-cols-3 gap-4">
                <div>
                    <label>Showroom Consultant</label>
                    <select name="consultant_id" class="input">
                        <option value="">— Unassigned —</option>
                        @foreach($consultants as $u)
                        <option value="{{ $u->id }}" {{ $job->consultant_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Project Manager</label>
                    <select name="manager_id" class="input">
                        <option value="">— Unassigned —</option>
                        @foreach($projectManagers as $u)
                        <option value="{{ $u->id }}" {{ $job->manager_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label>Designer</label>
                    <select name="designer_id" class="input">
                        <option value="">— Unassigned —</option>
                        @foreach($designers as $u)
                        <option value="{{ $u->id }}" {{ $job->designer_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="flex gap-3">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save Changes</button>
            <a href="{{ route('jobs.show', $job) }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>

    {{-- ── File Upload Module ────────────────────────────────────────────── --}}
    <div class="card p-5">
        <div class="flex items-center justify-between mb-4">
            <h3 class="flex items-center gap-2">
                <i class="fas fa-paperclip text-slate-400"></i> Job Files
                <span class="text-sm font-normal text-slate-400">({{ $job->documents->count() }} file{{ $job->documents->count() !== 1 ? 's' : '' }})</span>
            </h3>
        </div>

        {{-- Upload form --}}
        <form method="POST" action="{{ route('documents.store') }}" enctype="multipart/form-data" id="uploadForm">
            @csrf
            <input type="hidden" name="documentable_type" value="Job">
            <input type="hidden" name="documentable_id" value="{{ $job->id }}">

            <div class="border-2 border-dashed border-slate-600 rounded-lg p-6 text-center hover:border-slate-400 transition-colors" id="dropZone">
                <i class="fas fa-cloud-upload-alt text-3xl text-slate-500 mb-2"></i>
                <p class="text-slate-400 text-sm mb-1">Drag &amp; drop 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="fileInput" class="hidden" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.gif,.xls,.xlsx,.csv,.txt,.zip">
                </label>
            </div>

            {{-- File preview row (shown after selection) --}}
            <div id="filePreview" class="hidden mt-3 p-3 bg-slate-700 rounded-lg flex items-center gap-3">
                <i class="fas fa-file text-blue-400 text-xl"></i>
                <div class="flex-1 min-w-0">
                    <p id="fileName" class="text-sm font-medium text-white truncate"></p>
                    <p id="fileSize" class="text-xs text-slate-400"></p>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <input type="text" name="name" id="customName" 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="clearFile" class="btn btn-secondary text-sm py-1 px-2">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </form>

        {{-- Existing files list --}}
        @if($job->documents->isNotEmpty())
        <div class="mt-5 divide-y divide-slate-700" id="fileList">
            @foreach($job->documents as $doc)
            <div class="flex items-center gap-3 py-3">
                {{-- File type icon --}}
                @php
                    $mime = $doc->file_type ?? '';
                    $icon = 'fa-file';
                    $iconColor = 'text-slate-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') || str_ends_with($doc->file_path, '.xls') || str_ends_with($doc->file_path, '.xlsx') || str_ends_with($doc->file_path, '.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; {{ $doc->uploader->name }} @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>
                    </a>
                    @can('delete', $doc)
                    <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>
                    @else
                    @php $authUser = auth()->user(); $role = $authUser->role?->name; @endphp
                    @if(in_array($role, ['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
                    @endcan
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p class="mt-4 text-sm text-slate-500 text-center py-4" id="emptyMsg">No files uploaded yet.</p>
        @endif
    </div>

</div>

@push('scripts')
<script>
(function () {
    const fileInput  = document.getElementById('fileInput');
    const dropZone   = document.getElementById('dropZone');
    const preview    = document.getElementById('filePreview');
    const nameEl     = document.getElementById('fileName');
    const sizeEl     = document.getElementById('fileSize');
    const clearBtn   = document.getElementById('clearFile');

    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('customName').value = '';
    }

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

    clearBtn.addEventListener('click', clearSelection);

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