@extends('layouts.app')

@section('title', 'Add New Billing Plan - Admin Panel')
@section('page_title', 'Add Billing Plan')

@section('content')
<div class="row">
    <div class="col-md-8 offset-md-2">
        <div class="card">
            <div class="card-header">
                <h5>Add New Billing Plan</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('billing-plans.store') }}" method="POST">
                    @csrf

                    <div class="form-group mb-3">
                        <label for="product_id" class="font-weight-bold">Product ID (RevenueCat/Store) <span class="text-danger">*</span></label>
                        <input type="text" name="product_id" id="product_id" class="form-control @error('product_id') is-invalid @enderror" value="{{ old('product_id') }}" placeholder="e.g. starter_pack" required>
                        <small class="text-muted">Must exactly match the product identifier configured in RevenueCat / App Stores.</small>
                        @error('product_id')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="name" class="font-weight-bold">Plan Name <span class="text-danger">*</span></label>
                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="e.g. Starter Pack" required>
                        @error('name')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group mb-3">
                        <label for="description" class="font-weight-bold">Description</label>
                        <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" rows="3" placeholder="Enter plan details/benefits...">{{ old('description') }}</textarea>
                        @error('description')
                            <span class="invalid-feedback d-block">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="credits" class="font-weight-bold">Credits Awarded <span class="text-danger">*</span></label>
                                <input type="number" name="credits" id="credits" class="form-control @error('credits') is-invalid @enderror" value="{{ old('credits', 0) }}" min="0" required>
                                @error('credits')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="offer_type" class="font-weight-bold">Offer Type</label>
                                <select name="offer_type" id="offer_type" class="form-control @error('offer_type') is-invalid @enderror">
                                    <option value="" {{ old('offer_type') === '' ? 'selected' : '' }}>None</option>
                                    <option value="discount" {{ old('offer_type') === 'discount' ? 'selected' : '' }}>Discount</option>
                                    <option value="promo_badge" {{ old('offer_type') === 'promo_badge' ? 'selected' : '' }}>Promo Badge</option>
                                </select>
                                @error('offer_type')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Discount Section -->
                    <div class="row" id="discount_fields_container" style="display: none;">
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label for="discount_percentage" class="font-weight-bold">Discount Percentage (%) <span class="text-danger">*</span></label>
                                <input type="number" name="discount_percentage" id="discount_percentage" class="form-control @error('discount_percentage') is-invalid @enderror" value="{{ old('discount_percentage') }}" min="0" max="100" placeholder="e.g. 20">
                                @error('discount_percentage')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Promo Badge Section -->
                    <div class="row" id="promo_fields_container" style="display: none;">
                        <div class="col-md-12">
                            <div class="form-group mb-3">
                                <label for="badge" class="font-weight-bold">Promo Badge Text <span class="text-danger">*</span></label>
                                <input type="text" name="badge" id="badge" class="form-control @error('badge') is-invalid @enderror" value="{{ old('badge') }}" placeholder="e.g. POPULAR, BEST VALUE">
                                @error('badge')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="type" class="font-weight-bold">Plan Type <span class="text-danger">*</span></label>
                                <select name="type" id="type" class="form-control @error('type') is-invalid @enderror" required>
                                    <option value="subscription" {{ old('type') === 'subscription' ? 'selected' : '' }}>Subscription</option>
                                    <option value="prepaid" {{ old('type') === 'prepaid' ? 'selected' : '' }}>Prepaid Pack</option>
                                </select>
                                @error('type')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="sort_order" class="font-weight-bold">Sort Order <span class="text-danger">*</span></label>
                                <input type="number" name="sort_order" id="sort_order" class="form-control @error('sort_order') is-invalid @enderror" value="{{ old('sort_order', 0) }}" required>
                                @error('sort_order')
                                    <span class="invalid-feedback d-block">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" name="is_active" class="custom-control-input" id="is_active" value="1" {{ old('is_active', 1) ? 'checked' : '' }}>
                            <label class="custom-control-label font-weight-bold" for="is_active">Active Status (Visible in App)</label>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between">
                        <a href="{{ route('billing-plans.index') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary">Save Plan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        function toggleOfferFields() {
            var type = $('#offer_type').val();
            if (type === 'discount') {
                $('#discount_fields_container').show();
                $('#promo_fields_container').hide();
                $('#discount_percentage').attr('required', true);
                $('#badge').removeAttr('required');
            } else if (type === 'promo_badge') {
                $('#discount_fields_container').hide();
                $('#promo_fields_container').show();
                $('#discount_percentage').removeAttr('required');
                $('#badge').attr('required', true);
            } else {
                $('#discount_fields_container').hide();
                $('#promo_fields_container').hide();
                $('#discount_percentage').removeAttr('required');
                $('#badge').removeAttr('required');
            }
        }

        $('#offer_type').on('change', toggleOfferFields);
        toggleOfferFields(); // Run on page load
    });
</script>
@endsection