@extends('layouts.admin.app')

@php
    $planResource = __('pages/admin/plan.heading.singular');
    $pageTitle = isset($plan)
        ? __('pages/common.edit', ['resource' => $planResource])
        : __('pages/common.add_new', ['resource' => $planResource]);
@endphp
@section('title', $pageTitle)

@section('content')
@php
    $durationValue = (int) old('duration_value', isset($plan) ? ($plan->duration_value ?? 1) : 1);
    $durationFrequency = (string) old('duration_frequency', isset($plan) ? ($plan->duration_frequency ?? 'monthly') : 'monthly');
    $stripeConfigured = $stripeConfigured ?? app(\App\Services\Admin\StripeConfigurationService::class)->isConfigured();
    $isEdit = isset($plan);
    $readOnly = $isEdit && ! $stripeConfigured;
    $canSubmit = $stripeConfigured && ! $readOnly;
@endphp
<div
    class="animate-fade-in"
    @if($isEdit || $stripeConfigured)
    x-data="planForm({
        storeUrl: @js($isEdit ? route('admin.plans.update', $plan->id) : route('admin.plans.store')),
        redirectUrl: @js(route('admin.plans.index')),
        canSubmit: @js($canSubmit),
        durationValue: @js($durationValue),
        durationFrequency: @js($durationFrequency),
        billingSummaries: @js(trans('pages/admin/plan.form.billing_interval.summary')),
        messages: @js([
            'archive' => [
                'title' => __('pages/admin/plan.js.archive.title'),
                'description' => __('pages/admin/plan.js.archive.description'),
                'confirm' => __('buttons.archive'),
                'failed' => __('messages.update.failed', ['attribute' => $planResource]),
            ],
            'save_failed' => __('messages.update.failed', ['attribute' => $planResource]),
        ]),
    })"
    @endif>

    <div class="px-4 py-4">
        <x-layouts.admin.breadcrumb :items="[
            ['label' => __('pages/admin/subscription.section')],
            ['label' => __('pages/admin/plan.heading.plural'), 'href' => route('admin.plans.index')],
            ['label' => $pageTitle],
        ]" />
    </div>

    <div class="px-6 pb-6 space-y-4">
        @if(! $stripeConfigured)
            <x-admin.subscription.stripe-configuration-alert :variant="$isEdit ? 'edit' : 'create'" />
        @endif

        @if(! $isEdit && ! $stripeConfigured)
            <div class="flex items-center justify-end">
                <a href="{{ route('admin.plans.index') }}" class="inline-flex" data-no-ajax>
                    <x-buttons.secondary type="button">{{ __('buttons.cancel') }}</x-buttons.secondary>
                </a>
            </div>
        @else
        <form id="plan-form" x-on:submit.prevent="submitForm()" class="space-y-6 @if($readOnly) opacity-90 @endif">
            @csrf
            @if($isEdit)
                @method('PUT')
            @endif

            <fieldset @if($readOnly) disabled @endif class="space-y-6 border-0 p-0 m-0 min-w-0">
            <div class="flex flex-col lg:flex-row gap-6">
                <div class="flex-1 min-w-0 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-6 space-y-5">

                    <div>
                        <x-forms.label for="name" required>{{ __('form.label.title') }}</x-forms.label>
                        <x-forms.input
                            type="text"
                            id="name"
                            name="name"
                            value="{{ old('name', $plan->name ?? '') }}"
                            placeholder="{{ __('placeholders.please_enter', ['attribute' => __('form.label.title')]) }}" />
                    </div>

                    <div>
                        <x-forms.label for="description" required>{{ __('form.label.description') }}</x-forms.label>
                        <x-forms.tinymce
                            id="description"
                            name="description"
                            :value="$plan->description ?? ''"
                            placeholder="{{ __('placeholders.please_enter', ['attribute' => __('form.label.description')]) }}"
                            rows="10"
                            required
                            :disabled="$readOnly" />
                    </div>
                </div>

                <div class="w-full lg:w-[28rem] flex-shrink-0 space-y-5">
                    <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 space-y-4">
                        <div class="flex items-center justify-between gap-3 border-b border-surface-100 dark:border-surface-700 pb-3">
                            <h2 class="text-sm font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider">
                                {{ __('pages/admin/plan.form.price_section') }}
                            </h2>
                            @if($isEdit)
                                <span class="font-mono text-xs text-surface-500 dark:text-surface-400">
                                    {{ $plan->price?->stripe_price_id ?? '—' }}
                                </span>
                            @endif
                        </div>

                        <div class="space-y-2">
                            <x-forms.label for="duration_value" required>
                                {{ __('pages/admin/plan.form.billing_interval.label') }}
                            </x-forms.label>
                            <p class="text-xs text-muted-foreground">
                                {{ __('pages/admin/plan.form.billing_interval.renews_every') }}
                            </p>
                            <div class="grid grid-cols-[minmax(5rem,7rem)_1fr] gap-3">
                                <div>
                                    <label for="duration_value" class="sr-only">
                                        {{ __('pages/admin/plan.form.billing_interval.value_label') }}
                                    </label>
                                    <x-forms.input
                                        type="number"
                                        id="duration_value"
                                        name="duration_value"
                                        min="1"
                                        max="999"
                                        step="1"
                                        inputmode="numeric"
                                        x-model.number="durationValue"
                                        placeholder="{{ __('pages/admin/plan.form.billing_interval.value_placeholder') }}"
                                    />
                                </div>
                                <div>
                                    <label for="duration_frequency" class="sr-only">
                                        {{ __('pages/admin/plan.form.billing_interval.frequency_label') }}
                                    </label>
                                    <x-forms.select name="duration_frequency" id="duration_frequency" x-model="durationFrequency">
                                        @foreach(__('pages/admin/plan.form.billing_interval.frequency_options') as $value => $label)
                                            <option value="{{ $value }}" {{ $durationFrequency === $value ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </x-forms.select>
                                </div>
                            </div>
                            <p
                                class="text-xs text-muted-foreground"
                                x-text="billingSummary"
                                x-show="billingSummary"
                            ></p>
                        </div>

                        <div>
                            <x-forms.label for="amount" required>{{ __('pages/admin/plan.form.amount') }}</x-forms.label>
                            <x-forms.amount-input
                                name="amount"
                                :value="$plan->price?->amount ?? ''"
                                placeholder="0.00"
                                required
                            />
                            <p class="mt-1 text-xs text-muted-foreground">{{ __('pages/admin/plan.form.amount_hint') }}</p>
                        </div>

                        <div>
                            <x-forms.label for="sale_price">{{ __('pages/admin/plan.form.sale_price') }}</x-forms.label>
                            <x-forms.amount-input
                                name="sale_price"
                                :value="old('sale_price', $plan->price?->sale_price ?? '')"
                                placeholder="0.00"
                            />
                            <p class="mt-1 text-xs text-muted-foreground">{{ __('pages/admin/plan.form.sale_price_hint') }}</p>
                        </div>

                        <div>
                            <x-forms.label for="trial_days" required>{{ __('pages/admin/plan.form.trial_days') }}</x-forms.label>
                            <x-forms.input
                                type="number"
                                id="trial_days"
                                name="trial_days"
                                min="0"
                                max="365"
                                step="1"
                                inputmode="numeric"
                                value="{{ old('trial_days', $plan->trial_days ?? 0) }}"
                                placeholder="{{ __('placeholders.please_enter', ['attribute' => __('pages/admin/plan.form.trial_days')]) }}"
                            />
                        </div>
                    </div>

                    <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 space-y-4">
                        <div class="border-b border-surface-100 dark:border-surface-700 pb-3">
                            <h2 class="text-sm font-semibold text-surface-500 dark:text-surface-400 uppercase tracking-wider">
                                {{ __('form.label.status') }}
                            </h2>
                        </div>

                        <div>
                            @php
                                $ps = old(
                                    'price_status',
                                    isset($plan)
                                        ? ($plan->price?->status ?? $plan->status ?? 'active')
                                        : 'active',
                                );
                            @endphp
                            <x-forms.select name="price_status">
                                <option value="active" {{ $ps === 'active' ? 'selected' : '' }}>{{ __('pages/common.status.active') }}</option>
                                <option value="archive" {{ $ps === 'archive' ? 'selected' : '' }}>{{ __('pages/admin/plan.status.archive') }}</option>
                            </x-forms.select>
                        </div>
                    </div>
                </div>
            </div>
            </fieldset>

            <div class="flex items-center justify-end gap-3">
                <a href="{{ route('admin.plans.index') }}" class="inline-flex" data-no-ajax>
                    <x-buttons.secondary type="button">{{ __('buttons.cancel') }}</x-buttons.secondary>
                </a>
                @if($canSubmit)
                <x-buttons.primary
                type="submit"
                x-bind:disabled="submitting"
                x-text="submitting ? '{{ __('buttons.please_wait') }}' : '{{ $isEdit ? __('buttons.update') : __('buttons.save') }}'">
                    {{ $isEdit ? __('buttons.update') : __('buttons.save') }}
                </x-buttons.primary>
                @endif
            </div>
        </form>
        @endif
    </div>
</div>
@endsection

@push('before-app-js')
@if($isEdit || ($stripeConfigured ?? true))
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
{!! JsValidator::formRequest('App\\Http\\Requests\\Admin\\Subscription\\PlanRequest', '#plan-form') !!}
@vite(['resources/js/common/validation.js', 'resources/js/admin/subscription/plan-form.js'])
@endif
@endpush