@extends('backend.app')
@push('style')
@endpush
@section('title', 'Create Subscription Plan')
@section('content')
    <div class="app-content content">
        <div class="content-wrapper">
            <div class="content-header row align-items-center">
                <div class="content-header-left col-md-9 col-12">
                    <h2 class="content-header-title mb-0">
                        <i class="fas fa-crown me-2 text-primary"></i>Create Subscription Plan
                    </h2>
                </div>
                <div class="content-header-right text-md-end col-md-3 col-12">
                    <a href="{{ route('subscriptions.index') }}" class="btn btn-primary">
                        <i class="fas fa-list me-1"></i>
                        <span>All Plans</span>
                    </a>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <form class="form" method="POST" action="{{ route('subscriptions.store') }}">
                    @csrf

                    <!-- Basic Information -->
                    <div class="card mb-3">
                        <div class="card-header bg-primary">
                            <h5 class="mb-0">
                                <i class="fas fa-info-circle me-2"></i>Basic Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="title">
                                        Plan Title <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" id="title" class="form-control"
                                        placeholder="e.g., Premium Plan" value="{{ old('title') }}" name="title"
                                        required />
                                    @error('title')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label" for="subtitle">Subtitle</label>
                                    <input type="text" id="subtitle" class="form-control"
                                        placeholder="e.g., Perfect for growing businesses" value="{{ old('subtitle') }}"
                                        name="subtitle" />
                                    @error('subtitle')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="description">Description</label>
                                    <textarea name="description" class="form-control" id="description" rows="4"
                                        placeholder="Describe what this plan offers...">{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Pricing & Duration -->
                    <div class="card mb-3">
                        <div class="card-header bg-success">
                            <h5 class="mb-0">
                                <i class="fas fa-coins me-2"></i>Pricing & Duration (Stripe Payment)
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                Prices will be processed by Stripe. All prices are in SAR (Saudi Riyal).
                            </div>
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="price">
                                        Regular Price (SAR) <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">ر.س</span>
                                        <input type="number" id="price" class="form-control" step="0.01"
                                            min="0" placeholder="99.99" value="{{ old('price') }}" name="price"
                                            required />
                                    </div>
                                    @error('price')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label" for="discounted_price">Discounted Price (SAR)</label>
                                    <div class="input-group">
                                        <span class="input-group-text">ر.س</span>
                                        <input type="number" id="discounted_price" class="form-control" step="0.01"
                                            min="0" placeholder="79.99" value="{{ old('discounted_price') }}"
                                            name="discounted_price" />
                                    </div>
                                    <small class="text-muted mt-1">Leave empty if no discount</small>
                                    @error('discounted_price')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">
                                        Duration <span class="text-danger">*</span>
                                    </label>
                                    <select name="duration" class="form-select" required>
                                        <option value="">Select Duration</option>
                                        <option value="monthly" {{ old('duration') == 'monthly' ? 'selected' : '' }}>
                                            Monthly</option>
                                    </select>
                                    @error('duration')
                                        <div class="text-danger mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Features -->
                    <div class="card mb-3">
                        <div class="card-header bg-warning">
                            <div class="d-flex justify-content-between align-items-center w-100">
                                <div>
                                    <h5 class="mb-0">
                                        <i class="fas fa-list-check me-2"></i>
                                        Plan Features
                                    </h5>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-primary " onclick="addFeature()">
                                        <i class="fas fa-plus me-1"></i> Add Feature
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="features-container">
                                <div class="feature-item input-group">
                                    <input type="text" class="form-control" name="features[]"
                                        placeholder="e.g., Unlimited projects">
                                    <button type="button" class="btn btn-outline-danger feature-remove-btn"
                                        onclick="removeFeature(this)">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <small class="text-muted">Click "Add Feature" to add more features</small>
                        </div>
                    </div>

                    <!-- Plan Options -->
                    <div class="card mb-3">
                        <div class="card-header bg-info">
                            <h5 class="mb-0">
                                <i class="fas fa-cog me-2"></i>Plan Options
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="card border">
                                        <div class="card-body d-flex align-items-center">
                                            <div class="form-check form-switch me-3">
                                                <input class="form-check-input" type="checkbox" id="is_featured"
                                                    name="is_featured" value="1"
                                                    {{ old('is_featured') ? 'checked' : '' }}>
                                            </div>
                                            <div>
                                                <label class="form-check-label fw-bold" for="is_featured">
                                                    <i class="fas fa-star text-warning me-1"></i>Featured Plan
                                                </label>
                                                <p class="small text-muted mb-0">Highlight this plan to users</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="card border">
                                        <div class="card-body d-flex align-items-center">
                                            <div class="form-check form-switch me-3">
                                                <input class="form-check-input" type="checkbox" id="is_active"
                                                    name="is_active" value="1"
                                                    {{ old('is_active', true) ? 'checked' : '' }}>
                                            </div>
                                            <div>
                                                <label class="form-check-label fw-bold" for="is_active">
                                                    <i class="fas fa-toggle-on text-success me-1"></i>Active
                                                </label>
                                                <p class="small text-muted mb-0">Plan visible to users</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="{{ route('subscriptions.index') }}" class="btn btn-outline-secondary btn-lg me-2">
                                <i class="fas fa-times me-1 "></i>Cancel
                            </a>
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-1"></i>Create Plan
                            </button>
                        </div>
                    </div>

                    
                </form>
            </div>
        </div>
    </div>

    @push('script')
        <script>
            // Add feature field
            function addFeature() {
                const container = document.getElementById('features-container');
                const featureDiv = document.createElement('div');
                featureDiv.className = 'feature-item input-group';
                featureDiv.innerHTML = `
                    <input type="text" class="form-control" name="features[]"
                           placeholder="e.g., Unlimited projects">
                    <button type="button" class="btn btn-outline-danger feature-remove-btn"
                            onclick="removeFeature(this)">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                container.appendChild(featureDiv);
            }

            // Remove feature field
            function removeFeature(button) {
                const container = document.getElementById('features-container');
                if (container.children.length > 1) {
                    button.closest('.feature-item').remove();
                } else {
                    alert('You must have at least one feature field.');
                }
            }
        </script>
    @endpush
@endsection