@extends('layout.app')

@section('title', 'Detail PPPoE - ' . $pelanggan->nama)

@section('content')
<x-material-page-header 
    title="Detail PPPoE User" 
    :breadcrumbs="[
        ['name' => 'PPPoE', 'url' => route('pppoe.index')],
        ['name' => $pelanggan->nama]
    ]"
    :action="route('pppoe.index')" 
    actionLabel="Kembali" 
    actionIcon="arrow_back"
/>

<div class="container-fluid py-4">
    @if(session('success'))
    <div class="alert alert-success text-white alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

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

    <div class="row">
        <!-- Customer Info -->
        <div class="col-lg-4">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <h6 class="mb-0">Informasi Pelanggan</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Nama:</strong></td>
                                <td>{{ $pelanggan->nama }}</td>
                            </tr>
                            <tr>
                                <td><strong>Email:</strong></td>
                                <td>{{ $pelanggan->email ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Telepon:</strong></td>
                                <td>{{ $pelanggan->nomor_telepon ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Alamat:</strong></td>
                                <td>{{ $pelanggan->alamat ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Status:</strong></td>
                                <td>
                                    <span class="badge badge-sm bg-gradient-{{ $pelanggan->status_badge_class }}">
                                        {{ $pelanggan->status_layanan }}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- PPPoE Info -->
        <div class="col-lg-8">
            <div class="card my-4">
                <div class="card-header pb-0 pt-3">
                    <div class="row align-items-center">
                        <div class="col">
                            <h6 class="mb-0">Informasi PPPoE</h6>
                        </div>
                        <div class="col-auto">
                            @if($pelanggan->status_layanan == 'Aktif')
                            <form action="{{ route('pppoe.disable', $pelanggan) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm bg-gradient-warning mb-0" onclick="return confirm('Apakah Anda yakin ingin menonaktifkan PPPoE user ini?')">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">pause</i> Disable
                                </button>
                            </form>
                            @else
                            <form action="{{ route('pppoe.enable', $pelanggan) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-sm bg-gradient-success mb-0" onclick="return confirm('Apakah Anda yakin ingin mengaktifkan PPPoE user ini?')">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">play_arrow</i> Enable
                                </button>
                            </form>
                            @endif
                            <button type="button" class="btn btn-sm bg-gradient-info mb-0" onclick="openEditModal()">
                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i> Edit
                            </button>
                            <form action="{{ route('pppoe.delete', $pelanggan) }}" method="POST" class="d-inline" onsubmit="return confirm('Apakah Anda yakin ingin menghapus PPPoE user ini?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm bg-gradient-danger mb-0">
                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">delete</i> Hapus
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if($pppoeInfo && $pppoeInfo['success'])
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <tr>
                                <td style="width: 30%;"><strong>Username:</strong></td>
                                <td><code>{{ $pelanggan->username_pppoe }}</code></td>
                            </tr>
                            <tr>
                                <td><strong>Profile:</strong></td>
                                <td>{{ $pelanggan->profile_pppoe ?? '-' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Service:</strong></td>
                                <td>{{ $pppoeInfo['data']['service'] ?? 'pppoe' }}</td>
                            </tr>
                            <tr>
                                <td><strong>Status di MikroTik:</strong></td>
                                <td>
                                    @php
                                        // Di MikroTik: jika disabled tidak ada atau kosong = enabled, jika disabled = 'yes' = disabled
                                        $isDisabled = isset($pppoeInfo['data']['disabled']) && $pppoeInfo['data']['disabled'] === 'yes';
                                    @endphp
                                    <span class="badge badge-sm bg-gradient-{{ !$isDisabled ? 'success' : 'danger' }}">
                                        {{ !$isDisabled ? 'Active' : 'Disabled' }}
                                    </span>
                                </td>
                            </tr>
                            @if(isset($pppoeInfo['data']['remote-address']) || $pelanggan->ip_address)
                            <tr>
                                <td><strong>Remote Address:</strong></td>
                                <td>{{ $pppoeInfo['data']['remote-address'] ?? $pelanggan->ip_address }}</td>
                            </tr>
                            @endif
                            @if(isset($pppoeInfo['data']['comment']))
                            <tr>
                                <td><strong>Comment:</strong></td>
                                <td>{{ $pppoeInfo['data']['comment'] }}</td>
                            </tr>
                            @endif
                        </table>
                    </div>
                    @else
                    <div class="alert alert-warning text-white">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i>
                        {{ $pppoeInfo['message'] ?? 'Tidak dapat mengambil informasi dari MikroTik' }}
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit PPPoE User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('pppoe.update', $pelanggan) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Profile <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="profile" name="profile" value="{{ $pelanggan->profile_pppoe }}" required>
                    </div>
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Remote Address</label>
                        <input type="text" class="form-control @error('remote_address') is-invalid @enderror"
                               id="remote_address" name="remote_address"
                               value="{{ old('remote_address', $pelanggan->ip_address) }}"
                               placeholder="Contoh: 10.10.10.10 atau nama pool">
                        @error('remote_address')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <small class="form-text text-muted">Biarkan kosong jika tidak ingin mengubah remote-address.</small>
                    </div>
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Password Baru</label>
                        <input type="password" class="form-control" id="password_pppoe" name="password_pppoe" minlength="6" placeholder="Kosongkan jika tidak ingin mengubah">
                        <small class="form-text text-muted">Minimal 6 karakter</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn bg-gradient-primary mb-0">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function openEditModal() {
    var editModal = new bootstrap.Modal(document.getElementById('editModal'));
    editModal.show();
}
</script>
@endsection