@extends('layouts.admin')

@section('title', 'Subscription Packages')
@section('header_title', 'Manage Vendor Subscription Packages')

@section('content')
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <p style="color: var(--text-muted);">Configure pricing, duration, and access tiers for optical stores.</p>
        <button onclick="document.getElementById('addPackageModal').style.display='block'" class="btn btn-primary">
            <i class="fa-solid fa-plus"></i> Create New Package
        </button>
    </div>

    <div class="card">
        <table>
            <thead>
                <tr>
                    <th>Package Name</th>
                    <th>Duration</th>
                    <th>Actual Price</th>
                    <th>Payable Charge</th>
                    <th>Active Subscriptions</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($packages as $pkg)
                    <tr>
                        <td>
                            <strong style="color: #fff; font-size: 1.05rem;">{{ $pkg->name }}</strong>
                            <div style="font-size: 0.8rem; color: var(--text-muted);">{{ $pkg->description }}</div>
                        </td>
                        <td><strong>{{ $pkg->months }} Month{{ $pkg->months > 1 ? 's' : '' }}</strong></td>
                        <td><del style="color: var(--text-muted);">₹{{ number_format($pkg->price, 2) }}</del></td>
                        <td style="color: #10B981; font-weight: 700; font-size: 1.1rem;">₹{{ number_format($pkg->payable_charge, 2) }}</td>
                        <td>
                            <span class="badge" style="background: rgba(99, 102, 241, 0.2); color: var(--primary);">
                                {{ $pkg->subscriptions_count }} Active Stores
                            </span>
                        </td>
                        <td>
                            <span class="badge {{ $pkg->is_active ? 'badge-success' : 'badge-danger' }}">
                                {{ $pkg->is_active ? 'Active' : 'Disabled' }}
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Add Package Modal -->
    <div id="addPackageModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; backdrop-filter: blur(5px);">
        <div style="background: #1F2937; border: 1px solid var(--border); border-radius: 20px; max-width: 500px; margin: 5rem auto; padding: 2rem; position: relative;">
            <button onclick="document.getElementById('addPackageModal').style.display='none'" style="position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer;">
                <i class="fa-solid fa-xmark"></i>
            </button>

            <h3 style="margin-bottom: 1.5rem;"><i class="fa-solid fa-box-open" style="color: var(--primary);"></i> Add Subscription Package</h3>

            <form action="{{ route('admin.packages.store') }}" method="POST">
                @csrf
                <div>
                    <label>Package Title *</label>
                    <input type="text" name="name" placeholder="e.g. Starter 3 Months" required>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">
                    <div>
                        <label>Months *</label>
                        <input type="number" name="months" value="3" min="1" required>
                    </div>
                    <div>
                        <label>Price (₹)</label>
                        <input type="number" name="price" value="1499" min="0" step="0.01" required>
                    </div>
                    <div>
                        <label>Payable (₹)</label>
                        <input type="number" name="payable_charge" value="1499" min="0" step="0.01" required>
                    </div>
                </div>

                <div>
                    <label>Description</label>
                    <textarea name="description" rows="3" placeholder="Features included in this plan..."></textarea>
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center; padding: 0.8rem; font-size: 1rem;">
                    Save Package
                </button>
            </form>
        </div>
    </div>
@endsection
