@extends('layouts.admin.master')
@section('tab-name','افزودن اشتراک')
@section('content')
    <div class="body d-flex py-3">
        <div class="container-fluid">
            <div class="page-header">
                <div class="card-header py-3 no-bg bg-transparent d-flex align-items-center px-0 justify-content-between border-bottom flex-wrap">
                    <h3 class="fw-bolder mb-0">افزودن اشتراک</h3>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="card border p-2">
                <form action="{{ route('admin.subscriptions.store') }}" method="POST" id="my-main-form">
                    @include('admin.subscription.form')
                </form>
            </div>
        </div>
    </div>
@stop

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/admin/css/233bootstrap-select.min.css') }}">
@endpush

@push('scripts')
    <script src="{{asset('assets/admin/js/883833bootstrap-select.min.js')}}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof $ !== 'undefined' && $.fn.selectpicker) {
                $('.boot-select').selectpicker({
                    noneSelectedText: 'خدمات موردنظر را انتخاب کنید',
                    liveSearchPlaceholder: 'جستجو...',
                    dropupAuto: false
                });
                $('.boot-select').selectpicker('refresh');
            }

            const wrapper = document.querySelector('[data-subscription-features-wrapper]');
            const addBtn = document.querySelector('[data-add-subscription-feature]');
            if (wrapper && addBtn) {
                addBtn.addEventListener('click', function () {
                    const nextIndex = parseInt(wrapper.getAttribute('data-next-index') || '0', 10);
                    wrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 subscription-feature-row';
                    row.innerHTML = `
                        <div class="col-md-8"><input type="text" name="features[${nextIndex}][title]" class="form-control bg-light rounded-custom" placeholder="عنوان ویژگی"></div>
                        <div class="col-md-3"><select name="features[${nextIndex}][badge_color]" class="form-control bg-light rounded-custom"><option value="green">تیک سبز</option><option value="red">تیک قرمز</option></select></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-subscription-feature>×</button></div>
                    `;
                    wrapper.appendChild(row);
                });
            }

            const buttonsWrapper = document.querySelector('[data-subscription-buttons-wrapper]');
            const addButtonBtn = document.querySelector('[data-add-subscription-button]');
            if (buttonsWrapper && addButtonBtn) {
                addButtonBtn.addEventListener('click', function () {
                    const nextIndex = parseInt(buttonsWrapper.getAttribute('data-next-index') || '0', 10);
                    buttonsWrapper.setAttribute('data-next-index', String(nextIndex + 1));
                    const row = document.createElement('div');
                    row.className = 'row g-2 mb-2 subscription-button-row';
                    row.innerHTML = `
                        <div class="col-md-3"><input type="text" name="buttons[${nextIndex}][text]" class="form-control bg-light rounded-custom" placeholder="متن دکمه"></div>
                        <div class="col-md-5"><input type="text" name="buttons[${nextIndex}][link]" class="form-control bg-light rounded-custom" placeholder="لینک دکمه"></div>
                        <div class="col-md-3"><select name="buttons[${nextIndex}][color]" class="form-control bg-light rounded-custom"><option value="plan">رنگ پلن</option><option value="dark">مشکی</option></select></div>
                        <div class="col-md-1"><button type="button" class="btn btn-outline-danger w-100" data-remove-subscription-button>×</button></div>
                    `;
                    buttonsWrapper.appendChild(row);
                });
            }

            document.addEventListener('click', function (event) {
                if (event.target.matches('[data-remove-subscription-feature]')) {
                    const row = event.target.closest('.subscription-feature-row');
                    if (row) row.remove();
                }
                if (event.target.matches('[data-remove-subscription-button]')) {
                    const row = event.target.closest('.subscription-button-row');
                    if (row) row.remove();
                }
            });
        });
    </script>
@endpush