@extends('layouts.admin')
@section('title','Point Packages')

@section('content')
<div class="grid-2">
    {{-- Existing Packages --}}
    <div>
        <div class="card">
            <div class="card-header"><h3>Point Packages</h3></div>
            <div class="table-wrap">
                <table>
                    <thead><tr><th>Package</th><th>Points</th><th>Bonus</th><th>Price (GH₵)</th><th>GH₵/1k pts</th><th>Status</th><th></th></tr></thead>
                    <tbody>
                    @foreach($packages as $pkg)
                    <tr>
                        <td>
                            <div style="display:flex;align-items:center;gap:8px;">
                                <div style="width:28px;height:28px;border-radius:6px;background:{{ $pkg->color }}18;color:{{ $pkg->color }};display:flex;align-items:center;justify-content:center;font-size:14px;">💎</div>
                                <div>
                                    <div style="font-weight:700;font-size:13px;">{{ $pkg->name }}</div>
                                    @if($pkg->badge)<span style="font-size:10px;font-weight:700;background:{{ $pkg->color }};color:#fff;padding:2px 6px;border-radius:8px;">{{ $pkg->badge }}</span>@endif
                                </div>
                            </div>
                        </td>
                        <td><strong>{{ number_format($pkg->points) }}</strong></td>
                        <td style="color:var(--success);font-weight:600;">+{{ number_format($pkg->bonus_points) }}</td>
                        <td><strong>GH₵{{ number_format($pkg->price_ghs,2) }}</strong></td>
                        <td style="font-size:12px;color:var(--text-muted);">GH₵{{ number_format($pkg->price_per_thousand,4) }}</td>
                        <td><span class="badge {{ $pkg->status?'badge-success':'badge-muted' }}">{{ $pkg->status?'Active':'Off' }}</span>
                            @if($pkg->is_featured)<span class="badge badge-primary" style="margin-left:4px;">Featured</span>@endif
                        </td>
                        <td>
                            <div style="display:flex;gap:4px;">
                                <button onclick="editPkg({{ $pkg->id }})" class="btn btn-xs btn-primary"><i class="fa fa-pen"></i></button>
                                <form method="POST" action="{{ route('admin.packages.delete',$pkg) }}" style="display:inline;">@csrf @method('DELETE')
                                    <button class="btn btn-xs btn-danger" onclick="return confirm('Delete?')"><i class="fa fa-trash"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Create / Edit --}}
    <div>
        <div class="card" style="position:sticky;top:80px;">
            <div class="card-header"><h3 id="form-title">Add Package</h3></div>
            <div class="card-body">
                <form method="POST" id="pkg-form" action="{{ route('admin.packages.store') }}">
                    @csrf <span id="pkg-method"></span>
                    <div class="form-row cols-2">
                        <div class="form-group"><label class="form-label">Name *</label><input type="text" name="name" class="form-control" placeholder="e.g. Starter" required id="f-name"></div>
                        <div class="form-group"><label class="form-label">Color</label><input type="color" name="color" class="form-control" value="#1A73E8" id="f-color" style="height:40px;padding:4px;"></div>
                    </div>
                    <div class="form-row cols-2">
                        <div class="form-group"><label class="form-label">Points *</label><input type="number" name="points" class="form-control" placeholder="e.g. 5000" min="1" required id="f-points" oninput="calcRate()"></div>
                        <div class="form-group"><label class="form-label">Bonus Points</label><input type="number" name="bonus_points" class="form-control" placeholder="0" min="0" id="f-bonus" value="0"></div>
                    </div>
                    <div class="form-row cols-2">
                        <div class="form-group"><label class="form-label">Price (GH₵) *</label><input type="number" name="price_ghs" class="form-control" placeholder="e.g. 5.00" step="0.01" min="0.01" required id="f-price" oninput="calcRate()"></div>
                        <div class="form-group"><label class="form-label">Sort Order</label><input type="number" name="sort_order" class="form-control" value="0" id="f-sort"></div>
                    </div>
                    <div class="form-row cols-2">
                        <div class="form-group"><label class="form-label">Badge Label</label><input type="text" name="badge" class="form-control" placeholder="Popular, Best Value..." id="f-badge"></div>
                        <div class="form-group">
                            <label class="form-label">Rate Preview</label>
                            <div style="padding:9px 12px;border:1.5px solid var(--border);border-radius:6px;font-size:13px;font-weight:600;color:var(--primary);" id="rate-preview">GH₵— per 1k pts</div>
                        </div>
                    </div>
                    <div class="form-row cols-2">
                        <div class="form-group">
                            <label class="form-switch"><input type="checkbox" name="is_featured" value="1" id="f-featured"> <span class="switch"></span> Featured Package</label>
                        </div>
                        <div class="form-group">
                            <label class="form-switch"><input type="checkbox" name="status" value="1" id="f-status" checked> <span class="switch"></span> Active</label>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100" id="pkg-submit-btn"><i class="fa fa-plus"></i> Add Package</button>
                    <button type="button" id="cancel-edit-btn" onclick="resetForm()" style="display:none;" class="btn btn-outline w-100" style="margin-top:8px;">Cancel Edit</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Edit pkg data (hidden) --}}
<div id="packages-data" style="display:none;">{{ json_encode($packages) }}</div>
@endsection

@push('scripts')
<script>
const packages = JSON.parse(document.getElementById('packages-data').textContent);

function calcRate() {
    const pts = parseFloat(document.getElementById('f-points').value)||0;
    const ghs = parseFloat(document.getElementById('f-price').value)||0;
    if(pts>0&&ghs>0) document.getElementById('rate-preview').textContent='GH₵'+((ghs/(pts/1000)).toFixed(4))+' per 1k pts';
}

function editPkg(id) {
    const pkg = packages.find(p=>p.id===id);
    if(!pkg) return;
    document.getElementById('form-title').textContent = 'Edit Package';
    document.getElementById('pkg-submit-btn').innerHTML = '<i class="fa fa-save"></i> Update Package';
    document.getElementById('cancel-edit-btn').style.display = 'block';
    document.getElementById('pkg-method').innerHTML = '<input type="hidden" name="_method" value="PUT">';
    document.getElementById('pkg-form').action = `/admin/packages/${id}`;
    document.getElementById('f-name').value  = pkg.name;
    document.getElementById('f-points').value= pkg.points;
    document.getElementById('f-bonus').value = pkg.bonus_points;
    document.getElementById('f-price').value = pkg.price_ghs;
    document.getElementById('f-badge').value = pkg.badge||'';
    document.getElementById('f-color').value = pkg.color||'#1A73E8';
    document.getElementById('f-sort').value  = pkg.sort_order;
    document.getElementById('f-featured').checked = !!pkg.is_featured;
    document.getElementById('f-status').checked   = !!pkg.status;
    calcRate();
    document.getElementById('pkg-form').scrollIntoView({behavior:'smooth'});
}

function resetForm() {
    document.getElementById('form-title').textContent='Add Package';
    document.getElementById('pkg-submit-btn').innerHTML='<i class="fa fa-plus"></i> Add Package';
    document.getElementById('cancel-edit-btn').style.display='none';
    document.getElementById('pkg-method').innerHTML='';
    document.getElementById('pkg-form').action='{{ route('admin.packages.store') }}';
    document.getElementById('pkg-form').reset();
    document.getElementById('rate-preview').textContent='GH₵— per 1k pts';
}
</script>
@endpush