@extends('layouts.admin')

@section('title', 'Promotion Packages')

@section('admin-content')
<style>
    /* Specific Promotion Packages Styles */
    .packages-page .package-card { border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); transition: all 0.3s ease; background: #fff; height: 100%; overflow: hidden; }
    .packages-page .package-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); }
    
    .packages-page .price-tag { font-size: 2rem; font-weight: 800; color: #1a1a2e; line-height: 1; }
    .packages-page .price-tag small { font-size: 0.9rem; font-weight: 500; color: #6c757d; }
    
    .packages-page .feature-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed #e0e0e0; font-size: 0.9rem; }
    .packages-page .feature-item:last-child { border-bottom: none; }
    .packages-page .feature-icon { color: #6c757d; margin-right: 8px; }
    
    .packages-page .badge-tag { padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    
    .packages-page .action-btn-group { position: absolute; top: 15px; right: 15px; }
    .packages-page .btn-circle-action { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.1); color: #555; transition: all 0.2s; cursor: pointer; }
    .packages-page .btn-circle-action:hover { background: #fff; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
</style>

<div class="packages-page">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1">Promotion Packages</h4>
            <p class="text-muted mb-0 small">Create and manage subscription packages for sellers</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.promotions.packages.create') }}" class="btn btn-primary shadow-sm btn-lg d-flex align-items-center gap-2" 
               style="border-radius: 12px; font-size: 0.95rem;">
                <i class="bi bi-plus-lg"></i> Create Package
            </a>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-3 mb-4 d-flex align-items-center">
            <i class="bi bi-check-circle-fill me-2 fs-5"></i>
            {{ session('success') }}
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        @forelse($packages as $package)
            <div class="col-md-6 col-xl-4">
                <div class="package-card position-relative">
                    <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" 
                         style="background: linear-gradient(135deg, {{ $package->badge_color }} 0%, #ffffff 80%); pointer-events: none; border-radius: 16px;">
                    </div>
                    
                    <div class="card-body p-4 position-relative">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <span class="badge-tag text-white" style="background-color: {{ $package->badge_color }}">
                                {{ $package->badge_text }}
                            </span>
                            
                            <div class="dropdown">
                                <button class="btn-circle-action" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="bi bi-three-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end border-0 shadow-lg rounded-3">
                                    <li>
                                        <a class="dropdown-item py-2" href="{{ route('admin.promotions.packages.edit', $package) }}">
                                            <i class="bi bi-pencil me-2 text-primary"></i> Edit Package
                                        </a>
                                    </li>
                                    @if($package->is_active)
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form action="{{ route('admin.promotions.packages.destroy', $package) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="dropdown-item py-2 text-danger" onclick="return confirm('Disable this package?');">
                                                    <i class="bi bi-slash-circle me-2"></i> Deactivate
                                                </button>
                                            </form>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </div>

                        <h4 class="fw-bold mb-2 text-dark">{{ $package->name }}</h4>
                        <p class="text-muted small mb-4" style="min-height: 40px;">{{ Str::limit($package->description, 80) }}</p>

                        <div class="mb-4">
                            <div class="d-flex align-items-baseline">
                                <h2 class="price-tag mb-0">₹{{ number_format($package->price, 0) }}</h2>
                                <small class="ms-2">/ {{ $package->duration_days }} Days</small>
                            </div>
                            <div class="text-primary fw-bold mt-1">
                                <span class="badge bg-primary bg-opacity-10 text-primary">$ {{ number_format($package->price_usd, 0) }}</span>
                            </div>
                        </div>

                        <div class="bg-light p-3 rounded-3 mb-3">
                            <div class="feature-item">
                                <span class="text-muted small"><i class="bi bi-layout-sidebar-inset me-2"></i>Position</span>
                                <span class="fw-bold text-dark">Page {{ $package->page_position }}</span>
                            </div>
                            <div class="feature-item">
                                <span class="text-muted small"><i class="bi bi-box-seam me-2"></i>Product Limit</span>
                                <span class="fw-bold text-dark">{{ $package->max_products }} Product(s)</span>
                            </div>
                            <div class="feature-item border-0 pb-0">
                                <span class="text-muted small"><i class="bi bi-lightning-charge me-2"></i>Priority</span>
                                <div class="d-flex align-items-center gap-1">
                                    <span class="fw-bold text-dark">{{ $package->priority_level }}</span>
                                    <span class="text-muted small">/10</span>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid">
                             @if($package->is_active)
                                <div class="btn btn-outline-success btn-sm disabled opacity-100 fw-bold border-0 bg-success-subtle text-success">
                                    <i class="bi bi-check-circle-fill me-1"></i> Active Status
                                </div>
                            @else
                                <div class="btn btn-outline-secondary btn-sm disabled opacity-100 fw-bold border-0 bg-secondary-subtle text-secondary">
                                    <i class="bi bi-slash-circle-fill me-1"></i> Inactive
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="text-center py-5">
                    <div class="mb-4">
                        <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                             <i class="bi bi-gift fs-1 text-muted opacity-50"></i>
                        </div>
                    </div>
                    <h5 class="fw-bold text-muted">No Promotion Packages</h5>
                    <p class="text-muted small mb-4">Get started by creating your first promotional package for sellers.</p>
                    <a href="{{ route('admin.promotions.packages.create') }}" class="btn btn-primary shadow-sm px-4 py-2" style="border-radius: 10px;">
                        <i class="bi bi-plus-lg me-2"></i> Create Package
                    </a>
                </div>
            </div>
        @endforelse
    </div>
</div>
@endsection
