@extends('layouts.master')

@section('title', 'Pairing Router')
@section('page-title', 'Pairing Router Pelanggan')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/pelanggan.css') }}">
@endsection

@section('content')
    <div class="pelanggan-page">
        <div class="card page-header-card mb-3">
            <div class="card-body d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h4 class="mb-1">Tahap 1: Pairing Router</h4>
                    <small class="text-muted">Pasang router MikroTik ke pelanggan. Saat router berubah, pairing user hotspot akan direset otomatis.</small>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('pelanggan.hotspot-user-pairing') }}" class="btn btn-outline-info">
                        <i class="bx bx-right-arrow-alt"></i> Lanjut Pairing User
                    </a>
                    <a href="{{ route('pelanggan.hotspot-user-manager') }}" class="btn btn-outline-primary">
                        <i class="bx bx-edit-alt"></i> Kelola User Hotspot
                    </a>
                    <a href="{{ route('pelanggan.hotspot-ip-binding-pairing') }}" class="btn btn-outline-dark">
                        <i class="bx bx-network-chart"></i> Pairing IP Binding
                    </a>
                    <a href="{{ route('pelanggan.index') }}" class="btn btn-outline-secondary">
                        <i class="bx bx-arrow-back"></i> Kembali
                    </a>
                </div>
            </div>
        </div>

        <div id="pair-toast-wrap" style="position:fixed;top:74px;right:16px;z-index:2000;width:320px;"></div>

        <div class="card mb-3">
            <div class="card-body">
                <form method="get" class="row g-2">
                    <div class="col-md-5">
                        <label class="form-label mb-0">Pencarian</label>
                        <input type="text" name="q" class="form-control" value="{{ $q ?? '' }}"
                            placeholder="Nama / kode / kecamatan / desa">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-0">Status</label>
                        <select name="status" class="form-select">
                            <option value="">Semua Status</option>
                            @foreach (['aktif' => 'Aktif', 'menunggak' => 'Menunggak', 'non_aktif' => 'Non Aktif', 'putus' => 'Putus'] as $k => $v)
                                <option value="{{ $k }}" @selected(($status ?? '') === $k)>{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 d-flex align-items-end gap-2">
                        <button type="submit" class="btn btn-outline-primary">
                            <i class="bx bx-filter-alt"></i> Filter
                        </button>
                        <a href="{{ route('pelanggan.hotspot-router-pairing') }}" class="btn btn-outline-secondary">Reset</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="card table-card">
            <div class="card-body table-responsive">
                <table class="table table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Pelanggan</th>
                            <th>Kec/Desa</th>
                            <th>Router Saat Ini</th>
                            <th style="min-width: 340px;">Pairing Router</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $c)
                            <tr class="router-row" data-customer-id="{{ $c->id }}">
                                <td>
                                    <div class="small fw-semibold">{{ $c->kode_pelanggan ?: '-' }}</div>
                                    <div>{{ $c->nama }}</div>
                                </td>
                                <td>
                                    <div class="small fw-semibold">{{ $c->kecamatan ?: '-' }}</div>
                                    <div class="small text-muted">{{ $c->desa ?: '-' }}</div>
                                </td>
                                <td class="router-current">
                                    <span class="mk-badge {{ $c->mikrotikServer ? 'mk-badge-success' : 'mk-badge-neutral' }}">
                                        {{ $c->mikrotikServer->name ?? 'Belum dipasang' }}
                                    </span>
                                </td>
                                <td>
                                    <form action="{{ route('pelanggan.hotspot-pair-router', $c->id) }}" method="post"
                                        class="d-flex align-items-center gap-2 router-pair-form">
                                        @csrf
                                        <select name="mikrotik_server_id" class="form-select form-select-sm router-select-auto" required>
                                            <option value="">-- Lepas Router --</option>
                                            @foreach($servers as $server)
                                                <option value="{{ $server->id }}" @selected((int)($c->mikrotik_server_id ?? 0) === (int)$server->id)>
                                                    {{ $server->name }} ({{ $server->host }}:{{ $server->port }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <small class="text-muted router-save-hint d-none">Menyimpan...</small>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">Tidak ada data pelanggan.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="mt-3">
            {{ $customers->withQueryString()->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = @json(csrf_token());
            const toastWrap = document.getElementById('pair-toast-wrap');

            function showToast(message, type = 'info', duration = 1800) {
                if (!toastWrap) return;
                const node = document.createElement('div');
                node.style.cssText = 'border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12px;line-height:1.35;box-shadow:0 6px 20px rgba(0,0,0,.12);opacity:0;transform:translateY(-8px);transition:all .18s ease;';
                const palette = {
                    success: ['#dff7e6', '#0f5a2a', '#b9ebc8'],
                    danger: ['#fde9eb', '#7b1f28', '#f6c7cd'],
                    info: ['#e8f3ff', '#184c86', '#c9e1ff'],
                    warning: ['#fff5df', '#7a5a12', '#f7dfab']
                };
                const colors = palette[type] || palette.info;
                node.style.background = colors[0];
                node.style.color = colors[1];
                node.style.border = '1px solid ' + colors[2];
                node.textContent = message;
                toastWrap.appendChild(node);
                requestAnimationFrame(() => {
                    node.style.opacity = '1';
                    node.style.transform = 'translateY(0)';
                });
                setTimeout(() => {
                    node.style.opacity = '0';
                    node.style.transform = 'translateY(-8px)';
                    setTimeout(() => node.remove(), 180);
                }, duration);
            }

            document.querySelectorAll('.router-pair-form').forEach(function(form) {
                const select = form.querySelector('.router-select-auto');
                if (!select) return;

                const submitAuto = async function() {
                    const row = form.closest('.router-row');
                    const currentCell = row ? row.querySelector('.router-current') : null;
                    const hint = form.querySelector('.router-save-hint');

                    const payload = new URLSearchParams(new FormData(form));
                    select.disabled = true;
                    if (hint) hint.classList.remove('d-none');

                    try {
                        const res = await fetch(form.action, {
                            method: 'POST',
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest',
                                'X-CSRF-TOKEN': csrfToken,
                                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                            },
                            body: payload.toString()
                        });
                        const json = await res.json();
                        if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal simpan router.');

                        if (currentCell) {
                            const routerName = (json.data && json.data.router_name && json.data.router_id)
                                ? json.data.router_name
                                : 'Belum dipasang';
                            const badgeClass = (json.data && json.data.router_id) ? 'mk-badge mk-badge-success' : 'mk-badge mk-badge-neutral';
                            currentCell.innerHTML = '<span class="' + badgeClass + '">' + routerName + '</span>';
                        }
                        showToast(json.message || 'Router berhasil diperbarui.', 'success');
                    } catch (err) {
                        showToast(err.message || 'Terjadi kesalahan.', 'danger', 2400);
                    } finally {
                        select.disabled = false;
                        if (hint) hint.classList.add('d-none');
                    }
                };

                select.addEventListener('change', function() {
                    submitAuto();
                });
            });

            @if (session('success'))
            showToast(@json(session('success')), 'success');
            @endif
            @if (session('error'))
            showToast(@json(session('error')), 'danger', 2400);
            @endif
        });
    </script>
@endsection