@extends('layouts.admin-layout')

@section('title', isset($content) && $content->exists ? 'Edit Home Page' : 'Create Home Page')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">{{ isset($content) && $content->exists ? 'Edit' : 'Create' }} Home Page Content</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.home.index') }}">Home CMS</a></li>
                        <li class="breadcrumb-item active">{{ isset($content) && $content->exists ? 'Edit' : 'Create' }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">

            @if (session('success'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ session('success') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @php
                $action = isset($content) && $content->exists
                    ? route('admin.home.update')
                    : route('admin.home.store');
            @endphp

            <form action="{{ $action }}" method="POST" enctype="multipart/form-data">
                @csrf

                {{-- ── TAB NAVIGATION ── --}}
                <ul class="nav nav-tabs mb-0" id="homeTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#tab-sliders">
                            <i class="fas fa-images"></i> Sliders
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-about">
                            <i class="fas fa-info-circle"></i> About
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-lateral">
                            <i class="fas fa-heart"></i> LATERAL
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-groups">
                            <i class="fas fa-users"></i> Groups
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-plans">
                            <i class="fas fa-dollar-sign"></i> Plans
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-community">
                            <i class="fas fa-hands-helping"></i> Community
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-testi-heading">
                            <i class="fas fa-star"></i> Testimonials
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#tab-media">
                            <i class="fas fa-photo-video"></i> Images
                        </a>
                    </li>
                </ul>

                <div class="tab-content border border-top-0 p-3 mb-3 bg-white">

                    {{-- ══ TAB 1: SLIDERS ══ --}}
                    <div class="tab-pane fade show active" id="tab-sliders">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">Hero Sliders</h5>
                            <button type="button" class="btn btn-success btn-sm" id="addSlider">
                                <i class="fas fa-plus"></i> Add Slide
                            </button>
                        </div>
                        <div id="sliders-wrapper">
                            @php $sliders = $content->sliders ?? []; @endphp
                            @forelse($sliders as $i => $slide)
                                <div class="slider-row card card-secondary mb-3">
                                    <div class="card-header d-flex justify-content-between align-items-center py-2">
                                        <strong>Slide #{{ $i + 1 }}</strong>
                                        <button type="button" class="btn btn-danger btn-xs remove-slider">
                                            <i class="fas fa-trash"></i> Remove
                                        </button>
                                    </div>
                                    <div class="card-body text-dark">
                                        <div class="form-group">
                                            <label">Title <span class="text-danger">*</span></label>
                                            <input type="text" name="slider_titles[]" class="form-control"
                                                value="{{ $slide['title'] ?? '' }}"
                                                placeholder="e.g. A Safe Space for Healing">
                                        </div>
                                        <div class="form-group">
                                            <label>Subtitle</label>
                                            <input type="text" name="slider_subtitles[]" class="form-control"
                                                value="{{ $slide['subtitle'] ?? '' }}"
                                                placeholder="Short tagline Above title">
                                        </div>
                                        <div class="form-group mb-0">
                                            <label>Description</label>
                                            <textarea name="slider_descriptions[]" class="form-control" rows="2"
                                                placeholder="Slide body text">{{ $slide['description'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="slider-row card card-secondary mb-3">
                                    <div class="card-header d-flex justify-content-between align-items-center py-2">
                                        <strong>Slide #1</strong>
                                        <button type="button" class="btn btn-danger btn-xs remove-slider">
                                            <i class="fas fa-trash"></i> Remove
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div class="form-group">
                                            <label>Title <span class="text-danger">*</span></label>
                                            <input type="text" name="slider_titles[]" class="form-control"
                                                placeholder="e.g. A Safe Space for Healing">
                                        </div>
                                        <div class="form-group">
                                            <label>Subtitle</label>
                                            <input type="text" name="slider_subtitles[]" class="form-control"
                                                placeholder="Short tagline under title">
                                        </div>
                                        <div class="form-group mb-0">
                                            <label>Description</label>
                                            <textarea name="slider_descriptions[]" class="form-control" rows="2"
                                                placeholder="Slide body text"></textarea>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            Banner background image is set in the <strong>Images</strong> tab.
                        </small>
                    </div>

                    {{-- ══ TAB 2: ABOUT ══ --}}
                    <div class="tab-pane fade" id="tab-about">
                        <h5 class="mb-3">About Section</h5>
                        <div class="form-group">
                            <label>Sub Heading <small class="text-muted">(small text above main heading)</small></label>
                            <input type="text" name="about_subhead" class="form-control"
                                value="{{ old('about_subhead', $content->about_subhead ?? 'company overview') }}"
                                placeholder="e.g. company overview">
                        </div>
                        <div class="form-group">
                            <label>Main Heading <span class="text-danger">*</span></label>
                            <input type="text" name="about_heading"
                                class="form-control @error('about_heading') is-invalid @enderror"
                                value="{{ old('about_heading', $content->about_heading ?? '') }}"
                                placeholder="e.g. About Proactive Peers">
                            @error('about_heading')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>Description <span class="text-danger">*</span></label>
                            <textarea name="about_description" rows="8"
                                class="form-control @error('about_description') is-invalid @enderror"
                                placeholder="About section body text...">{{ old('about_description', $content->about_description ?? '') }}</textarea>
                            @error('about_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            About section image is set in the <strong>Images</strong> tab.
                        </small>
                    </div>

                    {{-- ══ TAB 3: LATERAL ══ --}}
                    <div class="tab-pane fade" id="tab-lateral">
                        <h5 class="mb-3">LATERAL Program Section</h5>
                        <div class="form-group">
                            <label>Section Heading <span class="text-danger">*</span></label>
                            <input type="text" name="lateral_heading"
                                class="form-control @error('lateral_heading') is-invalid @enderror"
                                value="{{ old('lateral_heading', $content->lateral_heading ?? '') }}"
                                placeholder="e.g. The LATERAL Program — Life-Altering Trauma Emotional Recovery And Learning">
                            @error('lateral_heading')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>Description <small class="text-muted">(paragraph above bullet points)</small></label>
                            <textarea name="lateral_description" class="form-control" rows="4"
                                placeholder="Healing after trauma is not just about the physical...">{{ old('lateral_description', $content->lateral_description ?? '') }}</textarea>
                        </div>
                        <div class="form-group">
                            <label>Bullet Points</label>
                            <div id="lateral-static-points">
                                @php $points = $content->lateral_points ?? ['', '', '']; @endphp
                                @foreach ($points as $pi => $point)
                                    <div class="input-group mb-2 lateral-point-row">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-circle" style="font-size:7px;"></i>
                                            </span>
                                        </div>
                                        <input type="text" name="lateral_points[]" class="form-control"
                                            value="{{ $point }}" placeholder="Bullet point {{ $pi + 1 }}">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-danger remove-lateral-point">×</button>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                            <div id="lateral-dynamic-points"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-1" id="addLateralPoint">
                                <i class="fas fa-plus"></i> Add Bullet Point
                            </button>
                        </div>
                        <div class="form-group">
                            <label>Footer Text <small class="text-muted">(paragraph below bullet points)</small></label>
                            <textarea name="lateral_footer_text" class="form-control" rows="3"
                                placeholder="Your loss does not erase your worth...">{{ old('lateral_footer_text', $content->lateral_footer_text ?? '') }}</textarea>
                        </div>
                    </div>

                    {{-- ══ TAB 4: GROUPS ══ --}}
                    <div class="tab-pane fade" id="tab-groups">
                        <h5 class="mb-3">Groups at Proactive Peers Tools</h5>
                        <div class="form-group">
                            <label>Section Heading <span class="text-danger">*</span></label>
                            <input type="text" name="groups_heading"
                                class="form-control @error('groups_heading') is-invalid @enderror"
                                value="{{ old('groups_heading', $content->groups_heading ?? '') }}"
                                placeholder="e.g. Groups at Proactive Peers Tools">
                            @error('groups_heading')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <label>Group Boxes <small class="text-muted">(each displayed as a bordered box on front)</small></label>
                        <div id="group-boxes-wrapper">
                            @php $boxes = $content->group_boxes ?? ['', '', '', '', '']; @endphp
                            @foreach ($boxes as $bi => $box)
                                <div class="input-group mb-2 group-box-row">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">{{ $bi + 1 }}</span>
                                    </div>
                                    <input type="text" name="group_boxes[]" class="form-control"
                                        value="{{ $box }}" placeholder="Group box text">
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-danger remove-group-box">×</button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-sm btn-outline-success mt-1" id="addGroupBox">
                            <i class="fas fa-plus"></i> Add Box
                        </button>
                    </div>

                    {{-- ══ TAB 5: SUBSCRIPTION PLANS ══ --}}
                    <div class="tab-pane fade" id="tab-plans">
                        <h5 class="mb-3">Subscription Plans</h5>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Sub Heading</label>
                                    <input type="text" name="subscription_subhead" class="form-control"
                                        value="{{ old('subscription_subhead', $content->subscription_subhead ?? 'subscription') }}"
                                        placeholder="e.g. subscription">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Main Heading <span class="text-danger">*</span></label>
                                    <input type="text" name="subscription_heading"
                                        class="form-control @error('subscription_heading') is-invalid @enderror"
                                        value="{{ old('subscription_heading', $content->subscription_heading ?? '') }}"
                                        placeholder="e.g. Affordable Plans for Your Recovery Journey">
                                    @error('subscription_heading')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div id="plans-wrapper">
                            @php $plans = $content->plans ?? []; @endphp
                            @forelse($plans as $pi => $plan)
                                <div class="plan-row card card-secondary mb-3">
                                    <div class="card-header d-flex justify-content-between align-items-center py-2">
                                        <strong>Plan #{{ $pi + 1 }}</strong>
                                        <button type="button" class="btn btn-danger btn-xs remove-plan">
                                            <i class="fas fa-trash"></i> Remove
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-5">
                                                <div class="form-group">
                                                    <label>Plan Name</label>
                                                    <input type="text" name="plan_names[]" class="form-control"
                                                        value="{{ $plan['name'] ?? '' }}" placeholder="e.g. Basic Plan">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Price ($)</label>
                                                    <input type="text" name="plan_prices[]" class="form-control"
                                                        value="{{ $plan['price'] ?? '' }}" placeholder="e.g. 20">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Duration Label</label>
                                                    <input type="text" name="plan_durations[]" class="form-control"
                                                        value="{{ $plan['duration'] ?? '' }}" placeholder="e.g. for 20 mins">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-0">
                                            <label>Description</label>
                                            <textarea name="plan_descriptions[]" class="form-control" rows="3"
                                                placeholder="Plan features / benefits...">{{ $plan['description'] ?? '' }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="plan-row card card-secondary mb-3">
                                    <div class="card-header d-flex justify-content-between align-items-center py-2">
                                        <strong>Plan #1</strong>
                                        <button type="button" class="btn btn-danger btn-xs remove-plan">
                                            <i class="fas fa-trash"></i> Remove
                                        </button>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-5">
                                                <div class="form-group">
                                                    <label>Plan Name</label>
                                                    <input type="text" name="plan_names[]" class="form-control"
                                                        placeholder="e.g. Basic Plan">
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-group">
                                                    <label>Price ($)</label>
                                                    <input type="text" name="plan_prices[]" class="form-control"
                                                        placeholder="e.g. 20">
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Duration Label</label>
                                                    <input type="text" name="plan_durations[]" class="form-control"
                                                        placeholder="e.g. for 20 mins">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-0">
                                            <label>Description</label>
                                            <textarea name="plan_descriptions[]" class="form-control" rows="3"
                                                placeholder="Plan features / benefits..."></textarea>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                        <button type="button" class="btn btn-sm btn-success" id="addPlan">
                            <i class="fas fa-plus"></i> Add Plan
                        </button>
                    </div>

                    {{-- ══ TAB 6: COMMUNITY ══ --}}
                    <div class="tab-pane fade" id="tab-community">
                        <h5 class="mb-3">Community Section</h5>
                        <div class="form-group">
                            <label>Sub Heading</label>
                            <input type="text" name="community_subhead" class="form-control"
                                value="{{ old('community_subhead', $content->community_subhead ?? 'Community') }}"
                                placeholder="e.g. Community">
                        </div>
                        <div class="form-group">
                            <label>Main Heading</label>
                            <input type="text" name="community_heading" class="form-control"
                                value="{{ old('community_heading', $content->community_heading ?? '') }}"
                                placeholder="e.g. Connect with Others in Recovery">
                        </div>
                    </div>

                    {{-- ══ TAB 7: TESTIMONIALS HEADINGS ══ --}}
                    <div class="tab-pane fade" id="tab-testi-heading">
                        <h5 class="mb-3">Testimonials Section Headings</h5>
                        <div class="form-group">
                            <label>Sub Heading</label>
                            <input type="text" name="testimonials_subhead" class="form-control"
                                value="{{ old('testimonials_subhead', $content->testimonials_subhead ?? 'Testimonials') }}"
                                placeholder="e.g. Testimonials">
                        </div>
                        <div class="form-group">
                            <label>Main Heading</label>
                            <input type="text" name="testimonials_heading" class="form-control"
                                value="{{ old('testimonials_heading', $content->testimonials_heading ?? '') }}"
                                placeholder="e.g. Stories of Strength and Recovery">
                        </div>
                        <div class="callout callout-info mt-3">
                            <i class="fas fa-info-circle"></i>
                            Individual testimonials (name, message, avatar) are managed separately.
                            <a href="{{ route('admin.home.testimonials.index') }}" class="btn btn-warning btn-sm ml-2">
                                <i class="fas fa-star"></i> Manage Testimonials
                            </a>
                        </div>
                    </div>

                    {{-- ══ TAB 8: IMAGES ══ --}}
                    <div class="tab-pane fade" id="tab-media">
                        <h5 class="mb-3">Images / Media</h5>
                        <div class="row">
                            {{-- Banner --}}
                            <div class="col-md-4">
                                <div class="card card-outline card-primary">
                                    <div class="card-header"><h3 class="card-title">Hero Banner</h3></div>
                                    <div class="card-body text-center">
                                        @if (isset($content) && $content->getMedia('banner_image')->isNotEmpty())
                                            <img src="{{ $content->getFirstMediaUrl('banner_image') }}"
                                                class="img-fluid img-thumbnail mb-2" style="max-height:130px;" alt="Banner">
                                        @else
                                            <div class="text-muted mb-2 d-flex align-items-center justify-content-center"
                                                style="height:80px;border:2px dashed #aaa;border-radius:6px;">
                                                No image yet
                                            </div>
                                        @endif
                                        <input type="file" name="banner_image" class="form-control-file" accept="image/*">
                                        <small class="text-muted d-block mt-1">Background for Home hero slides.</small>
                                    </div>
                                </div>
                            </div>
                            {{-- About --}}
                            <div class="col-md-4">
                                <div class="card card-outline card-success">
                                    <div class="card-header"><h3 class="card-title">About Section Image</h3></div>
                                    <div class="card-body text-center">
                                        @if (isset($content) && $content->getMedia('about_image')->isNotEmpty())
                                            <img src="{{ $content->getFirstMediaUrl('about_image') }}"
                                                class="img-fluid img-thumbnail mb-2" style="max-height:130px;" alt="About">
                                        @else
                                            <div class="text-muted mb-2 d-flex align-items-center justify-content-center"
                                                style="height:80px;border:2px dashed #aaa;border-radius:6px;">
                                                No image yet
                                            </div>
                                        @endif
                                        <input type="file" name="about_image" class="form-control-file" accept="image/*">
                                        <small class="text-muted d-block mt-1">Right side of about section.</small>
                                    </div>
                                </div>
                            </div>
                            {{-- Play --}}
                            <div class="col-md-4">
                                <div class="card card-outline card-warning">
                                    <div class="card-header"><h3 class="card-title">Play Section Image</h3></div>
                                    <div class="card-body text-center">
                                        @if (isset($content) && $content->getMedia('play_image')->isNotEmpty())
                                            <img src="{{ $content->getFirstMediaUrl('play_image') }}"
                                                class="img-fluid img-thumbnail mb-2" style="max-height:130px;" alt="Play">
                                        @else
                                            <div class="text-muted mb-2 d-flex align-items-center justify-content-center"
                                                style="height:80px;border:2px dashed #aaa;border-radius:6px;">
                                                No image yet
                                            </div>
                                        @endif
                                        <input type="file" name="play_image" class="form-control-file" accept="image/*">
                                        <small class="text-muted d-block mt-1">Full-width image between services & lateral.</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>{{-- /tab-content --}}

                {{-- SUBMIT --}}
                <div class="row">
                    <div class="col-12 text-right">
                        <a href="{{ route('admin.home.index') }}" class="btn btn-secondary mr-2">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                        <button type="submit" class="btn btn-primary px-5">
                            <i class="fas fa-save"></i> Save All Changes
                        </button>
                    </div>
                </div>

            </form>
        </div>
    </section>
</div>
@endsection

@section('script')
<script>
$(document).ready(function () {

    // ── SLIDERS ────────────────────────────────────────────
    let sliderCount = $('#sliders-wrapper .slider-row').length;

    $('#addSlider').on('click', function () {
        sliderCount++;
        $('#sliders-wrapper').append(`
            <div class="slider-row card card-secondary mb-3">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <strong>Slide #${sliderCount}</strong>
                    <button type="button" class="btn btn-danger btn-xs remove-slider">
                        <i class="fas fa-trash"></i> Remove
                    </button>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label>Title <span class="text-danger">*</span></label>
                        <input type="text" name="slider_titles[]" class="form-control" placeholder="Slide title">
                    </div>
                    <div class="form-group">
                        <label>Subtitle</label>
                        <input type="text" name="slider_subtitles[]" class="form-control" placeholder="Short tagline">
                    </div>
                    <div class="form-group mb-0">
                        <label>Description</label>
                        <textarea name="slider_descriptions[]" class="form-control" rows="2" placeholder="Slide body text"></textarea>
                    </div>
                </div>
            </div>
        `);
    });

    $(document).on('click', '.remove-slider', function () {
        $(this).closest('.slider-row').remove();
    });

    // ── LATERAL BULLET POINTS ─────────────────────────────
    $('#addLateralPoint').on('click', function () {
        $('#lateral-dynamic-points').append(`
            <div class="input-group mb-2 lateral-point-row">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="fas fa-circle" style="font-size:7px;"></i>
                    </span>
                </div>
                <input type="text" name="lateral_points[]" class="form-control" placeholder="Bullet point">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-danger remove-lateral-point">×</button>
                </div>
            </div>
        `);
    });

    $(document).on('click', '.remove-lateral-point', function () {
        $(this).closest('.lateral-point-row').remove();
    });

    // ── GROUP BOXES ───────────────────────────────────────
    $('#addGroupBox').on('click', function () {
        let count = $('#group-boxes-wrapper .group-box-row').length + 1;
        $('#group-boxes-wrapper').append(`
            <div class="input-group mb-2 group-box-row">
                <div class="input-group-prepend">
                    <span class="input-group-text">${count}</span>
                </div>
                <input type="text" name="group_boxes[]" class="form-control" placeholder="Group box text">
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-danger remove-group-box">×</button>
                </div>
            </div>
        `);
    });

    $(document).on('click', '.remove-group-box', function () {
        $(this).closest('.group-box-row').remove();
    });

    // ── SUBSCRIPTION PLANS ────────────────────────────────
    let planCount = $('#plans-wrapper .plan-row').length;

    $('#addPlan').on('click', function () {
        planCount++;
        $('#plans-wrapper').append(`
            <div class="plan-row card card-secondary mb-3">
                <div class="card-header d-flex justify-content-between align-items-center py-2">
                    <strong>Plan #${planCount}</strong>
                    <button type="button" class="btn btn-danger btn-xs remove-plan">
                        <i class="fas fa-trash"></i> Remove
                    </button>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Plan Name</label>
                                <input type="text" name="plan_names[]" class="form-control" placeholder="e.g. Basic Plan">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Price ($)</label>
                                <input type="text" name="plan_prices[]" class="form-control" placeholder="e.g. 20">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Duration Label</label>
                                <input type="text" name="plan_durations[]" class="form-control" placeholder="e.g. for 20 mins">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label>Description</label>
                        <textarea name="plan_descriptions[]" class="form-control" rows="3" placeholder="Plan features / benefits..."></textarea>
                    </div>
                </div>
            </div>
        `);
    });

    $(document).on('click', '.remove-plan', function () {
        $(this).closest('.plan-row').remove();
    });

});
</script>
@endsection