@extends('layouts.seller')

@section('title', 'My Promotions')

@section('content')
<div class="page-header">
    <div>
        <h4 class="page-title">My Promotions</h4>
        <p class="text-muted mb-0">Manage your active and expired promotions</p>
    </div>
    <a href="{{ route('seller.promotions.packages') }}" class="btn btn-primary-gradient shadow-sm">
        <i class="bi bi-plus-circle me-2"></i>Promote Products
    </a>
</div>

<!-- Active Promotions -->
<div class="card border-0 shadow-sm rounded-4 mb-4">
    <div class="card-header bg-transparent py-3">
        <h5 class="mb-0 fw-bold" style="color: #f97316;"><i class="bi bi-broadcast me-2"></i>Active Promotions</h5>
    </div>
    <div class="card-body">
        @forelse($activePromotions as $promotion)
            <div class="card mb-3 border-0 bg-light rounded-4">
                <div class="card-body p-4">
                    <div class="row align-items-center">
                        <div class="col-md-2 text-center">
                            <img src="{{ !empty($promotion->product->images_json) && isset($promotion->product->images_json[0]['thumbnail']) ? asset('storage/' . $promotion->product->images_json[0]['thumbnail']) : 'https://placehold.co/150?text=No+Image' }}" 
                                 class="rounded-3 shadow-sm img-fluid" style="height: 100px; width: 100px; object-fit: cover;" alt="{{ $promotion->product->name }}">
                        </div>
                        <div class="col-md-7">
                            <h5 class="fw-bold mb-1">{{ $promotion->product->name }}</h5>
                            <span class="badge mb-3" style="background: {{ $promotion->package->badge_color }}22; color: {{ $promotion->package->badge_color }}; border: 1px solid {{ $promotion->package->badge_color }}44;">
                                {{ $promotion->package->name }}
                            </span>
                            <div class="d-flex gap-4">
                                <div class="text-center">
                                    <span class="d-block fw-bold text-dark">{{ number_format($promotion->impressions) }}</span>
                                    <small class="text-muted">Views</small>
                                </div>
                                <div class="text-center">
                                    <span class="d-block fw-bold text-dark">{{ number_format($promotion->clicks) }}</span>
                                    <small class="text-muted">Clicks</small>
                                </div>
                                <div class="text-center">
                                    <span class="d-block fw-bold text-dark">{{ $promotion->ctr }}%</span>
                                    <small class="text-muted">CTR</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 text-end">
                            <div class="mb-3">
                                <span class="badge rounded-pill px-3 py-2" style="background: {{ $promotion->package->badge_color }}; font-weight: 600;">
                                    {{ $promotion->package->badge_text }}
                                </span>
                            </div>
                            <div class="mb-3 small">
                                <div class="text-dark fw-bold">Expires: {{ $promotion->end_date->format('d M Y') }}</div>
                                <div class="text-orange fw-bold">{{ $promotion->daysRemaining() }} days left</div>
                            </div>
                            <form action="{{ route('seller.promotions.destroy', $promotion) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger px-3 rounded-pill" 
                                        onclick="return confirm('Cancel this promotion?')">
                                    <i class="bi bi-x-circle me-1"></i> Cancel
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="text-center py-5">
                <div class="bg-light rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                    <i class="bi bi-megaphone text-muted fs-2"></i>
                </div>
                <h6 class="text-muted">No active promotions.</h6>
                <p class="text-muted small mb-4">Start promoting your products today!</p>
                <a href="{{ route('seller.promotions.packages') }}" class="btn btn-primary-gradient px-4">Get started now</a>
            </div>
        @endforelse
    </div>
</div>

<!-- Expired Promotions -->
@if($expiredPromotions->count() > 0)
    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-header bg-transparent py-3 border-bottom">
            <h5 class="mb-0 fw-bold text-secondary"><i class="bi bi-clock-history me-2"></i>Expired Promotions History</h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead>
                        <tr>
                            <th class="ps-4">Product</th>
                            <th>Package</th>
                            <th>Duration</th>
                            <th>Performance</th>
                            <th class="text-end pe-4">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($expiredPromotions as $promotion)
                            <tr>
                                <td class="ps-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="{{ !empty($promotion->product->images_json) && isset($promotion->product->images_json[0]['thumbnail']) ? asset('storage/' . $promotion->product->images_json[0]['thumbnail']) : 'https://placehold.co/150?text=No+Image' }}" 
                                             class="rounded-2" style="width: 40px; height: 40px; object-fit: cover;">
                                        <span class="fw-bold text-dark">{{ Str::limit($promotion->product->name, 30) }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border">
                                        {{ $promotion->package->name }}
                                    </span>
                                </td>
                                <td>
                                    <small class="text-muted d-block">{{ $promotion->start_date->format('d M') }} - {{ $promotion->end_date->format('d M Y') }}</small>
                                </td>
                                <td>
                                    <div class="small">
                                        <span class="me-2 text-dark fw-medium">{{ number_format($promotion->impressions) }} views</span>
                                        <span class="text-dark fw-medium">{{ number_format($promotion->clicks) }} clicks</span>
                                    </div>
                                </td>
                                <td class="text-end pe-4">
                                    <span class="badge rounded-pill bg-light text-secondary px-3">Expired</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endif

<style>
    .text-orange { color: #f97316; }
</style>
@endsection