@extends('layouts.user_type.auth')
@section('header_title', ($plan->exists ?? false) ? __('ویرایش پلن') : __('افزودن پلن'))

@section('content')
    @php($isEdit = $plan->exists)

    <style>
        .plan-editor-panel {
            border: 1px solid #2a2a2a;
            border-radius: 8px;
            background: #111;
            padding: 16px;
        }

        .plan-preview {
            display: grid;
            gap: 12px;
        }

        .plan-preview__box {
            border: 1px solid #2a2a2a;
            border-radius: 8px;
            background: #171717;
            padding: 18px;
        }

        .plan-preview__price {
            font-size: 28px;
            font-weight: 900;
            color: #fff;
        }

        .plan-preview__features {
            display: grid;
            gap: 8px;
            margin: 14px 0 0;
            padding: 0;
            list-style: none;
        }

        .plan-preview__features li {
            display: flex;
            gap: 8px;
            color: #cbd3df;
        }

        .plan-preview__features i {
            color: #55d98b;
            margin-top: 5px;
        }
    </style>

    <div class="row">
        <div class="col-sm-12">
            <div class="card admin-card">
                <div class="card-header d-flex flex-wrap justify-content-between align-items-center gap-3">
                    <div class="admin-card-title">
                        <h4 class="card-title mb-1">{{ $isEdit ? __('ویرایش پلن') : __('افزودن پلن') }}</h4>
                        <small class="text-muted">{{ __('قیمت، مدت اعتبار و امکانات پلن را مشخص کنید.') }}</small>
                    </div>
                    <a href="{{ localized_route('admin.plans.index') }}" class="btn btn-outline-secondary">{{ __('بازگشت به لیست') }}</a>
                </div>

                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger">
                            @foreach($errors->all() as $error)
                                <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    @endif

                    <form action="{{ $isEdit ? localized_route('admin.plans.update', $plan->id) : localized_route('admin.plans.store') }}" method="POST">
                        @csrf
                        @if($isEdit)
                            @method('PUT')
                        @endif

                        <div class="row">
                            <div class="col-lg-8">
                                <div class="plan-editor-panel">
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-name">{{ __('نام پلن') }}</label>
                                            <input id="plan-name" type="text" name="name" value="{{ old('name', $plan->name) }}" class="form-control" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-slug">{{ __('شناسه یکتا') }}</label>
                                            <input id="plan-slug" type="text" name="slug" value="{{ old('slug', $plan->slug) }}" class="form-control" placeholder="{{ __('خالی بماند، خودکار ساخته می شود') }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-price">{{ __('قیمت تومان') }}</label>
                                            <input id="plan-price" type="number" min="0" name="price" value="{{ old('price', $plan->price ?? 0) }}" class="form-control" required>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-duration">{{ __('مدت اعتبار روز') }}</label>
                                            <input id="plan-duration" type="number" min="0" name="duration_days" value="{{ old('duration_days', $plan->duration_days ?? 30) }}" class="form-control" required>
                                            <small class="text-muted">{{ __('برای پلن بدون انقضا عدد ۰ وارد کنید.') }}</small>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-sort">{{ __('ترتیب نمایش') }}</label>
                                            <input id="plan-sort" type="number" min="0" name="sort_order" value="{{ old('sort_order', $plan->sort_order ?? 0) }}" class="form-control">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-live-limit">{{ __('تعداد ساخت لایو در ماه') }}</label>
                                            <input id="plan-live-limit" type="number" min="0" name="monthly_live_create_limit" value="{{ old('monthly_live_create_limit', $plan->monthly_live_create_limit) }}" class="form-control" placeholder="{{ __('خالی یعنی نامحدود') }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="plan-paid-live-limit">{{ __('تعداد لایو فروشی در ماه') }}</label>
                                            <input id="plan-paid-live-limit" type="number" min="0" name="monthly_paid_live_create_limit" value="{{ old('monthly_paid_live_create_limit', $plan->monthly_paid_live_create_limit) }}" class="form-control" placeholder="{{ __('خالی یعنی نامحدود') }}">
                                            <small class="text-muted">{{ __('لایو فروشی یعنی لایوی که مبلغ ورود بیشتر از صفر دارد.') }}</small>
                                        </div>
                                        <div class="col-md-6 mb-3 d-flex align-items-center">
                                            <div class="form-check form-switch mt-4">
                                                <input id="plan-active" type="checkbox" name="is_active" value="1" class="form-check-input" @checked(old('is_active', $plan->is_active ?? true))>
                                                <label class="form-check-label" for="plan-active">{{ __('پلن فعال باشد') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mb-3 d-flex align-items-center">
                                            <div class="form-check form-switch mt-4">
                                                <input id="plan-can-watch-lives" type="checkbox" name="can_watch_lives" value="1" class="form-check-input" @checked(old('can_watch_lives', $plan->can_watch_lives ?? true))>
                                                <label class="form-check-label" for="plan-can-watch-lives">{{ __('اجازه دیدن لایوها') }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12 mb-3">
                                            <label for="plan-description">{{ __('توضیح کوتاه') }}</label>
                                            <textarea id="plan-description" name="description" rows="3" class="form-control" maxlength="1000">{{ old('description', $plan->description) }}</textarea>
                                        </div>
                                        <div class="col-12 mb-3 mb-0">
                                            <label for="plan-features">{{ __('امکانات پلن') }}</label>
                                            <textarea id="plan-features" name="features_text" rows="8" class="form-control" placeholder="{{ __('هر امکان را در یک خط بنویسید') }}">{{ old('features_text', $featureText) }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-4 mt-4 mt-lg-0">
                                <div class="plan-preview">
                                    <div class="plan-preview__box">
                                        <span class="badge bg-primary mb-3">{{ __('پیش نمایش پلن') }}</span>
                                        <h5 id="preview-name" class="text-white mb-2">{{ __('نام پلن') }}</h5>
                                        <p id="preview-description" class="text-muted mb-3">{{ __('توضیح پلن در این بخش نمایش داده می شود.') }}</p>
                                        <div id="preview-price" class="plan-preview__price">{{ __('۰ تومان') }}</div>
                                        <small id="preview-duration" class="text-muted">{{ __('۳۰ روزه') }}</small>
                                        <ul id="preview-features" class="plan-preview__features"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <hr>
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ localized_route('admin.plans.index') }}" class="btn btn-danger">{{ __('انصراف') }}</a>
                            <button type="submit" class="btn btn-primary">{{ $isEdit ? __('ذخیره تغییرات') : __('ثبت پلن') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('extra_js')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const nameInput = document.getElementById('plan-name');
                const descriptionInput = document.getElementById('plan-description');
                const priceInput = document.getElementById('plan-price');
                const durationInput = document.getElementById('plan-duration');
                const featuresInput = document.getElementById('plan-features');
                const previewName = document.getElementById('preview-name');
                const previewDescription = document.getElementById('preview-description');
                const previewPrice = document.getElementById('preview-price');
                const previewDuration = document.getElementById('preview-duration');
                const previewFeatures = document.getElementById('preview-features');
                const i18n = {
                    toman: @json(__('تومان')),
                    planName: @json(__('نام پلن')),
                    planDescription: @json(__('توضیح پلن در این بخش نمایش داده می شود.')),
                    noExpiration: @json(__('بدون انقضا')),
                    days: @json(__(':days روزه')),
                    emptyFeature: @json(__('امکانات پلن را خط به خط وارد کنید.')),
                };

                function formatMoney(value) {
                    return new Intl.NumberFormat('fa-IR').format(Math.max(parseInt(value || '0', 10), 0)) + ' ' + i18n.toman;
                }

                function updatePreview() {
                    const duration = Math.max(parseInt(durationInput.value || '0', 10), 0);
                    const features = featuresInput.value
                        .split(/\r?\n/)
                        .map(item => item.trim())
                        .filter(Boolean);

                    previewName.textContent = nameInput.value.trim() || i18n.planName;
                    previewDescription.textContent = descriptionInput.value.trim() || i18n.planDescription;
                    previewPrice.textContent = formatMoney(priceInput.value);
                    previewDuration.textContent = duration === 0 ? i18n.noExpiration : i18n.days.replace(':days', new Intl.NumberFormat('fa-IR').format(duration));
                    previewFeatures.innerHTML = features.length
                        ? features.map(item => `<li><i class="fa fa-check"></i><span>${item}</span></li>`).join('')
                        : `<li><i class="fa fa-check"></i><span>${i18n.emptyFeature}</span></li>`;
                }

                [nameInput, descriptionInput, priceInput, durationInput, featuresInput].forEach(input => {
                    input.addEventListener('input', updatePreview);
                });

                updatePreview();
            });
        </script>
    @endpush
@endsection