@include('admin.includes.header')
@include('admin.includes.sidebar')

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

<!--! [Start] Main Content !-->
    <!--! ================================================================ !-->
    <main class="nxl-container">
        <div class="nxl-content">
            <!-- [ page-header ] start -->
            <div class="page-header">
                <div class="page-header-left d-flex align-items-center">
                    <div class="page-header-title">
                        <h5 class="m-b-10">{{!isset($data) ? 'Add' : 'Edit'  }} Plan</h5>
                    </div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}">Home</a></li>
                        <li class="breadcrumb-item">Plans</li>
                        <li class="breadcrumb-item">{{!isset($data) ? 'Add' : 'Edit'  }}</li>
                    </ul>
                </div>
                <div class="page-header-right ms-auto">
                    <div class="page-header-right-items">
                        <div class="d-flex d-md-none">
                            <a href="javascript:void(0)" class="page-header-right-close-toggle">
                                <i class="feather-arrow-left me-2"></i>
                                <span>Back</span>
                            </a>
                        </div>
                        <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                            <a href="javascript:void(0);" class="btn btn-dark successAlertMessage"  onclick="document.getElementById('myForm').submit();">
                                <i class="feather-save me-2"></i>
                                <span>Save</span>
                            </a>
                        </div>
                    </div>
                    <div class="d-md-none d-flex align-items-center">
                        <a href="javascript:void(0)" class="page-header-right-open-toggle">
                            <i class="feather-align-right fs-20"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- [ page-header ] end -->
<!-- [ Main Content ] start -->
            <div class="main-content">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card stretch stretch-full">
                                <div class="card-body">
                                    @include('admin.components.msg')
                                    <div class="mb-4">
                                        <label class="form-label">Plan Name <span class="text-danger">*</span></label>
                                        <input type="text" value="{{ $data->name ?? ''}}" required name="name" class="form-control" placeholder="Plan Name">
                                        @error('name')
                                            <div class=" my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Price <span class="text-danger">*</span></label>
                                        <input type="number" value="{{ $data->price ?? ''}}" required name="price" class="form-control" placeholder="Price">
                                        @error('price')
                                            <div class=" my-1 p-1 alert alert-danger">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Features</label>
                                        <div id="features-container">
                                            @if(isset($data) && $data->features)
                                                @foreach(json_decode($data->features, true) as $index => $feature)
                                                    <div class="input-group mb-2 feature-row">
                                                        <input type="text" name="features[{{ $index }}][text]" class="form-control" placeholder="Feature description" value="{{ $feature['text'] ?? '' }}">
                                                        <div class="input-group-text">
                                                            <input type="checkbox" name="features[{{ $index }}][icon]" value="fas fa-check-circle" {{ (isset($feature['icon']) && $feature['icon'] == 'fas fa-check-circle') ? 'checked' : '' }}>
                                                            <label class="ms-2">Tick Icon</label>
                                                        </div>
                                                        <button type="button" class="btn btn-danger remove-feature">Remove</button>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="input-group mb-2 feature-row">
                                                    <input type="text" name="features[0][text]" class="form-control" placeholder="Feature description">
                                                    <div class="input-group-text">
                                                        <input type="checkbox" name="features[0][icon]" value="fas fa-check-circle" checked>
                                                        <label class="ms-2">Tick Icon</label>
                                                    </div>
                                                    <button type="button" class="btn btn-danger remove-feature">Remove</button>
                                                </div>
                                            @endif
                                        </div>
                                        <button type="button" class="btn btn-dark mt-2" id="add-feature">Add Feature</button>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label">Bestseller</label>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="bestsellerSwitch" name="bestseller" value="1" {{ (isset($data) && $data->bestseller == 1) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="bestsellerSwitch">Mark as Bestseller</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->

            @include('admin.includes.footer')

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const featuresContainer = document.getElementById('features-container');
                    const addFeatureButton = document.getElementById('add-feature');
                    let featureIndex = featuresContainer.children.length;

                    addFeatureButton.addEventListener('click', function () {
                        const newFeatureRow = document.createElement('div');
                        newFeatureRow.classList.add('input-group', 'mb-2', 'feature-row');
                        newFeatureRow.innerHTML = `
                            <input type="text" name="features[${featureIndex}][text]" class="form-control" placeholder="Feature description">
                            <div class="input-group-text">
                                <input type="checkbox" name="features[${featureIndex}][icon]" value="fas fa-check-circle" checked>
                                <label class="ms-2">Tick Icon</label>
                            </div>
                            <button type="button" class="btn btn-danger remove-feature">Remove</button>
                        `;
                        featuresContainer.appendChild(newFeatureRow);
                        featureIndex++;
                    });

                    featuresContainer.addEventListener('click', function (e) {
                        if (e.target.classList.contains('remove-feature')) {
                            e.target.closest('.feature-row').remove();
                        }
                    });

                    // Handle initial checkbox state for existing features
                    featuresContainer.querySelectorAll('.feature-row').forEach(row => {
                        const checkbox = row.querySelector('input[type="checkbox"]');
                        const hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = checkbox.name;
                        hiddenInput.value = 'fas fa-times-circle'; // Default to cross icon if unchecked
                        checkbox.parentNode.insertBefore(hiddenInput, checkbox);

                        checkbox.addEventListener('change', function() {
                            if (this.checked) {
                                hiddenInput.value = 'fas fa-check-circle';
                            } else {
                                hiddenInput.value = 'fas fa-times-circle';
                            }
                        });

                        // Set initial hidden input value based on checkbox state
                        if (checkbox.checked) {
                            hiddenInput.value = 'fas fa-check-circle';
                        } else {
                            hiddenInput.value = 'fas fa-times-circle';
                        }
                    });
                });
            </script>