<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sistem Gaji Guru</title>

    <!-- AdminLTE -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">

    <!-- Font Awesome -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Google Font -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700">

    <!-- DataTables -->
    <link rel="stylesheet"
        href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap4.min.css">
    
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>

        body{
            font-family: 'Poppins', sans-serif;
            background: #f4f6f9;
        }

        .content-wrapper{
            background: #f4f6f9;
        }

        .main-header{
            border-bottom: none !important;
            box-shadow: 0 2px 10px rgba(0,0,0,.08);
            background: #ffffff;
        }

        .main-sidebar{
            background: #1f2937 !important;
        }

        .main-sidebar .brand-link{
            height:auto !important;
            min-height:90px !important;
        }

        .main-sidebar .sidebar{
            padding-top:30px !important;
        }

        .brand-link{
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .brand-text{
            font-weight: 600;
            letter-spacing: .5px;
        }

        .content-header h1{
            font-weight: 600;
        }

        .card{
            border: none;
            border-radius: 15px;
            box-shadow: 0 2px 12px rgba(0,0,0,.05);
        }

        .card-header{
            background: white;
            border-bottom: 1px solid #f1f1f1;
            font-weight: 600;
        }

        .btn{
            border-radius: 10px;
        }

        .table{
            background: white;
        }

        .table thead{
            background: #f8fafc;
        }

        .nav-sidebar .nav-link{
            border-radius: 10px;
            margin: 3px 8px;
        }

        .nav-sidebar .nav-link.active{
            background: #2563eb !important;
        }

        .nav-header{
            color: #9ca3af !important;
            font-size: 11px;
            letter-spacing: 1px;
        }

        .content{
            padding-top: 10px !important;
        }

        .page-title{
            font-weight: 600;
            margin-bottom: 20px;
        }

        .breadcrumb{
            background: transparent;
            padding: 0;
        }

        .content-wrapper{
            min-height: calc(100vh - 57px);
        }

        #loader {
            backdrop-filter: blur(4px);
        }

        #loader .spinner-border {
            width: 4rem;
            height: 4rem;
        }

        .small-box{
            border-radius:15px;
            overflow:hidden;
        }

        .small-box .inner{
            padding:20px;
        }

        .small-box h3{
            font-size:2rem;
            font-weight:700;
        }

        .card{
            border-radius:15px;
        }

        .progress{
            height:25px;
            border-radius:20px;
        }

        .progress-bar{
            font-weight:bold;
        }

        .small-box{
            border-radius:15px;
            overflow:hidden;
        }

        .small-box .inner{
            padding:20px;
        }

        .small-box h3{
            font-size:28px;
            font-weight:700;
        }

        .card{
            border-radius:15px;
        }

        .table td,
        .table th{
            vertical-align:middle;
        }

        .sidebar-modern{
            background: #1e293b !important;
        }

        .sidebar-modern .brand-link{
            border-bottom:1px solid rgba(255,255,255,.08);
            padding:18px;
        }

        .sidebar-modern .brand-text{
            color:white;
            font-weight:600;
        }

        .sidebar-modern .nav-header{
            color:#94a3b8 !important;
            font-size:11px;
            text-transform:uppercase;
            letter-spacing:1px;
            margin-top:15px;
        }

        .sidebar-modern .nav-link{
            color:#cbd5e1 !important;
            border-radius:12px;
            margin:3px 10px;
            transition:.3s;
        }

        .sidebar-modern .nav-link:hover{
            background:#334155;
            color:white !important;
        }

        .sidebar-modern .nav-link.active{
            background:linear-gradient(
                135deg,
                #2563eb,
                #3b82f6
            ) !important;

            color:white !important;

            box-shadow:
                0 5px 15px rgba(37,99,235,.3);
        }

        .sidebar-modern .user-panel{
            border-bottom:1px solid rgba(255,255,255,.08);
        }

        .sidebar-modern .user-panel a{
            color:white !important;
            font-weight:600;
        }

        .sidebar-modern .user-panel small{
            color:#60a5fa !important;
        }

        .sidebar-modern .nav-icon{
            width:20px;
        }

        .navbar-modern{
            background:#ffffff;
            border-bottom:1px solid #e5e7eb;
            box-shadow:0 2px 10px rgba(0,0,0,.05);
        }

        .navbar-modern .nav-link{
            color:#334155 !important;
        }

        .profile-dropdown{
            display:flex !important;
            align-items:center;
        }

        .profile-image{
            width:40px;
            height:40px;
            border-radius:50%;
            border:2px solid #e5e7eb;
        }

        .profile-info{
            margin-left:10px;
            text-align:left;
        }

        .profile-name{
            font-size:14px;
            font-weight:600;
            line-height:1;
        }

        .profile-role{
            color:#64748b;
        }

        .dropdown-menu{
            border-radius:15px;
            min-width:250px;
            overflow:hidden;
        }

        .dropdown-item{
            padding:12px 18px;
        }

        .dropdown-item:hover{
            background:#f8fafc;
        }

        /* ===================================
        BRAND
        ===================================*/

        .brand-link{
            display:flex;
            align-items:center;
            padding:15px 18px;
            min-height:90px;
            background:#1e293b;
            border-bottom:1px solid rgba(255,255,255,.08);
        }

        .brand-container{
            display:flex;
            align-items:center;
        }

        .brand-logo{
            width:55px;
            height:55px;
            display:flex;
            justify-content:center;
            align-items:center;
            margin-right:15px;
            flex-shrink:0;
        }

        .logo-sekolah{
            width:55px;
            height:55px;
            object-fit:contain;
            border-radius:10px;   /* ubah menjadi 50% jika ingin bulat */
        }

        .brand-content{
            margin-left:auto;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }

        .brand-title{
            color:white;
            font-size:24px;
            font-weight:700;
            line-height:22px;
        }

        .brand-subtitle{
            color:#e2e8f0;
            font-size:13px;
            margin-top:4px;
        }

        .brand-content small{
            color:#94a3b8;
            font-size:12px;
        }

        /* ===================================
        USER
        ===================================*/
        .user-card{
            display:flex;
            align-items:center;
            padding:15px 18px;
        }

        .user-avatar{
            width:48px;
            height:48px;
            border-radius:50%;
            border:3px solid #2563eb;
        }
        .user-info{
            margin-left:12px;
        }

        .user-name{
            color:white;
            font-weight:600;
            font-size:15px;
        }

        .user-role{
            color:#60a5fa;
            font-size:12px;
            margin-top:2px;
            text-transform:uppercase;
        }

        .sidebar-divider{
            border-color:rgba(255,255,255,.08);
            margin:0 15px 15px;
        }
        
        /* ===================================
        halaman guru
        ===================================*/
        .card-modern{

border:none;

border-radius:18px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.btn-modern{

border-radius:12px;

padding:10px 22px;

font-weight:600;

}

.small-card{

background:#fff;

border-radius:16px;

padding:20px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 5px 20px rgba(0,0,0,.05);

transition:.3s;

}

.small-card:hover{

transform:translateY(-4px);

}

.small-icon{

width:60px;

height:60px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#fff;

}

.table-modern{

margin-bottom:0;

}

.table-modern thead th{

background:#f8fafc;

border:none;

font-weight:700;

color:#475569;

padding:16px;

}

.table-modern tbody td{

padding:16px;

vertical-align:middle;

border-top:1px solid #eef2f7;

}

.table-modern tbody tr{

transition:.2s;

}

.table-modern tbody tr:hover{

background:#f8fbff;

}

.rounded-circle{

width:38px;

height:38px;

display:inline-flex;

align-items:center;

justify-content:center;

}
.card-modern{
    border:0;
    border-radius:18px;
    box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.form-control,
.modern-select{
    height:48px;
    border-radius:12px;
    border:1px solid #dbe3ec;
}

.form-control:focus,
.modern-select:focus{
    border-color:#2563eb;
    box-shadow:0 0 0 .2rem rgba(37,99,235,.15);
}

.input-group-text{
    background:#f8fafc;
    border:1px solid #dbe3ec;
    border-radius:12px 0 0 12px;
}

.btn-modern{
    border-radius:12px;
    padding:10px 24px;
    font-weight:600;
}

label{
    font-weight:600;
    margin-bottom:8px;
    color:#334155;
}

.card-footer{
    border-top:1px solid #edf2f7;
}
    /* ===================================
        dashboard
     ===================================*/
     .dashboard-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.dashboard-date{

background:#fff;

padding:12px 20px;

border-radius:15px;

box-shadow:0 5px 20px rgba(0,0,0,.06);

font-weight:600;

}

.dashboard-card{

background:#fff;

border-radius:18px;

padding:25px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 10px 25px rgba(0,0,0,.05);

transition:.3s;

height:140px;

}

.dashboard-card:hover{

transform:translateY(-5px);

}

.dashboard-card h2{

font-weight:700;

margin:8px 0;

}

.dashboard-icon{

width:70px;

height:70px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:28px;

}

.modern-progress{

height:12px;

border-radius:20px;

background:#edf2f7;

}

.progress-bar{

border-radius:20px;

}
.content-wrapper{

    margin-top:56px !important;

}

.main-header{

    height:56px;

}
    </style>

</head>

<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">

<div class="wrapper">

    {{-- Navbar --}}
    @include('layouts.navbar')

    {{-- Sidebar --}}
    @include('layouts.sidebar')

    {{-- Content --}}
    <div class="content-wrapper">

        <section class="content pt-3">

            <div class="container-fluid">

                @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show">
                        <i class="fas fa-check-circle"></i>
                        {{ session('success') }}

                        <button type="button"
                            class="close"
                            data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                @endif

                @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show">
                        <i class="fas fa-times-circle"></i>
                        {{ session('error') }}

                        <button type="button"
                            class="close"
                            data-dismiss="alert">
                            <span>&times;</span>
                        </button>
                    </div>
                @endif

                @yield('content')

            </div>

        </section>

    </div>
   <footer class="main-footer text-center">
        <strong>
        Sistem Gaji Guru © {{ date('Y') }}
        </strong>
        <span class="text-muted">
        | Rizky Reza Pangestu-Staff IT
        </span>
    </footer>

</div>

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<!-- AdminLTE -->
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>

<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap4.min.js"></script>

<script>
    $(function () {
        $('.datatable').DataTable({
            responsive: true,
            autoWidth: false,
            language: {
                search: "Cari:",
                lengthMenu: "Tampilkan _MENU_ data",
                info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data"
            }
        });
    });
</script>
<div id="loader"
     style="display:none;
     position:fixed;
     top:0;
     left:0;
     width:100%;
     height:100%;
     background:rgba(255,255,255,.8);
     z-index:9999">

    <div class="d-flex justify-content-center align-items-center h-100">
        <div class="spinner-border text-primary"></div>
    </div>

</div>
</body>
</html>