@extends('layouts.admin_main')

@section('content')
<div class="content-wrapper">
    <div class="col-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Update Pricing Section</h3>
            </div>

            <div class="card-body">
                <!-- Success message -->
                @if(session('status'))
                    <h5 class="alert alert-success text-center">{{ session('status') }}</h5>
                @endif

                <form action="{{ route('admin.pricing.store') }}" method="POST">
                    @csrf

                    <!-- Section Title and Description -->
                    <div class="form-group">
                        <label for="section_title">Section Title</label>
                        <input type="text" class="form-control" id="section_title" name="section_title" value="{{ $pricingSection->title ?? '' }}" required>
                    </div>
                    <div class="form-group">
                        <label for="section_description">Section Description</label>
                        <textarea class="form-control" id="section_description" name="section_description" rows="3" required>{{ $pricingSection->description ?? '' }}</textarea>
                    </div>

                    <!-- Dynamic Pricing Plans -->
                    <div id="pricing-plans-container">
                        <h4 class="mt-4">Pricing Plans</h4>

                        <!-- Existing plans or default empty plan -->
                        @if($pricingSection && $pricingSection->plans)
                            @foreach($pricingSection->plans as $index => $plan)
                                <div class="card mb-3" id="plan_{{ $index }}">
                                    <div class="card-header">
                                        <h5 class="card-title">Plan {{ $index + 1 }}</h5>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label for="plan_title_{{ $index }}">Plan Title</label>
                                            <input type="text" class="form-control" id="plan_title_{{ $index }}" name="plans[{{ $index }}][plan_title]" value="{{ $plan->plan_title }}" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="price_{{ $index }}">Price</label>
                                            <input type="number" step="0.01" class="form-control" id="price_{{ $index }}" name="plans[{{ $index }}][price]" value="{{ $plan->price }}" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="price_duration_{{ $index }}">Price Duration</label>
                                            <input type="text" class="form-control" id="price_duration_{{ $index }}" name="plans[{{ $index }}][price_duration]" value="{{ $plan->price_duration }}" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="features_{{ $index }}">Features (one per line)</label>
                                            <textarea class="form-control" id="features_{{ $index }}" name="plans[{{ $index }}][features]" rows="3" required>{{ is_array($plan->features) ? implode("\n", $plan->features) : implode("\n", json_decode($plan->features, true)) }}</textarea>
                                        </div>
                                        <button type="button" class="btn btn-danger" onclick="removePlan('plan_{{ $index }}')">Remove Plan</button>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <!-- Default empty plan template -->
                            <div class="card mb-3" id="plan_0">
                                <div class="card-header">
                                    <h5 class="card-title">Plan 1</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="plan_title_0">Plan Title</label>
                                        <input type="text" class="form-control" id="plan_title_0" name="plans[0][plan_title]" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="price_0">Price</label>
                                        <input type="number" step="0.01" class="form-control" id="price_0" name="plans[0][price]" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="price_duration_0">Price Duration</label>
                                        <input type="text" class="form-control" id="price_duration_0" name="plans[0][price_duration]" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="features_0">Features (one per line)</label>
                                        <textarea class="form-control" id="features_0" name="plans[0][features]" rows="3" required></textarea>
                                    </div>
                                    <button type="button" class="btn btn-danger" onclick="removePlan('plan_0')">Remove Plan</button>
                                </div>
                            </div>
                        @endif
                    </div>
                    <div class="text-center mt-3">
                        <button type="button" id="add-plan-btn" class="btn btn-success">Add Plan</button>
                    </div>
                    <!-- Update Section Button -->
                    <div class="text-center mt-5">
                        <button type="submit" class="btn btn-primary">Update Section</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Add Plan Button -->

    </div>
</div>

<script>
    let planIndex = {{ $pricingSection && $pricingSection->plans ? count($pricingSection->plans) : 1 }};

    // Add new plan
    document.getElementById('add-plan-btn').addEventListener('click', function () {
        const container = document.getElementById('pricing-plans-container');
        const newPlan = `
            <div class="card mb-3" id="plan_${planIndex}">
                <div class="card-header">
                    <h5 class="card-title">Plan ${planIndex + 1}</h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="plan_title_${planIndex}">Plan Title</label>
                        <input type="text" class="form-control" id="plan_title_${planIndex}" name="plans[${planIndex}][plan_title]" required>
                    </div>
                    <div class="form-group">
                        <label for="price_${planIndex}">Price</label>
                        <input type="number" step="0.01" class="form-control" id="price_${planIndex}" name="plans[${planIndex}][price]" required>
                    </div>
                    <div class="form-group">
                        <label for="price_duration_${planIndex}">Price Duration</label>
                        <input type="text" class="form-control" id="price_duration_${planIndex}" name="plans[${planIndex}][price_duration]" required>
                    </div>
                    <div class="form-group">
                        <label for="features_${planIndex}">Features (one per line)</label>
                        <textarea class="form-control" id="features_${planIndex}" name="plans[${planIndex}][features]" rows="3" required></textarea>
                    </div>
                    <button type="button" class="btn btn-danger" onclick="removePlan('plan_${planIndex}')">Remove Plan</button>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', newPlan);
        planIndex++;
    });

    // Remove plan
    function removePlan(planId) {
        const plan = document.getElementById(planId);
        plan.remove();
    }
</script>
@endsection