@extends('admin.layout')
@section('title', 'Data plans')

@section('content')
<h1 class="page-title">Data plans</h1>

<div x-data="dataPlans()" x-init="load()">
    <div class="panel" style="padding:0;">
        <table class="data-table">
            <thead>
            <tr>
                <th>Network</th>
                <th>Plan</th>
                <th>API cost</th>
                <th>Customer price</th>
                <th>Profit</th>
                <th>Active</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <template x-for="p in plans" :key="p.id">
                <tr>
                    <td x-text="p.network?.name ?? p.network_id"></td>
                    <td x-text="p.name"></td>
                    <td x-text="fmt(p.api_cost)"></td>
                    <td>
                        <input type="number" :value="p.customer_price" @change="updatePrice(p, $event.target.value)"
                               style="width:90px; border:1px solid var(--line); border-radius:6px; padding:4px 6px;">
                    </td>
                    <td x-text="fmt(p.customer_price - p.api_cost)"></td>
                    <td>
                        <input type="checkbox" :checked="p.is_active" @change="toggleActive(p, $event.target.checked)">
                    </td>
                    <td></td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>
    <p class="provider-meta" style="margin-top:10px;">Price changes take effect immediately for new orders and are written to the audit log.</p>
</div>

@push('scripts')
<script>
function dataPlans() {
    return {
        plans: [],
        fmt(v) { return '\u20a6' + Number(v).toLocaleString(undefined, {maximumFractionDigits: 0}); },
        async load() {
            const res = await fetch('/api/admin/data-plans', { headers: { 'Accept': 'application/json' } });
            this.plans = await res.json();
        },
        async updatePrice(plan, value) {
            await fetch(`/api/admin/data-plans/${plan.id}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '' },
                body: JSON.stringify({ customer_price: Number(value) }),
            });
            plan.customer_price = Number(value);
        },
        async toggleActive(plan, checked) {
            await fetch(`/api/admin/data-plans/${plan.id}`, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.content ?? '' },
                body: JSON.stringify({ is_active: checked }),
            });
        },
    };
}
</script>
@endpush
@endsection