@extends('layouts.content')
@section('body_content')
    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-xl px-4">
                <div class="page-header-content pt-4">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto mt-4">
                            <h1 class="page-header-title">
                                <div class="page-header-icon me-4">
                                    <i class="fas fa-handshake-simple fa-fw"></i>
                                </div>
                                Employee
                            </h1>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <div class="container-xl mt-n10 px-4">
            <div class="card mb-4">
                {{-- <div class="card-header border-bottom">
                    <!-- Dashboard card navigation-->
                    <a href="/user" class="btn btn-primary mb-3">Back</a>
                    <ul class="nav nav-tabs card-header-tabs" id="dashboardNav">
                        <li class="nav-item me-1"><a class="nav-link {{ Request::is('user*') ? 'active' : '' }}"
                                id="detailsdata-pill" href="{{ url('user', auth()->user()->uid) }}"
                                aria-controls="detailsdata" aria-selected="true">Details Data</a></li>
                        <li class="nav-item"><a class="nav-link {{ Request::is('certificate-user') ? 'active' : '' }}"
                                id="certificate-pill" href="/certificate-user/{{ $url }}"
                                aria-controls="certificate" aria-selected="false">Certificate Employee</a>
                        </li>
                        <li class="nav-item"><a class="nav-link {{ Request::is('change-password-user') ? 'active' : '' }}"
                                id="change-password-user-pill" href="/change-password-user/{{ $url }}"
                                aria-controls="certificate" aria-selected="false">Change Password</a>
                        </li>
                    </ul>
                </div> --}}
                <div class="card-body">
                    <div class="container">
                        <div class="row">
                            @if (session('certificateExpiring'))
                                <div class="alert alert-warning">
                                    Sertifikat Anda akan berakhir dalam 3 bulan. Segera perbarui atau perpanjang sertifikat
                                    Anda.
                                </div>
                            @endif
                            @include('partials.alert')
                            <div class="col-xl-4">
                            </div>
                            <div class="col-xl-15">
                                <!-- Account details card-->
                                <div class="card mb-2">
                                    <!-- Form Group (username)-->
                                    <div class="card-header">certificate</div>
                                    <div class="card-body">
                                        <div class="mb-3">
                                        </div>
                                        <table width="100%" id="certificate_user_list_data_table"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @include('certificate.modals.edit_employee_certificate')

    <script src="/js/certificate/_init.js"></script>
    <script>
        const urlCertif = {!! '"' . $user . '"' !!}
    </script>

    <script src="/js/certificate/user/dt_user_certif.js"></script>
    <script src="/js/certificate/user/dt_edit_certif.js"></script>
    <script src="/js/functions/spinner.js"></script>
@endsection