@php
    $initialPackageType = old('package_type', request('type', 'Package'));
    $initialSessions = (int) old('sessions_count', $initialPackageType === 'Single Service' ? 1 : 4);
    $initialPrice = (float) old('price', (float) $service->base_price * $initialSessions);
@endphp

<x-layouts.company-admin title="Create Package — {{ $service->name }}">
    <div class="space-y-6"
         x-data="{
            packageType: @js($initialPackageType),
            sessions: {{ $initialSessions }},
            basePrice: {{ (float) $service->base_price }},
            price: {{ $initialPrice }},
            manualPrice: {{ old('price') !== null ? 'true' : 'false' }},
            syncPackageType() {
                this.sessions = this.packageType === 'Single Service' ? 1 : Math.max(2, Number(this.sessions) || 4);
                this.manualPrice = false;
                this.syncPrice();
            },
            syncPrice() {
                if (!this.manualPrice) this.price = (this.basePrice * Math.max(1, Number(this.sessions) || 1)).toFixed(2);
            },
            resetStandardPrice() {
                this.manualPrice = false;
                this.syncPrice();
            }
         }">
        
        <div>
            <h1 class="text-2xl font-extrabold text-gray-900 font-['Outfit']">Create Package for {{ $service->name }}</h1>
            <p class="text-xs text-gray-500 mt-1">Create a single-service option or a multi-session package with a clear total and per-session price.</p>
        </div>

        <div class="bg-white p-6 sm:p-8 rounded-3xl border border-gray-100 shadow-2xs max-w-2xl space-y-6">
            <div class="flex flex-wrap items-center justify-between gap-3 rounded-2xl border border-purple-100 bg-purple-50 px-4 py-3">
                <div>
                    <p class="text-[10px] font-bold uppercase tracking-wider text-purple-600">Base service</p>
                    <p class="mt-0.5 text-sm font-extrabold text-gray-900">{{ $service->name }}</p>
                </div>
                <div class="text-right">
                    <p class="text-sm font-extrabold text-purple-900">{{ $service->currency }} {{ number_format($service->base_price, 2) }} / session</p>
                    <p class="text-[10px] font-medium text-gray-500">{{ $service->duration_minutes }} minutes per session</p>
                </div>
            </div>

            @if($errors->any())
                <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-700">
                    <ul class="list-disc space-y-1 pl-4">
                        @foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach
                    </ul>
                </div>
            @endif
            
            <form method="POST" action="{{ route('company-admin.services.packages.store', $service->id) }}" class="space-y-4">
                @csrf

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="sm:col-span-2 space-y-1.5">
                        <label class="block text-xs font-bold text-gray-800">Package Name *</label>
                        <input type="text" name="name" required value="{{ old('name') }}" placeholder="e.g. 6-Session Grooming Package" class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl">
                    </div>

                    <div class="space-y-1.5">
                        <label class="block text-xs font-bold text-gray-800">Package Code</label>
                        <input type="text" name="code" value="{{ old('code') }}" placeholder="e.g. PKG-GRM-006" class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl font-mono">
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <label class="block text-xs font-bold text-gray-800">Package Type</label>
                        <select name="package_type" x-model="packageType" @change="syncPackageType" class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl">
                            <option value="Single Service">Single Service Package</option>
                            <option value="Package">Multi-session Package</option>
                            <option value="Membership">Membership Plan</option>
                        </select>
                    </div>

                    <div class="space-y-1.5">
                        <label class="block text-xs font-bold text-gray-800">Package Sessions *</label>
                        <input type="number" name="sessions_count" min="1" max="100" required x-model.number="sessions" @input="syncPrice"
                               :readonly="packageType === 'Single Service'"
                               class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl font-extrabold text-gray-900 read-only:cursor-not-allowed read-only:opacity-60">
                        <p class="text-[10px] text-gray-500" x-text="packageType === 'Single Service' ? 'Single service options include one session.' : 'Choose between 2 and 100 sessions.'"></p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        <div class="flex items-center justify-between gap-3">
                            <label class="block text-xs font-bold text-gray-800">Total Package Price ({{ $service->currency }}) *</label>
                            <button type="button" @click="resetStandardPrice" class="text-[10px] font-bold text-purple-700 hover:text-purple-900">Use standard price</button>
                        </div>
                        <input type="number" step="0.01" min="0.01" name="price" required x-model.number="price" @input="manualPrice = true"
                               class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl font-extrabold text-gray-900">
                        <p class="text-[10px] leading-relaxed text-gray-500">
                            Standard value: <strong x-text="'{{ $service->currency }} ' + (basePrice * Math.max(1, Number(sessions) || 1)).toFixed(2)"></strong>
                            · <strong x-text="'{{ $service->currency }} ' + (Number(price || 0) / Math.max(1, Number(sessions) || 1)).toFixed(2) + ' per session'"></strong>
                        </p>
                    </div>

                    <div class="space-y-1.5">
                        <label class="block text-xs font-bold text-gray-800">Duration Per Session (Minutes)</label>
                        <input type="number" name="duration_minutes" min="1" value="{{ old('duration_minutes') }}" placeholder="Service default ({{ $service->duration_minutes }}m)" class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl">
                        <p class="text-[10px] text-gray-500">Leave empty to use the service duration for every session.</p>
                    </div>
                </div>

                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-800">Status</label>
                    <select name="status" class="w-full h-12 px-4 text-xs bg-gray-50 border border-gray-200 rounded-xl">
                        <option value="active" @selected(old('status', 'active') === 'active')>Active</option>
                        <option value="inactive" @selected(old('status') === 'inactive')>Inactive</option>
                    </select>
                </div>

                <div class="space-y-1.5">
                    <label class="block text-xs font-bold text-gray-800">Description</label>
                    <textarea name="description" rows="3" placeholder="Package inclusions, expiry, or redemption terms..." class="w-full p-4 text-xs bg-gray-50 border border-gray-200 rounded-xl">{{ old('description') }}</textarea>
                </div>

                <div class="flex items-center justify-between pt-4">
                    <a href="{{ route('company-admin.services.show', $service->id) }}#packages" class="px-6 h-12 bg-gray-100 text-gray-700 text-xs font-bold rounded-2xl flex items-center justify-center">
                        Cancel
                    </a>
                    <button type="submit" class="h-12 px-8 paw-btn-gradient text-white text-xs font-bold rounded-2xl shadow-md shadow-purple-600/20 cursor-pointer">
                        Save Service Package
                    </button>
                </div>
            </form>

        </div>

    </div>
</x-layouts.company-admin>