@extends('layouts.demo10.base')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
@endsection

@section('content')
@php
    $packageModel = $package ?? null;
    $isEdit = ! blank($packageModel);
    $selectedModuleIds = old('modules');
    $oldOrDefault = static function (string $key, $default) {
        $value = old($key);
        return blank($value) ? $default : $value;
    };

    if (! is_array($selectedModuleIds) || empty($selectedModuleIds)) {
        $selectedModuleIds = $isEdit
            ? $packageModel->modules->pluck('id')->map(fn ($id) => (string) $id)->all()
            : [];
    }

    $packageNameValue = $oldOrDefault('name', $packageModel->name ?? '');
    $packageTagValue = $oldOrDefault('tag', data_get($packageModel?->meta, 'tag', ''));
    $packageDescriptionValue = $oldOrDefault('description', $packageModel->description ?? '');
    $monthlyPriceValue = $oldOrDefault('monthly_price', $isEdit
        ? number_format((float) ($packageModel->monthly_price ?? $packageModel->price), 0, '.', '')
        : '');
    $yearlyPriceValue = $oldOrDefault('yearly_price', $isEdit
        ? number_format((float) ($packageModel->yearly_price ?? ((float) ($packageModel->monthly_price ?? $packageModel->price) * 12)), 0, '.', '')
        : '');
    $yearlyDiscountValue = $oldOrDefault('yearly_discount', $isEdit ? (string) ($packageModel->yearly_discount ?? 0) : '');
    $monthlyEnabledValue = filled(old('monthly_enabled'))
        ? true
        : ($isEdit
            ? (($packageModel->billing_cycle ?? 'monthly') === 'monthly')
            : true);
    $yearlyEnabledValue = filled(old('yearly_enabled'))
        ? true
        : ($isEdit
            ? (($packageModel->billing_cycle ?? 'monthly') === 'yearly')
            : false);
    $trialEnabledValue = filled(old('trial_enabled')) ? old('trial_enabled') : ($packageModel->trial_enabled ?? false);
    $initialIconUrl = $isEdit && ! blank($packageModel->icon_path)
        ? asset('storage/' . ltrim($packageModel->icon_path, '/'))
        : '';
    $initialIconLabel = $isEdit && ! blank($packageModel->icon_path)
        ? basename($packageModel->icon_path)
        : '';
@endphp

