@extends('layouts.app')

@section('title', 'Pazarlama Destek')

@section('content')
    <div class="container-fluid pd-portal-page" data-force-full-nav>

        {{-- ── Hero ── --}}
        <div class="pd-hero">
            <div class="pd-hero-bg"></div>
            <div class="pd-hero-content">
                <nav class="pd-breadcrumb" aria-label="breadcrumb">
                    <a href="{{ route('admin.marketing.hub') }}">Pazarlama</a>
                    <span>/</span>
                    <span>Pazarlama Destek</span>
                </nav>
                <h1 class="pd-hero-title">Pazarlama Destek</h1>
                <p class="pd-hero-sub">Genel merkez ve fabrikalardan gelen tasarım ve pazarlama malzeme taleplerini buradan
                    açabilirsiniz.</p>
                <div class="pd-hero-actions">
                    @if (!empty($canQueueAccess))
                    <a href="{{ route('admin.marketing.destek.queue', ['scope' => 'mine']) }}" class="btn btn-light btn-sm">
                        <i class="bi bi-person-workspace me-1"></i>Bana Atananlar
                    </a>
                    <a href="{{ route('admin.marketing.destek.queue') }}" class="btn btn-light btn-sm">
                        <i class="bi bi-list-task me-1"></i>Kuyruk Görünümü
                        @if(!empty($queueCounts['unassigned']) && $queueCounts['unassigned'] > 0)
                            <span class="badge bg-danger ms-1">{{ $queueCounts['unassigned'] }}</span>
                        @endif
                    </a>
                    @endif
                    {{-- @if (!empty($canManage)) --}}
                    {{-- <a href="{{ route('admin.marketing.destek.access') }}" class="btn btn-light btn-sm">
                        <i class="bi bi-person-gear me-1"></i>Talep Açma Erişimleri
                    </a> --}}
                    {{-- @endif --}}
                </div>
            </div>
        </div>

        {{-- ── Alert ── --}}
        @if (!$ready)
            <div class="alert alert-warning mx-3">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Pazarlama Destek tabloları hazır değil. Lütfen <code>php artisan migrate</code> çalıştırın.
            </div>
        @endif

        @if (session('success'))
            <div class="alert alert-success mx-3">{{ session('success') }}</div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger mx-3">{{ session('error') }}</div>
        @endif
        @if (false && !empty($isCreateOnly))
            <div class="alert alert-info mx-3">
                Bu kullanıcı için sadece talep açma erişimi aktiftir. Ortak havuz ve atama ekranları gösterilmez.
            </div>
        @endif

        {{-- ── Kategori Kartları ── --}}
        <div class="pd-section">
            <div class="pd-section-header">
                <i class="bi bi-send me-2"></i>Hizmet almak istediğiniz birimi seçin
            </div>

            <div class="pd-category-list">
                @foreach ($categories as $catKey => $cat)
                    <a href="{{ route('admin.marketing.destek.category', ['category' => $catKey]) }}" class="pd-category-card">
                        <div class="pd-cat-icon">
                            <i class="{{ $cat['icon'] }}"></i>
                        </div>
                        <div class="pd-cat-body">
                            <div class="pd-cat-title">{{ $cat['label'] }}</div>
                            <div class="pd-cat-types">
                                {{ implode(', ', array_slice($cat['types'], 0, 3)) }}{{ count($cat['types']) > 3 ? '...' : '' }}
                            </div>
                        </div>
                        <div class="pd-cat-arrow"><i class="bi bi-chevron-right"></i></div>
                    </a>
                @endforeach
            </div>
        </div>

    </div>
@endsection

@push('styles')
    <style>
        :root {
            --pd-green: #145a46;
            --pd-green-dark: #0f4536;
            --pd-green-light: #e6f2ed;
            --pd-green-mid: #b9d9cc;
        }

        .pd-portal-page {
            background: #f4f7fc;
            min-height: 100vh;
            padding-bottom: 3rem;
        }

        .pd-portal-page .btn-light {
            color: var(--pd-green-dark);
            border-color: rgba(255, 255, 255, .35);
        }

        .pd-portal-page .btn-light:hover,
        .pd-portal-page .btn-light:focus {
            color: var(--pd-green-dark);
            background: #f4fbf8;
            border-color: rgba(255, 255, 255, .7);
        }

        /* ── Hero ── */
        .pd-hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #0d3b2d 0%, #145a46 60%, #1a7a5e 100%);
            padding: 2.5rem 2rem 3rem;
            margin-bottom: 2rem;
            border-radius: 0 0 2rem 2rem;
        }

        .pd-hero-bg {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, .07) 0%, transparent 55%);
            pointer-events: none;
        }

        .pd-hero-content {
            position: relative;
            max-width: 680px;
        }

        .pd-breadcrumb {
            font-size: .8rem;
            color: rgba(255, 255, 255, .6);
            margin-bottom: .6rem;
        }

        .pd-breadcrumb a {
            color: rgba(255, 255, 255, .75);
            text-decoration: none;
        }

        .pd-breadcrumb a:hover {
            color: #fff;
        }

        .pd-breadcrumb span {
            margin: 0 .4rem;
        }

        .pd-hero-title {
            font-size: 1.75rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: .4rem;
        }

        .pd-hero-sub {
            font-size: .9rem;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 1.25rem;
        }

        .pd-hero-actions {
            display: flex;
            gap: .5rem;
            flex-wrap: wrap;
        }

        /* ── Section ── */
        .pd-section {
            padding: 0 1.5rem;
        }

        .pd-section-header {
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: #64748b;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        /* ── Category list ── */
        .pd-category-list {
            display: flex;
            flex-direction: column;
            gap: 0;
            border-radius: 1rem;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }

        .pd-category-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: #fff;
            padding: 1.1rem 1.25rem;
            text-decoration: none;
            color: inherit;
            border-bottom: 1px solid #f1f5f9;
            transition: background .15s ease, padding-left .15s ease;
            cursor: pointer;
        }

        .pd-category-card:last-child {
            border-bottom: none;
        }

        .pd-category-card:hover {
            background: var(--pd-green-light);
            padding-left: 1.5rem;
            color: inherit;
            text-decoration: none;
        }

        .pd-category-card:hover .pd-cat-title {
            color: var(--pd-green);
        }

        .pd-category-card:hover .pd-cat-arrow {
            color: var(--pd-green);
        }

        .pd-cat-icon {
            flex: 0 0 40px;
            width: 40px;
            height: 40px;
            border-radius: .75rem;
            background: var(--pd-green-light);
            color: var(--pd-green);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .pd-cat-body {
            flex: 1 1 auto;
            min-width: 0;
        }

        .pd-cat-title {
            font-weight: 700;
            color: #0f172a;
            font-size: .95rem;
        }

        .pd-cat-types {
            font-size: .8rem;
            color: #64748b;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-top: .15rem;
        }

        .pd-cat-arrow {
            flex: 0 0 auto;
            color: #94a3b8;
            font-size: .85rem;
        }

        @media (max-width: 576px) {
            .pd-hero {
                padding: 1.5rem 1rem 2.5rem;
            }

            .pd-section {
                padding: 0 1rem;
            }
        }
    </style>
@endpush