@extends('layouts.portal')

@section('title', 'Edit Package')
@section('page_title', 'Edit Package')
@section('page_subtitle', 'Update package details, pricing and limits')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'packages-all'])
@endsection

@section('content')
    <div class="max-w-4xl mx-auto">
        <form action="{{ route('admin.packages.update', $package) }}" method="POST" class="bg-white rounded-xl shadow-sm p-8">
            @csrf
            @method('PUT')
            
            <!-- Basic Information -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <i class="fas fa-info-circle mr-2 text-cyan-600"></i>Basic Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Package Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" required value="{{ old('name', $package->name) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="e.g., Octo Plus">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Package Code <span class="text-red-500">*</span></label>
                        <input type="text" name="code" required value="{{ old('code', $package->code) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all bg-gray-100"
                               placeholder="e.g., OCTO_PLUS" readonly>
                        <p class="text-xs text-gray-500 mt-1">Code cannot be changed</p>
                    </div>
                    
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                        <textarea name="description" rows="3" 
                                  class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                                  placeholder="Describe what this package includes...">{{ old('description', $package->description) }}</textarea>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Package Type <span class="text-red-500">*</span></label>
                        <select name="type" required 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                            <option value="">Select type</option>
                            @foreach(App\Models\Package::getTypes() as $key => $label)
                                <option value="{{ $key }}" {{ old('type', $package->type) == $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                        <select name="is_active" 
                                class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all">
                            <option value="1" {{ old('is_active', $package->is_active) ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ !old('is_active', $package->is_active) ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Pricing & Commission -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <i class="fas fa-dollar-sign mr-2 text-cyan-600"></i>Pricing & Commission
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Price (RM) <span class="text-red-500">*</span></label>
                        <input type="number" name="price" step="0.01" min="0" required value="{{ old('price', $package->price) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="0.00">
                        <p class="text-xs text-gray-500 mt-1">This price will be used in invoices</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Agent Commission Rate (%)</label>
                        <input type="number" name="agent_commission_rate" step="0.01" min="0" max="100" 
                               value="{{ old('agent_commission_rate', $package->agent_commission_rate) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="10.00">
                    </div>
                    
                    <div class="flex items-center pt-6">
                        <label class="flex items-center cursor-pointer">
                            <input type="checkbox" name="allow_price_change" value="1" 
                                   {{ old('allow_price_change', $package->allow_price_change) ? 'checked' : '' }}
                                   class="w-5 h-5 text-cyan-600 border-gray-300 rounded focus:ring-cyan-400">
                            <span class="ml-2 text-sm font-medium text-gray-700">Allow Client Price Change</span>
                        </label>
                    </div>
                </div>
            </div>
            
            <!-- Asset & Liability Limits -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <i class="fas fa-database mr-2 text-cyan-600"></i>Asset & Liability Limits
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Asset Limit (Count)</label>
                        <input type="number" name="asset_limit" min="0" 
                               value="{{ old('asset_limit', $package->asset_limit) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="e.g., 10 (leave empty for unlimited)">
                        <p class="text-xs text-gray-500 mt-1">Maximum number of assets client can add. Leave empty for unlimited.</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Liability Limit (Count)</label>
                        <input type="number" name="liability_limit" min="0" 
                               value="{{ old('liability_limit', $package->liability_limit) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="e.g., 5 (leave empty for unlimited)">
                        <p class="text-xs text-gray-500 mt-1">Maximum number of liabilities client can add. Leave empty for unlimited.</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Asset Value Limit (RM)</label>
                        <input type="number" name="asset_value_limit" step="0.01" min="0" 
                               value="{{ old('asset_value_limit', $package->asset_value_limit) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="e.g., 1000000 (leave empty for unlimited)">
                        <p class="text-xs text-gray-500 mt-1">Maximum total asset value. Leave empty for unlimited.</p>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Liability Value Limit (RM)</label>
                        <input type="number" name="liability_value_limit" step="0.01" min="0" 
                               value="{{ old('liability_value_limit', $package->liability_value_limit) }}"
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                               placeholder="e.g., 500000 (leave empty for unlimited)">
                        <p class="text-xs text-gray-500 mt-1">Maximum total liability value. Leave empty for unlimited.</p>
                    </div>
                </div>
            </div>
            
            <!-- Package Features -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold text-gray-800 mb-4 pb-2 border-b border-gray-200">
                    <i class="fas fa-list-check mr-2 text-cyan-600"></i>Package Features
                </h3>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Features (One per line)</label>
                    <textarea name="features" rows="5" 
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 outline-none transition-all"
                              placeholder="Enter features, one per line:
- Up to 10 beneficiaries
- Digital signature included
- Lifetime storage">{{ old('features', is_array($package->features) ? implode("\n", $package->features) : $package->features) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Enter each feature on a new line. These will be displayed to clients.</p>
                </div>
            </div>
            
            <div class="mt-8 flex justify-between">
                <a href="{{ route('admin.packages') }}" class="px-8 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium">
                    <i class="fas fa-arrow-left mr-2"></i> Back
                </a>
                <div class="flex gap-3">
                    <button type="submit" name="action" value="save_and_continue" class="px-6 py-3 border border-cyan-600 text-cyan-600 rounded-lg hover:bg-cyan-50 font-medium">
                        <i class="fas fa-save mr-2"></i> Save & Continue
                    </button>
                    <button type="submit" class="octowill-btn text-white px-8 py-3 rounded-lg font-medium inline-flex items-center">
                        <i class="fas fa-check mr-2"></i> Update Package
                    </button>
                </div>
            </div>
        </form>
    </div>
@endsection