@extends('layouts.app')

@section('title', 'Layanan Internet Rumahan')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h2 mb-1">Layanan Internet Rumahan</h1>
            <p class="text-muted mb-0">Kelola layanan internet PPPoE untuk pelanggan</p>
        </div>
        <a href="{{ route('layanan-pppoes.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Tambah Layanan
        </a>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-primary bg-opacity-10 rounded p-3">
                                <i class="fas fa-wifi text-primary fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="small text-muted mb-1">Total Layanan</div>
                            <div class="h4 mb-0 fw-bold">{{ $stats['total'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded p-3">
                                <i class="fas fa-check-circle text-success fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="small text-muted mb-1">Layanan Aktif</div>
                            <div class="h4 mb-0 fw-bold">{{ $stats['aktif'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded p-3">
                                <i class="fas fa-eye text-warning fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="small text-muted mb-1">Tampil Register</div>
                            <div class="h4 mb-0 fw-bold">{{ $stats['tampil_register'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-info bg-opacity-10 rounded p-3">
                                <i class="fas fa-star text-info fa-lg"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="small text-muted mb-1">Layanan Unggulan</div>
                            <div class="h4 mb-0 fw-bold">{{ $stats['featured'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Search Card -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('layanan-pppoes.index') }}">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label small text-muted">Status</label>
                        <select name="status" class="form-select">
                            <option value="">Semua Status</option>
                            <option value="aktif" {{ request('status') == 'aktif' ? 'selected' : '' }}>Aktif</option>
                            <option value="non_aktif" {{ request('status') == 'non_aktif' ? 'selected' : '' }}>Non Aktif</option>
                            <option value="maintenance" {{ request('status') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label small text-muted">Mikrotik</label>
                        <select name="mikrotik_id" class="form-select">
                            <option value="">Semua Mikrotik</option>
                            @foreach($mikrotiks as $mikrotik)
                                <option value="{{ $mikrotik->id }}" {{ request('mikrotik_id') == $mikrotik->id ? 'selected' : '' }}>
                                    {{ $mikrotik->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label small text-muted">Tampil Register</label>
                        <select name="tampil_register" class="form-select">
                            <option value="">Semua</option>
                            <option value="1" {{ request('tampil_register') == '1' ? 'selected' : '' }}>Ya</option>
                            <option value="0" {{ request('tampil_register') == '0' ? 'selected' : '' }}>Tidak</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label small text-muted">Pencarian</label>
                        <div class="input-group">
                            <input type="text" name="search" class="form-control" placeholder="Cari layanan..." value="{{ request('search') }}">
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <button type="submit" class="btn btn-primary btn-sm me-2">
                            <i class="fas fa-filter"></i> Filter
                        </button>
                        <a href="{{ route('layanan-pppoes.index') }}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-times"></i> Reset
                        </a>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="d-flex align-items-center justify-content-end">
                            <label class="form-label small text-muted me-2 mb-0">Tampilkan:</label>
                            <select name="per_page" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                                <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                                <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                                <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                            </select>
                            <span class="small text-muted ms-2">per halaman</span>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Data Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <h5 class="card-title mb-0">Daftar Layanan Internet Rumahan</h5>
        </div>
        <div class="card-body p-0">
            @if($layananPppoes->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th width="5%" class="border-0 px-3 py-3">#</th>
                                <th class="border-0 px-3 py-3">Layanan</th>
                                <th class="border-0 px-3 py-3">Mikrotik</th>
                                <th class="border-0 px-3 py-3">Kecepatan</th>
                                <th class="border-0 px-3 py-3">Harga</th>
                                <th class="border-0 px-3 py-3">Status</th>
                                <th class="border-0 px-3 py-3">Register</th>
                                <th width="15%" class="border-0 px-3 py-3 text-center">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($layananPppoes as $index => $layanan)
                                <tr>
                                    <td class="px-3 py-3">
                                        {{ $layananPppoes->firstItem() + $index }}
                                    </td>
                                    <td class="px-3 py-3">
                                        <div class="d-flex align-items-center">
                                            @if($layanan->gambar_layanan)
                                                <img src="{{ $layanan->gambar_url }}" alt="{{ $layanan->nama_layanan }}" 
                                                     class="rounded me-3" style="width: 40px; height: 40px; object-fit: cover;">
                                            @else
                                                <div class="bg-primary bg-opacity-10 rounded me-3 d-flex align-items-center justify-content-center" 
                                                     style="width: 40px; height: 40px;">
                                                    <i class="fas fa-wifi text-primary"></i>
                                                </div>
                                            @endif
                                            <div>
                                                <div class="fw-bold">{{ $layanan->nama_layanan }}</div>
                                                <div class="small text-muted">Profile: {{ $layanan->pppoe_profile }}</div>
                                                @if($layanan->is_featured)
                                                    <span class="badge bg-warning bg-opacity-20 text-warning">
                                                        <i class="fas fa-star"></i> Unggulan
                                                    </span>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-3 py-3">
                                        <div class="fw-bold">{{ $layanan->mikrotik->name ?? '-' }}</div>
                                        <div class="small text-muted">{{ $layanan->mikrotik->host ?? '-' }}</div>
                                    </td>
                                    <td class="px-3 py-3">
                                        <div class="fw-bold">{{ $layanan->kecepatan_lengkap }}</div>
                                        <div class="small text-muted">Download / Upload</div>
                                    </td>
                                    <td class="px-3 py-3">
                                        <div class="fw-bold text-success">{{ $layanan->harga_format }}</div>
                                        <div class="small text-muted">per bulan</div>
                                    </td>
                                    <td class="px-3 py-3">
                                        <span class="badge bg-{{ $layanan->status_badge }}">
                                            {{ $layanan->status_label }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-3">
                                        <span class="badge bg-{{ $layanan->register_badge }}">
                                            {{ $layanan->register_label }}
                                        </span>
                                    </td>
                                    <td class="px-3 py-3 text-center">
                                        <div class="btn-group btn-group-sm" role="group">
                                            <a href="{{ route('layanan-pppoes.show', $layanan) }}" 
                                               class="btn btn-outline-info" title="Lihat Detail">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('layanan-pppoes.edit', $layanan) }}" 
                                               class="btn btn-outline-warning" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <button type="button" class="btn btn-outline-secondary dropdown-toggle" 
                                                        data-bs-toggle="dropdown" title="Lainnya">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <form action="{{ route('layanan-pppoes.toggle-status', $layanan) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="dropdown-item">
                                                                <i class="fas fa-toggle-on"></i> Toggle Status
                                                            </button>
                                                        </form>
                                                    </li>
                                                    <li>
                                                        <form action="{{ route('layanan-pppoes.toggle-register', $layanan) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="dropdown-item">
                                                                <i class="fas fa-eye"></i> Toggle Register
                                                            </button>
                                                        </form>
                                                    </li>
                                                    <li>
                                                        <form action="{{ route('layanan-pppoes.toggle-featured', $layanan) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="dropdown-item">
                                                                <i class="fas fa-star"></i> Toggle Unggulan
                                                            </button>
                                                        </form>
                                                    </li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <form action="{{ route('layanan-pppoes.duplicate', $layanan) }}" method="POST" class="d-inline">
                                                            @csrf
                                                            <button type="submit" class="dropdown-item">
                                                                <i class="fas fa-copy"></i> Duplikasi
                                                            </button>
                                                        </form>
                                                    </li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <button type="button" class="dropdown-item text-danger" 
                                                                onclick="confirmDelete('{{ $layanan->id }}', '{{ $layanan->nama_layanan }}')">
                                                            <i class="fas fa-trash"></i> Hapus
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                
                <!-- Pagination -->
                <div class="d-flex justify-content-between align-items-center p-3 border-top bg-light">
                    <div class="text-muted small">
                        @if($layananPppoes->total() > 0)
                            Menampilkan {{ $layananPppoes->firstItem() }} - {{ $layananPppoes->lastItem() }} 
                            dari {{ $layananPppoes->total() }} layanan
                            @if($layananPppoes->hasPages())
                                (Halaman {{ $layananPppoes->currentPage() }} dari {{ $layananPppoes->lastPage() }})
                            @endif
                        @else
                            Tidak ada layanan ditemukan
                        @endif
                    </div>
                    @if($layananPppoes->hasPages())
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <small class="text-muted">
                                    Halaman {{ $layananPppoes->currentPage() }} dari {{ $layananPppoes->lastPage() }}
                                </small>
                            </div>
                            {{ $layananPppoes->appends(request()->query())->links('pagination.custom') }}
                        </div>
                    @endif
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-5">
                    <div class="mb-3">
                        <i class="fas fa-wifi fa-3x text-muted"></i>
                    </div>
                    <h5 class="text-muted mb-3">Belum Ada Layanan Internet</h5>
                    <p class="text-muted mb-4">Mulai tambahkan layanan internet rumahan untuk pelanggan Anda.</p>
                    <a href="{{ route('layanan-pppoes.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Tambah Layanan Pertama
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus layanan <strong id="layananName"></strong>?</p>
                <p class="text-danger small">Tindakan ini tidak dapat dibatalkan!</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <form id="deleteForm" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.pagination .page-link {
    border-radius: 0.375rem;
    margin: 0 2px;
    border: 1px solid #dee2e6;
    color: #6c757d;
    padding: 0.375rem 0.75rem;
    transition: all 0.15s ease-in-out;
}

.pagination .page-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #495057;
}

.pagination .page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Responsive pagination */
@media (max-width: 576px) {
    .pagination {
        justify-content: center;
    }
    
    .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        margin: 0 1px;
    }
}
</style>
@endpush

@push('scripts')
<script>
function confirmDelete(layananId, layananName) {
    document.getElementById('layananName').textContent = layananName;
    document.getElementById('deleteForm').action = '/layanan-pppoes/' + layananId;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// Auto-submit form when per_page changes
document.addEventListener('DOMContentLoaded', function() {
    const perPageSelect = document.querySelector('select[name="per_page"]');
    if (perPageSelect) {
        perPageSelect.addEventListener('change', function() {
            this.form.submit();
        });
    }
});
</script>
@endpush
@endsection