@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>
                        <option value="simple_will">Simple Will</option>
                        <option value="couples_will">Couples Will</option>
                        <option value="will_with_trust">Will with Trust</option>
                        <option value="lifetime_storage">Lifetime Storage</option>
                    </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>
            
            <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