@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row g-4">

        {{-- 1) Faktury (z linkiem) --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <a href="{{ route('faktury.index') }}" class="text-decoration-none">
                <div class="card glass-tile tile-blue h-100">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="tile-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M7 3h7l4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M14 3v4h4M8 9h8M8 13h8M8 17h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">Faktury</h5>
                            <p class="card-text text-secondary mb-0">Przejdź do listy faktur</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- 2) Proforma --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <a href="{{ route('proforma.index') }}" class="text-decoration-none d-block h-100">
                <div class="card glass-tile tile-sky h-100 hover-shadow">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="tile-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M6 3h12v18l-3-2-3 2-3-2-3 2V3z" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M8 8h8M8 12h8M8 16h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">Proforma</h5>
                            <p class="card-text text-secondary mb-0">Wystawiaj faktury proforma</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- 3) Korekta --}}
       <div class="col-12 col-sm-6 col-lg-4">
    <a href="{{ route('korekty.index') }}" class="text-decoration-none d-block h-100" aria-label="Przejdź do korekt">
        <div class="card glass-tile tile-indigo h-100">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="tile-icon">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <path d="M4 20h4l10-10a2.5 2.5 0 1 0-3.5-3.5L4.5 16.5V20z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                        <path d="M13.5 6.5l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </div>
                <div>
                    <h5 class="card-title mb-1 mb-0 text-body">Korekta</h5>
                    <p class="card-text text-secondary mb-0">Zarządzaj fakturami korygującymi</p>
                </div>
            </div>
        </div>
    </a>
</div>


        {{-- === NOWE kafelki: zaraz POD trzema powyżej === --}}

        {{-- 3.1) Stałe zlecenia – Faktury --}}
        <div class="col-12 col-sm-6 col-lg-4">
           <a href="{{ route('stale-fa.index') }}" class="text-decoration-none d-block h-100">

                <div class="card glass-tile tile-mint h-100 hover-shadow">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="tile-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <path d="M7 3h7l4 4v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M8 9h7M8 13h6M8 17h5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <path d="M16.5 6a4.5 4.5 0 1 1-1.2-3.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <path d="M15 2.5v2.5h2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">Stałe zlecenia – Faktury</h5>
                            <p class="card-text text-secondary mb-0">Cykliczne wystawianie FV</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- 3.2) Stałe zlecenia – Proforma --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <a href="#" class="text-decoration-none d-block h-100"><!-- TODO: podmień na route(...) -->
                <div class="card glass-tile tile-amber h-100 hover-shadow">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="tile-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <rect x="5" y="3" width="14" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M8 8h8M8 12h7M8 16h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <path d="M17 6a4.5 4.5 0 1 1-1.2-3.1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <path d="M15.5 2.5V5H18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">Stałe zlecenia – Proforma</h5>
                            <p class="card-text text-secondary mb-0">Cykliczne proformy</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- 3.3) Automatyzacje --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <a href="#" class="text-decoration-none d-block h-100"><!-- TODO: podmień na route(...) -->
                <div class="card glass-tile tile-purple h-100 hover-shadow">
                    <div class="card-body d-flex align-items-center gap-3">
                        <div class="tile-icon">
                            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5"/>
                                <path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                                <path d="M8.5 12a3.5 3.5 0 1 0 7 0" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            </svg>
                        </div>
                        <div>
                            <h5 class="card-title mb-1">Automatyzacje</h5>
                            <p class="card-text text-secondary mb-0">Szablony, triggery, webhooki</p>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        {{-- 4) Harmonogram --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card glass-tile tile-cyan h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="tile-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M7 3v3M17 3v3M4 9h16M5 7h14a2 2 0 0 1 2 2v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            <rect x="8" y="12.5" width="3.2" height="3.2" rx=".6" stroke="currentColor" stroke-width="1.5"/>
                        </svg>
                    </div>
                    <div>
                        <h5 class="card-title mb-1">Harmonogram</h5>
                        <p class="card-text text-secondary mb-0">Płatności i terminy</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- 5) Kontrahent --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card glass-tile tile-azure h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="tile-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M16 19v-1a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                            <circle cx="10" cy="7" r="3" stroke="currentColor" stroke-width="1.5"/>
                            <path d="M18 11a3 3 0 1 0-2.5-4.7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <div>
                        <h5 class="card-title mb-1">Kontrahent</h5>
                        <p class="card-text text-secondary mb-0">Baza klientów i dostawców</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- 6) Wysyłka --}}
        <div class="col-12 col-sm-6 col-lg-4">
            <div class="card glass-tile tile-deep h-100">
                <div class="card-body d-flex align-items-center gap-3">
                    <div class="tile-icon">
                        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                            <path d="M21 3L3 10l7 3 3 7 8-17z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                            <path d="M10 13l11-10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </div>
                    <div>
                        <h5 class="card-title mb-1">Wysyłka</h5>
                        <p class="card-text text-secondary mb-0">Wysyłaj dokumenty do klientów / KSeF</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('styles')
<style>
/* Glass + niebieskie akcenty, w 100% Bootstrap-friendly */
.glass-tile{
    border: 1px solid rgba(20,20,40,.10);
    background: rgba(255,255,255,.28);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-radius: 1rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.glass-tile:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(30,35,90,.14);
    border-color: rgba(13,110,253,.25);
    background: rgba(255,255,255,.34);
}
.tile-icon{
    width: 56px; height: 56px; border-radius: 999px;
    display: grid; place-items: center;
    color: #0d6efd;
    background: rgba(13,110,253,.12);
    box-shadow: inset 0 0 0 1px rgba(13,110,253,.25);
    flex: 0 0 auto;
}

.tile-blue  { --c1:#0d6efd; --bg:rgba(13,110,253,.10); }
.tile-sky   { --c1:#4dabf7; --bg:rgba(77,171,247,.12); }
.tile-indigo{ --c1:#6366f1; --bg:rgba(99,102,241,.12); }
.tile-cyan  { --c1:#17a2b8; --bg:rgba(23,162,184,.12); }
.tile-azure { --c1:#3b82f6; --bg:rgba(59,130,246,.12); }
.tile-deep  { --c1:#1d4ed8; --bg:rgba(29,78,216,.12); }

/* Nowe kolory dla dodatkowych kafelków */
.tile-mint  { --c1:#0ea5e9; --bg:rgba(14,165,233,.12); }  /* chłodny niebiesko-miętowy */
.tile-amber { --c1:#f59e0b; --bg:rgba(245,158,11,.14); }  /* bursztyn */
.tile-purple{ --c1:#8b5cf6; --bg:rgba(139,92,246,.14); }  /* fiolet */

.tile-blue   .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-sky    .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-indigo .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-cyan   .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-azure  .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-deep   .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-mint   .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-amber  .tile-icon{ color:var(--c1); background:var(--bg); }
.tile-purple .tile-icon{ color:var(--c1); background:var(--bg); }

/* Napisy */
.card-title{ font-weight: 600; }
.card-text{ font-size: .95rem; }

/* Dark mode (opcjonalnie) */
@media (prefers-color-scheme: dark){
    .glass-tile{
        background: rgba(20,22,28,.35);
        border-color: rgba(255,255,255,.10);
    }
    .glass-tile:hover{ background: rgba(20,22,28,.45); }
    .card-text{ color: #b6c2d2 !important; }
}
</style>
@endpush