@extends('admin.layout') @section('title','Tariflər')
@section('content')
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-ink">Tariflər</h1>
    <button onclick="toggleCreate()" class="btn btn-primary">+ Yeni tarif</button>
</div>

<div id="createForm" class="card mb-6" style="display:none;">
    <h3 class="font-semibold text-ink mb-4">Yeni tarif</h3>
    @include('admin._plan_form', ['plan' => null])
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
@foreach($plans as $plan)
<div class="card">
    <div class="flex items-center justify-between">
        <h3 class="font-semibold text-lg">{{ $plan->name }}</h3>
        <span class="badge {{ $plan->is_active?'badge-green':'badge-yellow' }}">{{ $plan->is_active?'Aktiv':'Deaktiv' }}</span>
    </div>
    <div class="text-3xl font-bold my-2">{{ number_format($plan->price_azn,2) }} ₼</div>
    <p class="text-sm text-muted">{{ $plan->users_count }} istifadəçi</p>
    @if(is_array($plan->features))
    <div class="mt-3 space-y-1">
        @foreach($plan->features as $key => $val)
        <div class="text-xs text-muted flex items-center gap-1.5">
            @if(is_bool($val)) @if($val)<x-icon name="check" class="w-4 h-4 shrink-0 text-primary" />@else<x-icon name="x" class="w-4 h-4 shrink-0 text-muted" />@endif @else <x-icon name="check" class="w-4 h-4 shrink-0 text-primary" /> @endif {{ $key }}@if(!is_bool($val)): {{ is_array($val) ? implode(', ', $val) : $val }}@endif
        </div>
        @endforeach
    </div>
    @endif
    <div class="mt-4 flex gap-2">
        <button onclick="toggleEdit({{ $plan->id }})" class="btn btn-secondary" style="padding:4px 10px;font-size:12px;"><x-icon name="pencil" class="w-4 h-4" /> Redaktə et</button>
        <form method="POST" action="{{ route('admin.plans.destroy', $plan) }}" onsubmit="return confirm('Bu tarifi silmək istədiyinizə əminsiniz?')">
            @csrf @method('DELETE')
            <button class="btn btn-danger" style="padding:4px 10px;font-size:12px;"><x-icon name="trash-2" class="w-4 h-4" /> Sil</button>
        </form>
    </div>
    <div id="edit-{{ $plan->id }}" style="display:none;" class="mt-4 border-t pt-4">
        @include('admin._plan_form', ['plan' => $plan])
    </div>
</div>
@endforeach
</div>
@endsection

@push('scripts')
<script>
function toggleCreate(){ const el = document.getElementById('createForm'); el.style.display = el.style.display==='none'?'block':'none'; }
function toggleEdit(id){ const el = document.getElementById('edit-'+id); el.style.display = el.style.display==='none'?'block':'none'; }
</script>
@endpush