@extends('layouts.master')

@section('title', 'Pelanggan')
@section('page-title', 'Master 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">
                <div>
                    <h4 class="mb-1">Master Pelanggan</h4>
                    <small class="text-muted">Kelola data pelanggan, status layanan, dan lokasi instalasi.</small>
                </div>
                <div class="page-actions">
                    <a href="{{ route('pelanggan.hotspot-router-pairing') }}" class="btn btn-outline-success">
                        <i class="bx bx-git-branch"></i> Pairing Router
                    </a>
                    <a href="{{ route('pelanggan.hotspot-user-pairing') }}" class="btn btn-outline-info">
                        <i class="bx bx-link-alt"></i> 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.create') }}" class="btn btn-primary">
                        <i class="bx bx-plus"></i> Tambah Pelanggan
                    </a>
                </div>
            </div>
        </div>

        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="card mb-3">
            <div class="card-body">
                <div class="section-title">Filter Pelanggan</div>
                <form class="row g-2" method="get">
                    <div class="col-md-4">
                        <label class="form-label mb-0">Pencarian</label>
                        <input type="text" name="q" value="{{ $q }}" class="form-control"
                            placeholder="Cari nama / kode / WA / alamat...">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label mb-0">Paket Internet</label>
                        <select name="paket_internet_id" class="form-select">
                            <option value="">Semua Paket</option>
                            @foreach ($paket as $p)
                                <option value="{{ $p->id }}" @selected($paketId == $p->id)>{{ $p->nama }}</option>
                            @endforeach
                        </select>
                    </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-2 d-flex align-items-end">
                        <button class="btn btn-outline-primary me-2" type="submit">
                            <i class="bx bx-filter-alt"></i> Filter
                        </button>
                        <a href="{{ route('pelanggan.index') }}" 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" id="table-pelanggan">
                    <thead>
                        <tr>
                            <th style="width: 48px;" class="text-center">#</th>
                            <th class="text-nowrap">Kode</th>
                            <th>Nama</th>
                            <th class="d-none d-md-table-cell">WA</th>
                            <th class="d-none d-lg-table-cell">Paket</th>
                            <th class="d-none d-xl-table-cell">Router</th>
                            <th class="d-none d-xl-table-cell">Alamat</th>
                            <th class="text-center">Status</th>
                            <th class="text-center text-nowrap">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php $no = $pelanggan->firstItem(); @endphp
                        @forelse ($pelanggan as $row)
                            <tr>
                                <td class="text-center">{{ $no++ }}</td>
                                <td class="text-nowrap">{{ $row->kode_pelanggan }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $row->nama }}</div>
                                    <div class="small mt-1">
                                        @php
                                            $tipe = (string) ($row->tipe_autentikasi ?? 'hotspot_user');
                                            $tipeBadge = $tipe === 'ip_binding' ? 'dark' : 'primary';
                                            $tipeLabel = $tipe === 'ip_binding' ? 'IP Binding' : 'Hotspot User';
                                        @endphp
                                        <span class="badge bg-{{ $tipeBadge }}">{{ $tipeLabel }}</span>
                                    </div>
                                    <div class="small text-muted d-md-none">WA: {{ $row->nomor_wa ?: '-' }}</div>
                                    <div class="small text-muted d-lg-none">Paket: {{ $row->paket->nama ?? '-' }}</div>
                                    <div class="small text-muted d-xl-none">Router: {{ $row->mikrotikServer->name ?? '-' }}</div>
                                    <div class="small text-muted d-xl-none">{{ $row->alamat }}</div>
                                    <div class="small mt-1">
                                        @php
                                            $syncStatus = $tipe === 'ip_binding'
                                                ? (string) ($row->ip_binding_last_sync_status ?? '')
                                                : (string) ($row->hotspot_last_sync_status ?? '');
                                            $syncBadge = $syncStatus === 'success' ? 'success' : ($syncStatus === 'failed' ? 'danger' : 'secondary');
                                            $syncLabel = $syncStatus === 'success' ? 'Sinkron OK' : ($syncStatus === 'failed' ? 'Sinkron Gagal' : 'Belum Sinkron');
                                        @endphp
                                        <span class="badge bg-{{ $syncBadge }}">{{ $syncLabel }}</span>
                                    </div>
                                </td>
                                <td class="d-none d-md-table-cell">{{ $row->nomor_wa ?: '-' }}</td>
                                <td class="d-none d-lg-table-cell">{{ $row->paket->nama ?? '-' }}</td>
                                <td class="d-none d-xl-table-cell">{{ $row->mikrotikServer->name ?? '-' }}</td>
                                <td class="d-none d-xl-table-cell">{{ $row->alamat }}</td>
                                <td class="text-center">
                                    @php
                                        $badge = [
                                            'aktif' => 'success',
                                            'menunggak' => 'warning',
                                            'non_aktif' => 'secondary',
                                            'putus' => 'danger',
                                        ][$row->status] ?? 'secondary';
                                    @endphp
                                    <span class="badge bg-{{ $badge }}">{{ ucfirst(str_replace('_', ' ', $row->status)) }}</span>
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('pelanggan.show', $row->id) }}" class="btn btn-sm btn-info mb-1">
                                        <i class="bx bx-id-card"></i> <span class="d-none d-md-inline">Profil</span>
                                    </a>

                                    @if (($row->tipe_autentikasi ?? 'hotspot_user') !== 'hotspot_user')
                                        <form action="{{ route('pelanggan.sync-ip-binding', $row->id) }}" method="post" class="d-inline"
                                            onsubmit="return confirm('Sinkron IP Binding untuk pelanggan ini?')">
                                            @csrf
                                            <button class="btn btn-sm btn-outline-dark mb-1">
                                                <i class="bx bx-sync"></i> <span class="d-none d-md-inline">Sinkron IP Binding</span>
                                            </button>
                                        </form>
                                    @endif

                                    @if ($row->latitude && $row->longitude)
                                        @php
                                            $lat = (float) $row->latitude;
                                            $lng = (float) $row->longitude;
                                            $gmapsUrl = "https://www.google.com/maps/dir/?api=1&destination={$lat},{$lng}&travelmode=driving";
                                        @endphp
                                        <a href="{{ $gmapsUrl }}" target="_blank" rel="noopener"
                                            class="btn btn-sm btn-primary mb-1">
                                            <i class="bx bx-navigation"></i> <span class="d-none d-md-inline">Rute</span>
                                        </a>
                                    @else
                                        <button class="btn btn-sm btn-outline-secondary mb-1" disabled title="Koordinat belum diisi">
                                            <i class="bx bx-navigation"></i> <span class="d-none d-md-inline">Rute</span>
                                        </button>
                                    @endif

                                    <a href="{{ route('pelanggan.edit', $row->id) }}" class="btn btn-sm btn-warning mb-1">
                                        <i class="bx bx-edit"></i> <span class="d-none d-md-inline">Edit</span>
                                    </a>

                                    <form action="{{ route('pelanggan.destroy', $row->id) }}" method="post"
                                        class="d-inline" onsubmit="return confirm('Hapus pelanggan ini?')">
                                        @csrf
                                        @method('delete')
                                        <button class="btn btn-sm btn-danger mb-1">
                                            <i class="bx bx-trash"></i> <span class="d-none d-md-inline">Hapus</span>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center text-muted">Belum ada data pelanggan.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{ $pelanggan->withQueryString()->links() }}
    </div>
@endsection