@extends('layouts.portal')

@section('title', 'Packages')
@section('page_title', 'Service Packages')
@section('page_subtitle', 'Manage service offerings and pricing')

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

@section('content')
    <div class="bg-white rounded-xl shadow-sm p-6">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
            <div>
                <h3 class="text-lg font-semibold text-gray-800">All Packages</h3>
                @if(request('type'))
                    <p class="text-sm text-gray-500 mt-1">
                        Filtered by: <span class="font-medium text-cyan-600">{{ App\Models\Package::getTypes()[request('type')] ?? 'All Types' }}</span>
                        <a href="{{ route('admin.packages') }}" class="ml-2 text-gray-400 hover:text-red-500"><i class="fas fa-times-circle"></i></a>
                    </p>
                @endif
            </div>
            <a href="{{ route('admin.packages.create') }}" class="octowill-btn text-white px-4 py-2 rounded-lg font-medium inline-flex items-center">
                <i class="fas fa-plus mr-2"></i> Add Package
            </a>
        </div>
        
        @if($packages->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($packages as $package)
                    <div class="border border-gray-200 rounded-xl p-6 hover:border-cyan-400 hover:shadow-md transition-all">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h4 class="font-bold text-gray-800">{{ $package->name }}</h4>
                                <p class="text-sm text-gray-500">{{ $package->code }}</p>
                            </div>
                            <span class="px-2 py-1 text-xs font-medium rounded-full {{ $package->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                {{ $package->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ $package->description }}</p>
                        
                        <div class="space-y-2 text-sm mb-4">
                            <div class="flex justify-between">
                                <span class="text-gray-500">Type:</span>
                                <span class="font-medium">{{ App\Models\Package::getTypes()[$package->type] ?? $package->type }}</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-gray-500">Price:</span>
                                <span class="font-bold text-lg text-cyan-600">RM{{ number_format($package->price, 2) }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span class="text-gray-500">Commission:</span>
                                <span class="font-medium">{{ $package->agent_commission_rate }}%</span>
                            </div>
                            
                            <!-- Asset & Liability Limits -->
                            @if($package->asset_limit || $package->liability_limit)
                                <div class="border-t border-gray-100 pt-2 mt-2">
                                    @if($package->asset_limit)
                                        <div class="flex justify-between text-xs">
                                            <span class="text-gray-500">Assets:</span>
                                            <span class="font-medium text-blue-600">Max {{ $package->asset_limit }}</span>
                                        </div>
                                    @endif
                                    @if($package->liability_limit)
                                        <div class="flex justify-between text-xs">
                                            <span class="text-gray-500">Liabilities:</span>
                                            <span class="font-medium text-blue-600">Max {{ $package->liability_limit }}</span>
                                        </div>
                                    @endif
                                </div>
                            @endif
                            
                            @if($package->allow_price_change)
                                <div class="flex items-center gap-1 text-xs text-amber-600">
                                    <i class="fas fa-check-circle"></i>
                                    <span>Client can change price</span>
                                </div>
                            @endif
                        </div>
                        
                        <div class="flex gap-2">
                            <a href="{{ route('admin.packages.edit', $package) }}" class="flex-1 py-2 border border-cyan-600 text-cyan-600 rounded-lg hover:bg-cyan-50 text-sm text-center">
                                <i class="fas fa-edit mr-1"></i> Edit
                            </a>
                            <form action="{{ route('admin.packages.destroy', $package) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this package?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="py-2 px-3 bg-red-500 text-white rounded-lg hover:bg-red-600 text-sm shadow-sm">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="text-center py-12">
                <i class="fas fa-box-open text-gray-300 text-5xl mb-4"></i>
                <p class="text-gray-500">No packages found.</p>
                <a href="{{ route('admin.packages.create') }}" class="text-cyan-600 hover:text-cyan-800 font-medium mt-2 inline-block">
                    Create your first package
                </a>
            </div>
        @endif
    </div>
@endsection