@extends('layouts.app')

@section('title', 'Create Credit Package')

@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-plus-circle me-2 text-primary"></i>Create Credit Package
                    </h1>
                    <p class="text-muted">Set up a new credit package for customers</p>
                </div>
                <a href="{{ route('credit-packages.index', $website) }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left me-1"></i>Back to Packages
                </a>
            </div>
        </div>
    </div>

    <!-- Error Messages -->
    @if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <h5><i class="bi bi-exclamation-circle me-2"></i>There were some errors with your submission:</h5>
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <!-- Form -->
    <form method="POST" action="{{ route('credit-packages.store', $website) }}">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Package Details</h5>
                    </div>
                    <div class="card-body">
                        <!-- Package Name -->
                        <div class="mb-3">
                            <label for="name" class="form-label">Package Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   id="name" name="name" value="{{ old('name') }}"
                                   placeholder="e.g., Starter Pack, Pro Pack, Premium Pack" required>
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror"
                                      id="description" name="description" rows="3"
                                      placeholder="Optional description of this package">{{ old('description') }}</textarea>
                            @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <!-- Base Credits -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="credits" class="form-label">Base Credits <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('credits') is-invalid @enderror"
                                           id="credits" name="credits" value="{{ old('credits') }}"
                                           min="1" step="1" placeholder="100" required>
                                    <small class="text-muted">Main credits included in package</small>
                                    @error('credits')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Bonus Credits -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="bonus_credits" class="form-label">Bonus Credits</label>
                                    <input type="number" class="form-control @error('bonus_credits') is-invalid @enderror"
                                           id="bonus_credits" name="bonus_credits" value="{{ old('bonus_credits', 0) }}"
                                           min="0" step="1" placeholder="10">
                                    <small class="text-muted">Extra credits (e.g., buy 100 get 10 free)</small>
                                    @error('bonus_credits')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Price -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="price" class="form-label">Price (RM) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('price') is-invalid @enderror"
                                           id="price" name="price" value="{{ old('price') }}"
                                           min="0" step="0.01" placeholder="90.00" required>
                                    <small class="text-muted">Package price in Ringgit Malaysia</small>
                                    @error('price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Sort Order -->
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="sort_order" class="form-label">Sort Order</label>
                                    <input type="number" class="form-control @error('sort_order') is-invalid @enderror"
                                           id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}"
                                           min="0" step="1" placeholder="0">
                                    <small class="text-muted">Lower numbers appear first</small>
                                    @error('sort_order')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <!-- Package Options -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Package Options</h5>
                    </div>
                    <div class="card-body">
                        <!-- Active Status -->
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_active"
                                       name="is_active" {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <strong>Active</strong>
                                    <br><small class="text-muted">Package is available for purchase</small>
                                </label>
                            </div>
                        </div>

                        <!-- Popular Badge -->
                        <div class="mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_popular"
                                       name="is_popular" {{ old('is_popular') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_popular">
                                    <strong>Mark as Popular</strong>
                                    <br><small class="text-muted">Show "Most Popular" badge</small>
                                </label>
                            </div>
                        </div>

                        <!-- Custom Badge -->
                        <div class="mb-3">
                            <label for="badge_text" class="form-label">Custom Badge Text</label>
                            <input type="text" class="form-control @error('badge_text') is-invalid @enderror"
                                   id="badge_text" name="badge_text" value="{{ old('badge_text') }}"
                                   placeholder="e.g., Best Value, Limited Time" maxlength="50">
                            @error('badge_text')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Badge Color -->
                        <div class="mb-3">
                            <label for="badge_color" class="form-label">Badge Color</label>
                            <select class="form-select @error('badge_color') is-invalid @enderror"
                                    id="badge_color" name="badge_color">
                                <option value="">None</option>
                                <option value="primary" {{ old('badge_color') === 'primary' ? 'selected' : '' }}>Primary (Blue)</option>
                                <option value="success" {{ old('badge_color') === 'success' ? 'selected' : '' }}>Success (Green)</option>
                                <option value="warning" {{ old('badge_color') === 'warning' ? 'selected' : '' }}>Warning (Yellow)</option>
                                <option value="danger" {{ old('badge_color') === 'danger' ? 'selected' : '' }}>Danger (Red)</option>
                                <option value="info" {{ old('badge_color') === 'info' ? 'selected' : '' }}>Info (Cyan)</option>
                            </select>
                            @error('badge_color')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Preview -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Preview</h5>
                    </div>
                    <div class="card-body">
                        <div id="packagePreview" class="text-center">
                            <p class="text-muted">Fill in the form to see preview</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Button -->
        <div class="row">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('credit-packages.index', $website) }}" class="btn btn-outline-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-1"></i>Create Package
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    // Live preview
    function updatePreview() {
        const name = document.getElementById('name').value || 'Package Name';
        const credits = parseInt(document.getElementById('credits').value) || 0;
        const bonusCredits = parseInt(document.getElementById('bonus_credits').value) || 0;
        const price = parseFloat(document.getElementById('price').value) || 0;
        const totalCredits = credits + bonusCredits;
        const pricePerCredit = totalCredits > 0 ? (price / totalCredits).toFixed(2) : 0;

        let preview = `
            <h5>${name}</h5>
            <div class="my-3">
                <div style="font-size: 36px; font-weight: 700; color: #667eea;">
                    RM ${price.toFixed(2)}
                </div>
            </div>
            <div class="mb-3">
                <div style="font-size: 24px; font-weight: 700;">
                    ${totalCredits} <span style="font-size: 14px; font-weight: 500; color: #999;">credits</span>
                </div>
            </div>
            <hr>
            <div class="text-start small">
                <div class="mb-2"><i class="bi bi-check-circle text-success"></i> ${credits} Base Credits</div>
                ${bonusCredits > 0 ? `<div class="mb-2"><i class="bi bi-gift text-warning"></i> ${bonusCredits} Bonus Credits</div>` : ''}
                <div><i class="bi bi-tag text-primary"></i> RM ${pricePerCredit} per credit</div>
            </div>
        `;

        document.getElementById('packagePreview').innerHTML = preview;
    }

    // Add event listeners
    ['name', 'credits', 'bonus_credits', 'price'].forEach(id => {
        document.getElementById(id).addEventListener('input', updatePreview);
    });

    // Initial preview
    updatePreview();
</script>
@endpush