@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')
@include('admin.partials.management-styles')

@php
    $activeSection = $activeSection ?? 'plans';
    $selectedCategoryId = $selectedCategoryId ?? null;
    $selectedPlanId = $selectedPlanId ?? null;
    $openCreateModal = $openCreateModal ?? false;
    $selectedCategory = $selectedCategoryId ? $categories->firstWhere('id', $selectedCategoryId) : null;
    $selectedPlan = $selectedPlanId ? $plans->firstWhere('id', $selectedPlanId) : null;
    $visiblePlans = $selectedCategoryId ? $plans->where('category_id', $selectedCategoryId)->values() : $plans;
    $visiblePromoCodes = $selectedPlanId ? $promoCodes->where('plan_id', $selectedPlanId)->values() : $promoCodes;
@endphp

<style>
    .subscription-tabs {
        background: var(--color-surface-container-low);
        border: 1px solid var(--color-outline-variant);
        border-radius: 14px;
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px;
    }

    .subscription-tabs .admin-tab {
        align-items: center;
        background: #fff;
        border: 1px solid var(--color-outline-variant);
        border-radius: 10px;
        color: var(--color-on-surface);
        display: inline-flex;
        font-weight: 700;
        gap: 9px;
        padding: 10px 14px;
        text-decoration: none;
        transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .subscription-tabs .admin-tab:hover {
        border-color: rgba(0, 75, 137, .28);
        box-shadow: 0 8px 18px rgba(36, 59, 83, .08);
        transform: translateY(-1px);
    }

    .subscription-tabs .admin-tab.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        box-shadow: 0 10px 22px rgba(0, 75, 137, .2);
        color: #fff;
    }

    .subscription-tabs .admin-tab-count {
        background: var(--color-surface-container);
        color: var(--color-primary);
    }

    .subscription-tabs .admin-tab.active .admin-tab-count {
        background: rgba(255, 255, 255, .18);
        color: #fff;
    }

    @media (max-width: 991.98px) {
        .subscription-list-scroll .admin-table {
            min-width: 720px;
        }

        .subscription-list-scroll .admin-table-wide {
            min-width: 920px;
        }
    }
</style>

