@extends('layout.main')
@section('content')
    <div class="main-content">
        <section class="section">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mg-b-2 mt-2">Tabel Manajemen Petugas</h4>
                            <i class="mdi mdi-dots-horizontal text-gray"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <div class="d-flex justify-content-end mb-3" style="margin-top: -17px;">
                                <div class="col-sm-6 col-md-4 col-xl-3 mg-t-20">
                                    <a class="modal-effect btn btn-success btn-block mb-3"
                                        data-bs-effect="effect-flip-Vertical" data-bs-toggle="modal"
                                        href="#modal-tambah-petugas"><i class='bx bxs-add-to-queue'></i>
                                        Tambah Data </a>
                                </div>
                            </div>
                            <table id="table-petugas" class="display">
                                <thead>
                                    <tr>
                                        <th>NO</th>
                                        <th>Username</th>
                                        <th>Email</th>
                                        <th>Alamat</th>
                                        <th>No.Telepon</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    @push('css')
        <style>
            .card {
                position: relative;
                display: flex;
                flex-direction: column;
                min-width: 0;
                word-wrap: break-word;
                background: #fff;
                background-clip: border-box;
                border-radius: 10px;
                border: 1px solid #fff;
                margin-block-end: 1.3rem;
                box-shadow: 6px 11px 41px -28px #796eb1;
                -webkit-box-shadow: 6px 11px 41px -28px #796eb1;
            }

            .card>hr {
                margin-inline-end: 0;
                margin-inline-start: 0;
            }

            .card>.list-group:first-child .list-group-item:first-child {
                border-start-start-radius: 3px;
                border-start-end-radius: 3px;
            }

            .card>.list-group:last-child .list-group-item:last-child {
                border-end-end-radius: 3px;
                border-end-start-radius: 3px;
            }

            .card-body {
                flex: 1 1 auto;
                padding: 1.25rem;
            }

            .card-title {
                margin-block-end: 0;
            }

            .card-subtitle {
                margin-block-start: -0.375rem;
                margin-block-end: 0;
            }

            .card-text:last-child {
                margin-block-end: 0;
            }

            .card-link:hover {
                text-decoration: none;
            }

            .card-link+.card-link {
                margin-inline-start: 1.25rem;
            }

            .card-header {
                padding: 0.75rem 1.25rem;
                margin-block-end: 0;
                background-color: white;
                border-block-end: 1px solid #ededf5;
            }

            .card-header:first-child {
                border-radius: 2px 2px 0 0;
            }

            .card-header+.list-group .list-group-item:first-child {
                border-block-start: 0;
            }

            .card-footer {
                padding: 0.75rem 1.25rem;
                background-color: transparent;
                border-block-start: 1px solid #ededf5;
                border-end-start-radius: 6px !important;
                border-end-end-radius: 6px !important;
            }

            .card-footer:last-child {
                border-radius: 0 0 2px 2px;
            }

            .card-header-tabs {
                margin-inline-end: -0.625rem;
                margin-block-end: -0.75rem;
                margin-inline-start: -0.625rem;
                border-block-end: 0;
            }

            .card-header-pills {
                margin-inline-end: -0.625rem;
                margin-inline-start: -0.625rem;
            }

            .card-img-overlay {
                position: absolute;
                top: 0;
                inset-inline-end: 0;
                bottom: 0;
                inset-inline-start: 0;
                padding: 1.25rem;
            }

            .card-img {
                width: 100%;
                border-radius: 2px;
            }

            .card-img-top {
                width: 100%;
                border-start-start-radius: 6px;
                border-start-end-radius: 6px;
            }

            .card-img-bottom {
                width: 100%;
                border-end-end-radius: 5px;
                border-end-start-radius: 5px;
            }

            .card-deck {
                display: flex;
                flex-direction: column;
            }

            .card-deck .card {
                margin-block-end: 15px;
            }

            @media (min-width: 576px) {
                .card-deck {
                    flex-flow: row wrap;
                    margin-inline-end: -15px;
                    margin-inline-start: -15px;
                }

                .card-deck .card {
                    display: flex;
                    flex: 1 0 0%;
                    flex-direction: column;
                    margin-inline-end: 15px;
                    margin-block-end: 0;
                    margin-inline-start: 15px;
                }
            }

            .card-group {
                display: flex;
                flex-direction: column;
            }

            .card-group>.card {
                margin-block-end: 15px;
            }

            @media (min-width: 576px) {
                .card-group {
                    flex-flow: row wrap;
                }

                .card-group>.card {
                    flex: 1 0 0%;
                    margin-block-end: 0;
                }

                .card-group>.card+.card {
                    margin-inline-start: 0;
                    border-inline-start: 0;
                }

                .card-group>.card:not(:last-child) {
                    border-start-end-radius: 0;
                    border-end-end-radius: 0;
                }

                .card-group>.card:not(:last-child) .card-img-top,
                .card-group>.card:not(:last-child) .card-header {
                    border-start-end-radius: 0;
                }

                .card-group>.card:not(:last-child) .card-img-bottom,
                .card-group>.card:not(:last-child) .card-footer {
                    border-end-end-radius: 0;
                }

                .card-group>.card:not(:first-child) {
                    border-start-start-radius: 0;
                    border-end-start-radius: 0;
                }

                .card-group>.card:not(:first-child) .card-img-top,
                .card-group>.card:not(:first-child) .card-header {
                    border-start-start-radius: 0;
                }

                .card-group>.card:not(:first-child) .card-img-bottom,
                .card-group>.card:not(:first-child) .card-footer {
                    border-end-start-radius: 0;
                }
            }

            .card-columns .card {
                margin-block-end: 0.75rem;
            }

            @media (min-width: 576px) {
                .card-columns {
                    column-count: 3;
                    column-gap: 1.25rem;
                    orphans: 1;
                    widows: 1;
                }

                .card-columns .card {
                    display: inline-block;
                    width: 100%;
                }
            }

            .accordion>.card {
                overflow: hidden;
            }

            .accordion>.card:not(:first-of-type) .card-header:first-child {
                border-radius: 0;
            }

            .accordion>.card:not(:first-of-type):not(:last-of-type) {
                border-block-end: 0;
                border-radius: 0;
            }

            .accordion>.card:first-of-type {
                border-block-end: 0;
                border-end-end-radius: 0;
                border-end-start-radius: 0;
            }

            .accordion>.card:last-of-type {
                border-start-start-radius: 0;
                border-start-end-radius: 0;
            }

            .accordion>.card .card-header {
                margin-block-end: -1px;
            }

            .card-sub-title {
                font-size: 13px;
            }

            .card-body> :last-child {
                margin-block-end: 0;
            }

            .card-table tbody tr td {
                padding: 16px 15px;
            }

            .card-img-start {
                width: 100%;
                height: 100%;
                border-start-start-radius: 4px;
                border-end-start-radius: 4px;
            }

            .card-img-end {
                width: 100%;
                height: 100%;
                border-end-end-radius: 4px;
                border-start-end-radius: 4px;
            }

            .img-fluid {
                max-width: 100%;
                height: auto;
            }
        </style>
    @endpush
@endsection