@extends('layouts.app')

@section('content')
<div class="container-xxl px-0">
    <div class="module-shell">

        @include('modules.pm.partials._flash')

        @component('modules.pm.partials._toolbar', [
            'title' => 'Tablica: ' . $project->name,
            'subtitle' => 'Widok tygodniowy: ' . ($weekStart?->format('Y-m-d') ?? '') . ' — ' . ($weekEnd?->format('Y-m-d') ?? '')
        ])
            <a href="{{ route('pm.projects.show', $project->id) }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i> Projekt
            </a>

            <a href="{{ route('pm.issues.index', ['project_id' => $project->id]) }}" class="btn btn-outline-secondary">
                <i class="bi bi-list-task me-1"></i> Lista zadań
            </a>

            <a href="{{ route('pm.issues.create', ['project_id' => $project->id]) }}" class="btn btn-primary">
                <i class="bi bi-plus-lg me-1"></i> Nowe zadanie
            </a>
        @endcomponent

        {{-- WYBÓR TYGODNIA --}}
        @php
            $ws = $weekStart ?? \Carbon\Carbon::today()->startOfWeek(\Carbon\Carbon::MONDAY);
            $we = $weekEnd ?? $ws->copy()->endOfWeek(\Carbon\Carbon::SUNDAY);

            $prevWeek = $ws->copy()->subWeek()->toDateString();
            $nextWeek = $ws->copy()->addWeek()->toDateString();
            $currentWeek = \Carbon\Carbon::today()->startOfWeek(\Carbon\Carbon::MONDAY)->toDateString();

            // Select: +/- 8 tygodni
            $weekOptions = [];
            $cursor = $ws->copy()->subWeeks(8)->startOfWeek(\Carbon\Carbon::MONDAY);
            for ($i = 0; $i < 17; $i++) {
                $optStart = $cursor->copy();
                $optEnd = $cursor->copy()->endOfWeek(\Carbon\Carbon::SUNDAY);
                $weekOptions[] = [
                    'value' => $optStart->toDateString(),
                    'label' => $optStart->format('Y-m-d') . ' — ' . $optEnd->format('Y-m-d'),
                ];
                $cursor->addWeek();
            }
        @endphp

        <div class="card border-0 shadow-sm mb-3">
            <div class="card-body d-flex flex-column flex-md-row gap-2 align-items-md-center justify-content-between">
                <form method="GET" action="{{ route('pm.projects.board', $project->id) }}" class="d-flex gap-2 align-items-center">
                    <div class="small text-muted">Tydzień:</div>

                    <select name="week" class="form-select form-select-sm" onchange="this.form.submit()">
                        @foreach($weekOptions as $opt)
                            <option value="{{ $opt['value'] }}" @selected($opt['value'] === $ws->toDateString())>
                                {{ $opt['label'] }}
                            </option>
                        @endforeach
                    </select>

                    <noscript>
                        <button class="btn btn-sm btn-outline-secondary">OK</button>
                    </noscript>
                </form>

                <div class="d-flex gap-2">
                    <a class="btn btn-sm btn-outline-secondary"
                       href="{{ route('pm.projects.board', [$project->id, 'week' => $prevWeek]) }}">
                        <i class="bi bi-chevron-left me-1"></i> Poprzedni
                    </a>

                    <a class="btn btn-sm btn-outline-secondary"
                       href="{{ route('pm.projects.board', [$project->id, 'week' => $currentWeek]) }}">
                        Bieżący tydzień
                    </a>

                    <a class="btn btn-sm btn-outline-secondary"
                       href="{{ route('pm.projects.board', [$project->id, 'week' => $nextWeek]) }}">
                        Następny <i class="bi bi-chevron-right ms-1"></i>
                    </a>
                </div>
            </div>
            <div class="card-footer bg-transparent small text-muted">
                Widok pokazuje zadania z terminem (<code>due_date</code>) w wybranym tygodniu.
            </div>
        </div>

        {{-- KANBAN --}}
        <div class="row g-3 flex-nowrap overflow-auto pb-2">
            @foreach($statuses as $status)
                @php($items = $issuesByStatus[$status->id] ?? collect())

                <div class="col-12 col-md-4 col-xl-3" style="min-width: 340px;">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                            <div class="fw-semibold">{{ $status->name }}</div>
                            <span class="badge text-bg-secondary">{{ $items->count() }}</span>
                        </div>

                        <div class="card-body d-flex flex-column gap-2">
                            @forelse($items as $issue)
                                <div class="border rounded p-2 bg-body">
                                    <div class="d-flex justify-content-between align-items-start gap-2">
                                        <div class="flex-grow-1">
                                            <a href="{{ route('pm.issues.show', $issue->id) }}"
                                               class="fw-semibold text-decoration-none">
                                                {{ $issue->issue_key }}
                                            </a>
                                            <div class="small text-muted">
                                                {{ \Illuminate\Support\Str::limit($issue->title, 80) }}
                                            </div>
                                        </div>

                                        <span class="badge text-bg-light border">
                                            {{ strtoupper($issue->type) }}
                                        </span>
                                    </div>

                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                        <div class="small text-muted">
                                            @if($issue->assignee)
                                                <i class="bi bi-person me-1"></i>{{ $issue->assignee->name }}
                                            @else
                                                <i class="bi bi-person-x me-1"></i>Brak
                                            @endif
                                        </div>

                                        <span class="badge
                                            @class([
                                                'text-bg-secondary' => $issue->priority === 'low',
                                                'text-bg-info'      => $issue->priority === 'medium',
                                                'text-bg-warning'   => $issue->priority === 'high',
                                                'text-bg-danger'    => $issue->priority === 'critical',
                                            ])
                                        ">
                                            {{ $issue->priority }}
                                        </span>
                                    </div>

                                    @if($issue->due_date)
                                        <div class="text-muted small mt-1">
                                            <i class="bi bi-calendar-event me-1"></i>
                                            Termin: {{ $issue->due_date->format('Y-m-d') }}
                                        </div>
                                    @endif

                                    <div class="d-flex gap-2 mt-2">
                                        <a href="{{ route('pm.issues.edit', $issue->id) }}"
                                           class="btn btn-sm btn-outline-secondary">
                                            <i class="bi bi-pencil me-1"></i> Edytuj
                                        </a>

                                        <a href="{{ route('pm.issues.show', $issue->id) }}"
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-eye me-1"></i> Podgląd
                                        </a>
                                    </div>

                                    {{-- Zmiana statusu --}}
                                    <form method="POST"
                                          action="{{ route('pm.issues.status', $issue->id) }}"
                                          class="mt-2 js-status-form"
                                          data-issue-id="{{ $issue->id }}"
                                          data-issue-key="{{ $issue->issue_key }}">
                                        @csrf
                                        @method('PATCH')

                                        <div class="input-group input-group-sm">
                                            <select name="status_id" class="form-select js-status-select">
                                                @foreach($statuses as $st)
                                                    <option
                                                        value="{{ $st->id }}"
                                                        data-is-done="{{ $st->is_done ? 1 : 0 }}"
                                                        @selected((int)$st->id === (int)$issue->status_id)>
                                                        {{ $st->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            <button class="btn btn-outline-secondary">Zapisz</button>
                                        </div>

                                        <input type="hidden" name="time_spent_minutes" value="">
                                    </form>
                                </div>
                            @empty
                                <div class="text-muted small">Brak zadań w tej kolumnie.</div>
                            @endforelse
                        </div>

                        {{-- ✅ BLOKADA: w DONE nie dodajemy nowych --}}
                        <div class="card-footer bg-transparent">
                            @if(!$status->is_done)
                                <a href="{{ route('pm.issues.create', ['project_id' => $project->id]) }}"
                                   class="btn btn-sm btn-primary w-100">
                                    <i class="bi bi-plus-lg me-1"></i> Dodaj zadanie
                                </a>
                            @else
                                <div class="small text-muted text-center">
                                    <i class="bi bi-lock me-1"></i> Do kolumny „Done” nie dodaje się nowych zadań.
                                </div>
                            @endif
                        </div>

                    </div>
                </div>
            @endforeach
        </div>

    </div>
</div>

{{-- MODAL: zakończenie zadania --}}
<div class="modal fade" id="pmDoneModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div>
            <div class="fw-semibold">Zakończ zadanie</div>
            <div class="small text-muted" id="pmDoneModalIssueLabel"></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
      </div>
      <div class="modal-body">
        <label class="form-label">Ile czasu zajęło? (minuty)</label>
        <input type="number" min="0" class="form-control" id="pmDoneTimeMinutes" placeholder="np. 90">
        <div class="form-text">
            Wpisz 0 jeśli nie chcesz rejestrować czasu.
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Anuluj</button>
        <button type="button" class="btn btn-primary" id="pmDoneModalConfirmBtn">
            <i class="bi bi-check2 me-1"></i> Zapisz i oznacz jako Done
        </button>
      </div>
    </div>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('pmDoneModal');
    if (!modalEl || typeof bootstrap === 'undefined') return;

    const modal = new bootstrap.Modal(modalEl);
    const labelEl = document.getElementById('pmDoneModalIssueLabel');
    const timeEl = document.getElementById('pmDoneTimeMinutes');
    const confirmBtn = document.getElementById('pmDoneModalConfirmBtn');

    let pendingForm = null;

    document.querySelectorAll('.js-status-form').forEach(form => {
        form.addEventListener('submit', function (e) {
            const select = form.querySelector('.js-status-select');
            const selected = select?.options?.[select.selectedIndex];
            const isDone = selected?.dataset?.isDone === '1';

            if (!isDone) return;

            e.preventDefault();
            pendingForm = form;

            const issueKey = form.dataset.issueKey || '';
            if (labelEl) labelEl.textContent = issueKey ? `Zadanie: ${issueKey}` : '';

            if (timeEl) timeEl.value = '';
            modal.show();
        });
    });

    confirmBtn?.addEventListener('click', function () {
        if (!pendingForm) return;

        const minutes = parseInt(timeEl.value, 10);
        const safeMinutes = Number.isFinite(minutes) && minutes >= 0 ? minutes : 0;

        const hidden = pendingForm.querySelector('input[name="time_spent_minutes"]');
        if (hidden) hidden.value = String(safeMinutes);

        modal.hide();
        pendingForm.submit();
    });
});
</script>
@endpush
@endsection