<main id="main" class="pt-4">
    <section class="mb-4">
        <div class="admin-breadcrumb">
            <span>Admin</span>
            <span class="material-symbols-outlined" style="font-size:16px;">chevron_right</span>
            <span class="active">Plan</span>
        </div>
        <h2 class="admin-page-title">
            @if ($activeSection === 'categories')
                Categories
            @elseif ($activeSection === 'promo-codes')
                Promo Codes
            @else
                Subscription Plans
            @endif
        </h2>
        <p class="admin-page-subtitle">Create marketplace categories, subscription plans, and plan-specific promo codes.</p>
    </section>

    @if (session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Please review the form.</strong>
            <ul class="mb-0 mt-2">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </div>
    @endif

    <section class="admin-card">
        <div class="admin-card-body pb-0">
            <nav class="admin-tabs subscription-tabs mb-0" aria-label="Subscription plan management" role="tablist">
                <a class="admin-tab {{ $activeSection === 'categories' ? 'active' : '' }}" href="{{ route('admin.subscription-plans.categories.index') }}">
                    Categories <span class="admin-tab-count">{{ $categories->count() }}</span>
                </a>
                <a class="admin-tab {{ $activeSection === 'plans' ? 'active' : '' }}" href="{{ route('admin.subscription-plans.index') }}">
                    Subscription Plans <span class="admin-tab-count">{{ $plans->count() }}</span>
                </a>
                <a class="admin-tab {{ $activeSection === 'promo-codes' ? 'active' : '' }}" href="{{ route('admin.subscription-plans.promo-codes.index') }}">
                    Promo Codes <span class="admin-tab-count">{{ $promoCodes->count() }}</span>
                </a>
            </nav>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade {{ $activeSection === 'categories' ? 'show active' : '' }}" id="categories-panel" role="tabpanel" aria-labelledby="categories-tab" tabindex="0">
                <div class="admin-card-body d-flex align-items-center justify-content-between gap-3 border-bottom">
                    <div>
                        <p class="admin-kicker mb-2">Marketplace Setup</p>
                        <h3 class="admin-card-title">Categories</h3>
                        <p class="admin-meta mt-1">Group provider subscriptions by marketplace vertical.</p>
                    </div>
                    <button class="btn-primary-action flex-shrink-0" data-bs-target="#createCategoryModal" data-bs-toggle="modal" type="button">
                        <span class="material-symbols-outlined" style="font-size:18px;">add</span>Category
                    </button>
                </div>
                <div class="table-responsive subscription-list-scroll">
                    <table class="table admin-table mb-0">
                        <thead><tr><th>Category</th><th>Status</th><th>Plans</th><th class="text-end">Action</th></tr></thead>
                        <tbody>
                            @forelse ($categories as $category)
                                <tr>
                                    <td><p class="admin-name">{{ $category->name }}</p><p class="admin-meta">{{ $category->description ?: 'No description' }}</p></td>
                                    <td><span class="admin-status {{ $category->status === 'active' ? 'success' : 'warning' }}">{{ ucfirst($category->status) }}</span></td>
                                    <td><span class="admin-chip">{{ $category->subscription_plans_count }}</span></td>
                                    <td class="text-end">
                                        <div class="d-inline-flex align-items-center justify-content-end gap-2">
                                            <a class="btn-outline-neutral" href="{{ route('admin.subscription-plans.index', ['category_id' => $category->id, 'create' => 1]) }}">
                                                <span class="material-symbols-outlined" style="font-size:18px;">workspace_premium</span>Plans
                                            </a>
                                            <div class="dropdown">
                                            <button class="admin-action" data-bs-toggle="dropdown" title="Actions" type="button"><span class="material-symbols-outlined">more_vert</span></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><button class="dropdown-item d-flex align-items-center gap-2 js-edit-category" data-category="{{ $category->toJson() }}" data-url="{{ route('admin.subscription-plans.categories.update', $category) }}" type="button"><span class="material-symbols-outlined" style="font-size:18px;">edit</span>Edit</button></li>
                                                <li><button class="dropdown-item d-flex align-items-center gap-2 text-danger js-delete-record" data-label="{{ $category->name }}" data-message="Delete this category? Categories containing plans cannot be deleted." data-url="{{ route('admin.subscription-plans.categories.destroy', $category) }}" type="button"><span class="material-symbols-outlined" style="font-size:18px;">delete</span>Delete</button></li>
                                            </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td class="text-center py-5" colspan="4">No categories created yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="tab-pane fade {{ $activeSection === 'plans' ? 'show active' : '' }}" id="plans-panel" role="tabpanel" aria-labelledby="plans-tab" tabindex="0">
                <div class="admin-card-body d-flex align-items-center justify-content-between gap-3 border-bottom">
                    <div>
                        <p class="admin-kicker mb-2">Provider Billing</p>
                        <h3 class="admin-card-title">Subscription Plans</h3>
                        <p class="admin-meta mt-1">
                            @if ($selectedCategory)
                                Create or review plans under {{ $selectedCategory->name }}.
                            @else
                                Configure category pricing, duration, and GST treatment.
                            @endif
                        </p>
                    </div>
                    <div class="d-flex align-items-center gap-2 flex-wrap justify-content-end">
                        @if ($selectedCategory)
                            <a class="btn-outline-neutral" href="{{ route('admin.subscription-plans.index') }}">
                                <span class="material-symbols-outlined" style="font-size:18px;">list</span>All Plans
                            </a>
                        @endif
                        <button class="btn-primary-action flex-shrink-0" data-bs-target="#createPlanModal" data-bs-toggle="modal" type="button" @disabled($categories->isEmpty())>
                            <span class="material-symbols-outlined" style="font-size:18px;">add</span>Plan
                        </button>
                    </div>
                </div>
                <div class="table-responsive subscription-list-scroll">
                    <table class="table admin-table admin-table-wide mb-0">
                        <thead><tr><th>Plan</th><th>Category</th><th>Duration</th><th>Price</th><th>GST</th><th>Status</th><th class="text-end">Action</th></tr></thead>
                        <tbody>
                            @forelse ($visiblePlans as $plan)
                                <tr>
                                    <td><p class="admin-name">{{ $plan->title }}</p></td>
                                    <td><p class="admin-name">{{ $plan->category->name }}</p></td>
                                    <td>{{ $plan->duration_months }} {{ Str::plural('month', $plan->duration_months) }}</td>
                                    <td>&#8377;{{ number_format((float) $plan->price, 2) }}</td>
                                    <td><span class="admin-chip">{{ number_format((float) $plan->gst_percentage, 2) }}% {{ $plan->gst_included ? 'Included' : 'Extra' }}</span></td>
                                    <td><span class="admin-status {{ $plan->status === 'active' ? 'success' : 'warning' }}">{{ ucfirst($plan->status) }}</span></td>
                                    <td class="text-end">
                                        <div class="d-inline-flex align-items-center justify-content-end gap-2">
                                            <a class="btn-outline-neutral" href="{{ route('admin.subscription-plans.promo-codes.for-plan', $plan) }}">
                                                <span class="material-symbols-outlined" style="font-size:18px;">sell</span>Promo
                                            </a>
                                            <div class="dropdown">
                                            <button class="admin-action" data-bs-toggle="dropdown" title="Actions" type="button"><span class="material-symbols-outlined">more_vert</span></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><button class="dropdown-item d-flex align-items-center gap-2 js-edit-plan" data-plan="{{ $plan->toJson() }}" data-url="{{ route('admin.subscription-plans.update', $plan) }}" type="button"><span class="material-symbols-outlined" style="font-size:18px;">edit</span>Edit</button></li>
                                                <li><button class="dropdown-item d-flex align-items-center gap-2 text-danger js-delete-record" data-label="{{ $plan->category->name }} - {{ $plan->duration_months }} months" data-message="Delete this subscription plan?" data-url="{{ route('admin.subscription-plans.destroy', $plan) }}" type="button"><span class="material-symbols-outlined" style="font-size:18px;">delete</span>Delete</button></li>
                                            </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td class="text-center py-5" colspan="7">{{ $selectedCategory ? 'No subscription plans created for this category yet.' : 'No subscription plans created yet.' }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="tab-pane fade {{ $activeSection === 'promo-codes' ? 'show active' : '' }}" id="promo-codes-panel" role="tabpanel" aria-labelledby="promo-codes-tab" tabindex="0">
                <div class="admin-card-body d-flex align-items-center justify-content-between gap-3 border-bottom">
                    <div>
                        <p class="admin-kicker mb-2">Marketing Offers</p>
                        <h3 class="admin-card-title">Promo Codes</h3>
                        <p class="admin-meta mt-1">
                            @if ($selectedPlan)
                                Create discount codes for {{ $selectedPlan->category?->name }} - {{ $selectedPlan->title }}.
                            @else
                                Create discount codes, set redemption limits, and control validity periods.
                            @endif
                        </p>
                    </div>
                    <button class="btn-primary-action flex-shrink-0" data-bs-target="#createPromoCodeModal" data-bs-toggle="modal" type="button" @disabled($plans->isEmpty())>
                        <span class="material-symbols-outlined" style="font-size:18px;">add</span>Promo Code
                    </button>
                </div>
                <div class="table-responsive subscription-list-scroll">
                    <table class="table admin-table admin-table-wide mb-0">
                        <thead><tr><th>Code</th><th>Plan</th><th>Discount</th><th>Usage</th><th>Validity</th><th>Status</th><th class="text-end">Action</th></tr></thead>
                        <tbody>
                            @forelse ($visiblePromoCodes as $promoCode)
                                <tr>
                                    <td><p class="admin-name">{{ $promoCode->code }}</p></td>
                                    <td>
                                        <p class="admin-name">{{ $promoCode->plan?->title ?? 'Plan missing' }}</p>
                                        <p class="admin-meta">
                                            {{ $promoCode->plan?->category?->name ?? 'No category' }}
                                            @if ($promoCode->plan)
                                                &middot; {{ $promoCode->plan->duration_months }} {{ Str::plural('month', $promoCode->plan->duration_months) }}
                                            @endif
                                        </p>
                                    </td>
                                    <td>
                                        @if ($promoCode->discount_type === 'percentage')
                                            {{ number_format((float) $promoCode->discount_value, 2) }}%
                                        @else
                                            &#8377;{{ number_format((float) $promoCode->discount_value, 2) }}
                                        @endif
                                    </td>
                                    <td><span class="admin-chip">{{ $promoCode->used_count }} / {{ $promoCode->max_usage ?? 'Unlimited' }}</span></td>
                                    <td>
                                        <p class="admin-name">{{ $promoCode->valid_from?->format('d M Y, h:i A') ?? 'Immediately' }}</p>
                                        <p class="admin-meta">to {{ $promoCode->valid_to?->format('d M Y, h:i A') ?? 'No expiry' }}</p>
                                    </td>
                                    <td><span class="admin-status {{ $promoCode->status === 'active' ? 'success' : 'warning' }}">{{ ucfirst($promoCode->status) }}</span></td>
                                    <td class="text-end">
                                        <div class="dropdown">
                                            <button class="admin-action" data-bs-toggle="dropdown" title="Actions" type="button"><span class="material-symbols-outlined">more_vert</span></button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li><button class="dropdown-item d-flex align-items-center gap-2 js-edit-promo-code" data-promo-code="{{ $promoCode->toJson() }}" data-url="{{ route('admin.subscription-plans.promo-codes.update', $promoCode) }}" type="button"><span class="material-symbols-outlined" style="font-size:18px;">edit</span>Edit</button></li>
                                                <li><button class="dropdown-item d-flex align-items-center gap-2 text-danger js-delete-record" data-label="{{ $promoCode->code }}" data-message="Delete this promo code?" data-url="{{ route('admin.subscription-plans.promo-codes.destroy', $promoCode) }}" type="button"><span class="material-symbols-outlined" style="font-size:18px;">delete</span>Delete</button></li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td class="text-center py-5" colspan="7">No promo codes created yet.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</main>

<div class="modal fade" id="createCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form method="POST" action="{{ route('admin.subscription-plans.categories.store') }}">
        @csrf
        <div class="modal-header"><h5 class="modal-title">Create Category</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body">
            <div class="mb-3"><label class="form-label" for="categoryName">Name</label><input class="form-control" id="categoryName" name="name" required value="{{ old('name') }}"></div>
            <div class="mb-3"><label class="form-label" for="categoryDescription">Description</label><textarea class="form-control" id="categoryDescription" name="description" rows="3">{{ old('description') }}</textarea></div>
            <div><label class="form-label" for="categoryStatus">Status</label><select class="form-select" id="categoryStatus" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
        </div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" type="submit">Create Category</button></div>
    </form></div></div>
</div>

<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form id="editCategoryForm" method="POST">
        @csrf @method('PUT')
        <div class="modal-header"><h5 class="modal-title">Edit Category</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body">
            <div class="mb-3"><label class="form-label" for="editCategoryName">Name</label><input class="form-control" id="editCategoryName" name="name" required></div>
            <div class="mb-3"><label class="form-label" for="editCategoryDescription">Description</label><textarea class="form-control" id="editCategoryDescription" name="description" rows="3"></textarea></div>
            <div><label class="form-label" for="editCategoryStatus">Status</label><select class="form-select" id="editCategoryStatus" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
        </div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" type="submit">Update Category</button></div>
    </form></div></div>
</div>

<div class="modal fade" id="createPlanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form method="POST" action="{{ route('admin.subscription-plans.store') }}">
        @csrf
        <div class="modal-header"><h5 class="modal-title">Create Subscription Plan</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body">
            <div class="mb-3">
                <label class="form-label" for="planCategory">Category</label>
                @if ($selectedCategory)
                    <input name="category_id" type="hidden" value="{{ $selectedCategory->id }}">
                    <input class="form-control" id="planCategory" type="text" value="{{ $selectedCategory->name }}" disabled>
                @else
                    <select class="form-select" id="planCategory" name="category_id" required>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</select>
                @endif
            </div>
            <div class="mb-3"><label class="form-label" for="planTitle">Plan Title</label><select class="form-select" id="planTitle" name="title" required><option value="Basic">Basic</option><option value="Pro">Pro</option><option value="Premium">Premium</option><option value="Elite">Elite</option></select></div>
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label" for="planDuration">Duration (months)</label><input class="form-control" id="planDuration" min="1" name="duration_months" required type="number"></div>
                <div class="col-md-6"><label class="form-label" for="planPrice">Price</label><input class="form-control" id="planPrice" min="0" name="price" required step="0.01" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="planGst">GST Percentage</label><input class="form-control" id="planGst" min="0" max="100" name="gst_percentage" required step="0.01" type="number" value="0"></div>
                <div class="col-md-6"><label class="form-label" for="planStatus">Status</label><select class="form-select" id="planStatus" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
            </div>
            <div class="form-check mt-3"><input class="form-check-input" id="planGstIncluded" name="gst_included" type="checkbox" value="1"><label class="form-check-label" for="planGstIncluded">GST is included in the displayed price</label></div>
        </div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" type="submit">Create Plan</button></div>
    </form></div></div>
</div>

<div class="modal fade" id="editPlanModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form id="editPlanForm" method="POST">
        @csrf @method('PUT')
        <div class="modal-header"><h5 class="modal-title">Edit Subscription Plan</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body">
            <div class="mb-3"><label class="form-label" for="editPlanCategory">Category</label><select class="form-select" id="editPlanCategory" name="category_id" required>@foreach ($categories as $category)<option value="{{ $category->id }}">{{ $category->name }}</option>@endforeach</select></div>
            <div class="mb-3"><label class="form-label" for="editPlanTitle">Plan Title</label><select class="form-select" id="editPlanTitle" name="title" required><option value="Basic">Basic</option><option value="Pro">Pro</option><option value="Premium">Premium</option><option value="Elite">Elite</option></select></div>
            <div class="row g-3">
                <div class="col-md-6"><label class="form-label" for="editPlanDuration">Duration (months)</label><input class="form-control" id="editPlanDuration" min="1" name="duration_months" required type="number"></div>
                <div class="col-md-6"><label class="form-label" for="editPlanPrice">Price</label><input class="form-control" id="editPlanPrice" min="0" name="price" required step="0.01" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="editPlanGst">GST Percentage</label><input class="form-control" id="editPlanGst" min="0" max="100" name="gst_percentage" required step="0.01" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="editPlanStatus">Status</label><select class="form-select" id="editPlanStatus" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
            </div>
            <div class="form-check mt-3"><input class="form-check-input" id="editPlanGstIncluded" name="gst_included" type="checkbox" value="1"><label class="form-check-label" for="editPlanGstIncluded">GST is included in the displayed price</label></div>
        </div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" type="submit">Update Plan</button></div>
    </form></div></div>
</div>

<div class="modal fade" id="createPromoCodeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form method="POST" action="{{ route('admin.subscription-plans.promo-codes.store') }}">
        @csrf
        <div class="modal-header"><h5 class="modal-title">Create Promo Code</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body">
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label" for="promoPlan">Subscription Plan</label>
                    <select class="form-select" id="promoPlan" name="plan_id" required>
                        <option value="">Select plan</option>
                        @foreach ($plans as $plan)
                            <option value="{{ $plan->id }}" @selected((int) $selectedPlanId === (int) $plan->id)>{{ $plan->category?->name }} - {{ $plan->title }} ({{ $plan->duration_months }} {{ Str::plural('month', $plan->duration_months) }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6"><label class="form-label" for="promoCode">Code</label><input class="form-control text-uppercase" id="promoCode" name="code" required></div>
                <div class="col-md-6"><label class="form-label" for="promoDiscountType">Discount Type</label><select class="form-select" id="promoDiscountType" name="discount_type" required><option value="percentage">Percentage</option><option value="fixed">Fixed Amount</option></select></div>
                <div class="col-md-6"><label class="form-label" for="promoDiscountValue">Discount Value</label><input class="form-control" id="promoDiscountValue" min="0.01" name="discount_value" required step="0.01" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="promoMaxUsage">Maximum Usage</label><input class="form-control" id="promoMaxUsage" min="1" name="max_usage" placeholder="Unlimited" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="promoValidFrom">Valid From</label><input class="form-control" id="promoValidFrom" name="valid_from" type="datetime-local"></div>
                <div class="col-md-6"><label class="form-label" for="promoValidTo">Valid To</label><input class="form-control" id="promoValidTo" name="valid_to" type="datetime-local"></div>
                <div class="col-12"><label class="form-label" for="promoStatus">Status</label><select class="form-select" id="promoStatus" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
            </div>
        </div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" type="submit">Create Promo Code</button></div>
    </form></div></div>
</div>

<div class="modal fade" id="editPromoCodeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form id="editPromoCodeForm" method="POST">
        @csrf @method('PUT')
        <div class="modal-header"><h5 class="modal-title">Edit Promo Code</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body">
            <div class="row g-3">
                <div class="col-12">
                    <label class="form-label" for="editPromoPlan">Subscription Plan</label>
                    <select class="form-select" id="editPromoPlan" name="plan_id" required>
                        <option value="">Select plan</option>
                        @foreach ($plans as $plan)
                            <option value="{{ $plan->id }}">{{ $plan->category?->name }} - {{ $plan->title }} ({{ $plan->duration_months }} {{ Str::plural('month', $plan->duration_months) }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6"><label class="form-label" for="editPromoCode">Code</label><input class="form-control text-uppercase" id="editPromoCode" name="code" required></div>
                <div class="col-md-6"><label class="form-label" for="editPromoDiscountType">Discount Type</label><select class="form-select" id="editPromoDiscountType" name="discount_type" required><option value="percentage">Percentage</option><option value="fixed">Fixed Amount</option></select></div>
                <div class="col-md-6"><label class="form-label" for="editPromoDiscountValue">Discount Value</label><input class="form-control" id="editPromoDiscountValue" min="0.01" name="discount_value" required step="0.01" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="editPromoMaxUsage">Maximum Usage</label><input class="form-control" id="editPromoMaxUsage" min="1" name="max_usage" placeholder="Unlimited" type="number"></div>
                <div class="col-md-6"><label class="form-label" for="editPromoValidFrom">Valid From</label><input class="form-control" id="editPromoValidFrom" name="valid_from" type="datetime-local"></div>
                <div class="col-md-6"><label class="form-label" for="editPromoValidTo">Valid To</label><input class="form-control" id="editPromoValidTo" name="valid_to" type="datetime-local"></div>
                <div class="col-12"><label class="form-label" for="editPromoStatus">Status</label><select class="form-select" id="editPromoStatus" name="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></div>
            </div>
        </div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn-primary-action" type="submit">Update Promo Code</button></div>
    </form></div></div>
</div>

<div class="modal fade" id="deleteSubscriptionRecordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog"><div class="modal-content"><form id="deleteSubscriptionRecordForm" method="POST">
        @csrf @method('DELETE')
        <div class="modal-header"><h5 class="modal-title">Delete Record</h5><button class="btn-close" data-bs-dismiss="modal" type="button"></button></div>
        <div class="modal-body"><p id="deleteSubscriptionMessage"></p><strong id="deleteSubscriptionLabel"></strong></div>
        <div class="modal-footer"><button class="btn-outline-neutral" data-bs-dismiss="modal" type="button">Cancel</button><button class="btn btn-danger" type="submit">Delete</button></div>
    </form></div></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const editCategoryModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('editCategoryModal'));
        const editPlanModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('editPlanModal'));
        const editPromoCodeModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('editPromoCodeModal'));
        const deleteModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('deleteSubscriptionRecordModal'));

        document.querySelectorAll('.js-edit-category').forEach(button => button.addEventListener('click', () => {
            const category = JSON.parse(button.dataset.category);
            document.getElementById('editCategoryForm').action = button.dataset.url;
            document.getElementById('editCategoryName').value = category.name;
            document.getElementById('editCategoryDescription').value = category.description ?? '';
            document.getElementById('editCategoryStatus').value = category.status;
            editCategoryModal.show();
        }));

        document.querySelectorAll('.js-edit-plan').forEach(button => button.addEventListener('click', () => {
            const plan = JSON.parse(button.dataset.plan);
            document.getElementById('editPlanForm').action = button.dataset.url;
            document.getElementById('editPlanCategory').value = plan.category_id;
            document.getElementById('editPlanTitle').value = plan.title;
            document.getElementById('editPlanDuration').value = plan.duration_months;
            document.getElementById('editPlanPrice').value = plan.price;
            document.getElementById('editPlanGst').value = plan.gst_percentage;
            document.getElementById('editPlanGstIncluded').checked = Boolean(plan.gst_included);
            document.getElementById('editPlanStatus').value = plan.status;
            editPlanModal.show();
        }));

        document.querySelectorAll('.js-edit-promo-code').forEach(button => button.addEventListener('click', () => {
            const promoCode = JSON.parse(button.dataset.promoCode);
            const localDateTime = value => value ? value.slice(0, 16) : '';
            document.getElementById('editPromoCodeForm').action = button.dataset.url;
            document.getElementById('editPromoPlan').value = promoCode.plan_id ?? '';
            document.getElementById('editPromoCode').value = promoCode.code;
            document.getElementById('editPromoDiscountType').value = promoCode.discount_type;
            document.getElementById('editPromoDiscountValue').value = promoCode.discount_value;
            document.getElementById('editPromoMaxUsage').value = promoCode.max_usage ?? '';
            document.getElementById('editPromoValidFrom').value = localDateTime(promoCode.valid_from);
            document.getElementById('editPromoValidTo').value = localDateTime(promoCode.valid_to);
            document.getElementById('editPromoStatus').value = promoCode.status;
            editPromoCodeModal.show();
        }));

        document.querySelectorAll('.js-delete-record').forEach(button => button.addEventListener('click', () => {
            document.getElementById('deleteSubscriptionRecordForm').action = button.dataset.url;
            document.getElementById('deleteSubscriptionMessage').textContent = button.dataset.message;
            document.getElementById('deleteSubscriptionLabel').textContent = button.dataset.label;
            deleteModal.show();
        }));
    });
</script>

@include('admin.partials.footer')