@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="bi bi-wallet2 me-2 text-primary"></i>Credit Packages
                    </h1>
                    <p class="text-muted">Manage credit packages for customer wallet top-ups</p>
                </div>
                <div>
                    <a href="{{ route('credit-packages.create', $website) }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle me-1"></i>Create Package
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show">
        <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show">
        <i class="bi bi-exclamation-circle me-2"></i>{{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Credit Packages List -->
    @if($packages->count() > 0)
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row g-3" id="packagesContainer">
                @foreach($packages as $package)
                <div class="col-md-4" data-package-id="{{ $package->id }}">
                    <div class="package-card {{ !$package->is_active ? 'inactive' : '' }}">
                        @if($package->is_popular)
                        <div class="popular-badge">
                            <i class="bi bi-star-fill"></i> Most Popular
                        </div>
                        @endif

                        @if(!$package->is_active)
                        <div class="inactive-badge">
                            <i class="bi bi-pause-circle"></i> Inactive
                        </div>
                        @endif

                        <div class="package-header">
                            <h4>{{ $package->name }}</h4>
                            @if($package->description)
                            <p class="text-muted small mb-0">{{ $package->description }}</p>
                            @endif
                        </div>

                        <div class="package-price">
                            <div class="price">
                                <span class="currency">RM</span>
                                <span class="amount">{{ number_format($package->price, 2) }}</span>
                            </div>
                        </div>

                        <div class="package-credits">
                            <div class="credits-display">
                                <span class="credits-number">{{ number_format($package->total_credits, 0) }}</span>
                                <span class="credits-label">credits</span>
                            </div>
                        </div>

                        <div class="package-details">
                            <div class="detail-item">
                                <i class="bi bi-tag"></i>
                                <span>{{ number_format($package->credits, 0) }} Base Credits</span>
                            </div>
                            @if($package->bonus_credits > 0)
                            <div class="detail-item">
                                <i class="bi bi-gift text-warning"></i>
                                <span>{{ number_format($package->bonus_credits, 0) }} Bonus Credits</span>
                            </div>
                            @endif
                            <div class="detail-item">
                                <i class="bi bi-calculator"></i>
                                <span>RM {{ number_format($package->price_per_credit, 2) }} per credit</span>
                            </div>
                            @if($package->savings_percentage > 0)
                            <div class="detail-item">
                                <i class="bi bi-percent text-success"></i>
                                <span>{{ $package->savings_percentage }}% Savings</span>
                            </div>
                            @endif
                            <div class="detail-item">
                                <i class="bi bi-sort-numeric-down"></i>
                                <span>Sort Order: {{ $package->sort_order }}</span>
                            </div>
                        </div>

                        <div class="package-actions">
                            <a href="{{ route('credit-packages.edit', [$website, $package]) }}"
                               class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-pencil"></i> Edit
                            </a>

                            <form method="POST"
                                  action="{{ route('credit-packages.toggle-active', [$website, $package]) }}"
                                  class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-{{ $package->is_active ? 'warning' : 'success' }}">
                                    <i class="bi bi-{{ $package->is_active ? 'pause' : 'play' }}-circle"></i>
                                    {{ $package->is_active ? 'Deactivate' : 'Activate' }}
                                </button>
                            </form>

                            <form method="POST"
                                  action="{{ route('credit-packages.destroy', [$website, $package]) }}"
                                  class="d-inline"
                                  onsubmit="return confirm('Are you sure you want to delete this package? This action cannot be undone.');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger">
                                    <i class="bi bi-trash"></i> Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @else
    <!-- No Packages -->
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5">
            <i class="bi bi-inbox text-muted" style="font-size: 64px;"></i>
            <h3 class="mt-3 mb-2">No Credit Packages Yet</h3>
            <p class="text-muted mb-4">Create your first credit package to allow customers to top up their wallets</p>
            <a href="{{ route('credit-packages.create', $website) }}" class="btn btn-primary">
                <i class="bi bi-plus-circle me-1"></i>Create Your First Package
            </a>
        </div>
    </div>
    @endif

    <!-- Info Card -->
    <div class="card border-0 shadow-sm mt-4" style="background-color: #f8f9ff; border-left: 4px solid #667eea;">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-1 text-center">
                    <i class="bi bi-info-circle" style="font-size: 32px; color: #667eea;"></i>
                </div>
                <div class="col-md-11">
                    <h5 class="mb-2">About Credit Packages</h5>
                    <p class="mb-1"><strong>Purpose:</strong> Credit packages allow customers to purchase credits that can be used for bookings, products, and services</p>
                    <p class="mb-1"><strong>Bonus Credits:</strong> Incentivize larger purchases by offering bonus credits (e.g., buy 100 get 10 free)</p>
                    <p class="mb-0"><strong>Popular Badge:</strong> Mark packages as "Most Popular" to highlight your best deals to customers</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .package-card {
        background: white;
        border: 2px solid #e0e0e0;
        border-radius: 12px;
        padding: 25px;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: all 0.3s;
    }

    .package-card.inactive {
        opacity: 0.6;
        background-color: #f8f9fa;
    }

    .package-card:hover {
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    .popular-badge {
        position: absolute;
        top: -12px;
        right: 20px;
        background: #6366f1;
        color: white;
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
    }

    .inactive-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background-color: #ffc107;
        color: #000;
        padding: 5px 12px;
        border-radius: 15px;
        font-size: 11px;
        font-weight: 600;
    }

    .package-header {
        margin-bottom: 20px;
    }

    .package-header h4 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .package-price {
        text-align: center;
        padding: 20px 0;
        border-bottom: 2px solid #f0f0f0;
        margin-bottom: 20px;
    }

    .package-price .price {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5px;
    }

    .package-price .currency {
        font-size: 20px;
        font-weight: 600;
        color: #999;
    }

    .package-price .amount {
        font-size: 38px;
        font-weight: 800;
        color: #667eea;
    }

    .package-credits {
        text-align: center;
        margin-bottom: 25px;
    }

    .credits-display {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 28px;
        font-weight: 700;
        color: #333;
    }

    .credits-label {
        font-size: 14px;
        color: #999;
        font-weight: 500;
    }

    .package-details {
        flex: 1;
        margin-bottom: 20px;
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
        font-size: 14px;
        color: #666;
    }

    .detail-item i {
        font-size: 16px;
        color: #667eea;
    }

    .package-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .package-actions .btn {
        flex: 1;
        min-width: 80px;
    }
</style>
@endpush