@extends('layouts.app')

@section('content')
@php
    $translationLanguages = ($appLanguages ?? collect())
        ->filter(fn ($language) => filled($language->code))
        ->values();
@endphp
<style>
    #features-repeater {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    #features-repeater .feature-header {
        order: 0;
    }

    #features-repeater .items {
        order: 1;
    }

    #features-repeater .feature-errors {
        order: 2;
    }

    #features-repeater .feature-actions {
        order: 3;
    }

    #features-repeater .items .card {
        border: 1px dashed #d6dce8;
        background: #ffffff;
    }

    #features-repeater .items .form-control {
        background: #fbfcff;
    }
</style>
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('subscriptionManagement.index') }}">Subscription Plans</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Create Plan</li>
                    </ol>
                </nav>
            </div>
        </div>

        <hr />

        

        <div class="card">
            <div class="card-body">
                <h6 class="mb-1">Create Subscription Plan</h6>
                <p class="text-muted mb-4">Add plan details.</p>

                <form method="POST" action="{{ route('subscriptionManagement.store') }}">
                    @csrf

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="type" class="form-label">Subscription Type <span class="text-danger">*</span></label>
                            @php
                                $type = old('type', 'user');
                            @endphp
                            <select
                                id="type"
                                name="type"
                                class="form-select @error('type') is-invalid @enderror"
                                required
                            >
                                <option value="user" {{ $type === 'user' ? 'selected' : '' }}>User</option>
                                <option value="partner" {{ $type === 'partner' ? 'selected' : '' }}>Partner</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="name" class="form-label">Plan Name <span class="text-danger">*</span></label>
                            <input
                                type="text"
                                id="name"
                                name="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name') }}"
                                placeholder="Basic / Pro / Premium"
                                required
                            >
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label for="regular_price" class="form-label">Regular Price <span class="text-danger">*</span></label>
                            <input
                                type="number"
                                step="0.01"
                                id="regular_price"
                                name="regular_price"
                                class="form-control @error('regular_price') is-invalid @enderror"
                                value="{{ old('regular_price') }}"
                                placeholder="99.00"
                                required
                            >
                            @error('regular_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-3">
                            <label for="sale_price" class="form-label">Sale Price</label>
                            <input
                                type="number"
                                step="0.01"
                                id="sale_price"
                                name="sale_price"
                                class="form-control @error('sale_price') is-invalid @enderror"
                                value="{{ old('sale_price') }}"
                                placeholder="79.00"
                            >
                            @error('sale_price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label for="duration_days" class="form-label">Duration (Days) <span class="text-danger">*</span></label>
                            <input
                                type="number"
                                id="duration_days"
                                name="duration_days"
                                class="form-control @error('duration_days') is-invalid @enderror"
                                value="{{ old('duration_days') }}"
                                placeholder="30"
                                min="1"
                                required
                            >
                            @error('duration_days')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-4">
                            <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                            @php
                                $status = old('status', 'active');
                            @endphp
                            <select
                                id="status"
                                name="status"
                                class="form-select @error('status') is-invalid @enderror"
                                required
                            >
                                <option value="active" {{ $status === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="deactivated" {{ $status === 'deactivated' ? 'selected' : '' }}>Deactivated</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-12">
                            <label for="short_description" class="form-label">Short Description</label>
                            <textarea
                                id="short_description"
                                name="short_description"
                                class="form-control @error('short_description') is-invalid @enderror"
                                rows="3"
                                placeholder="Short description (optional)"
                            >{{ old('short_description') }}</textarea>
                            @error('short_description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        @php
                            $featuresInput = old('features');
                            if (!is_array($featuresInput)) {
                                $featuresInput = [];
                            }
                            $features = [];
                            foreach ($featuresInput as $item) {
                                $value = is_array($item) ? ($item['feature'] ?? '') : $item;
                                $value = trim((string) $value);
                                if ($value !== '') {
                                    $features[] = $value;
                                }
                            }
                            if (count($features) === 0) {
                                $features = [''];
                            }
                        @endphp

                        <div class="col-12" id="features-repeater">
                            <div class="card mb-2 feature-header">
                                <div class="card-body">
                                    <h6 class="mb-0">Features</h6>
                                    
                                </div>
                            </div>

                            @foreach ($features as $feature)
                                <div class="items" data-group="features">
                                    <div class="card mb-2">
                                        <div class="card-body">
                                            <div class="item-content">
                                                <div class="mb-3">
                                                    <label class="form-label">Feature</label>
                                                    <textarea
                                                        class="form-control"
                                                        rows="1"
                                                        placeholder="Feature"
                                                        data-name="feature"
                                                    >{{ $feature }}</textarea>
                                                </div>
                                            </div>
                                            <div class="repeater-remove-btn">
                                                <button type="button" class="btn btn-danger remove-btn px-4">Remove</button>
                                                
                                            </div>
                                            
                                        </div>
                                        
                                    </div>
                                    
                                </div>
                                
                            @endforeach

                            <div class="feature-errors">
                                @error('features')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                                @error('features.*.feature')
                                    <div class="text-danger small mt-2">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-end feature-actions">
                                <button type="button" class="btn btn-primary repeater-add-btn px-4">Add</button>
                            </div>
                        </div>

                        @if($translationLanguages->count())
                            <div class="col-12">
                                <div class="border rounded p-3">
                                    <h6 class="mb-1">Translations</h6>
                                    <p class="text-muted mb-3 small">Manual translation fields. Default locale: <strong>{{ strtoupper($defaultTranslationLocale) }}</strong>.</p>
                                    @include('includes.partial.auto_translate.create_toggle')

                                    <ul class="nav nav-tabs nav-primary flex-nowrap overflow-auto mb-3" role="tablist">
                                        @foreach($translationLanguages as $language)
                                            <li class="nav-item" role="presentation">
                                                <button
                                                    class="nav-link {{ $loop->first ? 'active' : '' }}"
                                                    data-bs-toggle="tab"
                                                    data-bs-target="#create-plan-translation-{{ $language->code }}"
                                                    type="button"
                                                    role="tab">
                                                    {{ strtoupper($language->code) }}
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>

                                    <div class="tab-content">
                                        @foreach($translationLanguages as $language)
                                            @php
                                                $translationLanguageName = $language->language->name ?? ($language->data['name'] ?? strtoupper($language->code));
                                            @endphp
                                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="create-plan-translation-{{ $language->code }}" role="tabpanel">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <label class="form-label">
                                                            Plan Name ({{ $translationLanguageName }})
                                                            @if($language->code === $defaultTranslationLocale)
                                                                <span class="badge bg-light text-dark border ms-1">Default</span>
                                                            @endif
                                                        </label>
                                                        <input
                                                            type="text"
                                                            name="translations[{{ $language->code }}][name]"
                                                            class="form-control @error('translations.' . $language->code . '.name') is-invalid @enderror"
                                                            value="{{ old('translations.' . $language->code . '.name') }}"
                                                            placeholder="Translated Plan Name">
                                                        @error('translations.' . $language->code . '.name')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="col-12">
                                                        <label class="form-label">Short Description ({{ $translationLanguageName }})</label>
                                                        <textarea
                                                            name="translations[{{ $language->code }}][short_description]"
                                                            rows="3"
                                                            placeholder="Translated Short Description"
                                                            class="form-control @error('translations.' . $language->code . '.short_description') is-invalid @enderror">{{ old('translations.' . $language->code . '.short_description') }}</textarea>
                                                        @error('translations.' . $language->code . '.short_description')
                                                            <div class="invalid-feedback">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="col-12 d-flex flex-wrap gap-2 mt-2">
                            <button type="submit" class="btn btn-primary px-4">Save Plan</button>
                            <a href="{{ route('subscriptionManagement.index') }}" class="btn btn-light border px-4">Back</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('assets/plugins/form-repeater/repeater.js') }}"></script>
<script>
    $("#features-repeater").createRepeater({
        showFirstItemToDefault: true,
    });
</script>
@endsection