@extends('layouts.user_type.auth')

@section('packages')
<div class="container-fluid py-4 px-4">
    @include('components.alert')

    <div id="tableView">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h5 class="mb-0" style="font-weight:700;">Subscription Packages</h5>
                    <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Manage available pricing plans and features.</p>
                </div>
                <button class="qc-btn-create btn bg-gradient-primary btn-sm mb-0" onclick="document.getElementById('packageForm').reset(); document.getElementById('packageModalLable').innerText='Create Package'; document.getElementById('submitButton').innerText='Save'; document.getElementById('package_id').value=''; toggleView('form')">
                    <i class="fas fa-plus me-1" style="font-size:0.72rem;"></i> Create Package
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="border:none; max-height:calc(100vh - 280px); overflow-y:auto;">
                    <table class="table mb-0">
                        <thead>
                            <tr>
                                <th style="padding-left:1.25rem; width:5%;">#</th>
                                <th>Package Name</th>
                                <th class="text-center">Pricing</th>
                                <th class="text-center">Duration</th>
                                <th class="text-center">Billing</th>
                                <th class="text-center">Users</th>
                                <th class="text-center">Support</th>
                                <th class="text-center">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($packages as $index => $package)
                                <tr>
                                    <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($packages->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                    <td><span style="font-weight:700;color:var(--heading);">{{ $package->package_name }}</span></td>
                                    <td class="text-center"><span class="mono" style="font-weight:700;color:var(--indigo);">₹{{ number_format($package->pricing) }}</span></td>
                                    <td class="text-center"><span class="badge bg-gradient-light mono" style="font-size:0.65rem;">{{ $package->duration }}mo</span></td>
                                    <td class="text-center" style="color:var(--grey-mid);">{{ $package->billing_cycle }}</td>
                                    <td class="text-center"><span class="badge" style="background:var(--g4);color:var(--grey-dark);font-size:0.64rem;">{{ $package->user_limit }} users</span></td>
                                    <td class="text-center" style="color:var(--grey-mid);">{{ $package->support_level }}</td>
                                    <td class="text-center">
                                        <div class="d-flex justify-content-center gap-2">
                                            <a href="#" class="ia-edit" onclick="openEditModal({{ $package }}); toggleView('form');" title="Edit">
                                                <i class="fas fa-pencil-alt" style="font-size:0.72rem;"></i>
                                            </a>
                                            @if ($package->package_status !== 'deleted')
                                                <form method="POST" action="{{ route('packages.delete', $package->id) }}" style="display:inline;">
                                                    @csrf @method('DELETE')
                                                    <button type="submit" class="ia-delete" onclick="return confirm('Delete this package?');" style="border:none;font-family:inherit;" title="Delete">
                                                        <i class="fas fa-trash-alt" style="font-size:0.72rem;"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="8"><div class="empty-state"><i class="fas fa-box"></i><p>No packages found</p></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                    @include('components.pagination', ['paginator' => $packages])
                </div>
            </div>
        </div>
    </div>

    <div id="formView" class="d-none">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <div>
                    <h6 id="packageModalLable" class="mb-0" style="font-weight:700;">Create Package</h6>
                    <p class="mb-0" style="font-size:0.72rem;color:var(--grey);margin-top:2px;">Fill in the package details</p>
                </div>
                <button class="qc-btn-dismiss btn btn-light btn-sm mb-0" onclick="toggleView('table')">
                    <i class="fas fa-arrow-left me-1" style="font-size:0.72rem;"></i> Back
                </button>
            </div>
            <form id="packageForm" action="{{ route('packages.storeOrUpdate') }}" method="POST">
                @csrf
                <div class="card-body">
                    <input type="hidden" id="package_id" name="id">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Package Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="package_name" name="package_name" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Pricing (₹) <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="pricing" name="pricing" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Duration (Months) <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="duration" name="duration" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Billing Cycle <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="billing_cycle" name="billing_cycle" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">User Limit <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="user_limit" name="user_limit" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Support Level</label>
                            <input type="text" class="form-control" id="support_level" name="support_level">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Included Features (comma-separated) <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="included_features" name="included_features" rows="2" required></textarea>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select" id="package_status" name="package_status" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end gap-2">
                    <button type="button" class="qc-btn-dismiss btn btn-light mb-0" onclick="toggleView('table')">Cancel</button>
                    <button type="submit" id="submitButton" class="qc-btn-confirm btn bg-gradient-primary mb-0">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    function toggleView(view) {
        if (view === 'form') {
            document.getElementById('tableView').classList.add('d-none');
            document.getElementById('formView').classList.remove('d-none');
        } else {
            document.getElementById('tableView').classList.remove('d-none');
            document.getElementById('formView').classList.add('d-none');
        }
    }

    function openEditModal(pkg) {
        document.getElementById('packageModalLable').innerText = 'Update Package';
        document.getElementById('submitButton').innerText = 'Update';
        document.getElementById('package_id').value = pkg.id;
        document.getElementById('package_name').value = pkg.package_name;
        document.getElementById('description').value = pkg.description;
        document.getElementById('pricing').value = pkg.pricing;
        document.getElementById('billing_cycle').value = pkg.billing_cycle;
        document.getElementById('duration').value = pkg.duration;
        document.getElementById('included_features').value = pkg.included_features;
        document.getElementById('user_limit').value = pkg.user_limit;
        document.getElementById('support_level').value = pkg.support_level ?? '';
        document.getElementById('package_status').value = pkg.package_status;
        if (pkg.package_status === 'deleted') {
            const s = document.getElementById('package_status');
            if (!s.querySelector('option[value="deleted"]')) s.innerHTML += '<option value="deleted" selected>Deleted</option>';
        }
    }
</script>
@endsection