<form class="package-create-screen" data-package-wizard data-active-step="1"
    action="{{ $isEdit ? route('packages.update', $packageModel) : route('packages.store') }}"
    method="post"
    enctype="multipart/form-data"
    @if($isEdit) data-package-initial-icon-url="{{ $initialIconUrl }}" data-package-initial-icon-label="{{ $initialIconLabel }}" @endif>
    @csrf
    @if($isEdit)
        @method('PUT')
    @endif
    <div class="package-create-header">
        <div>
            <h1 class="package-create-title">{{ $isEdit ? 'Edit Package' : 'Create Packages' }}</h1>
            <div class="package-create-breadcrumb">
                <a href="/">Home</a>
                <span>/</span>
                <a href="{{ route('packages.index') }}">Packages</a>
                <span>/</span>
                <span>{{ $isEdit ? 'Edit' : 'Create' }}</span>
            </div>
        </div>

        {{-- <a class="package-create-action" href="{{ route('packages.index') }}" aria-label="Back to packages">
            <i class="ki-filled ki-arrow-left text-sm"></i>
        </a> --}}
    </div>

    <div class="package-create-grid">
        <section class="package-create-card">
            <div class="package-create-card-inner">
                <div class="package-stepper" aria-label="Create package steps">
                    <button class="package-step active" data-package-step="1" type="button">
                        <span class="package-step-pill">1</span>
                        <span>Basic Info</span>
                    </button>
                    <span class="package-step-arrow">-&gt;</span>
                    <button class="package-step" data-package-step="2" type="button">
                        <span class="package-step-pill">3</span>
                        <span>Pricing</span>
                    </button>
                    <span class="package-step-arrow">-&gt;</span>
                    <button class="package-step" data-package-step="3" type="button">
                        <span class="package-step-pill">4</span>
                        <span>Modules</span>
                    </button>
                </div>

                <section class="package-step-panel" data-package-step-panel="1">
                    <div class="package-section-head">
                        <span class="package-section-icon">
                            <i class="ki-filled ki-notepad-edit text-base"></i>
                        </span>
                        <div>
                            <h2 class="package-section-title">Basic Info</h2>
                            <div class="package-section-copy">Start with the package identity and headline copy.</div>
                        </div>
                    </div>

                    <div class="package-form">
                        <div class="package-field">
                            <label for="package_name">Package Name</label>
                            <input class="package-input" id="package_name" name="name" placeholder="Enter package name" type="text" value="{{ $packageNameValue }}" data-package-basic-name />
                        </div>

                        <div class="package-field">
                            <label for="package_tag">Package Tag (optional)</label>
                            <input class="package-input" id="package_tag" name="tag" placeholder="Most popular, Best value, Starter..." type="text" value="{{ $packageTagValue }}" data-package-basic-tag />
                        </div>

                        <div class="package-field">
                            <label for="package_description">Description</label>
                            <textarea class="package-textarea" id="package_description" name="description" placeholder="Write a short package description" data-package-basic-description>{{ $packageDescriptionValue }}</textarea>
                        </div>

                        <div class="package-field">
                            <label>Package Icon</label>
                            <div class="package-upload-zone" data-package-icon-dropzone role="button" tabindex="0" aria-label="Upload package icon">
                                <input accept=".svg,.png,.jpg,.jpeg,.gif,image/*" class="hidden" data-package-icon-input name="icon" type="file" />
                                <div>
                                    <span class="package-upload-icon" data-package-icon-preview>
                                        <i class="ki-filled ki-cloud text-lg" data-package-icon-fallback></i>
                                        <img alt="" class="package-upload-icon-image package-hidden" data-package-icon-image />
                                    </span>
                                    <div class="package-upload-title" data-package-icon-title>Upload Icon or use Emoji</div>
                                    <div class="package-upload-subtitle" data-package-icon-subtitle>SVG, PNG, JPG or GIF (max. 800x400px)</div>
                                </div>
                            </div>
                        </div>

                        <div class="package-form-footer">
                            <button class="kt-btn common-secondary-btn package-next-btn" type="button" data-package-next="2">
                                Next
                            </button>
                        </div>
                    </div>
                </section>

                <section class="package-step-panel package-hidden" data-package-step-panel="2">
                    <div class="package-section-head">
                        <span class="package-section-icon">
                            <i class="ki-filled ki-dollar text-base"></i>
                        </span>
                        <div>
                            <h2 class="package-section-title">Pricing</h2>
                            <div class="package-section-copy">Define the billing cycle and price points for this package.</div>
                        </div>
                    </div>

                    <div class="package-price-grid">
                        <div class="package-price-row">
                            <div class="package-price-row-head">
                                <div>
                                    <div class="package-price-title">Monthly Billing</div>
                                    <div class="package-price-subtitle">Standard billing cycle applied every 30 days.</div>
                                </div>
                                <label class="package-toggle">
                                    <input @checked($monthlyEnabledValue) name="monthly_enabled" value="1" type="checkbox" data-package-monthly-enabled />
                                    <span></span>
                                </label>
                            </div>
                            <div class="package-price-card">
                                <span class="package-price-symbol">$</span>
                                <input class="package-price-input" name="monthly_price" type="number" min="0" step="1" value="{{ $monthlyPriceValue }}" data-package-monthly-price />
                                <span class="package-price-cycle">/ month</span>
                            </div>
                        </div>

                        <div class="package-price-row">
                            <div class="package-price-row-head">
                                <div>
                                    <div class="package-price-title">Yearly Billing</div>
                                    <div class="package-price-subtitle">Offer a discount for annual commitment.</div>
                                </div>
                                <label class="package-toggle">
                                    <input @checked($yearlyEnabledValue) name="yearly_enabled" value="1" type="checkbox" data-package-yearly-enabled />
                                    <span></span>
                                </label>
                            </div>
                            <div class="package-price-card">
                                <span class="package-price-symbol">$</span>
                                <input class="package-price-input" name="yearly_price" type="number" min="0" step="1" value="{{ $yearlyPriceValue }}" data-package-yearly-price />
                                <span class="package-price-cycle">/ year</span>
                            </div>
                            <div class="package-field" style="margin-top: 0.15rem;">
                                <label for="package_yearly_discount">Yearly Discount</label>
                                <div class="package-price-card">
                                    <span class="package-price-symbol">%</span>
                                    <input class="package-price-input" id="package_yearly_discount" name="yearly_discount" type="number" min="0" max="100" step="1" value="{{ $yearlyDiscountValue }}" data-package-yearly-discount />
                                    <span class="package-price-cycle">discount</span>
                                </div>
                            </div>
                        </div>

                        <div class="package-effective-box">
                            <div class="package-effective-title" data-package-effective-price-text>Effective monthly price: $79.16</div>
                            <div class="package-effective-subtitle" data-package-effective-savings>Customers save around 20% with yearly billing.</div>
                        </div>
                    </div>

                    <div class="package-form-footer package-form-footer-between">
                        <button class="kt-btn package-prev-btn" type="button" data-package-prev="1">
                            <i class="ki-filled ki-arrow-left text-sm"></i>
                            <span>Previous</span>
                        </button>
                        <button class="kt-btn common-secondary-btn package-next-btn" type="button" data-package-next="3">Next</button>
                    </div>
                </section>

                <section class="package-step-panel package-hidden" data-package-step-panel="3">
                    <div class="package-section-head">
                        <span class="package-section-icon">
                            <i class="ki-filled ki-setting-2 text-base"></i>
                        </span>
                        <div>
                            <h2 class="package-section-title">Modules & Features</h2>
                            <div class="package-section-copy">Choose which modules from your system will be included in this package.</div>
                        </div>
                    </div>

                    <div class="package-modules-grid">
                        @forelse ($modules ?? [] as $module)
                            @php
                                $moduleId = (string) $module->id;
                                $moduleName = (string) $module->name;
                                $moduleIconSvg = filled($module->icon_svg ?? null) ? $module->icon_svg : null;
                                $moduleInitial = mb_strtoupper(mb_substr($moduleName, 0, 1));
                            @endphp
                            <label class="package-module-card">
                                <input @checked(in_array($moduleId, $selectedModuleIds, true)) name="modules[]" type="checkbox" data-package-module-checkbox data-package-module-name="{{ $moduleName }}" value="{{ $moduleId }}" />
                                <span class="package-module-icon">
                                    @if($moduleIconSvg)
                                        {!! $moduleIconSvg !!}
                                    @else
                                        {{ $moduleInitial }}
                                    @endif
                                </span>
                                <span class="package-module-copy">
                                    <span class="package-module-title">{{ $moduleName }}</span>
                                </span>
                            </label>
                        @empty
                            <div class="col-span-full rounded-2xl border border-dashed border-slate-200 bg-slate-50 p-4 text-sm text-slate-500">
                                No modules found in the database.
                            </div>
                        @endforelse
                    </div>

                    {{-- <div class="package-additional-head">
                        <div class="package-additional-title">Additional Features</div>
                        <a class="package-additional-link" href="javascript:void(0)">+ Add Feature</a>
                    </div> --}}

                    {{-- <ul class="package-additional-list">
                        <li class="package-additional-item">
                            <span class="package-additional-handle"></span>
                            <span>Up to 10 team members</span>
                        </li>
                        <li class="package-additional-item">
                            <span class="package-additional-handle"></span>
                            <span>Unlimited projects</span>
                        </li>
                        <li class="package-additional-item">
                            <span class="package-additional-handle"></span>
                            <span>Advanced analytics dashboard</span>
                        </li>
                    </ul> --}}

                    <div class="package-form-footer package-form-footer-between">
                        <button class="kt-btn package-prev-btn" type="button" data-package-prev="2">
                            <i class="ki-filled ki-arrow-left text-sm"></i>
                            <span>Previous</span>
                        </button>
                        <button class="kt-btn common-secondary-btn package-create-btn px-2" type="submit">{{ $isEdit ? 'Update Package' : 'Create Package' }}</button>
                    </div>
                </section>
            </div>
        </section>

        <aside class="package-preview-col">
            <div class="package-live-label">
                <span class="w-1.5 h-1.5 rounded-full bg-primary inline-block"></span>
                Live Preview
            </div>

            <div class="package-preview-panel">
                <div class="package-preview-card">
                    <div class="package-preview-hero">
                        <div class="package-preview-badge" data-preview-tag></div>
                        <div class="package-preview-icon" data-package-preview-icon>
                            <i class="ki-filled ki-rocket text-xl" data-package-preview-icon-fallback></i>
                            <img alt="" class="package-preview-icon-image package-hidden" data-package-preview-icon-image />
                        </div>

                        <h3 class="package-preview-name" data-preview-name></h3>
                        <div class="package-preview-price">
                            <strong data-preview-monthly-hero></strong>
                            <span data-preview-monthly-hero-cycle></span>
                        </div>
                        <p class="package-preview-copy" data-preview-description>
                            
                        </p>
                    </div>

                    <div class="package-preview-body">
                        <div class="package-preview-stage-copy" style="margin-bottom: 0.55rem;">
                            <span class="package-preview-module-count" data-preview-module-count></span>
                        </div>
                        <div class="package-preview-modules-list" data-preview-module-list></div>

                        <button class="package-preview-cta" type="button" data-preview-cta>
                            Choose Growth
                        </button>
                    </div>
                </div>
            </div>

            <div class="package-side-box">
                <div class="package-trial-row">
                    <div class="package-trial-copy">
                        <div class="package-trial-title">Enable 14-day trial</div>
                        <div class="package-trial-subtitle" data-package-trial-subtitle>Let new customers test the package first.</div>
                    </div>
                    <label class="package-trial-toggle" aria-label="Enable 14-day trial">
                        <input @checked($trialEnabledValue) name="trial_enabled" value="1" data-package-trial-enabled type="checkbox" />
                        <span></span>
                    </label>
                </div>
            </div>

            <div class="package-side-box package-secure-box">
                <div class="package-secure-head">
                    <span class="package-secure-icon">
                        <i class="ki-filled ki-shield-tick text-sm"></i>
                    </span>
                    <div>
                        <div class="package-secure-title">Secure Setup</div>
                        <div class="package-secure-subtitle">No immediate charges will be applied.</div>
                    </div>
                </div>
            </div>
        </aside>
    </div>
</form>
@endsection

@section('scripts')
@vite('resources/js/pages/packages.js')
<script>
    @if (session('success'))
        toastr.success(@json(session('success')));
    @endif

    @if (session('error'))
        toastr.error(@json(session('error')));
    @endif
</script>
@endsection