@extends('admin.layout', ['title' => 'Services'])

@section('content')
<div id="alertBox" class="alert d-none" role="alert"></div>

<div class="card rounded-0 border-0 p-0 m-0">
    <div class="card-body p-4">
        <form id="serviceForm" class="row g-2 align-items-end">
            <div class="col-12 col-md-4">
                <label class="form-label">Name</label>
                <input class="form-control" name="name" required>
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">Type</label>
                <select class="form-select" name="type" required>
                    <option value="IMEI">IMEI</option>
                    <option value="SERVER">SERVER</option>
                    <option value="REMOTE">REMOTE</option>
                    <option value="FILE">FILE</option>
                </select>
            </div>
            <div class="col-12 col-md-3">
                <label class="form-label">Group</label>
                <select class="form-select" name="service_group_id" id="service_group_id">
                    <option value="">-</option>
                </select>
            </div>
            <div class="col-12 col-md-3">
                <label class="form-label">API</label>
                <select class="form-select" name="api_id" id="api_id">
                    <option value="">-</option>
                </select>
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">External ID</label>
                <input class="form-control" name="external_id" placeholder="SERVICEID">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">Cost</label>
                <input class="form-control" name="cost_price" type="number" step="0.01" value="0">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">Price</label>
                <input class="form-control" name="sell_price" type="number" step="0.01" value="0">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">Currency</label>
                <input class="form-control" name="currency" value="USD">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">Min QNT</label>
                <input class="form-control" name="min_qnt" type="number">
            </div>
            <div class="col-12 col-md-2">
                <label class="form-label">Max QNT</label>
                <input class="form-control" name="max_qnt" type="number">
            </div>
            <div class="col-12 col-md-2">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="serviceActive" name="is_active" checked>
                    <label class="form-check-label" for="serviceActive">Active</label>
                </div>
            </div>
            <div class="col-12">
                <button class="btn btn-primary rounded" type="submit"><i class="fas fa-check-circle"></i> Add</button>
            </div>
        </form>
    </div>
</div>

<div class="card rounded-0 border-0 p-0 m-0 mt-3">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Group</th>
                        <th>API</th>
                        <th>Price</th>
                        <th>Currency</th>
                        <th>Active</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody id="rows"></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    window.__ADMIN_TOKEN__ = @json($adminToken);
    const apiBase = '/api/admin';

    function showAlert(type, message) {
        const box = document.getElementById('alertBox');
        box.classList.remove('d-none', 'alert-success', 'alert-danger', 'alert-warning', 'alert-info');
        box.classList.add('alert-' + type);
        box.textContent = message;
        setTimeout(() => box.classList.add('d-none'), 3500);
    }

    async function apiFetch(path, options = {}) {
        const headers = options.headers || {};
        headers['Accept'] = 'application/json';
        headers['Authorization'] = 'Bearer ' + window.__ADMIN_TOKEN__;
        if (options.body && !(options.body instanceof FormData)) {
            headers['Content-Type'] = 'application/json';
        }
        const res = await fetch(path, { ...options, headers });
        const json = await res.json().catch(() => ({}));
        if (!res.ok || json.success === false) {
            const msg = (json && (json.msg || json.message)) ? (json.msg || json.message) : 'Erro';
            throw new Error(msg);
        }
        return json;
    }

    function formToObject(form) {
        const fd = new FormData(form);
        const obj = {};
        fd.forEach((value, key) => obj[key] = value);
        form.querySelectorAll('input[type="checkbox"]').forEach(cb => obj[cb.name] = cb.checked);
        return obj;
    }

    async function loadGroups() {
        const res = await apiFetch(apiBase + '/service-groups');
        const groups = res.data?.data || [];
        const select = document.getElementById('service_group_id');
        select.innerHTML = '<option value="">-</option>';
        for (const g of groups) {
            const opt = document.createElement('option');
            opt.value = g.id;
            opt.textContent = `${g.name} (${g.type})`;
            select.appendChild(opt);
        }
    }

    async function loadApis() {
        const res = await apiFetch(apiBase + '/apis');
        const apis = res.data?.data || [];
        const select = document.getElementById('api_id');
        select.innerHTML = '<option value="">-</option>';
        for (const a of apis) {
            const opt = document.createElement('option');
            opt.value = a.id;
            opt.textContent = a.name;
            select.appendChild(opt);
        }
    }

    async function load() {
        const res = await apiFetch(apiBase + '/services');
        const items = res.data?.data || [];
        const tbody = document.getElementById('rows');
        tbody.innerHTML = '';

        for (const s of items) {
            const tr = document.createElement('tr');
            const groupName = s.group?.name || '';
            const apiName = s.api?.name || '';
            tr.innerHTML = `
                <td>${s.id}</td>
                <td>${s.name ?? ''}</td>
                <td>${s.type ?? ''}</td>
                <td>${groupName}</td>
                <td>${apiName}</td>
                <td>${s.sell_price ?? ''}</td>
                <td>${s.currency ?? ''}</td>
                <td>${s.is_active ? 'Yes' : 'No'}</td>
                <td class="text-end">
                    <a class="btn btn-sm btn-outline-primary" href="/admin/services/${s.id}/inputs">Inputs</a>
                    <button class="btn btn-sm btn-outline-danger ms-1" data-del="${s.id}">Delete</button>
                </td>
            `;
            tbody.appendChild(tr);
        }

        tbody.querySelectorAll('button[data-del]').forEach(btn => {
            btn.addEventListener('click', async () => {
                try {
                    await apiFetch(apiBase + '/services/' + btn.dataset.del, { method: 'DELETE' });
                    showAlert('success', 'Deletado');
                    await load();
                } catch (err) {
                    showAlert('danger', err.message);
                }
            });
        });
    }

    document.getElementById('serviceForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        try {
            const payload = formToObject(e.target);
            if (payload.min_qnt === '') delete payload.min_qnt;
            if (payload.max_qnt === '') delete payload.max_qnt;
            if (payload.api_id === '') delete payload.api_id;
            if (payload.service_group_id === '') delete payload.service_group_id;
            await apiFetch(apiBase + '/services', { method: 'POST', body: JSON.stringify(payload) });
            e.target.reset();
            document.getElementById('serviceActive').checked = true;
            showAlert('success', 'Criado');
            await load();
        } catch (err) {
            showAlert('danger', err.message);
        }
    });

    (async () => {
        try {
            await loadGroups();
            await loadApis();
            await load();
        } catch (err) {
            showAlert('danger', err.message);
        }
    })();
</script>
@endpush