@csrf
@php
    $features = old('features', isset($item) ? $item->features->map(fn($f) => ['title' => $f->title, 'badge_color' => $f->badge_color])->toArray() : []);
    $buttons = old('buttons', isset($item) ? (array) ($item->buttons ?? []) : []);
    $servicesSelected = old('service_ids', isset($item) ? $item->services->pluck('id')->toArray() : []);
@endphp
<div class="container-fluid">
    <div class="card-block row w-100 m-0">
        <div class="col-md-6 p-2">
            <label class="form-label">عنوان</label>
            <input type="text" name="title" class="form-control bg-light rounded-custom" value="{{ old('title', $item->title ?? '') }}">
        </div>

        <div class="col-md-6 p-2">
            <label class="form-label">رنگ</label>
            <select name="color" class="form-control bg-light rounded-custom">
                <option value="gold" {{ old('color', $item->color ?? 'gold') === 'gold' ? 'selected' : '' }}>طلایی</option>
                <option value="silver" {{ old('color', $item->color ?? '') === 'silver' ? 'selected' : '' }}>نقره ای</option>
                <option value="bronze" {{ old('color', $item->color ?? '') === 'bronze' ? 'selected' : '' }}>برنزی</option>
            </select>
        </div>

        <div class="col-md-6 p-2">
            <label class="form-label">مدت اشتراک (متن آزاد)</label>
            <input type="text" name="duration_label" class="form-control bg-light rounded-custom" placeholder="مثال: ماهانه / سالانه / 3 ماهه"
                   value="{{ old('duration_label', $item->duration_label ?? '') }}">
        </div>

        <div class="col-md-6 p-2">
            <label class="form-label">مبلغ اشتراک</label>
            <input type="number" step="0.01" min="0" name="amount" class="form-control bg-light rounded-custom"
                   value="{{ old('amount', $item->amount ?? 0) }}">
        </div>

        <div class="col-12 p-2">
            <hr>
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="fw-bold mb-0">دکمه‌ها</h6>
                <button type="button" class="btn btn-sm btn-outline-primary" data-add-subscription-button>افزودن دکمه</button>
            </div>
            <div data-subscription-buttons-wrapper data-next-index="{{ count($buttons) }}">
                @foreach($buttons as $index => $button)
                    <div class="row g-2 mb-2 subscription-button-row">
                        <div class="col-md-3">
                            <input type="text" name="buttons[{{ $index }}][text]" class="form-control bg-light rounded-custom"
                                   placeholder="متن دکمه" value="{{ $button['text'] ?? '' }}">
                        </div>
                        <div class="col-md-5">
                            <input type="text" name="buttons[{{ $index }}][link]" class="form-control bg-light rounded-custom"
                                   placeholder="لینک دکمه" value="{{ $button['link'] ?? '' }}">
                        </div>
                        <div class="col-md-3">
                            <select name="buttons[{{ $index }}][color]" class="form-control bg-light rounded-custom">
                                <option value="plan" {{ ($button['color'] ?? 'plan') === 'plan' ? 'selected' : '' }}>رنگ پلن</option>
                                <option value="dark" {{ ($button['color'] ?? '') === 'dark' ? 'selected' : '' }}>مشکی</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-outline-danger w-100" data-remove-subscription-button>×</button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="col-md-12 p-2">
            <label class="form-label">اختصاص به خدمات</label>
            <select name="service_ids[]" multiple
                    class="w-100 boot-select selectpicker"
                    data-live-search="true"
                    data-actions-box="true"
                    title="خدمات موردنظر را انتخاب کنید">
                @foreach($services as $service)
                    <option value="{{ $service->id }}" {{ in_array($service->id, $servicesSelected, true) ? 'selected' : '' }}>
                        {{ $service->title }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="col-12 p-2">
            <hr>
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="fw-bold mb-0">ویژگی ها</h6>
                <button type="button" class="btn btn-sm btn-outline-primary" data-add-subscription-feature>افزودن ویژگی</button>
            </div>
            <div data-subscription-features-wrapper data-next-index="{{ count($features) }}">
                @foreach($features as $index => $feature)
                    <div class="row g-2 mb-2 subscription-feature-row">
                        <div class="col-md-8">
                            <input type="text" name="features[{{ $index }}][title]" class="form-control bg-light rounded-custom"
                                   placeholder="عنوان ویژگی" value="{{ $feature['title'] ?? '' }}">
                        </div>
                        <div class="col-md-3">
                            <select name="features[{{ $index }}][badge_color]" class="form-control bg-light rounded-custom">
                                <option value="green" {{ ($feature['badge_color'] ?? 'green') === 'green' ? 'selected' : '' }}>تیک سبز</option>
                                <option value="red" {{ ($feature['badge_color'] ?? '') === 'red' ? 'selected' : '' }}>تیک قرمز</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-outline-danger w-100" data-remove-subscription-feature>×</button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="col-12 ms-auto p-2">
            <button type="submit" class="btn btn-custom rounded-custom w-fit px-5">ذخیره اشتراک</button>
        </div>
    </div>
</div>