@extends('layouts.admin')

@section('title', 'Create a package - Centipid ISP CRM')
@section('breadcrumb_parent', 'NETWORK')
@section('breadcrumb_current', 'Plans')

@section('content')
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-extrabold text-white tracking-tight">Create a <span class="text-orange-500">package.</span></h1>
            <p class="text-xs text-slate-400 mt-1">Speed limits, scheduling, and NAS restrictions.</p>
        </div>
        <button onclick="openCreatePackageModal()" class="flex items-center gap-2 btn-orange font-bold text-xs px-4 py-2.5 rounded-xl shadow-lg shadow-orange-500/20">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Create package</span>
        </button>
    </div>

    <!-- Plans Grid Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @foreach($plans as $plan)
            <div class="custom-card p-6 rounded-2xl flex flex-col justify-between hover:border-orange-500/50 transition-all">
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-[10px] font-extrabold uppercase tracking-widest px-2.5 py-1 rounded-md bg-[#222226] text-orange-400 border border-[#2a2a2e]">
                            {{ $plan->type }}
                        </span>
                        @if($plan->availability === 'Live')
                            <span class="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-400 bg-emerald-500/10 px-2.5 py-0.5 rounded-full border border-emerald-500/20">
                                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span> Live
                            </span>
                        @elseif($plan->availability === 'Hidden')
                            <span class="inline-flex items-center gap-1 text-[11px] font-bold text-amber-400 bg-amber-500/10 px-2.5 py-0.5 rounded-full border border-amber-500/20">
                                Hidden
                            </span>
                        @else
                            <span class="text-[11px] text-slate-500">Off</span>
                        @endif
                    </div>

                    <h3 class="text-lg font-extrabold text-white">{{ $plan->name }}</h3>
                    <div class="flex items-baseline gap-1 my-2">
                        <span class="text-3xl font-extrabold text-white">Rs {{ number_format($plan->price, 0) }}</span>
                        <span class="text-xs text-slate-400">/ {{ $plan->duration }}</span>
                    </div>

                    <div class="space-y-2 mt-4 text-xs text-slate-300">
                        <div class="flex justify-between py-1 border-b border-[#2a2a2e]">
                            <span class="text-slate-500">Download Speed:</span>
                            <span class="font-mono text-emerald-400 font-bold">{{ $plan->download_speed }}</span>
                        </div>
                        <div class="flex justify-between py-1 border-b border-[#2a2a2e]">
                            <span class="text-slate-500">Upload Speed:</span>
                            <span class="font-mono text-indigo-400 font-bold">{{ $plan->upload_speed }}</span>
                        </div>
                        <div class="flex justify-between py-1">
                            <span class="text-slate-500">Data Limit:</span>
                            <span class="font-mono text-white">{{ $plan->data_limit }}</span>
                        </div>
                    </div>
                </div>

                <div class="mt-6 pt-3 border-t border-[#2a2a2e] flex items-center justify-between text-xs">
                    <form action="{{ route('admin.plans.updateStatus', $plan) }}" method="POST">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="availability" value="{{ $plan->availability === 'Live' ? 'Hidden' : 'Live' }}">
                        <button type="submit" class="text-slate-400 hover:text-white font-semibold">
                            Toggle Availability
                        </button>
                    </form>
                    <span class="text-[10px] text-slate-500">RADIUS Synced</span>
                </div>
            </div>
        @endforeach
    </div>
</div>

<!-- Modal: Create Package -->
<div id="createPackageModal" class="fixed inset-0 z-[9999] hidden bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
    <div class="custom-panel rounded-2xl max-w-md w-full p-6 shadow-2xl space-y-4">
        <div class="flex items-center justify-between border-b border-[#2a2a2e] pb-3">
            <h3 class="text-base font-bold text-white flex items-center gap-2">
                <i data-lucide="box" class="w-5 h-5 text-orange-500"></i>
                <span>Create Package</span>
            </h3>
            <button onclick="closeCreatePackageModal()" class="text-slate-400 hover:text-white">&times;</button>
        </div>

        <form action="{{ route('admin.plans.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-semibold text-slate-300 mb-1">Package Name *</label>
                <input type="text" name="name" required placeholder="e.g. Home 10 Mbps" class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Type *</label>
                    <select name="type" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                        <option value="PPPoE">PPPoE</option>
                        <option value="Hotspot">Hotspot</option>
                        <option value="Binding">Binding</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Availability *</label>
                    <select name="availability" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                        <option value="Live">Live</option>
                        <option value="Hidden">Hidden</option>
                        <option value="Off">Off</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Price (Rs) * (Min 1)</label>
                    <input type="number" step="1" name="price" value="500" min="1" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Duration *</label>
                    <input type="text" name="duration" value="30 Days" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Download Speed</label>
                    <input type="text" name="download_speed" value="10 Mbps" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-300 mb-1">Upload Speed</label>
                    <input type="text" name="upload_speed" value="5 Mbps" required class="w-full bg-[#0f0f10] border border-[#2a2a2e] text-slate-100 text-xs rounded-xl px-3 py-2.5 focus:border-orange-500 focus:outline-none">
                </div>
            </div>

            <div class="flex items-center justify-end gap-3 pt-3 border-t border-[#2a2a2e]">
                <button type="button" onclick="closeCreatePackageModal()" class="px-4 py-2 text-xs font-semibold text-slate-400 hover:text-white">Cancel</button>
                <button type="submit" class="btn-orange text-xs px-5 py-2.5 rounded-xl">Save Package</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function openCreatePackageModal() {
        document.getElementById('createPackageModal').classList.remove('hidden');
    }
    function closeCreatePackageModal() {
        document.getElementById('createPackageModal').classList.add('hidden');
    }
</script>
@endpush
