@extends('template.content')

@section('title', 'Profile PPPoE')

@push('script')
    <script>
        window.addEventListener('closeModal', event => {
            // Sembunyikan hanya modal tambah
            $('#modalTambahPPPoe').modal('hide');
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
        });

        window.addEventListener('closeEditModal', event => {
            // Sembunyikan hanya modal edit
            $('#modalEditPPPoe').modal('hide');
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
        });
        window.addEventListener('closeAmbilModal', event => {
            // Sembunyikan hanya modal edit
            $('#modalAmbilDataPPPoe').modal('hide');
            $('.modal-backdrop').remove();
            $('body').removeClass('modal-open');
        });
        window.addEventListener('showEditModal', event => {
            // Tampilkan modal edit
            $('#modalEditPPPoe').modal('show');
        });
        // Listener untuk menampilkan modal ambil data
        window.addEventListener('showAmbilModal', event => {
            $('#modalAmbilDataPPPoe').modal('show');
        });
    </script>
@endpush

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">@yield('title')</h4>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active">@yield('title')</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="row g-0">
        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <livewire:profile-pppoe-index />
                </div>
            </div>
        </div>
    </div>

@endsection