@extends('layouts.app')

@section('title', 'Detail 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">Detail Layanan Internet Rumahan</h1>
            <p class="text-muted mb-0">{{ $layananPppoe->nama_layanan }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('layanan-pppoes.edit', $layananPppoe) }}" class="btn btn-warning">
                <i class="fas fa-edit"></i> Edit Layanan
            </a>
            <a href="{{ route('layanan-pppoes.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Kembali
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <!-- Informasi Dasar -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-info-circle text-primary"></i> Informasi Dasar
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="d-flex align-items-start">
                                @if($layananPppoe->gambar_layanan)
                                    <img src="{{ $layananPppoe->gambar_url }}" alt="{{ $layananPppoe->nama_layanan }}" 
                                         class="rounded me-3 img-thumbnail" style="width: 80px; height: 80px; object-fit: cover;">
                                @else
                                    <div class="bg-primary bg-opacity-10 rounded me-3 d-flex align-items-center justify-content-center" 
                                         style="width: 80px; height: 80px;">
                                        <i class="fas fa-wifi text-primary fa-2x"></i>
                                    </div>
                                @endif
                                <div>
                                    <h4 class="fw-bold text-primary mb-1">{{ $layananPppoe->nama_layanan }}</h4>
                                    <p class="text-muted mb-2">Profile PPPoE: <strong>{{ $layananPppoe->pppoe_profile }}</strong></p>
                                    @if($layananPppoe->is_featured)
                                        <span class="badge bg-warning bg-opacity-20 text-warning">
                                            <i class="fas fa-star"></i> Layanan Unggulan
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="text-end">
                                <div class="display-6 fw-bold text-success mb-1">{{ $layananPppoe->harga_format }}</div>
                                <div class="text-muted">per bulan</div>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <div class="text-center p-3 bg-light rounded">
                                <i class="fas fa-download text-primary fa-2x mb-2"></i>
                                <div class="fw-bold">{{ $layananPppoe->kecepatan_download }}</div>
                                <div class="small text-muted">Download</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3 bg-light rounded">
                                <i class="fas fa-upload text-success fa-2x mb-2"></i>
                                <div class="fw-bold">{{ $layananPppoe->kecepatan_upload }}</div>
                                <div class="small text-muted">Upload</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="text-center p-3 bg-light rounded">
                                <i class="fas fa-sort-numeric-up text-info fa-2x mb-2"></i>
                                <div class="fw-bold">{{ $layananPppoe->urutan }}</div>
                                <div class="small text-muted">Urutan Tampil</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Informasi Mikrotik -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-router text-info"></i> Informasi Mikrotik
                    </h5>
                </div>
                <div class="card-body">
                    @if($layananPppoe->mikrotik)
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-info bg-opacity-10 rounded me-3 p-2">
                                        <i class="fas fa-server text-info"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ $layananPppoe->mikrotik->name }}</div>
                                        <div class="small text-muted">Nama Mikrotik</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="bg-secondary bg-opacity-10 rounded me-3 p-2">
                                        <i class="fas fa-network-wired text-secondary"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ $layananPppoe->mikrotik->host }}</div>
                                        <div class="small text-muted">Host / IP Address</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <div class="bg-warning bg-opacity-10 rounded me-3 p-2">
                                        <i class="fas fa-user text-warning"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ $layananPppoe->mikrotik->username }}</div>
                                        <div class="small text-muted">Username</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-center">
                                    <div class="bg-{{ $layananPppoe->mikrotik->is_active ? 'success' : 'danger' }} bg-opacity-10 rounded me-3 p-2">
                                        <i class="fas fa-{{ $layananPppoe->mikrotik->is_active ? 'check-circle' : 'times-circle' }} text-{{ $layananPppoe->mikrotik->is_active ? 'success' : 'danger' }}"></i>
                                    </div>
                                    <div>
                                        <div class="fw-bold">{{ $layananPppoe->mikrotik->is_active ? 'Aktif' : 'Tidak Aktif' }}</div>
                                        <div class="small text-muted">Status Mikrotik</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-exclamation-triangle text-warning fa-2x mb-2"></i>
                            <p class="text-muted">Mikrotik tidak ditemukan atau telah dihapus</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Keterangan & Syarat -->
            @if($layananPppoe->keterangan)
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-file-alt text-secondary"></i> Keterangan & Syarat Ketentuan
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="text-break">{!! nl2br(e($layananPppoe->keterangan)) !!}</div>
                    </div>
                </div>
            @endif
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Status Cards -->
            <div class="row g-3 mb-4">
                <div class="col-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="badge bg-{{ $layananPppoe->status_badge }} fs-6 mb-2">
                                {{ $layananPppoe->status_label }}
                            </div>
                            <div class="small text-muted">Status Layanan</div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="card-body text-center">
                            <div class="badge bg-{{ $layananPppoe->register_badge }} fs-6 mb-2">
                                {{ $layananPppoe->register_label }}
                            </div>
                            <div class="small text-muted">Tampil Register</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-bolt text-warning"></i> Quick Actions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <form action="{{ route('layanan-pppoes.toggle-status', $layananPppoe) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-primary btn-sm w-100">
                                <i class="fas fa-toggle-on"></i> Toggle Status
                            </button>
                        </form>
                        <form action="{{ route('layanan-pppoes.toggle-register', $layananPppoe) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-warning btn-sm w-100">
                                <i class="fas fa-eye"></i> Toggle Register
                            </button>
                        </form>
                        <form action="{{ route('layanan-pppoes.toggle-featured', $layananPppoe) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-info btn-sm w-100">
                                <i class="fas fa-star"></i> Toggle Unggulan
                            </button>
                        </form>
                        <hr class="my-2">
                        <form action="{{ route('layanan-pppoes.duplicate', $layananPppoe) }}" method="POST" class="d-inline">
                            @csrf
                            <button type="submit" class="btn btn-outline-secondary btn-sm w-100">
                                <i class="fas fa-copy"></i> Duplikasi Layanan
                            </button>
                        </form>
                        <button type="button" class="btn btn-outline-danger btn-sm w-100" 
                                onclick="confirmDelete('{{ $layananPppoe->id }}', '{{ $layananPppoe->nama_layanan }}')">
                            <i class="fas fa-trash"></i> Hapus Layanan
                        </button>
                    </div>
                </div>
            </div>

            <!-- Metadata -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-clock text-muted"></i> Metadata
                    </h6>
                </div>
                <div class="card-body">
                    <div class="small">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Dibuat:</span>
                            <span class="fw-bold">{{ $layananPppoe->created_at->format('d M Y H:i') }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Diubah:</span>
                            <span class="fw-bold">{{ $layananPppoe->updated_at->format('d M Y H:i') }}</span>
                        </div>
                        <div class="d-flex justify-content-between">
                            <span class="text-muted">ID Layanan:</span>
                            <span class="fw-bold">#{{ $layananPppoe->id }}</span>
                        </div>
                    </div>
                </div>
            </div>

            @if($layananPppoe->fitur_tambahan && count($layananPppoe->fitur_tambahan) > 0)
            <!-- Fitur Tambahan -->
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h6 class="card-title mb-0">
                        <i class="fas fa-plus-circle text-success"></i> Fitur Tambahan
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        @foreach($layananPppoe->fitur_tambahan as $fitur)
                            <li class="mb-2">
                                <i class="fas fa-check text-success me-2"></i>
                                {{ $fitur }}
                            </li>
                        @endforeach
                    </ul>
                </div>
            </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('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();
}
</script>
@endpush
@endsection