{{-- resources/views/promo/promo_view.blade.php --}}
<x-app-layout>
    <link rel="stylesheet" href="{{ asset('customCss/adminCss.css') }}">
    <style>
        .promo-detail-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border: 1px solid #e5e7eb;
        }

        .promo-header {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            padding: 2rem;
            text-align: center;
            position: relative;
        }

        .promo-title {
            color: white;
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        .promo-code-display {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 1rem 2rem;
            color: white;
            font-family: monospace;
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: 2px;
            margin-top: 1rem;
            border: 2px dashed rgba(255, 255, 255, 0.3);
        }

        .discount-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #10b981;
            color: white;
            padding: 12px 20px;
            border-radius: 25px;
            font-weight: 700;
            font-size: 1.25rem;
            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
        }

        .status-indicator {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .status-active {
            background-color: rgba(16, 185, 129, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .status-inactive {
            background-color: rgba(239, 68, 68, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .status-expired {
            background-color: rgba(245, 158, 11, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .promo-image-container {
            width: 300px;
            height: 300px;
            margin: 2rem auto;
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .promo-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .no-image-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
        }

        .detail-section {
            padding: 2rem;
            border-bottom: 1px solid #e5e7eb;
        }

        .detail-section:last-child {
            border-bottom: none;
        }

        .section-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #374151;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 0.5rem;
            color: #4f46e5;
        }

        .detail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }

        .detail-item {
            background: #f9fafb;
            padding: 1rem;
            border-radius: 8px;
            border-left: 4px solid #4f46e5;
        }

        .detail-label {
            font-size: 0.875rem;
            color: #6b7280;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }

        .detail-value {
            font-size: 1rem;
            color: #111827;
            font-weight: 600;
        }

        .usage-stats {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid #bae6fd;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color: #0369a1;
            display: block;
        }

        .stat-label {
            font-size: 0.875rem;
            color: #475569;
            margin-top: 0.5rem;
        }

        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 2rem;
        }

        .btn {
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }

        .btn-primary:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .btn-secondary {
            background-color: #6b7280;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #4b5563;
            transform: translateY(-2px);
        }

        .btn-danger {
            background-color: #ef4444;
            color: white;
        }

        .btn-danger:hover {
            background-color: #dc2626;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

        .description-content {
            background: #f9fafb;
            padding: 1.5rem;
            border-radius: 8px;
            border-left: 4px solid #4f46e5;
            line-height: 1.6;
        }

        .copy-code-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-left: 1rem;
        }

        .copy-code-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .users-list {
            max-height: 200px;
            overflow-y: auto;
            background: #f9fafb;
            border-radius: 8px;
            padding: 1rem;
        }

        .user-item {
            padding: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user-item:last-child {
            border-bottom: none;
        }

        .user-name {
            font-weight: 500;
            color: #374151;
        }

        .user-date {
            font-size: 0.875rem;
            color: #6b7280;
        }
    </style>

    <div>
        <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100">
            <div class="container mx-auto px-6 py-8">
                
                <!-- Header -->
                <div class="flex justify-between items-center mb-8">
                    <div>
                        <h1 class="text-3xl font-bold text-gray-800">Promo Code Details</h1>
                        <p class="text-gray-600 mt-2">View and manage promo code information</p>
                    </div>
                    <a href="{{ route('admin.promo.index') }}" 
                       class="text-gray-600 hover:text-gray-800 font-semibold">
                        ← Back to List
                    </a>
                </div>

                <div class="promo-detail-card">
                    <!-- Promo Header -->
                    <div class="promo-header">
                        <!-- Status Indicator -->
                        @if($promoCode->expiry_date < now())
                            <div class="status-indicator status-expired">Expired</div>
                        @elseif($promoCode->status && $promoCode->is_active)
                            <div class="status-indicator status-active">Active</div>
                        @else
                            <div class="status-indicator status-inactive">Inactive</div>
                        @endif

                        <!-- Discount Badge -->
                        <div class="discount-badge">
                            ${{ number_format($promoCode->discount, 2) }} OFF
                        </div>

                        <h1 class="promo-title">{{ $promoCode->title }}</h1>
                        <div class="promo-code-display">
                            {{ $promoCode->code }}
                            <button class="copy-code-btn" onclick="copyCode('{{ $promoCode->code }}')">
                                <i class="fas fa-copy"></i> Copy
                            </button>
                        </div>
                    </div>

                    <!-- Promo Image -->
                    <div class="detail-section" style="text-align: center;">
                        <div class="promo-image-container">
                            @if($promoCode->img_url)
                                <img src="{{ asset('promoCode/' . $promoCode->img_url) }}" 
                                     alt="{{ $promoCode->title }}" 
                                     class="promo-image">
                            @else
                                <div class="no-image-placeholder">
                                    <div class="text-center">
                                        <i class="fas fa-image text-4xl mb-2"></i>
                                        <p>No image uploaded</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Description -->
                    @if($promoCode->description)
                        <div class="detail-section">
                            <h2 class="section-title">
                                <i class="fas fa-file-text"></i>
                                Description
                            </h2>
                            <div class="description-content">
                                {!! $promoCode->description !!}
                            </div>
                        </div>
                    @endif

                    <!-- Promo Details -->
                    <div class="detail-section">
                        <h2 class="section-title">
                            <i class="fas fa-info-circle"></i>
                            Promo Details
                        </h2>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <div class="detail-label">Discount Type</div>
                                <div class="detail-value">Fixed Amount</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">Discount Value</div>
                                <div class="detail-value">${{ number_format($promoCode->discount, 2) }}</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">Start Date</div>
                                <div class="detail-value">
                                    {{ $promoCode->start_date ? $promoCode->start_date->format('M d, Y') : 'Immediate' }}
                                </div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">Expiry Date</div>
                                <div class="detail-value">{{ $promoCode->expiry_date->format('M d, Y') }}</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">Created</div>
                                <div class="detail-value">{{ $promoCode->created_at->format('M d, Y h:i A') }}</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">Last Updated</div>
                                <div class="detail-value">{{ $promoCode->updated_at->format('M d, Y h:i A') }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Usage Statistics -->
                   
                    <!-- Users Who Used This Code -->
                  

                    <!-- Action Buttons -->
                    <div class="detail-section">
                        <div class="action-buttons">
                            <a href="{{ route('admin.promo.edit', $promoCode->id) }}" class="btn btn-primary">
                                <i class="fas fa-edit"></i>
                                Edit Promo Code
                            </a>
                            
                            <button onclick="toggleStatus({{ $promoCode->id }}, {{ $promoCode->status ? 0 : 1 }})" 
                                    class="btn {{ $promoCode->status ? 'btn-secondary' : 'btn-primary' }}">
                                <i class="fas fa-toggle-{{ $promoCode->status ? 'off' : 'on' }}"></i>
                                {{ $promoCode->status ? 'Deactivate' : 'Activate' }}
                            </button>

                            <button onclick="deletePromo({{ $promoCode->id }})" class="btn btn-danger">
                                <i class="fas fa-trash"></i>
                                Delete
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mt-4">Delete Promo Code</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500">Are you sure you want to delete this promo code? This action cannot be undone.</p>
                </div>
                <div class="items-center px-4 py-3">
                    <button id="deleteConfirm" class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-red-600">
                        Delete
                    </button>
                    <button id="deleteCancel" class="mt-3 px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-full shadow-sm hover:bg-gray-400">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

</x-app-layout>