@extends('layouts.master')

@section('title', 'Pairing IP Binding')
@section('page-title', 'Pairing IP Binding')

@section('css')
    <link rel="stylesheet" href="{{ URL::asset('/assets/css/pelanggan.css') }}">
    <link rel="stylesheet" href="{{ URL::asset('/assets/libs/select2/select2.min.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 3: Pairing IP Binding</h4>
                    <small class="text-muted">Pilih satu router, load daftar IP Binding, lalu pasangkan ke pelanggan tipe IP Binding.</small>
                </div>
                <div class="d-flex gap-2">
                    <a href="{{ route('pelanggan.hotspot-router-pairing') }}" class="btn btn-outline-success">
                        <i class="bx bx-left-arrow-alt"></i> Kembali Pairing Router
                    </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 align-items-end">
                    <div class="col-md-5">
                        <label class="form-label mb-0">Router MikroTik</label>
                        <select name="mikrotik_server_id" class="form-select" required>
                            @foreach ($servers as $server)
                                <option value="{{ $server->id }}" @selected($selectedServerId == $server->id)>
                                    {{ $server->name }} ({{ $server->host }}:{{ $server->port }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label mb-0">Pencarian Pelanggan</label>
                        <input type="text" class="form-control" name="q" value="{{ $q }}"
                            placeholder="Nama / kode / kecamatan / desa">
                    </div>
                    <div class="col-md-3 d-flex gap-2">
                        <button type="submit" class="btn btn-outline-primary">
                            <i class="bx bx-filter-alt"></i> Tampilkan
                        </button>
                        <button type="button" id="btn-load-bindings" class="btn btn-outline-info">
                            <i class="bx bx-cloud-download"></i> Load IP Binding
                        </button>
                    </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>Binding Terpasang</th>
                            <th style="min-width: 430px;">Pairing IP Binding</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($customers as $c)
                            <tr class="binding-row"
                                data-customer-id="{{ $c->id }}"
                                data-customer-name="{{ e($c->nama) }}"
                                data-current-binding-id="{{ strtolower((string) ($c->hotspot_ip_binding_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="pair-current-binding">
                                    @if ($c->hotspot_ip_binding_id)
                                        <div class="small fw-semibold text-success pair-current-binding-summary">
                                            {{ $c->hotspot_ip_binding_address ?: '-' }} / {{ $c->hotspot_ip_binding_mac ?: '-' }}
                                        </div>
                                        <div class="small text-muted pair-current-binding-meta">
                                            {{ $c->hotspot_ip_binding_type ?: '-' }}
                                            @if($c->hotspot_ip_binding_comment)
                                                | {{ $c->hotspot_ip_binding_comment }}
                                            @endif
                                        </div>
                                    @else
                                        <span class="mk-badge mk-badge-neutral pair-current-binding-summary">Belum dipasangkan</span>
                                        <div class="small text-muted pair-current-binding-meta d-none"></div>
                                    @endif
                                </td>
                                <td>
                                    <div class="d-flex flex-wrap gap-2">
                                        <form action="{{ route('pelanggan.hotspot-pair-ip-binding', $c->id) }}" method="post" class="d-flex gap-2 binding-pair-form flex-grow-1">
                                            @csrf
                                            <input type="hidden" name="mikrotik_server_id" value="{{ $selectedServerId }}">
                                            <select name="hotspot_ip_binding_id" class="form-select form-select-sm pair-binding-select" required data-placeholder="Cari comment / IP / MAC / type...">
                                                <option value="">-- Load IP Binding router dulu --</option>
                                            </select>
                                            <small class="text-muted pair-binding-meta align-self-center"></small>
                                            <button class="btn btn-sm btn-outline-success pair-submit-btn" type="submit">Pasangkan</button>
                                        </form>

                                        <form action="{{ route('pelanggan.hotspot-unpair-ip-binding', $c->id) }}" method="post"
                                            class="pair-unpair-form {{ $c->hotspot_ip_binding_id ? '' : 'd-none' }}"
                                            onsubmit="return confirm('Lepas pairing ip-binding untuk pelanggan ini?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="btn btn-sm btn-outline-danger" type="submit">Lepas</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-4">Belum ada pelanggan tipe IP Binding pada router terpilih.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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

@section('scripts')
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectedServerId = @json((string)$selectedServerId);
            const loadUrl = @json(route('pelanggan.hotspot-router-ip-bindings'));
            const csrfToken = @json(csrf_token());
            const toastWrap = document.getElementById('pair-toast-wrap');
            const bindingsByServer = {};
            const usageByServer = {};

            function normalize(value) {
                return String(value || '').trim().toLowerCase();
            }

            function showToast(message, type = 'info', duration = 2000) {
                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);
            }

            function enhanceSelect(row) {
                const bindingSelect = row.querySelector('.pair-binding-select');
                if (!bindingSelect || typeof window.jQuery === 'undefined' || typeof window.jQuery.fn.select2 !== 'function') return;
                const $s = window.jQuery(bindingSelect);
                if ($s.hasClass('select2-hidden-accessible')) {
                    $s.select2('destroy');
                }
                $s.select2({
                    width: '320px',
                    placeholder: bindingSelect.dataset.placeholder || 'Cari IP Binding...',
                    allowClear: true
                });
            }

            function renderOptionsForRow(row) {
                const bindingSelect = row.querySelector('.pair-binding-select');
                const meta = row.querySelector('.pair-binding-meta');
                if (!bindingSelect) return;

                const customerId = Number(row.dataset.customerId || 0);
                const currentBindingId = normalize(row.dataset.currentBindingId || '');
                const bindings = (bindingsByServer[selectedServerId] || []).slice();
                const usage = usageByServer[selectedServerId] || {};

                bindingSelect.innerHTML = '';
                const ph = document.createElement('option');
                ph.value = '';
                ph.textContent = bindings.length ? '-- Pilih IP Binding --' : '-- Load IP Binding router dulu --';
                bindingSelect.appendChild(ph);

                let count = 0;
                bindings.forEach(function(binding) {
                    const bindingId = String(binding.id || '');
                    if (!bindingId) return;
                    const key = normalize(bindingId);
                    const usedBy = usage[key] || null;
                    const usedByOther = usedBy && Number(usedBy.id || 0) !== customerId;

                    const address = String(binding.address || '-');
                    const mac = String(binding.mac_address || '-');
                    const type = String(binding.type || '-');
                    const comment = String(binding.comment || '-');

                    let label = '[' + comment + '] ' + address + ' | ' + mac + ' (' + type + ')';
                    if (binding.disabled) label += ' [disabled]';
                    if (usedByOther) label += ' (dipakai: ' + String(usedBy.nama || 'lainnya') + ')';

                    const opt = document.createElement('option');
                    opt.value = bindingId;
                    opt.textContent = label;
                    opt.disabled = Boolean(usedByOther);
                    if (key === currentBindingId) opt.selected = true;
                    bindingSelect.appendChild(opt);
                    count++;
                });

                if (meta) meta.textContent = count + ' binding';
                enhanceSelect(row);
            }

            function renderAllRows() {
                document.querySelectorAll('.binding-row').forEach(renderOptionsForRow);
            }

            async function loadBindings() {
                if (!selectedServerId) {
                    showToast('Pilih router terlebih dahulu.', 'warning');
                    return;
                }
                if (bindingsByServer[selectedServerId]) {
                    renderAllRows();
                    showToast('IP Binding router sudah tersedia.', 'info', 1600);
                    return;
                }

                const btn = document.getElementById('btn-load-bindings');
                const original = btn ? btn.innerHTML : '';
                if (btn) {
                    btn.disabled = true;
                    btn.innerHTML = '<i class="bx bx-loader-alt bx-spin"></i> Loading';
                }
                try {
                    const url = new URL(loadUrl, window.location.origin);
                    url.searchParams.set('mikrotik_server_id', selectedServerId);
                    const res = await fetch(url.toString(), {
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    });
                    const json = await res.json();
                    if (!res.ok || !json.ok) throw new Error(json.message || 'Gagal load ip-binding.');

                    bindingsByServer[selectedServerId] = Array.isArray(json.bindings) ? json.bindings : [];
                    usageByServer[selectedServerId] = json.usage || {};
                    renderAllRows();
                    showToast('IP Binding berhasil dimuat.', 'success', 1700);
                } catch (err) {
                    showToast(err.message || 'Terjadi kesalahan saat load ip-binding.', 'danger', 2500);
                } finally {
                    if (btn) {
                        btn.disabled = false;
                        btn.innerHTML = original;
                    }
                }
            }

            function setCurrentBinding(row, data) {
                const summary = row.querySelector('.pair-current-binding-summary');
                const meta = row.querySelector('.pair-current-binding-meta');

                const address = String(data.hotspot_ip_binding_address || '');
                const mac = String(data.hotspot_ip_binding_mac || '');
                const type = String(data.hotspot_ip_binding_type || '');
                const comment = String(data.hotspot_ip_binding_comment || '');

                if (!summary || !meta) return;
                if (address || mac) {
                    summary.className = 'small fw-semibold text-success pair-current-binding-summary';
                    summary.textContent = (address || '-') + ' / ' + (mac || '-');
                    meta.classList.remove('d-none');
                    meta.textContent = type + (comment ? ' | ' + comment : '');
                } else {
                    summary.className = 'mk-badge mk-badge-neutral pair-current-binding-summary';
                    summary.textContent = 'Belum dipasangkan';
                    meta.classList.add('d-none');
                    meta.textContent = '';
                }
            }

            function upsertUsage(bindingId, customerId, customerName) {
                if (!usageByServer[selectedServerId]) usageByServer[selectedServerId] = {};
                usageByServer[selectedServerId][normalize(bindingId)] = {
                    id: Number(customerId),
                    nama: customerName
                };
            }

            function removeUsage(bindingId, customerId) {
                const map = usageByServer[selectedServerId] || {};
                const key = normalize(bindingId);
                if (map[key] && Number(map[key].id) === Number(customerId)) {
                    delete map[key];
                }
            }

            async function submitPair(form, row) {
                if (form.dataset.pairing === '1') return;

                const btn = form.querySelector('button[type="submit"]');
                const select = form.querySelector('.pair-binding-select');
                if (!select || !select.value) {
                    showToast('Pilih ip-binding terlebih dahulu.', 'warning');
                    return;
                }

                form.dataset.pairing = '1';
                btn.disabled = true;
                try {
                    const payload = new URLSearchParams(new FormData(form));
                    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 pair ip-binding.');

                    const customerId = Number(row.dataset.customerId || 0);
                    const oldBindingId = row.dataset.currentBindingId || '';
                    removeUsage(oldBindingId, customerId);
                    row.dataset.currentBindingId = normalize(select.value);
                    upsertUsage(select.value, customerId, row.dataset.customerName || 'Pelanggan');

                    setCurrentBinding(row, json.data || {});
                    const unpairForm = row.querySelector('.pair-unpair-form');
                    if (unpairForm) unpairForm.classList.remove('d-none');
                    renderAllRows();
                    showToast(json.message || 'Pairing ip-binding berhasil.', 'success');
                } catch (err) {
                    showToast(err.message || 'Gagal pairing ip-binding.', 'danger', 2500);
                } finally {
                    form.dataset.pairing = '0';
                    btn.disabled = false;
                }
            }

            function triggerAutoPairBySelect(selectEl) {
                if (!selectEl) return;
                const row = selectEl.closest('.binding-row');
                const pairForm = selectEl.closest('.binding-pair-form');
                if (!row || !pairForm) return;
                if (!selectEl.value) return;
                if (normalize(selectEl.value) === normalize(row.dataset.currentBindingId || '')) return;
                submitPair(pairForm, row);
            }

            async function submitUnpair(form, row) {
                const btn = form.querySelector('button[type="submit"]');
                btn.disabled = true;
                try {
                    const payload = new URLSearchParams();
                    payload.set('_token', csrfToken);
                    payload.set('_method', 'DELETE');

                    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 lepas pairing ip-binding.');

                    const customerId = Number(row.dataset.customerId || 0);
                    removeUsage(row.dataset.currentBindingId || '', customerId);
                    row.dataset.currentBindingId = '';
                    setCurrentBinding(row, {});
                    form.classList.add('d-none');
                    renderAllRows();
                    showToast(json.message || 'Pairing ip-binding dilepas.', 'success');
                } catch (err) {
                    showToast(err.message || 'Gagal lepas pairing ip-binding.', 'danger', 2500);
                } finally {
                    btn.disabled = false;
                }
            }

            const loadBtn = document.getElementById('btn-load-bindings');
            if (loadBtn) {
                loadBtn.addEventListener('click', loadBindings);
            }

            document.addEventListener('change', function(e) {
                const target = e.target;
                if (!(target instanceof HTMLSelectElement)) return;
                if (!target.classList.contains('pair-binding-select')) return;
                triggerAutoPairBySelect(target);
            });

            if (typeof window.jQuery !== 'undefined' && typeof window.jQuery.fn.select2 === 'function') {
                window.jQuery(document).on('select2:select', '.pair-binding-select', function() {
                    triggerAutoPairBySelect(this);
                });
            }

            document.querySelectorAll('.binding-row').forEach(function(row) {
                const pairForm = row.querySelector('.binding-pair-form');
                const unpairForm = row.querySelector('.pair-unpair-form');

                if (pairForm) {
                    pairForm.addEventListener('submit', function(e) {
                        e.preventDefault();
                        submitPair(pairForm, row);
                    });
                }
                if (unpairForm) {
                    unpairForm.addEventListener('submit', function(e) {
                        e.preventDefault();
                        submitUnpair(unpairForm, row);
                    });
                }
            });
        });
    </script>
@endsection