@extends('layouts.app')
@section('title', 'Subscription Plans')
@section('page-title', 'Subscription Plans')

@section('content')
<div class="page-header">
    <div>
        <div class="breadcrumb"><a href="{{ route('admin.dashboard') }}">Dashboard</a><span>/</span><a href="{{ route('admin.subscriptions.index') }}">Subscriptions</a><span>/</span>Plans</div>
        <h1>Subscription Plans</h1>
        <p>Manage plans and pricing. Changes apply to new subscriptions immediately.</p>
    </div>
    <button onclick="openModal('add-plan')" class="btn btn-primary"><i class="fas fa-plus"></i> New Plan</button>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;">
    @foreach($plans as $plan)
    <div class="card">
        <div class="card-header">
            <span class="card-title">{{ $plan->name }}</span>
            <span class="badge {{ $plan->is_active ? 'badge-success' : 'badge-danger' }}">{{ $plan->is_active ? 'Active' : 'Inactive' }}</span>
        </div>
        <div class="card-body">
            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:16px;text-align:center;">
                <div style="background:#f8fafc;border-radius:8px;padding:10px;">
                    <div style="font-size:11px;color:#9ca3af;">Monthly</div>
                    <div style="font-weight:700;">₦{{ number_format($plan->price_monthly, 0) }}</div>
                </div>
                <div style="background:#f8fafc;border-radius:8px;padding:10px;">
                    <div style="font-size:11px;color:#9ca3af;">Termly</div>
                    <div style="font-weight:700;">₦{{ number_format($plan->price_termly, 0) }}</div>
                </div>
                <div style="background:#f8fafc;border-radius:8px;padding:10px;">
                    <div style="font-size:11px;color:#9ca3af;">Annually</div>
                    <div style="font-weight:700;">₦{{ number_format($plan->price_annually, 0) }}</div>
                </div>
            </div>
            <div style="font-size:13px;color:#6b7280;margin-bottom:12px;">
                Staff: <strong>{{ $plan->max_staff == 999 ? 'Unlimited' : $plan->max_staff }}</strong> |
                Commission: <strong>{{ $plan->commission_rate ?? 5 }}%</strong>
            </div>
            
            @php
                $featuresArray = [];
                if ($plan->features) {
                    if (is_string($plan->features)) {
                        $featuresArray = json_decode($plan->features, true);
                        if (!is_array($featuresArray)) {
                            $featuresArray = explode("\n", $plan->features);
                        }
                    } elseif (is_array($plan->features)) {
                        $featuresArray = $plan->features;
                    }
                }
            @endphp
            
            @if(count($featuresArray) > 0)
            <ul style="list-style:none;font-size:12px;margin-bottom:16px;">
                @foreach($featuresArray as $feature)
                <li style="padding:6px 0;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f3f4f6;">
                    <i class="fas fa-check" style="color:#059669;font-size:11px;"></i> {{ is_string($feature) ? $feature : json_encode($feature) }}
                </li>
                @endforeach
            </ul>
            @endif
            
            <button onclick="openModal('edit-plan-{{ $plan->id }}')" class="btn btn-outline btn-sm" style="width:100%;justify-content:center;">
                <i class="fas fa-edit"></i> Edit Plan
            </button>
        </div>
    </div>

    <!-- Edit Plan Modal -->
    <div class="modal-overlay" id="edit-plan-{{ $plan->id }}">
        <div class="modal" style="max-width:540px;">
            <div class="modal-header">
                <span class="modal-title">Edit — {{ $plan->name }}</span>
                <button class="modal-close" onclick="closeModal('edit-plan-{{ $plan->id }}')">×</button>
            </div>
            <form method="POST" action="{{ route('admin.subscriptions.plans.update', $plan) }}">
                @csrf @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label">Plan Name *</label>
                        <input type="text" name="name" class="form-control" value="{{ $plan->name }}" required>
                    </div>
                    <div class="form-row-3">
                        <div class="form-group">
                            <label class="form-label">Monthly (₦) *</label>
                            <input type="number" name="price_monthly" class="form-control" value="{{ $plan->price_monthly }}" required min="0">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Termly (₦) *</label>
                            <input type="number" name="price_termly" class="form-control" value="{{ $plan->price_termly }}" required min="0">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Annually (₦) *</label>
                            <input type="number" name="price_annually" class="form-control" value="{{ $plan->price_annually }}" required min="0">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group">
                            <label class="form-label">Max Staff (0 = unlimited)</label>
                            <input type="number" name="max_staff" class="form-control" value="{{ $plan->max_staff }}" min="0">
                        </div>
                        <div class="form-group">
                            <label class="form-label">Commission Rate (%)</label>
                            <input type="number" name="commission_rate" class="form-control" value="{{ $plan->commission_rate ?? 5 }}" step="0.01" min="0" max="100">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Features (one per line)</label>
                        <textarea name="features" class="form-control" rows="5">@php
                            $editFeatures = [];
                            if ($plan->features) {
                                if (is_string($plan->features)) {
                                    $editFeatures = json_decode($plan->features, true);
                                    if (!is_array($editFeatures)) {
                                        $editFeatures = explode("\n", $plan->features);
                                    }
                                } elseif (is_array($plan->features)) {
                                    $editFeatures = $plan->features;
                                }
                            }
                            if (is_array($editFeatures)) {
                                foreach ($editFeatures as $f) {
                                    echo trim($f, '"') . "\n";
                                }
                            }
                        @endphp</textarea>
                    </div>
                    <div class="form-group">
                        <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                            <input type="checkbox" name="is_active" value="1" {{ $plan->is_active ? 'checked' : '' }}>
                            Plan is active
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline" onclick="closeModal('edit-plan-{{ $plan->id }}')">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
    @endforeach
</div>

<!-- Add Plan Modal -->
<div class="modal-overlay" id="add-plan">
    <div class="modal" style="max-width:540px;">
        <div class="modal-header">
            <span class="modal-title">Create New Plan</span>
            <button class="modal-close" onclick="closeModal('add-plan')">×</button>
        </div>
        <form method="POST" action="{{ route('admin.subscriptions.plans.store') }}">
            @csrf
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">Plan Name *</label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="form-row-3">
                    <div class="form-group">
                        <label class="form-label">Monthly (₦)</label>
                        <input type="number" name="price_monthly" class="form-control" min="0">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Termly (₦)</label>
                        <input type="number" name="price_termly" class="form-control" min="0">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Annually (₦)</label>
                        <input type="number" name="price_annually" class="form-control" min="0">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Max Staff</label>
                        <input type="number" name="max_staff" class="form-control" value="5" min="0">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Commission Rate (%)</label>
                        <input type="number" name="commission_rate" class="form-control" value="5" step="0.01" min="0" max="100">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Features (one per line)</label>
                    <textarea name="features" class="form-control" rows="5" placeholder="Feature 1&#10;Feature 2&#10;Feature 3"></textarea>
                </div>
                <div class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <input type="checkbox" name="is_active" value="1" checked>
                        Plan is active
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('add-plan')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Plan</button>
            </div>
        </form>
    </div>
</div>
@endsection