@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>Settings<span>/</span>Plans</div>
        <h1>Subscription Plans</h1>
        <p>Manage hotel subscription plans, prices, and features.</p>
    </div>
    <button onclick="openModal('createPlanModal')" class="btn btn-primary"><i class="fas fa-plus"></i> Add Plan</button>
</div>

<div class="card">
    <div class="card-body">
        <table class="table">
            <thead>
                <tr><th>Name</th><th>Monthly</th><th>Termly</th><th>Annually</th><th>Max Staff</th><th>Commission</th><th>Status</th><th></th></tr>
            </thead>
            <tbody>
                @foreach($plans as $plan)
                <tr>
                    <td>{{ $plan->name }}</td>
                    <td>₦{{ number_format($plan->price_monthly, 0) }}</td>
                    <td>₦{{ number_format($plan->price_termly, 0) }}</td>
                    <td>₦{{ number_format($plan->price_annually, 0) }}</td>
                    <td>{{ $plan->max_staff == 999 ? 'Unlimited' : $plan->max_staff }}</td>
                    <td>{{ $plan->commission_rate }}%</td>
                    <td>@if($plan->is_active) <span class="badge badge-success">Active</span> @else <span class="badge badge-danger">Inactive</span> @endif</td>
                    <td>
                        <button onclick="editPlan({{ $plan->id }})" class="btn btn-sm btn-outline">Edit</button>
                        <form method="POST" action="{{ route('admin.subscriptions.plans.destroy', $plan) }}" style="display:inline;">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete plan?')">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Create Plan Modal -->
<div class="modal-overlay" id="createPlanModal">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">Create Plan</span>
            <button class="modal-close" onclick="closeModal('createPlanModal')">×</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 <span class="required">*</span></label>
                    <input type="text" name="name" class="form-control" required>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Monthly Price</label>
                        <input type="number" name="price_monthly" class="form-control" step="0.01">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Termly Price</label>
                        <input type="number" name="price_termly" class="form-control" step="0.01">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Annually Price</label>
                        <input type="number" name="price_annually" class="form-control" step="0.01">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Max Staff</label>
                        <input type="number" name="max_staff" class="form-control" value="5">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Commission Rate (%)</label>
                        <input type="number" name="commission_rate" class="form-control" step="0.01" value="5">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Status</label>
                        <select name="is_active" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('createPlanModal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Create Plan</button>
            </div>
        </form>
    </div>
</div>

<script>
function editPlan(id) {
    window.location.href = '/admin/subscriptions/plans/' + id + '/edit';
}
</script>
@endsection