@extends('admin.layout')
@section('title', 'Manage Plans')
@section('content')

<div class="table-card">
    <div class="table-header">
        <div>
            <h3 style="font-size:14px;font-weight:600">Subscription Plans</h3>
            <p style="font-size:11px;color:var(--text-muted);margin-top:2px">Edit pricing, users, trial days — updates apply to new subscriptions</p>
        </div>
    </div>
    <table>
        <thead><tr><th>Plan</th><th>Type</th><th>Price</th><th>Users</th><th>Tenants</th><th>Active</th><th>Edit</th></tr></thead>
        <tbody>
            @foreach($plans as $plan)
            <tr>
                <td style="font-weight:600">{{ $plan->name }}</td>
                <td><span class="badge badge-{{ $plan->pricing_model === 'yearly' ? 'warning' : 'info' }}">{{ ucfirst($plan->pricing_model) }}</span></td>
                <td style="font-family:'JetBrains Mono',monospace;font-size:12px">
                    @if($plan->price_monthly > 0)${{ number_format($plan->price_monthly, 0) }}/mo
                    @elseif($plan->price_yearly > 0)${{ number_format($plan->price_yearly, 0) }}/yr
                    @else Free @endif
                </td>
                <td>{{ $plan->max_users }}</td>
                <td><span class="badge badge-brand">{{ $plan->tenants_count }}</span></td>
                <td>
                    <form method="POST" action="/admin/plans/{{ $plan->id }}" style="display:inline">
                        @csrf
                        <input type="hidden" name="name" value="{{ $plan->name }}">
                        <input type="hidden" name="description" value="{{ $plan->description }}">
                        <input type="hidden" name="price_monthly" value="{{ $plan->price_monthly }}">
                        <input type="hidden" name="price_yearly" value="{{ $plan->price_yearly }}">
                        <input type="hidden" name="max_users" value="{{ $plan->max_users }}">
                        <input type="hidden" name="trial_days" value="{{ $plan->trial_days }}">
                        <input type="hidden" name="is_active" value="{{ $plan->is_active ? 0 : 1 }}">
                        <button type="submit" class="btn btn-sm {{ $plan->is_active ? 'btn-success' : 'btn-danger' }}">
                            {{ $plan->is_active ? 'Active' : 'Inactive' }}
                        </button>
                    </form>
                </td>
                <td>
                   <button onclick="openPlanEdit({{ $plan->id }}, '{{ addslashes($plan->name) }}', '{{ addslashes($plan->description) }}', {{ $plan->price_monthly }}, {{ $plan->price_yearly }}, {{ $plan->max_users }}, {{ $plan->trial_days }}, {{ $plan->additional_member_price ?? 0 }})" class="btn btn-secondary btn-sm">Edit</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div id="planModal" class="modal-overlay" style="display:none">
    <div class="modal">
        <div class="modal-header">
            <h3 style="font-size:15px;font-weight:600">Edit Plan</h3>
            <button onclick="closePlanModal()" style="background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-muted)">&times;</button>
        </div>
        <form method="POST" id="planForm" class="modal-body">
            @csrf
            <div><label class="stat-card-label" style="margin-bottom:3px">Name</label><input type="text" name="name" id="pName" class="input" required></div>
            <div><label class="stat-card-label" style="margin-bottom:3px">Description</label><textarea name="description" id="pDesc" class="input" rows="2"></textarea></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
                <div><label class="stat-card-label" style="margin-bottom:3px">Price/Month ($)</label><input type="number" name="price_monthly" id="pMonthly" class="input" step="0.01"></div>
                <div><label class="stat-card-label" style="margin-bottom:3px">Price/Year ($)</label><input type="number" name="price_yearly" id="pYearly" class="input" step="0.01"></div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
    <div>
        <label class="stat-card-label" style="margin-bottom:3px">Max Users</label>
        <input type="number" name="max_users" id="pUsers" class="input">
    </div>
    <div>
        <label class="stat-card-label" style="margin-bottom:3px">Trial Days</label>
        <input type="number" name="trial_days" id="pTrial" class="input">
    </div>
</div>
{{-- ADD THIS NEW ROW --}}
<div>
    <label class="stat-card-label" style="margin-bottom:3px">Additional Member Price ($/mo)</label>
    <input type="number" name="additional_member_price" id="pAddMember" class="input" step="0.01">
    <span style="font-size:10px;color:var(--text-muted)">Price per extra member beyond max users (Family plans only)</span>
</div>
            <div class="modal-footer" style="padding:0;border:none;margin-top:4px">
                <button type="button" onclick="closePlanModal()" class="btn btn-secondary">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<script>
function openPlanEdit(id, name, desc, monthly, yearly, users, trial, addMember) {
    document.getElementById('planForm').action = '/admin/plans/' + id;
    document.getElementById('pName').value = name;
    document.getElementById('pDesc').value = desc;
    document.getElementById('pMonthly').value = monthly;
    document.getElementById('pYearly').value = yearly;
    document.getElementById('pUsers').value = users;
    document.getElementById('pTrial').value = trial;
    document.getElementById('pAddMember').value = addMember || 0;
    document.getElementById('planModal').style.display = 'flex';
}
function closePlanModal() { document.getElementById('planModal').style.display = 'none'; }
</script>
@endsection