@extends('tracker::layouts.master')
@section('title',$issue->issue_key)
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">
        <i class="fas {{ $issue->type_icon }} mr-1"></i>
        {{ $issue->issue_key }} — {{ $issue->title }}
    </h1>
    <div>
        <a href="{{ route('tracker.issues.edit',$issue) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
        <a href="{{ route('tracker.issues.index') }}" class="btn btn-sm btn-link">← Back</a>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Description</h6></div>
            <div class="card-body">
                @if($issue->description)
                    <div class="tracker-rich-content">{!! $issue->description !!}</div>
                @else
                    <p class="mb-0 text-muted">No description provided.</p>
                @endif
            </div>
        </div>

        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Comments ({{ $issue->comments->count() }})</h6></div>
            <div class="card-body p-0">
                @forelse($issue->comments as $comment)
                <div class="px-3 py-2 border-bottom">
                    <div class="d-flex justify-content-between">
                        <span class="font-weight-bold small">{{ $comment->author->name ?? 'Unknown' }}</span>
                        <span class="text-muted small">
                            {{ $comment->created_at->format('M j, Y g:ia') }}
                            <form method="POST" action="{{ route('tracker.comments.destroy',$comment) }}" class="d-inline" onsubmit="return confirm('Delete comment?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-link btn-sm text-danger p-0 ml-2">Del</button>
                            </form>
                        </span>
                    </div>
                    @if($comment->body)
                    <div style="white-space: pre-wrap">{{ $comment->body }}</div>
                    @endif
                    @if($comment->attachments->isNotEmpty())
                    <div class="mt-2 d-flex flex-wrap" style="gap:.5rem">
                        @foreach($comment->attachments as $attachment)
                            @if($attachment->is_image)
                            <a href="{{ $attachment->url }}" target="_blank" title="{{ $attachment->original_name }}">
                                <img src="{{ $attachment->url }}" alt="{{ $attachment->original_name }}" style="height:70px;width:70px;object-fit:cover;border-radius:.25rem;border:1px solid #dddfeb">
                            </a>
                            @else
                            <a href="{{ $attachment->url }}" target="_blank" class="d-flex align-items-center border rounded px-2 py-1 small text-dark" style="text-decoration:none">
                                <i class="fas fa-paperclip mr-1 text-muted"></i>
                                {{ $attachment->original_name }}
                                <span class="text-muted ml-1">({{ $attachment->human_size }})</span>
                            </a>
                            @endif
                        @endforeach
                    </div>
                    @endif
                </div>
                @empty
                <div class="p-3 text-muted text-center">No comments yet</div>
                @endforelse
            </div>
            <div class="card-footer">
                <form method="POST" action="{{ route('tracker.issues.comments.store',$issue) }}" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <textarea name="body" class="form-control" rows="2" placeholder="Add a comment...">{{ old('body') }}</textarea>
                    </div>
                    <div class="form-group">
                        <div class="d-flex align-items-center" style="gap:.5rem">
                            <button type="button" id="tracker-attachment-add" class="btn btn-sm btn-outline-secondary">
                                <i class="fas fa-paperclip mr-1"></i>Add Files
                            </button>
                            <small class="text-muted">Up to 3 files, 2MB each.</small>
                        </div>
                        <input type="file" id="tracker-attachment-input" name="attachments[]" multiple style="display:none"
                               accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.log,.zip">
                        <div id="tracker-attachment-list" class="mt-2 d-flex flex-wrap" style="gap:.4rem"></div>
                    </div>
                    <button type="submit" class="btn btn-sm btn-dark">Comment</button>
                </form>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-header"><h6 class="m-0 font-weight-bold">Details</h6></div>
            <div class="card-body">
                <form method="POST" action="{{ route('tracker.issues.status',$issue) }}" class="form-group">
                    @csrf @method('PATCH')
                    <label class="small text-muted mb-0">Status</label>
                    <select name="status" class="form-control" onchange="this.form.submit()">
                        @foreach(\Modules\Tracker\Models\Issue::statuses() as $key => $label)
                        <option value="{{ $key }}" {{ $issue->status==$key?'selected':'' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </form>
                <dl class="row mb-0">
                    <dt class="col-5">Project</dt><dd class="col-7"><a href="{{ route('tracker.projects.show',$issue->project) }}">{{ $issue->project->name }}</a></dd>
                    <dt class="col-5">Type</dt><dd class="col-7">{{ ucfirst($issue->type) }}</dd>
                    <dt class="col-5">Priority</dt><dd class="col-7"><span class="badge badge-{{ $issue->priority_badge }}">{{ ucfirst($issue->priority) }}</span></dd>
                    <dt class="col-5">Assignee</dt><dd class="col-7">{{ $issue->assignee->name ?? '—' }}</dd>
                    <dt class="col-5">Reporter</dt><dd class="col-7">{{ $issue->reporter->name ?? '—' }}</dd>
                    <dt class="col-5">Due</dt><dd class="col-7">{{ $issue->due_date?->format('M j, Y') ?? '—' }}</dd>
                    <dt class="col-5">Created</dt><dd class="col-7">{{ $issue->created_at->format('M j, Y') }}</dd>
                </dl>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var MAX_FILES = 3;
    var MAX_SIZE  = 2 * 1024 * 1024; // 2MB — mirrors CommentController::MAX_ATTACHMENT_KB

    var addBtn = document.getElementById('tracker-attachment-add');
    var input  = document.getElementById('tracker-attachment-input');
    var list   = document.getElementById('tracker-attachment-list');
    if (!addBtn || !input || !list || typeof DataTransfer === 'undefined') return;

    // A plain <input multiple> replaces its selection every time the picker
    // reopens, so choosing files one at a time never accumulates. We keep our
    // own running list instead and rewrite input.files from it via DataTransfer,
    // so "Add Files" can be clicked repeatedly and each pick adds to the queue.
    var selected = [];

    addBtn.addEventListener('click', function () { input.click(); });

    input.addEventListener('change', function () {
        Array.from(input.files).forEach(function (file) {
            if (selected.length >= MAX_FILES) return;
            if (file.size > MAX_SIZE) {
                alert(file.name + ' is over the 2MB limit and was skipped.');
                return;
            }
            var isDupe = selected.some(function (f) { return f.name === file.name && f.size === file.size; });
            if (!isDupe) selected.push(file);
        });
        render();
    });

    function render() {
        var dt = new DataTransfer();
        selected.forEach(function (f) { dt.items.add(f); });
        input.files = dt.files;

        list.innerHTML = '';
        selected.forEach(function (file, idx) {
            var chip = document.createElement('span');
            chip.className = 'badge badge-light border p-2';
            chip.textContent = file.name;

            var remove = document.createElement('a');
            remove.href = '#';
            remove.className = 'text-danger ml-2';
            remove.textContent = '×';
            remove.addEventListener('click', function (e) {
                e.preventDefault();
                selected.splice(idx, 1);
                render();
            });

            chip.appendChild(remove);
            list.appendChild(chip);
        });

        addBtn.disabled = selected.length >= MAX_FILES;
    }
})();
</script>
@endpush
@endsection