@extends('layout.app')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title" style="color:#115548;">
                                <i class="fa fa-network-wired"></i> Update MAC Address from RADIUS
                            </h3>
                        </div>
                        <div class="card-body">

                            <form method="GET" action="{{ route('system.mac-update') }}">
                                <div class="row align-items-end">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="block text-gray-700 text-sm font-bold mb-2">Select Manager</label>
                                            <select name="reseller_id" class="select2 form-control">
                                                <option value="">-- Select Manager --</option>
                                                @foreach ($resellers as $r)
                                                    <option value="{{ $r->id }}"
                                                        {{ $selected_reseller == $r->id ? 'selected' : '' }}>
                                                        {{ $r->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <button class="btn btn-primary" type="submit">
                                            <i class="fa fa-search"></i> Load Clients
                                        </button>
                                    </div>
                                </div>
                            </form>

                            @if ($selected_reseller && $results->isNotEmpty())
                                @php
                                    $updatableCount = $results->filter(fn($c) => $c->radacct_mac && $c->mac !== $c->radacct_mac)->count();
                                @endphp
                                <div class="mt-3 d-flex align-items-center justify-content-between flex-wrap mb-2">
                                    <p class="text-muted mb-0">
                                        Showing {{ $results->count() }} client(s).
                                        <span id="pending-count" class="badge badge-warning">{{ $updatableCount }} pending update</span>
                                    </p>
                                    <button id="update-all-btn" class="btn btn-danger" {{ $updatableCount === 0 ? 'disabled' : '' }}>
                                        <i class="fa fa-sync"></i> Update All ({{ $updatableCount }})
                                    </button>
                                </div>
                                <table class="table table-bordered table-sm table-striped">
                                    <thead style="background-color:#78716c;color:#fff;">
                                        <tr>
                                            <th>Client ID</th>
                                            <th>Username</th>
                                            <th>Current MAC (clients table)</th>
                                            <th>Latest MAC (radacct)</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($results as $client)
                                            <tr id="row-{{ $client->id }}">
                                                <td>{{ $client->id }}</td>
                                                <td>{{ $client->userid }}</td>
                                                <td id="current-mac-{{ $client->id }}">
                                                    {{ $client->mac ?? '—' }}
                                                </td>
                                                <td>
                                                    @if ($client->radacct_mac)
                                                        <code>{{ $client->radacct_mac }}</code>
                                                    @else
                                                        <span class="text-muted">No record</span>
                                                    @endif
                                                </td>
                                                <td id="action-{{ $client->id }}">
                                                    @if ($client->radacct_mac && $client->mac !== $client->radacct_mac)
                                                        <button class="btn btn-sm btn-success update-mac-btn"
                                                            data-id="{{ $client->id }}"
                                                            data-mac="{{ $client->radacct_mac }}">
                                                            <i class="fa fa-sync"></i> Update
                                                        </button>
                                                    @elseif ($client->radacct_mac)
                                                        <span class="badge badge-success"><i class="fa fa-check"></i> Up to date</span>
                                                    @else
                                                        <span class="text-muted">—</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @elseif ($selected_reseller && $results->isEmpty())
                                <div class="alert alert-info mt-3">No clients found for the selected manager.</div>
                            @endif

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('ajax')
    <script>
        $(document).ready(function () {

            function saveMac(clientId, mac) {
                return $.ajax({
                    type: 'POST',
                    url: '{{ rtrim(route("system.mac-update"), "/") }}/' + clientId,
                    data: { mac: mac, _token: '{{ csrf_token() }}' }
                });
            }

            function markUpdated(clientId, mac) {
                $('#current-mac-' + clientId).text(mac);
                $('#action-' + clientId).html('<span class="badge badge-success"><i class="fa fa-check"></i> Up to date</span>');
            }

            function updateAllBtn() {
                const remaining = $('.update-mac-btn').length;
                $('#pending-count').text(remaining + ' pending update');
                const btn = $('#update-all-btn');
                if (remaining === 0) {
                    btn.prop('disabled', true).html('<i class="fa fa-check"></i> All Updated');
                    $('#pending-count').removeClass('badge-warning').addClass('badge-success');
                } else {
                    btn.html('<i class="fa fa-sync"></i> Update All (' + remaining + ')');
                }
            }

            // Single row update
            $(document).on('click', '.update-mac-btn', function () {
                const btn = $(this);
                const clientId = btn.data('id');
                const mac = btn.data('mac');

                btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i>');

                saveMac(clientId, mac)
                    .done(function (res) {
                        if (res.success) {
                            markUpdated(clientId, mac);
                            updateAllBtn();
                            toastr.success('MAC updated for client #' + clientId);
                        } else {
                            btn.prop('disabled', false).html('<i class="fa fa-sync"></i> Update');
                            toastr.error(res.message || 'Update failed.', 'Error');
                        }
                    })
                    .fail(function (xhr) {
                        btn.prop('disabled', false).html('<i class="fa fa-sync"></i> Update');
                        let msg = 'Update failed.';
                        try {
                            const json = JSON.parse(xhr.responseText);
                            if (json.message) msg = json.message;
                            else if (json.errors) msg = Object.values(json.errors).flat().join(' ');
                        } catch (e) {}
                        toastr.error(msg, 'Error (HTTP ' + xhr.status + ')');
                    });
            });

            // Update All — sequential to avoid server overload
            $('#update-all-btn').on('click', function () {
                const btn = $(this);
                const pending = $('.update-mac-btn');

                if (pending.length === 0) return;

                btn.prop('disabled', true);

                let queue = [];
                pending.each(function () {
                    queue.push({ id: $(this).data('id'), mac: $(this).data('mac') });
                });

                let done = 0;
                let failed = 0;

                function processNext(index) {
                    if (index >= queue.length) {
                        updateAllBtn();
                        toastr.success(done + ' MAC(s) updated successfully.' + (failed > 0 ? ' ' + failed + ' failed.' : ''));
                        return;
                    }
                    const item = queue[index];
                    btn.html('<i class="fa fa-spinner fa-spin"></i> ' + done + '/' + queue.length);

                    saveMac(item.id, item.mac)
                        .done(function (res) {
                            if (res.success) {
                                markUpdated(item.id, item.mac);
                                done++;
                            } else {
                                failed++;
                                toastr.error('Client #' + item.id + ': ' + (res.message || 'Failed'), 'Error');
                            }
                        })
                        .fail(function (xhr) {
                            failed++;
                            let msg = 'HTTP ' + xhr.status;
                            try {
                                const json = JSON.parse(xhr.responseText);
                                if (json.message) msg = json.message;
                                else if (json.errors) msg = Object.values(json.errors).flat().join(' ');
                            } catch (e) {}
                            toastr.error('Client #' + item.id + ': ' + msg, 'Error');
                        })
                        .always(function () {
                            processNext(index + 1);
                        });
                }

                processNext(0);
            });
        });
    </script>
@endsection