@extends('layouts.dashboard')
@section('title', 'Create Subscription Plan')

@section('styles')
<style>
    .nav-pills-custom { gap: 0.5rem; border-bottom: 2px solid #f1f5f9; padding-bottom: 1rem; margin-bottom: 2rem; }
    .nav-pills-custom .nav-link { color: #64748b; font-weight: 600; padding: 0.6rem 1.25rem; border-radius: 8px; transition: all 0.2s ease; background: transparent; }
    .nav-pills-custom .nav-link:hover { color: var(--primary); background: rgba(13, 148, 136, 0.05); }
    .nav-pills-custom .nav-link.active { background: rgba(13, 148, 136, 0.1); color: var(--primary); }
    .glass-card { background: #ffffff; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
</style>
@endsection

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-800 text-dark mb-1">Create New Plan</h4>
            <p class="text-muted mb-0">Define pricing, limits, and features for a new SaaS subscription tier.</p>
        </div>
        <a href="{{ route('admin.plans.index') }}" class="btn btn-outline-secondary fw-600"><i class="fas fa-arrow-left me-2"></i>Back to Plans</a>
    </div>

    <form action="{{ route('admin.plans.store') }}" method="POST">
        @csrf
        
        <div class="row g-4">
            <div class="col-lg-8">
                <!-- Nav Pills -->
                <ul class="nav nav-pills nav-pills-custom" id="planTabs" role="tablist">
                    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#basic" type="button">Basic & Pricing</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#limits" type="button">Usage Limits</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#features" type="button">Custom Features</button></li>
                </ul>

                <div class="tab-content" id="planTabsContent">
                    <!-- Basic & Pricing Tab -->
                    <div class="tab-pane fade show active" id="basic">
                        <div class="glass-card p-4">
                            <h6 class="fw-800 text-dark mb-4"><i class="fas fa-info-circle me-2 text-primary"></i>Basic Information</h6>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Plan Name</label>
                                    <input type="text" name="name" class="form-control" required placeholder="e.g. Starter Pro">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Target Audience (Type)</label>
                                    <select name="plan_type" class="form-select">
                                        <option value="recruiter">Recruiter / Employer</option>
                                        <option value="candidate">Job Seeker</option>
                                    </select>
                                </div>
                                
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Monthly Price</label>
                                    <input type="number" step="0.01" name="price" class="form-control" required value="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Annual Price</label>
                                    <input type="number" step="0.01" name="annual_price" class="form-control" required value="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Currency</label>
                                    <select name="currency" class="form-select">
                                        <option value="INR">INR (₹)</option>
                                        <option value="USD">USD ($)</option>
                                        <option value="EUR">EUR (€)</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Discount % (Optional)</label>
                                    <input type="number" name="discount_percentage" class="form-control" value="0">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Billing Cycle</label>
                                    <select name="billing_cycle" class="form-select">
                                        <option value="monthly">Monthly / Yearly</option>
                                        <option value="lifetime">Lifetime Access</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Plan Badge (e.g., Popular, Premium)</label>
                                    <input type="text" name="badge" class="form-control" placeholder="e.g. Most Popular">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Color Theme (Hex or CSS Class)</label>
                                    <input type="text" name="color_theme" class="form-control" placeholder="e.g., #0d9488 or bg-primary">
                                </div>

                                <div class="col-12">
                                    <label class="form-label fw-600 text-muted">Short Description</label>
                                    <input type="text" name="description" class="form-control" placeholder="Brief tagline for the pricing table">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Limits Tab -->
                    <div class="tab-pane fade" id="limits">
                        <div class="glass-card p-4">
                            <h6 class="fw-800 text-dark mb-4"><i class="fas fa-lock me-2 text-danger"></i>Limits & Quotas (0 = Unlimited)</h6>
                            <h6 class="fw-bold mb-3 small text-muted text-uppercase">Job Posting Limits</h6>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Total Job Posts</label>
                                    <input type="number" name="job_posts" class="form-control" value="5">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Active Jobs Limit</label>
                                    <input type="number" name="active_jobs_limit" class="form-control" value="5">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Featured Jobs Limit</label>
                                    <input type="number" name="featured_jobs" class="form-control" value="0">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-600 text-muted">Urgent Hiring Jobs Limit</label>
                                    <input type="number" name="urgent_jobs_limit" class="form-control" value="0">
                                </div>
                            </div>

                            <h6 class="fw-bold mb-3 small text-muted text-uppercase">Resume & Candidate Limits</h6>
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Resume Views Limit</label>
                                    <input type="number" name="resume_views_limit" class="form-control" value="10">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Resume Downloads</label>
                                    <input type="number" name="resume_downloads" class="form-control" value="10">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Candidate Unlocks</label>
                                    <input type="number" name="candidate_unlock_limit" class="form-control" value="10">
                                </div>
                            </div>

                            <h6 class="fw-bold mb-3 small text-muted text-uppercase">Communication Limits</h6>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Email Credits</label>
                                    <input type="number" name="email_credits" class="form-control" value="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">SMS Credits</label>
                                    <input type="number" name="sms_credits" class="form-control" value="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">WhatsApp Credits</label>
                                    <input type="number" name="whatsapp_credits" class="form-control" value="0">
                                </div>
                            </div>
                            <h6 class="fw-bold mb-3 mt-4 small text-muted text-uppercase">Support & Branding</h6>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Support Type</label>
                                    <select name="support_type" class="form-select">
                                        <option value="">None</option>
                                        <option value="Email Support">Email Support</option>
                                        <option value="Priority Support">Priority Support</option>
                                        <option value="Dedicated Manager">Dedicated Manager</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Support Tickets / Month</label>
                                    <input type="number" name="support_tickets" class="form-control" value="0">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label fw-600 text-muted">Custom Branding</label>
                                    <select name="custom_branding" class="form-select">
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Features Tab -->
                    <div class="tab-pane fade" id="features">
                        <div class="glass-card p-4">
                            <h6 class="fw-800 text-dark mb-4"><i class="fas fa-list-check me-2 text-success"></i>Custom Features (Displayed on Pricing Page)</h6>
                            <div id="featuresList">
                                <div class="input-group mb-2">
                                    <input type="text" name="features[]" class="form-control" placeholder="E.g., 24/7 Dedicated Support">
                                    <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
                                </div>
                                <div class="input-group mb-2">
                                    <input type="text" name="features[]" class="form-control" placeholder="E.g., Advanced AI Analytics">
                                    <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-primary fw-600 mt-3" onclick="addFeature()">
                                <i class="fas fa-plus me-1"></i> Add Feature
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar Actions -->
            <div class="col-lg-4">
                <div class="glass-card p-4 sticky-top" style="top: 100px;">
                    <h6 class="fw-800 text-dark mb-3">Settings & Publishing</h6>
                    
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="is_active" id="isActive" value="1" checked>
                        <label class="form-check-label fw-600" for="isActive">Plan is Active</label>
                    </div>
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" name="is_popular" id="isPopular" value="1">
                        <label class="form-check-label fw-600" for="isPopular">Mark as "Popular"</label>
                    </div>
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" name="can_see_contact" id="canSeeContact" value="1">
                        <label class="form-check-label fw-600" for="canSeeContact">Allow seeing contact info instantly without unlocks</label>
                    </div>

                    <button type="submit" class="btn btn-primary w-100 py-3 fw-700 mb-2 rounded-3 shadow-sm">
                        <i class="fas fa-save me-2"></i>Create Plan
                    </button>
                    <a href="{{ route('admin.plans.index') }}" class="btn btn-light border w-100 py-2 fw-600 rounded-3 text-center d-block">Cancel</a>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('scripts')
<script>
    function addFeature() {
        const div = document.createElement('div');
        div.className = 'input-group mb-2';
        div.innerHTML = `
            <input type="text" name="features[]" class="form-control" placeholder="New feature...">
            <button type="button" class="btn btn-outline-danger" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
        `;
        document.getElementById('featuresList').appendChild(div);
    }
</script>
@endsection