@extends('layouts.app')

@section('page-title')
    PM – Zarządzanie zadaniami
@endsection

@section('page-actions')
    <a href="{{ route('pm.projects.create') }}" class="btn btn-primary btn-sm">
        <i class="bi bi-plus-lg me-1"></i> Nowy projekt
    </a>
    <a href="{{ route('pm.issues.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-list-task me-1"></i> Wszystkie zadania
    </a>
@endsection

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

            {{-- Intro pod nagłówkiem --}}
            <div class="mb-4">
                <p class="text-muted mb-0 small">
                    Zarządzaj projektami, tablicami (kanban) i zadaniami w stylu Jiry.
                    Dodawaj komentarze, załączniki i kontroluj statusy pracy w jednym miejscu.
                </p>
            </div>

            {{-- KAFELKI PM --}}
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-3">

                {{-- Kafelek: Projekty --}}
                <div class="col">
                    <a href="{{ route('pm.projects.index') }}"
                       class="text-decoration-none text-reset">
                        <div class="card h-100 border-0 erp-soft-box">
                            <div class="card-body d-flex flex-column p-0">
                                <div class="d-flex align-items-center mb-3">
                                    <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-primary me-2"
                                          style="width: 40px; height: 40px;">
                                        <i class="bi bi-folder2-open fs-5"></i>
                                    </span>
                                    <h5 class="mb-0 fs-6">Projekty</h5>
                                </div>

                                <p class="text-muted mb-3 small">
                                    Twórz i zarządzaj projektami. Każdy projekt ma własne statusy (kolumny),
                                    listę zadań i tablicę kanban.
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center small">
                                    <span class="badge bg-soft-primary">
                                        dostępne
                                    </span>
                                    <span class="text-primary fw-semibold">
                                        przejdź do projektów <i class="bi bi-arrow-right-short"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                {{-- Kafelek: Tablice --}}
                <div class="col">
                    <a href="{{ route('pm.projects.index') }}"
                       class="text-decoration-none text-reset">
                        <div class="card h-100 border-0 erp-soft-box">
                            <div class="card-body d-flex flex-column p-0">
                                <div class="d-flex align-items-center mb-3">
                                    <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-primary me-2"
                                          style="width: 40px; height: 40px;">
                                        <i class="bi bi-kanban fs-5"></i>
                                    </span>
                                    <h5 class="mb-0 fs-6">Tablice (Kanban)</h5>
                                </div>

                                <p class="text-muted mb-3 small">
                                    Podgląd pracy w kolumnach statusów. Zmieniaj statusy zadań bezpośrednio z tablicy
                                    i kontroluj przepływ pracy w projekcie.
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center small">
                                    <span class="badge bg-soft-primary">
                                        dostępne
                                    </span>
                                    <span class="text-primary fw-semibold">
                                        wybierz projekt <i class="bi bi-arrow-right-short"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                {{-- Kafelek: Zadania --}}
                <div class="col">
                    <a href="{{ route('pm.issues.index') }}"
                       class="text-decoration-none text-reset">
                        <div class="card h-100 border-0 erp-soft-box">
                            <div class="card-body d-flex flex-column p-0">
                                <div class="d-flex align-items-center mb-3">
                                    <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-soft-primary me-2"
                                          style="width: 40px; height: 40px;">
                                        <i class="bi bi-list-check fs-5"></i>
                                    </span>
                                    <h5 class="mb-0 fs-6">Zadania</h5>
                                </div>

                                <p class="text-muted mb-3 small">
                                    Lista z filtrami: projekt, status, typ i priorytet.
                                    Wejdź w szczegóły zadania, dodaj komentarz i załączniki.
                                </p>

                                <div class="mt-auto d-flex justify-content-between align-items-center small">
                                    <span class="badge bg-soft-primary">
                                        dostępne
                                    </span>
                                    <span class="text-primary fw-semibold">
                                        przejdź do zadań <i class="bi bi-arrow-right-short"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                {{-- Kafelek: Raporty (przyszłość) --}}
                <div class="col">
                    <div class="card h-100 border-0 erp-soft-box">
                        <div class="card-body d-flex flex-column p-0 opacity-75">
                            <div class="d-flex align-items-center mb-3">
                                <span class="d-inline-flex justify-content-center align-items-center rounded-circle bg-secondary-subtle text-secondary me-2"
                                      style="width: 40px; height: 40px;">
                                    <i class="bi bi-graph-up fs-5"></i>
                                </span>
                                <h5 class="mb-0 fs-6">Raporty i statystyki</h5>
                            </div>

                            <p class="text-muted mb-3 small">
                                Zestawienia postępów, obciążenia zespołu, SLA/terminy, raporty per projekt
                                i dashboardy produktywności.
                            </p>

                            <div class="mt-auto d-flex justify-content-between align-items-center small">
                                <span class="badge bg-secondary">
                                    w przygotowaniu
                                </span>
                                <button class="btn btn-outline-secondary btn-sm" disabled>
                                    W przygotowaniu
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>{{-- /row --}}
        </div>{{-- /module-shell --}}
    </div>
@endsection