@extends('layouts.portal')

@section('title', 'Create Package')
@section('page_title', 'Create New Package')
@section('page_subtitle', 'Add a new service package')

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

@section('content')
    <div class="max-w-2xl mx-auto">
        <form action="{{ route('admin.packages.store') }}" method="POST" class="bg-white rounded-xl shadow-sm p-8">
            @csrf
            
            <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 
                           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 
                           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 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..."></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 }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                
                <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 
                           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">
                </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" 
                           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"
                               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 class="flex items-center pt-6">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" 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">Active Package</span>
                    </label>
                </div>
            </div>
            
            <!-- Asset & Liability Limits -->
            <div class="mt-8 pt-6 border-t border-gray-200">
                <h4 class="text-md font-semibold text-gray-800 mb-4">
                    <i class="fas fa-database mr-2 text-cyan-600"></i>Asset & Liability Limits
                </h4>
                <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" 
                               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</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" 
                               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</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" 
                               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</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" 
                               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</p>
                    </div>
                </div>
            </div>
            
            <!-- Package Features -->
            <div class="mt-8 pt-6 border-t border-gray-200">
                <h4 class="text-md font-semibold text-gray-800 mb-4">
                    <i class="fas fa-list-check mr-2 text-cyan-600"></i>Package Features
                </h4>
                <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
- Free updates for 1 year"></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>
                <button type="submit" class="octowill-btn text-white px-8 py-3 rounded-lg font-medium inline-flex items-center">
                    <i class="fas fa-save mr-2"></i> Create Package
                </button>
            </div>
        </form>
    </div>
@endsection