@extends('layouts.user_type.auth')
@section('content')
<div class="row justify-content-center">
    <div class="col-lg-10 col-md-10 col-12">
        <div class="card shadow-lg border-0">
            <div class="card-header bg-gradient-dark text-white py-4 d-flex justify-content-between align-items-center">
                <h3 class="mb-0 text-white">Add Features to Plan</h3>
                <a href="{{ route('features.features-list',$plan->slug) }}" class="btn btn-white btn-sm mb-0">features List</a>
            </div>
            <div class="card-body">
                <form action="{{ route('features.features-store') }}" method="POST">
                    @csrf

                    <!-- Display Plan Name -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <label for="plan_name" class="form-label">Plan Name</label>
                            <input
                                type="text"
                                id="plan_name"
                                class="form-control"
                                value="{{ $plan->name }}"
                                readonly>
                            <!-- Hidden input to submit plan_id -->
                            <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        </div>
                    </div>

                    <!-- Features Section -->
                    <div id="features-section">
                        <div class="feature-item mb-4">
                            <div class="row">
                                <!-- Feature Name -->
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">Feature Name</label>
                                    <input
                                        type="text"
                                        id="name"
                                        name="name"
                                        value="{{ old('name') }}"
                                        class="form-control @error('name') is-invalid @enderror"
                                        placeholder="Feature name"
                                        required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Value -->
                                <div class="col-md-6 mb-3">
                                    <label for="value" class="form-label">Value</label>
                                    <input
                                        id="value"
                                        min="0"
                                        type="number"
                                        name="value"
                                        value="{{ old('value') }}"
                                        class="form-control @error('value') is-invalid @enderror"
                                        placeholder="Feature value"
                                        required>
                                    @error('value')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Feature Description -->
                                <div class="col-md-6 mb-3">
                                    <label for="description" class="form-label">Feature Description</label>
                                    <textarea
                                        id="description"
                                        name="description"
                                        class="form-control @error('description') is-invalid @enderror"
                                        placeholder="Feature description"
                                        required>{{ old('description') }}</textarea>
                                    @error('description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

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

                    <!-- Submit Button -->
                    <div class="col-12 text-end">
                        <button type="reset" class="btn bg-gradient-info my-4">Reset</button>
                        <button
                            type="submit"
                            class="btn bg-gradient-dark my-4"
                            onclick="this.form.submit(); this.disabled = true; this.innerHTML =
                            '<span class=\'spinner-border spinner-border-sm\' role=\'status\' aria-hidden=\'true\'></span> Please wait...';">
                            Save Features
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>
@endsection