@extends('_layout.app')
@section('css')

<style>
    /* Add padding to the bottom of the legend */
    .amcharts-Legend {
      padding-bottom: 20px; /* Adjust the value as needed */
    }
  </style>@endsection

@section('toolbar')
<div id="kt_app_toolbar" class="app-toolbar">
	<!--begin::Toolbar container-->
	<div id="kt_app_toolbar_container" class="container-fluid d-flex align-items-stretch px-0">
		<!--begin::Toolbar wrapper-->
		<div class="app-toolbar-wrapper d-flex flex-stack flex-wrap gap-4 w-100">
			<!--begin::Page title-->
			<div class="page-title d-flex flex-column justify-content-center gap-1 me-3">
				<!--begin::Title-->
				<h1 class="page-heading d-flex flex-column justify-content-center text-gray-900 fw-bold fs-3 m-0">User Profile</h1>
				<!--end::Title-->
				<!--begin::Breadcrumb-->
				<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
					<!--begin::Item-->
					<li class="breadcrumb-item text-muted">
						<a href="index.html" class="text-muted text-hover-primary">Home</a>
					</li>
					<!--end::Item-->
					<!--begin::Item-->
					<li class="breadcrumb-item">
						<span class="bullet bg-gray-500 w-5px h-2px"></span>
					</li>
					<!--end::Item-->
				</ul>
				<!--end::Breadcrumb-->
			</div>
			<!--end::Page title-->
			<!--begin::Actions-->
			
			<!--end::Actions-->
		</div>
		<!--end::Toolbar wrapper-->
	</div>
	<!--end::Toolbar container-->
</div>
@endsection
@section('content')

<div class="card mb-5 mb-xl-10">
	<div class="card-header cursor-pointer">
        <!--begin::Card title-->
        <div class="card-title m-0">
            <h3 class="fw-bold m-0">Profile Details</h3>
        </div>
        <!--end::Card title-->
        <!--begin::Action-->
        <a href="{{url('user/profile/modal-edit')}}" data-bs-toggle="modal" data-bs-target="#modal-container" class="btn btn-sm btn-primary align-self-center">Ubah Profile</a>
        <!--end::Action-->
    </div>
    <div class="card-body pt-9 pb-0">
        <!--begin::Details-->
        <div class="d-flex flex-wrap flex-sm-nowrap align-items-center">
            <!--begin: Pic-->
            <div class="me-7 mb-4">
                <div class="symbol symbol-125px symbol-fixed position-relative">
                    @if(auth()->user()->img_url != null)
                    <img src="{{asset('upload/'.auth()->user()->img_url)}}" class="object-fit-cover" alt="image" />
                    @else
                    <img src="{{asset('img/default-user.jpg')}}" class="object-fit-cover" alt="image" />
                    @endif
                </div>
            </div>
            <!--end::Pic-->
            <!--begin::Info-->
            <div class="flex-grow-1">
                <!--begin::Title-->
                <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
                    <!--begin::User-->
                    <div class="d-flex flex-column">
                        <!--begin::Name-->
                        <div class="d-flex align-items-center mb-2">
                            <a class="text-gray-900 fs-2 fw-bold me-1">{{auth()->user()->name}}</a>
                        </div>
                        <!--end::Name-->
                        <!--begin::Info-->
                        <div class="d-flex flex-column fw-semibold fs-6 mb-4 pe-2">
                            <a  class="d-flex align-items-center text-dark me-5 mb-2">
                            @if(Auth()->user()->hasRole('admin') || Auth()->user()->hasRole('super_admin'))
	                            <i class="ki-duotone ki-security-user fs-2 me-1">
	                            	<span class="path1"></span>
	                            	<span class="path2"></span>
	                            </i>Admin
                            @else
                            	<i class="ki-duotone ki-security-user fs-2 me-1">
	                            	<span class="path1"></span>
	                            	<span class="path2"></span>
	                            </i>User
                            @endif
                        	</a>
                            <a  class="d-flex align-items-center text-dark mb-2">
	                            <i class="ki-duotone ki-key-square fs-2 me-1">
	                            	<span class="path1"></span>
	                            	<span class="path2"></span>
	                            </i>{{auth()->user()->username}}
	                        </a>
                        </div>
                        <!--end::Info-->
                    </div>
                    <!--end::User-->
                </div>
                <!--end::Title-->
            </div>
            <!--end::Info-->
        </div>
        <!--end::Details-->
    </div>
</div>
<div class="card mt-10">
	<!--begin::Card body-->
	<div class="card-body">
		<div class="d-flex flex-stack mb-5">
			<h3 class="text-primary">Activity Log</h3>
		    <div class="d-flex align-items-center position-relative my-1">
		        <div class="input-group input-group-solid w-250px me-5">
				    <span class="input-group-text"><i class="fas fa-search fs-4"></i></span>
				    <input id="dt_input_search_activity_log" type="text" class="form-control border-left-0 ps-1" placeholder="Search" aria-label="Search"/>
				</div>
				<a id="btn_refresh" class="btn btn-flex btn-warning h-40px fs-7 fw-bold hide" >
					<i class="ki-duotone ki-arrows-circle fs-1 me-2"><span class="path1"></span><span class="path2"></span></i>Refresh
				</a>
		    </div>
    	</div>

	    <div class="table-responsive">
	        <table id="table_list_activity_log" class="table table-row-bordered table-row-gray-300 gy-2">
	            <thead>
	                <tr class="fw-bold fs-6 text-gray-800">
	                    <th>No</th>
	                    <th>Activity</th>
	                    <th>Notes</th>
	                    <th>Last Modified</th>
	                </tr>
	            </thead>
	            <tbody>
	            </tbody>
	        </table>
	    </div>
	</div>
	<!--end::Card body-->
</div>

<div class="modal fade" id="modal-container" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content">
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script src="{{asset('js/profile/index.js?v.0.2')}}"></script>
@endsection